Executable coding blocks production-readiness - PR 4

README.md

@@ -3578,10 +3578,12 @@ const { name, age } = { name: 'John', age: 30 };
 
 `Object.freeze()` is used to make an object immutable. Once an object is frozen, you cannot add, remove, or modify its properties. This is useful for creating constants or ensuring that an object remains unchanged throughout the program.
 
-```js
+```js live
 const obj = { name: 'John' };
 Object.freeze(obj);
 obj.name = 'Doe'; // This will not change the name property
+
+console.log(obj); // { name: 'John' }
 ```
 
 <!-- Update here: /questions/what-is-objectfreeze-for/en-US.mdx -->
@@ -5056,22 +5058,26 @@ Here's a table summarizing the 3 client storage mechanisms.
 
 To make an HTTP request using the Fetch API, you can use the `fetch` function, which returns a promise. You can handle the response using `.then()` and `.catch()` for error handling. Here's a basic example of a GET request:
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.json())
   .then((data) => console.log(data))
   .catch((error) => console.error('Error:', error));
 ```
 
 For a POST request, you can pass an options object as the second argument to `fetch`:
 
-```js
-fetch('https://api.example.com/data', {
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts', {
   method: 'POST',
+  body: JSON.stringify({
+    title: 'foo',
+    body: 'bar',
+    userId: 1,
+  }),
   headers: {
-    'Content-Type': 'application/json',
+    'Content-Type': 'application/json; charset=UTF-8',
   },
-  body: JSON.stringify({ key: 'value' }),
 })
   .then((response) => response.json())
   .then((data) => console.log(data))

questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx

@@ -76,21 +76,23 @@ console.log(doubled); // [2, 4, 6, 8, 10]
 
 Arrow functions can be used in event handlers to maintain the `this` context of the class or object.
 
-```js
+```js live
 class Button {
   constructor() {
     this.count = 0;
     this.button = document.createElement('button');
     this.button.innerText = 'Click me';
     this.button.addEventListener('click', () => {
       this.count++;
-      console.log(this.count);
+      console.log('count:', this.count);
     });
     document.body.appendChild(this.button);
   }
 }
 
-const button = new Button();
+const myButton = new Button();
+myButton.button.click(); // count: 1
+myButton.button.click(); // count: 2
 ```
 
 ## Further reading

questions/explain-hoisting/en-US.mdx

@@ -41,15 +41,15 @@ Let's explain with a few code samples. Note that the code for these examples sho
 
 Hoisting is seen in action here as even though `foo` is declared and initialized after the first `console.log()`, the first `console.log()` prints the value of `foo` as `undefined`.
 
-```js
+```js live
 console.log(foo); // undefined
 var foo = 1;
 console.log(foo); // 1
 ```
 
 You can visualize the code as:
 
-```js
+```js live
 var foo;
 console.log(foo); // undefined
 foo = 1;
@@ -60,17 +60,17 @@ console.log(foo); // 1
 
 Variables declared via `let`, `const`, and `class` are hoisted as well. However, unlike `var` and `function`, they are not initialized and accessing them before the declaration will result in a `ReferenceError` exception. The variable is in a "temporal dead zone" from the start of the block until the declaration is processed.
 
-```js
+```js live
 y; // ReferenceError: Cannot access 'y' before initialization
 let y = 'local';
 ```
 
-```js
+```js live
 z; // ReferenceError: Cannot access 'z' before initialization
 const z = 'local';
 ```
 
-```js
+```js live
 Foo; // ReferenceError: Cannot access 'Foo' before initialization
 
 class Foo {
@@ -82,7 +82,7 @@ class Foo {
 
 Function expressions are functions written in the form of variable declarations. Since they are also declared using `var`, only the variable declaration is hoisted.
 
-```js
+```js live
 console.log(bar); // undefined
 bar(); // Uncaught TypeError: bar is not a function
 
@@ -95,7 +95,7 @@ var bar = function () {
 
 Function declarations use the `function` keyword. Unlike function expressions, function declarations have both the declaration and definition hoisted, thus they can be called even before they are declared.
 
-```js
+```js live
 console.log(foo); // [Function: foo]
 foo(); // 'FOOOOO'
 

questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx

@@ -18,10 +18,17 @@ In JavaScript, the `this` keyword is a reference to the object that is currently
 
 In the context of event handlers, `this` usually refers to the DOM element that triggered the event. For example:
 
-```js
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
 document.getElementById('myButton').addEventListener('click', function () {
-  console.log(this); // Logs the button element
+  console.log(this); // `this` refers to the 'myButton' element
 });
+
+button.click(); // Logs the button element
 ```
 
 In this example, `this` inside the event handler refers to the button element that was clicked.
@@ -34,7 +41,12 @@ There are several ways to change the value of `this` in event handlers:
 
 The `bind()` method creates a new function that, when called, has its `this` keyword set to the provided value:
 
-```js
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
 function handleClick() {
   console.log(this); // Logs the object passed to bind()
 }
@@ -43,6 +55,8 @@ const obj = { name: 'MyObject' };
 document
   .getElementById('myButton')
   .addEventListener('click', handleClick.bind(obj));
