feat: add explicit type converstions ex, fix layout for 13inch

Author: JulienDemarque

data/javascript/boolean-explicit-type-conversion/index.json

@@ -0,0 +1,22 @@
+{
+  "title": "Boolean Explicit Type Conversion",
+  "key": "boolean-explicit-type-conversion",
+  "description": "Understand the Boolean explicit type conversion",
+  "difficulty": 3,
+  "explanation": "The conversion rules for Boolean are: Values that are intuitively “empty”, like 0, an empty string, null, undefined, and NaN, become false. anything else becomes true",
+  "correctAnswer": "false true true true",
+  "answers": [
+    {
+      "answer": "false false false false"
+    },
+    {
+      "answer": "false false false true"
+    },
+    {
+      "answer": "false false true true"
+    },
+    {
+      "answer": "false true true true"
+    }
+  ]
+}

data/javascript/boolean-explicit-type-conversion/question.js

@@ -0,0 +1,3 @@
+// What will console.log from the following code;
+
+console.log(Boolean(null), Boolean(' '), Boolean('0'), Boolean('false'));

data/javascript/index.json

@@ -12,6 +12,14 @@
     {
       "title": "Minus Operator Coercion",
       "key": "minus-operator-coercion"
+    },
+    {
+      "title": "Number Explicit Type Conversion",
+      "key": "number-explicit-type-conversion"
+    },
+    {
+      "title": "Boolean Explicit Type Conversion",
+      "key": "boolean-explicit-type-conversion"
     }
   ]
 }

data/javascript/number-explicit-type-conversion/index.json

@@ -0,0 +1,22 @@
+{
+  "title": "Number Explicit Type Conversion",
+  "key": "number-explicit-type-conversion",
+  "description": "Understand the Number explicit type conversion",
+  "difficulty": 3,
+  "explanation": "The Number JavaScript object is a wrapper object allowing you to work with numerical values. In a non-constructor context (i.e., without the new operator), Number can be used to perform a type conversion. If the argument cannot be converted into a number, it returns NaN. NOTE: typof(NaN) is 'number' !!",
+  "correctAnswer": "5 NaN 'number'",
+  "answers": [
+    {
+      "answer": "5 NaN 'number'"
+    },
+    {
+      "answer": "'5' NaN NaN"
+    },
+    {
+      "answer": "5 NaN 'string'"
+    },
+    {
+      "answer": "5 NaN NaN"
+    }
+  ]
+}

data/javascript/number-explicit-type-conversion/question.js

@@ -0,0 +1,3 @@
+// What will console.log from the following code;
+
+console.log(Number('5'), Number('undefined'), typeof Number('foo'));

src/js/views/JsExercise.jsx

@@ -72,12 +72,12 @@ const JsExercise = ({ match }) => {
   }, [match]);
 
   return (
-    <Container className="mt-5 mb-3">
+    <Container className="mt-3 mb-3">
       <h2>{data.title}</h2>
       <p>{data.description}</p>
       <Question question={question} />
       <Row>
-        <Col xs={12} md={6} className="mt-5 mb-3">
+        <Col xs={12} md={6} className="mt-3 mb-3">
           <Form action="">
             {data.answers &&
               data.answers.map((a, index) => {
@@ -104,7 +104,7 @@ const JsExercise = ({ match }) => {
             )}
           </Form>
         </Col>
-        <Col xs={12} md={6} className="mt-5 mb-3">
+        <Col xs={12} md={6} className="mt-3 mb-3">
           {result === 'success' && (
             <Alert variant="success">Right Answer!</Alert>
           )}
@@ -125,7 +125,7 @@ const JsExercise = ({ match }) => {
         </Col>
       </Row>
       {result && (
-        <Row className="mt-5 mb-3">
+        <Row className="mt-3 mb-3">
           <Col>
             <h5>Explanation:</h5>
             <p>{data.explanation}</p>