wip: add more questions

src/data/question-groups/javascript/content/append-child-vs-insert-before.md

@@ -0,0 +1,32 @@
+You can add a new element to the DOM using the `appendChild` or `insertBefore` method.
+
+## appendChild
+
+The `appendChild` method adds a new element as the last child of the specified parent element.
+
+```js
+const roadmapWrapper = document.querySelector('.roadmap-wrapper');
+
+const roadmap = document.createElement('div');
+roadmap.id = 'javascript-roadmap';
+
+roadmapWrapper.appendChild(roadmapTitle);
+```
+
+In the example above, the `roadmap` element is added as the last child of the `roadmapWrapper` element.
+
+## insertBefore
+
+The `insertBefore` method adds a new element before the specified child element.
+
+```js
+const roadmapWrapper = document.querySelector('.roadmap-wrapper');
+
+const roadmap = document.createElement('div');
+roadmap.id = 'javascript-roadmap';
+
+const roadmapTitle = document.querySelector('#roadmap-title');
+roadmapWrapper.insertBefore(roadmap, roadmapTitle);
+```
+
+In the example above, the `roadmap` element is added before the `roadmapTitle` element.

src/data/question-groups/javascript/content/comma-operator.md

@@ -0,0 +1,8 @@
+The Comma Operator `,` evaluates each of its operands (from left to right) and returns the value of the last operand.
+
+```js
+let x = 1;
+x = (x++, x);
+
+console.log(x); // 2
+```

src/data/question-groups/javascript/content/create-element.md

@@ -0,0 +1,9 @@
+To create a new DOM element, you can use the `document.createElement` method. It accepts a tag name as an argument and returns a new element with the specified tag name. You can set attributes to the element.
+
+```js
+const div = document.createElement('div');
+
+div.id = 'roadmap-wrapper';
+div.setAttribute('data-id', 'javascript');
+console.log(div); // <div id="roadmap-wrapper" data-id="javascript"></div>
+```

src/data/question-groups/javascript/content/do-while-loop.md

@@ -0,0 +1,14 @@
+The `do...while` statement creates a loop that executes a block of code once, before checking if the condition is `true`, then it will repeat the loop as long as the condition is `true`.
+
+```js
+let i = 0;
+
+do {
+  console.log(i);
+  i++;
+} while (i < 3);
+
+// 0
+// 1
+// 2
+```

src/data/question-groups/javascript/content/infinite-loop.md

@@ -0,0 +1,21 @@
+You can use the `while` or `for` loop to create an infinite loop.
+
+## While loop
+
+To create an infinite loop with the `while` loop, we can use the `true` keyword as the condition.
+
+```js
+while (true) {
+  // do something
+}
+```
+
+## For loop
+
+To create an infinite loop with the `for` loop, we can use the `true` keyword as the condition.
+
+```js
+for (let i = 0; true; i++) {
+  // do something
+}
+```

src/data/question-groups/javascript/content/logical-operators.md

@@ -0,0 +1,43 @@
+There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), and `??` (Nullish Coalescing). They can be used with boolean values, or with non-boolean values.
+
+## OR (||)
+
+The OR operator (`||`) returns the first truthy value, or the last value if none are truthy.
+
+```js
+console.log('hello' || 0); // hello
+console.log(false || 'hello'); // hello
+console.log('hello' || 'world'); // hello
+```
+
+## AND (&&)
+
+The AND operator (`&&`) aka logical conjunction returns the first falsy value, or the last value if none are falsy.
+
+```js
+console.log('hello' && 0); // 0
+console.log(false && 'hello'); // false
+console.log('hello' && 'world'); // world
+```
+
+## NOT (!)
+
+It simply inverts the boolean value of its operand.
+
+```js
+console.log(!true); // false
+console.log(!false); // true
+console.log(!'hello'); // false
+console.log(!0); // true
+```
+
+## Nullish Coalescing (??)
+
+The Nullish Coalescing Operator (`??`) returns the right operand if the left one is `null` or `undefined`, otherwise, it returns the left operand. It's useful for setting default values without considering falsy values like `0` or `''` as absent.
+
+```js
+console.log(null ?? 'hello'); // hello
+console.log(undefined ?? 'hello'); // hello
+console.log('' ?? 'hello'); // ''
+console.log(0 ?? 'hello'); // 0
+```

src/data/question-groups/javascript/content/nullish-coalescing-operator.md

@@ -0,0 +1,8 @@
+The Nullish Coalescing Operator (`??`) returns the right operand if the left one is `null` or `undefined`, otherwise, it returns the left operand. It's useful for setting default values without considering falsy values like `0` or `''` as absent.
+
+```js
+console.log(null ?? 'hello'); // hello
+console.log(undefined ?? 'hello'); // hello
+console.log('' ?? 'hello'); // ''
+console.log(0 ?? 'hello'); // 0
+```

src/data/question-groups/javascript/content/query-selector.md

@@ -0,0 +1,18 @@
+For selecting elements in the DOM, the `querySelector` and `querySelectorAll` methods are the most commonly used. They are both methods of the `document` object, and they both accept a CSS selector as an argument.
+
+## querySelector
+
+The `querySelector` method returns the first element that matches the specified selector. If no matches are found, it returns `null`.
+
+```js
+const roadmapWrapper = document.querySelector('.roadmap-wrapper');
+const roadmapTitle = document.querySelector('#roadmap-title');
+```
+
+## querySelectorAll
+
+The `querySelectorAll` method returns a `NodeList` of all elements that match the specified selector. If no matches are found, it returns an empty `NodeList`.
+
+```js
+const roadmapItems = document.querySelectorAll('.roadmap-item');
+```

src/data/question-groups/javascript/content/switch-case.md

@@ -0,0 +1,19 @@
+The `switch` statement evaluates an expression, matching the expression's value to a `case` clause, and executes statements associated with that `case`, as well as statements in `case`s that follow the matching `case`.
+
+```js
+const fruit = 'Papayas';
+
+switch (fruit) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Mangoes':
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+    console.log(`Sorry, we are out of ${fruit}.`);
+}
+
+// Mangoes and papayas are $2.79 a pound.
+```

src/data/question-groups/javascript/javascript.md

@@ -323,4 +323,49 @@ questions:
     topics:
       - 'Core'
       - 'Advanced'
+  - question: What is Comma Operator in JavaScript?
+    answer: comma-operator.md
+    topics:
+      - 'Operator'
+      - 'Intermediate'
+  - question: What is Nullish Coalescing Operator?
+    answer: nullish-coalescing-operator.md
+    topics:
+      - 'Operator'
+      - 'Beginner'
+  - question: What are the Logical Operators in JavaScript?
+    answer: logical-operators.md
+    topics:
+      - 'Operator'
+      - 'Beginner'
+  - question: How to create Infinite Loop in JavaScript?
+    answer: infinite-loop.md
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: How to use `do...while` loop in JavaScript?
+    answer: do-while-loop.md
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: Switch case statement in JavaScript?
+    answer: switch-case.md
+    topics:
+      - 'Core'
+      - 'Beginner'
+  - question: How to select DOM elements using `querySelector()` and `querySelectorAll()`?
+    answer: query-selector.md
+    topics:
+      - 'DOM'
+      - 'Beginner'
+  - question: How to create a new Element in DOM?
+    answer: create-element.md
+    topics:
+      - 'DOM'
+      - 'Beginner'
+  - question: Difference between `appendChild()` and `insertBefore()`?
+    answer: append-child-vs-insert-before.md
+    topics:
+      - 'DOM'
+      - 'Beginner'
 ---