From eb8ccd63438fb81dbe4b548463f40dfd6df6e914 Mon Sep 17 00:00:00 2001 From: jaskaransingh9990 Date: Mon, 25 Mar 2024 14:20:32 -0700 Subject: [PATCH 1/7] Add solution of 3 exsercises --- docs/js-core-2/week-3/lesson.md | 56 +++++++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/docs/js-core-2/week-3/lesson.md b/docs/js-core-2/week-3/lesson.md index cad8240505..8f9028015f 100644 --- a/docs/js-core-2/week-3/lesson.md +++ b/docs/js-core-2/week-3/lesson.md @@ -119,6 +119,29 @@ Write JavaScript below that logs: ::: + + +### solution +```js + +// all the "p" element nodes of the document +const allParagraphs = document.querySelectorAll('p'); +console.log('All "p" element nodes of the document:', allParagraphs); + +// the first div element node +const firstDiv = document.querySelector('div'); +console.log('The first div element node:', firstDiv); + +// the element with id "jumbotron-text" +const jumbotronText = document.querySelector('#jumbotron-text'); +console.log('The element with id "jumbotron-text":', jumbotronText); + +// all the "p" elements contained inside the .primary-content element node +const primaryContentParagraphs = document.querySelectorAll('.primary-content p'); +console.log('All "p" elements contained inside the .primary-content element node:', primaryContentParagraphs); + +``` + ## Attach events to DOM elements Once you retrieve an element using `.querySelector`, you can attach an **event** to it. An event is any action that can be performed on that element. For now, we will just use the **click** event: @@ -141,13 +164,27 @@ You will notice in the example that we passed a second argument to `addEventList When a user clicks the "ALERT" button, an alert box should pop up with the text "Thanks for visiting Bikes for Refugees!" The elements returned by `document.querySelector` have the same properties as a normal HTML element: for example, you can get access to their css **styles**. +::: +### solution ```js -let myElement = document.querySelector("#myElement"); -myElement.style.backgroundColor = "red"; +// Select the button element by its ID +const alertButton = document.querySelector('#alert-button'); + +// Select the element you want to change the background color +const myElement = document.querySelector('#myElement'); + +// Add event listener to the button +alertButton.addEventListener('click', function() { + // Display an alert when the button is clicked + alert('Thanks for visiting Bikes for Refugees!'); + + // Change the background color of the element to red + myElement.style.backgroundColor = 'red'; +}); + ``` -::: ### Exercise (3) @@ -157,6 +194,19 @@ Write JavaScript below that changes the background colour of the page when the " ::: +### solution +```js + // Select the button element by its ID + const changeColorButton = document.querySelector('#change-color-button'); + + // Add event listener to the button + changeColorButton.addEventListener('click', function() { + // Set the background color of the body to red + document.body.style.backgroundColor = 'blue'; + }); + +``` + ## Create DOM elements Using the `document`, you can also create new elements. These elements will not appear until you append them as a child of another element though: From 06b09bcb1a740488a5a573e2ce002a6d0b50bf02 Mon Sep 17 00:00:00 2001 From: jaskaransingh9990 Date: Mon, 25 Mar 2024 14:48:37 -0700 Subject: [PATCH 2/7] Add solution of exsercies 4 and 5 --- docs/js-core-2/week-3/lesson.md | 37 +++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/docs/js-core-2/week-3/lesson.md b/docs/js-core-2/week-3/lesson.md index 8f9028015f..1180b687eb 100644 --- a/docs/js-core-2/week-3/lesson.md +++ b/docs/js-core-2/week-3/lesson.md @@ -226,6 +226,23 @@ When a user clicks the "Add some text" button, a new paragraph should be added b ::: +### solution +```js + // Select the button element by its ID + const addTextButton = document.querySelector('#add-text-button'); + + // Add event listener to the button + addTextButton.addEventListener('click', function() { + // Create a new paragraph element + const newParagraph = document.createElement('p'); + // Set the text content of the paragraph + newParagraph.textContent = 'Read more below.'; + // Append the paragraph to the body + document.body.appendChild(newParagraph); + }); + + +``` ## Manipulate DOM elements You can then change the text displayed inside elements using the `innerText` property: @@ -282,6 +299,26 @@ When the "Larger links!" button is clicked, the text of all links on the page sh ::: + +### solution +```js +// Select the button element by its ID +const largerLinksButton = document.querySelector('#larger-links-button'); + +// Add event listener to the button +largerLinksButton.addEventListener('click', function() { +// Select all links on the page +const links = document.querySelectorAll('a'); + +// Increase the font size of each link +links.forEach(link => {const computedStyle = window.getComputedStyle(link); +const currentSize = parseFloat(computedStyle.fontSize); // Get the current font size +const newSize = currentSize * 1.2; // Increase the font size by 20% +link.style.fontSize = newSize + 'px'; // Set the new font size +}); +}); +``` + ## PD (Delivery) **Session objective**: This session will explore how to create features, user stories and tasks for a product. From 2189892151990ba469d92a2fec7d6d96dca00ca6 Mon Sep 17 00:00:00 2001 From: jaskaransingh9990 Date: Tue, 26 Mar 2024 12:02:38 -0700 Subject: [PATCH 3/7] Making tabs --- docs/js-core-2/week-3/lesson.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/js-core-2/week-3/lesson.md b/docs/js-core-2/week-3/lesson.md index 1180b687eb..d5a23a716b 100644 --- a/docs/js-core-2/week-3/lesson.md +++ b/docs/js-core-2/week-3/lesson.md @@ -101,6 +101,15 @@ https://github.com/CodeYourFuture/JavaScript-Core-2-Classwork-Week3 ### Exercise (1) + + + :::note Exercise Write JavaScript below that logs: @@ -119,7 +128,8 @@ Write JavaScript below that logs: ::: - + + ### solution ```js @@ -141,6 +151,8 @@ const primaryContentParagraphs = document.querySelectorAll('.primary-content p') console.log('All "p" elements contained inside the .primary-content element node:', primaryContentParagraphs); ``` + + ## Attach events to DOM elements From d4352952ac956de1a4462f179fbf9b6e09ca91f3 Mon Sep 17 00:00:00 2001 From: jaskaransingh9990 Date: Tue, 26 Mar 2024 13:31:40 -0700 Subject: [PATCH 4/7] Add new exercise --- docs/js-core-2/week-3/lesson.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/docs/js-core-2/week-3/lesson.md b/docs/js-core-2/week-3/lesson.md index d5a23a716b..af0be7dd0e 100644 --- a/docs/js-core-2/week-3/lesson.md +++ b/docs/js-core-2/week-3/lesson.md @@ -254,6 +254,33 @@ When a user clicks the "Add some text" button, a new paragraph should be added b }); +``` +### Exercise (5) +:::note Exercise + +When a user clicks the "add list item" button, a new item in list should be added." + +::: + + +### solution +```js + // Function to add a new list item + function addListItem() { + // Create a new li element + let li = document.createElement('li'); + li.textContent = 'New Item'; + + // Append the new li to the ul menu element + const menu = document.querySelector('#menu'); + menu.appendChild(li); + } + + // Select the button element by its ID + const addListItemButton = document.querySelector('#add-list-item-button'); + + // Add event listener to the button + addListItemButton.addEventListener('click', addListItem); ``` ## Manipulate DOM elements @@ -303,7 +330,7 @@ updateTitleBtn.addEventListener("click", function () { The above waits for click on a button. When the button is clicked, it gets the input box element (`inputBox` variable). To get the entered text from it, we use the `value` property: `let title = inputBox.value`. -### Exercise (5) +### Exercise (6) :::note Exercise From 73ecdbd96070474ba50fdc984f57a0067ab816f0 Mon Sep 17 00:00:00 2001 From: jaskaransingh9990 Date: Tue, 26 Mar 2024 13:49:27 -0700 Subject: [PATCH 5/7] Add one more exercise --- docs/js-core-2/week-3/lesson.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/js-core-2/week-3/lesson.md b/docs/js-core-2/week-3/lesson.md index af0be7dd0e..eda508c06d 100644 --- a/docs/js-core-2/week-3/lesson.md +++ b/docs/js-core-2/week-3/lesson.md @@ -358,6 +358,30 @@ link.style.fontSize = newSize + 'px'; // Set the new font size }); ``` +### Exercise (6) + +:::note Exercise + +When the "Replace" button is clicked, the first item of list should be replaced. + +::: + +### solution +```js +// Function to replace the first list item + function replaceListItem() { + let menu = document.getElementById('menu'); + // Create a new list item + let li = document.createElement('li'); + li.textContent = 'Home'; + // Replace the first list item with the new one + menu.replaceChild(li, menu.firstElementChild); + } + + // Add event listener to the button + document.getElementById('replace-button').addEventListener('click', replaceListItem); + +``` ## PD (Delivery) **Session objective**: This session will explore how to create features, user stories and tasks for a product. From 9d04ae1453026cf9296112cc56a86c9deaa58c5d Mon Sep 17 00:00:00 2001 From: jaskaransingh9990 Date: Tue, 26 Mar 2024 14:07:33 -0700 Subject: [PATCH 6/7] Add one more exercise --- docs/js-core-2/week-3/lesson.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/js-core-2/week-3/lesson.md b/docs/js-core-2/week-3/lesson.md index eda508c06d..27d9cae43b 100644 --- a/docs/js-core-2/week-3/lesson.md +++ b/docs/js-core-2/week-3/lesson.md @@ -154,6 +154,22 @@ console.log('All "p" elements contained inside the .primary-content element node + +### Exercise (2) + +:::note Exercise +Write javascript that uses three different way to access a element. +::: + +### solution +```js +// Accessing element by id +var paragraph = document.getElementById('demo'); +// Accessing elements by tag name +var paragraphs = document.getElementsByTagName('p'); +// Accessing elements by class name +var paragraphs = document.getElementsByClassName('info'); +``` ## Attach events to DOM elements Once you retrieve an element using `.querySelector`, you can attach an **event** to it. An event is any action that can be performed on that element. For now, we will just use the **click** event: From 81f49405b0379764510c87084cbf6b8bcc0ba1f5 Mon Sep 17 00:00:00 2001 From: jaskaransingh9990 Date: Tue, 26 Mar 2024 14:23:50 -0700 Subject: [PATCH 7/7] Add tabs and rename exercises names --- docs/js-core-2/week-3/lesson.md | 115 ++++++++++++++++++++++++++++++-- 1 file changed, 109 insertions(+), 6 deletions(-) diff --git a/docs/js-core-2/week-3/lesson.md b/docs/js-core-2/week-3/lesson.md index 27d9cae43b..a81b8448be 100644 --- a/docs/js-core-2/week-3/lesson.md +++ b/docs/js-core-2/week-3/lesson.md @@ -157,9 +157,21 @@ console.log('All "p" elements contained inside the .primary-content element node ### Exercise (2) + + + :::note Exercise Write javascript that uses three different way to access a element. ::: + + + ### solution ```js @@ -170,6 +182,10 @@ var paragraphs = document.getElementsByTagName('p'); // Accessing elements by class name var paragraphs = document.getElementsByClassName('info'); ``` + + + + ## Attach events to DOM elements Once you retrieve an element using `.querySelector`, you can attach an **event** to it. An event is any action that can be performed on that element. For now, we will just use the **click** event: @@ -185,7 +201,16 @@ function alertSomething() { You will notice in the example that we passed a second argument to `addEventListener`. That second argument is the **function** that we want to invoke when that event has happened. -### Exercise (2) +### Exercise (3) + + + :::note Exercise @@ -194,6 +219,10 @@ When a user clicks the "ALERT" button, an alert box should pop up with the text The elements returned by `document.querySelector` have the same properties as a normal HTML element: for example, you can get access to their css **styles**. ::: + + + + ### solution ```js // Select the button element by its ID @@ -212,15 +241,28 @@ alertButton.addEventListener('click', function() { }); ``` + + +### Exercise (4) -### Exercise (3) + + :::note Exercise Write JavaScript below that changes the background colour of the page when the "Change colour" button is clicked. ::: + + + ### solution ```js @@ -235,6 +277,9 @@ Write JavaScript below that changes the background colour of the page when the " ``` + + + ## Create DOM elements Using the `document`, you can also create new elements. These elements will not appear until you append them as a child of another element though: @@ -246,7 +291,16 @@ myElement.appendChild(paragraph); // now the element is added to our view, but i `document.createElement` accepts as an input any element type. So for example `document.createElement("article")` will create a new article element. -### Exercise (4) +### Exercise (5) + + + :::note Exercise @@ -254,6 +308,10 @@ When a user clicks the "Add some text" button, a new paragraph should be added b ::: + + + + ### solution ```js // Select the button element by its ID @@ -271,13 +329,27 @@ When a user clicks the "Add some text" button, a new paragraph should be added b ``` -### Exercise (5) + + + +### Exercise (6) + + + :::note Exercise When a user clicks the "add list item" button, a new item in list should be added." ::: + + ### solution ```js @@ -298,6 +370,9 @@ When a user clicks the "add list item" button, a new item in list should be adde // Add event listener to the button addListItemButton.addEventListener('click', addListItem); ``` + + + ## Manipulate DOM elements You can then change the text displayed inside elements using the `innerText` property: @@ -346,14 +421,24 @@ updateTitleBtn.addEventListener("click", function () { The above waits for click on a button. When the button is clicked, it gets the input box element (`inputBox` variable). To get the entered text from it, we use the `value` property: `let title = inputBox.value`. -### Exercise (6) +### Exercise (7) + + :::note Exercise When the "Larger links!" button is clicked, the text of all links on the page should increase. ::: + + ### solution ```js @@ -373,14 +458,29 @@ link.style.fontSize = newSize + 'px'; // Set the new font size }); }); ``` + + + +### Exercise (8) + + + -### Exercise (6) :::note Exercise When the "Replace" button is clicked, the first item of list should be replaced. ::: + + + ### solution ```js @@ -398,6 +498,9 @@ When the "Replace" button is clicked, the first item of list should be replaced. document.getElementById('replace-button').addEventListener('click', replaceListItem); ``` + + + ## PD (Delivery) **Session objective**: This session will explore how to create features, user stories and tasks for a product.