From 81743af9bfff8add6ecbd4912b43f3795563e366 Mon Sep 17 00:00:00 2001 From: Oumaima Fisaoui <48260689+Oumaimafisaoui@users.noreply.github.com> Date: Thu, 26 Sep 2024 16:05:22 +0100 Subject: [PATCH 1/3] Chore(AI-GO): Fixed the instructions in first wink subject --- subjects/AI.GO/first-wink/README.md | 51 +++++++++++++++++------------ 1 file changed, 30 insertions(+), 21 deletions(-) diff --git a/subjects/AI.GO/first-wink/README.md b/subjects/AI.GO/first-wink/README.md index 8783d5a0f..7858f4de3 100644 --- a/subjects/AI.GO/first-wink/README.md +++ b/subjects/AI.GO/first-wink/README.md @@ -16,7 +16,7 @@ Don't worry if things feel a bit challenging—that's part of the process! Just > We can mention thing you do not know; but by this time, you know what to do! Search for it, ask your peers and use clever prompts ;) -- **You need to continue on the HTML, CSS, JS code you submitted for the exercise `first-move`, but with an empty JavaScript file and do not forget to change the name of the linked files to the name of this exercise!** +- **You need to continue on the HTML, CSS, JS code you submitted for the exercise `first-move`, but with an empty JavaScript file and do not forget to change the name of the linked files to the name of this exercise as well as following the new instructions!** ### Resources @@ -33,12 +33,12 @@ We provide you with some content to get started smoothly, check it out! #### Task 1: -Let's put a button on the top right corner of the page, that will toggle (close or open) the left eye when clicked. +Let's put a button on the top right corner of the page with the `id` of "eye-btn", that will toggle (close or open) the left eye when clicked. Add it in the HTML structure: ```js - + ``` And add the style in the CSS file: @@ -55,18 +55,18 @@ button { #### Task 2: -Select the button in your JavaScript file that will allow the user to control the robot’s left eye. +Select the button in your JavaScript file by its `id`. That will allow the user to control the robot’s left eye. ```js // Select the button element using its ID so we can interact with it in our JavaScript //Example of selecting a button called myButton -const myButton = document.querySelector("button"); +const myButton = document.getElementById("btn-example"); ``` **`Prompt Example:`** -- "How do I use `querySelector` to select an HTML element by its ID?" +- "How do I use `getElementById` to select an HTML element by its ID?" #### Task 3: @@ -74,34 +74,45 @@ Write a function that will be triggered when the button is clicked. This function will make the robot "wink" by toggling the `eye-closed` class on the left eye and change the `button` text based on the current state of the eye. -- It changes the text content of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye". +1- It changes the text content of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye". -- It toggles the class eye-closed in the `classList` of the eye-left HTML element. +2- It toggles the class `eye-closed` in the `classList` of the `eye-left` HTML element. -It changes the background color of the eye-left: if the eye is open, to "red", if the eye is closed, to "black" +3- It changes the background color of the `eye-left`: if the eye is open, to "red", if the eye is closed, to "black" + +**Code Example:** ```js -const button = document.querySelector('button') +const button = document.getElementById('eye-btn') const handleClick = (event) => { - // Select the left eye element by its ID - const myDiv = ... + // Select left eye by its ID and assign it to the variable eyeLeft + const eyeLeft = ... - // Check if the eye is currently closed by looking at its background color + // Check if the eye is currently closed by looking at the eyeLeft background color, if it's 'black', that means it's closed. if (...) { - // If the eye is closed, open it and update the button text + /* + - Add to the 'button' element the text: "Click to close the left eye" + - Change the 'eyeLeft' element background color to red + */ } else { - // If the eye is open, close it and update the button text + /* + If the eye is open: + - Add to 'button' element the text: "Click to open the left eye" + - Change the 'eyeLeft' element background color to black + */ } // Toggle the 'eye-closed' class on the 'eye-left' div + eyeLeft.classList.toggle("eye-closed") }; -// register the event: +/* Register the event: + here we ask the button to call our `handleClick` function +on the 'click' event, so every time it's clicked +*/ button.addEventListener('click', handleClick) -// here we ask the button to call our `handleClick` function -// on the 'click' event, so every time it's clicked ``` ### Expected result @@ -110,8 +121,6 @@ You can see an example of the expected result [here](https://youtu.be/IQ6-3X3JBs **`Prompt Examples:`** -- "As a beginner, explain to me what is `querySelector` in JavaScript, and how do I use it to select an HTML element by its ID or class?" - -- "As a beginner, explain to me how can I change the text content of an `HTML element` using JavaScript?" +- "As a beginner, explain to me how can I change the text content and the background color of an `HTML element` using JavaScript?" - "As a beginner, explain to me how do I use `addEventListener` to make a button respond to a click event in JavaScript?" From 00cd3b3842e25cb271c6ad93b52e0b17d97486d8 Mon Sep 17 00:00:00 2001 From: Christopher Fremond Date: Tue, 1 Oct 2024 11:54:14 +0100 Subject: [PATCH 2/3] fix(READMES): fixes some typo and divide a long sentence in two parts --- subjects/AI.GO/first-wink/README.md | 6 +++--- subjects/AI.GO/the-skeleton/README.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/subjects/AI.GO/first-wink/README.md b/subjects/AI.GO/first-wink/README.md index 7858f4de3..8c23afd6d 100644 --- a/subjects/AI.GO/first-wink/README.md +++ b/subjects/AI.GO/first-wink/README.md @@ -16,7 +16,7 @@ Don't worry if things feel a bit challenging—that's part of the process! Just > We can mention thing you do not know; but by this time, you know what to do! Search for it, ask your peers and use clever prompts ;) -- **You need to continue on the HTML, CSS, JS code you submitted for the exercise `first-move`, but with an empty JavaScript file and do not forget to change the name of the linked files to the name of this exercise as well as following the new instructions!** +- **You need to continue on the HTML, CSS, JS code you submitted for the exercise `first-move`, but with an empty JavaScript file. Do not forget to change the name of the linked files to the name of this exercise as well as following the new instructions!** ### Resources @@ -33,7 +33,7 @@ We provide you with some content to get started smoothly, check it out! #### Task 1: -Let's put a button on the top right corner of the page with the `id` of "eye-btn", that will toggle (close or open) the left eye when clicked. +Let's put a button on the top right corner of the page with the `id` set to "eye-btn", that will toggle (close or open) the left eye when clicked. Add it in the HTML structure: @@ -60,7 +60,7 @@ Select the button in your JavaScript file by its `id`. That will allow the user ```js // Select the button element using its ID so we can interact with it in our JavaScript -//Example of selecting a button called myButton +//Example of selecting a button called btn-example const myButton = document.getElementById("btn-example"); ``` diff --git a/subjects/AI.GO/the-skeleton/README.md b/subjects/AI.GO/the-skeleton/README.md index ebfbe6749..47dcfa1c1 100644 --- a/subjects/AI.GO/the-skeleton/README.md +++ b/subjects/AI.GO/the-skeleton/README.md @@ -24,7 +24,7 @@ We provide you with some content to get started smoothly, check it out! - Video [Basic set up of an HTML page](https://www.youtube.com/watch?v=QtKoO7tT-Gg&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=1) - Video [Different HTML tags overview](https://www.youtube.com/watch?v=Al-Jzpib8VY&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=2) -Those videos are accompanying you step by step in each exercise, but if you want to check right away all the notions covered in the quest, you can watch the whole playlist throughout your next exercices[Web - HTML, CSS & DOM JavaScript](https://www.youtube.com/playlist?list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF). +Those videos are accompanying you step by step in each exercise, but if you want to check right away all the notions covered in the quest, you can watch the whole playlist throughout your next exercises[Web - HTML, CSS & DOM JavaScript](https://www.youtube.com/playlist?list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF). > Your working environment may not be exactly the same as what you see in the videos or documentation, just try to adapt your work according to your research and discoveries. > Don't be afraid to try! From c6efb1f1c1934a234d8a78fea951d78b28d27e0d Mon Sep 17 00:00:00 2001 From: Christopher Fremond Date: Tue, 1 Oct 2024 12:02:25 +0100 Subject: [PATCH 3/3] fix(READMES): fix a typo --- subjects/AI.GO/first-wink/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/subjects/AI.GO/first-wink/README.md b/subjects/AI.GO/first-wink/README.md index 8c23afd6d..f32bfc0b7 100644 --- a/subjects/AI.GO/first-wink/README.md +++ b/subjects/AI.GO/first-wink/README.md @@ -100,7 +100,7 @@ const handleClick = (event) => { } else { /* If the eye is open: - - Add to 'button' element the text: "Click to open the left eye" + - Add to the 'button' element the text: "Click to open the left eye" - Change the 'eyeLeft' element background color to black */ }