+
+button.click(); // Logs obj because handleClick was bound to obj using bind()
 ```
 
 In this example, `this` inside `handleClick` refers to `obj`.
@@ -51,7 +65,12 @@ In this example, `this` inside `handleClick` refers to `obj`.
 
 Arrow functions do not have their own `this` context; they inherit `this` from the surrounding lexical context:
 
-```js
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
 const obj = {
   name: 'MyObject',
   handleClick: function () {
@@ -62,6 +81,7 @@ const obj = {
 };
 
 obj.handleClick();
+button.click(); // This will log obj
 ```
 
 In this example, `this` inside the arrow function refers to `obj`.
@@ -70,7 +90,12 @@ In this example, `this` inside the arrow function refers to `obj`.
 
 You can also assign the context explicitly by using a variable:
 
-```js
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
 const obj = {
   name: 'MyObject',
   handleClick: function () {
@@ -82,6 +107,7 @@ const obj = {
 };
 
 obj.handleClick();
+button.click(); // This will log obj
 ```
 
 In this example, `self` is used to capture the value of `this` from the outer function.

questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx

@@ -56,7 +56,7 @@ function example() {
   // Now use a and b
   console.log(a + b);
 }
-example();
+example(); // Output: 3
 ```
 
 ### Declare functions before calling them

questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx

@@ -6,22 +6,26 @@ title: How do you make an HTTP request using the Fetch API?
 
 To make an HTTP request using the Fetch API, you can use the `fetch` function, which returns a promise. You can handle the response using `.then()` and `.catch()` for error handling. Here's a basic example of a GET request:
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.json())
   .then((data) => console.log(data))
   .catch((error) => console.error('Error:', error));
 ```
 
 For a POST request, you can pass an options object as the second argument to `fetch`:
 
-```js
-fetch('https://api.example.com/data', {
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts', {
   method: 'POST',
+  body: JSON.stringify({
+    title: 'foo',
+    body: 'bar',
+    userId: 1,
+  }),
   headers: {
-    'Content-Type': 'application/json',
+    'Content-Type': 'application/json; charset=UTF-8',
   },
-  body: JSON.stringify({ key: 'value' }),
 })
   .then((response) => response.json())
   .then((data) => console.log(data))
@@ -36,8 +40,8 @@ fetch('https://api.example.com/data', {
 
 To make a basic GET request, you can use the `fetch` function with the URL of the resource you want to fetch. The `fetch` function returns a promise that resolves to the `Response` object representing the response to the request.
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
@@ -52,8 +56,8 @@ fetch('https://api.example.com/data')
 
 The `Response` object has several methods to handle different types of responses, such as `.json()`, `.text()`, `.blob()`, and `.arrayBuffer()`.
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.text())
   .then((text) => console.log(text))
   .catch((error) => console.error('Error:', error));
@@ -63,13 +67,17 @@ fetch('https://api.example.com/data')
 
 To make a POST request, you need to pass an options object as the second argument to `fetch`. This object can include the HTTP method, headers, and body of the request.
 
-```js
-fetch('https://api.example.com/data', {
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts', {
   method: 'POST',
+  body: JSON.stringify({
+    title: 'foo',
+    body: 'bar',
+    userId: 1,
+  }),
   headers: {
-    'Content-Type': 'application/json',
+    'Content-Type': 'application/json; charset=UTF-8',
   },
-  body: JSON.stringify({ key: 'value' }),
 })
   .then((response) => {
     if (!response.ok) {
@@ -85,8 +93,8 @@ fetch('https://api.example.com/data', {
 
 Error handling in the Fetch API can be done using the `.catch()` method. It's also a good practice to check the `response.ok` property to ensure the request was successful.
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.tyicode.com/posts/1/comments') // Typo in the URL
   .then((response) => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
@@ -101,10 +109,12 @@ fetch('https://api.example.com/data')
 
 You can also use the Fetch API with `async/await` for a more synchronous-looking code.
 
-```js
+```js live
 async function fetchData() {
   try {
-    const response = await fetch('https://api.example.com/data');
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/todos/1',
+    );
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }

questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx

@@ -52,7 +52,7 @@ greet('Alice', sayGoodbye);
 
 Asynchronous callbacks are used for operations that take some time to complete, such as reading files, making HTTP requests, or handling events. These callbacks are executed after the asynchronous operation has finished.
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John Doe' };
@@ -65,6 +65,7 @@ function handleData(data) {
 }
 
 fetchData(handleData);
+// Output: { name: 'John Doe' } after 1 second
 ```
 
 ### Common use cases
@@ -73,19 +74,25 @@ fetchData(handleData);
 
 Callbacks are often used in event handling. For example, in JavaScript, you can pass a callback function to an event listener.
 
-```js
-document.getElementById('myButton').addEventListener('click', function () {
-  console.log('Button clicked!');
+```js live
+const button = document.createElement('button');
+
+button.addEventListener('click', () => {
+  setTimeout(() => {
+    console.log('Button clicked after 1s');
+  }, 1000);
 });
+
+button.click();
 ```
 
 #### API calls
 
 Callbacks are frequently used in making API calls to handle the response data.
 
-```js
+```js live
 function getUserData(userId, callback) {
-  fetch(`https://api.example.com/users/${userId}`)
+  fetch(`https://jsonplaceholder.typicode.com/todos/2`)
     .then((response) => response.json())
     .then((data) => callback(data))
     .catch((error) => console.error('Error:', error));
@@ -102,7 +109,7 @@ getUserData(1, displayUserData);
 
 Callbacks are also used with timers like `setTimeout` and `setInterval`.
 
-```js
+```js live
 function sayHello() {
   console.log('Hello, world!');
 }

questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx

@@ -67,7 +67,7 @@ Microtasks are tasks that have a higher priority than macrotasks and are execute
 
 The following code logs some statements using a combination of normal execution, macrotasks, and microtasks.
 
-```js
+```js live
 console.log('Start');
 
 setTimeout(() => {