diff --git a/20_Day/20_day_writing_clean_code.md b/20_Day/20_day_writing_clean_code.md index 15a00d7f..40d6f4e3 100644 --- a/20_Day/20_day_writing_clean_code.md +++ b/20_Day/20_day_writing_clean_code.md @@ -137,7 +137,7 @@ const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] #### Functions -By now you are very familiar function declaration, expression function, arrow function and anonymous function. In this challenge we tend to use array function instead of other functions. Arrow function is not a replacement for other functions. In addition, arrow functions and function declarations are not exactly the same. So you should know when to use and when not. I will cover the difference in detail in other sections. We will use explicit return instead of implicit return if the function is one liner +By now you are very familiar function declaration, expression function, arrow function and anonymous function. In this challenge we tend to use arrow function instead of other functions. Arrow function is not a replacement for other functions. In addition, arrow functions and function declarations are not exactly the same. So you should know when to use and when not. I will cover the difference in detail in other sections. We will use explicit return instead of implicit return if the function is one liner ```js // function which prints full name of a person @@ -182,7 +182,7 @@ const showDateTime = () => { #### Loops -We coverer many types of loops in this challenges. The regular fo loop, while loop, do while loop, for of loop, forEach loop and for in loop. +We coverer many types of loops in this challenges. The regular for loop, while loop, do while loop, for of loop, forEach loop and for in loop. Lets see how we use them: ```js diff --git a/21_Day/21_day_dom.md b/21_Day/21_day_dom.md index 1a17a1db..211c73f6 100644 --- a/21_Day/21_day_dom.md +++ b/21_Day/21_day_dom.md @@ -59,7 +59,7 @@ We can access already created element or elements using JavaScript. To access or - Document Object Model/title> + <title>Document Object Model @@ -133,7 +133,7 @@ The _document.querySelector_ method can select an HTML or HTML elements by tag n **_querySelector_**: can be used to select HTML element by its tag name, id or class. If the tag name is used it selects only the first element. ```js -let firstTitle = document.querySelect('h1') // select the first available h2 element +let firstTitle = document.querySelector('h1') // select the first available h2 element let firstTitle = document.querySelector('#first-title') // select id with first-title let firstTitle = document.querySelector('.title') // select the first available h2 element with class title ``` @@ -141,7 +141,7 @@ let firstTitle = document.querySelector('.title') // select the first available **_querySelectorAll_**: can be used to select html element by its tag name or class. It return a nodeList which is an array like object which support array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements. ```js -const allTitles = document.querySelectAll('h1') +const allTitles = document.querySelectorAll('h1') console.log(allTitles.length) // 4 for (let i = 0; i < allTitles.length; i++) { @@ -299,7 +299,7 @@ Let us add some style to our titles. If the element has even index we give it gr ```js const titles = document.querySelectorAll('h1') titles.forEach((title, i) => { - title.fontSize = '24px' // all titles will have 24px font size + title.style.fontSize = '24px' // all titles will have 24px font size if (i % 2 === 0) { title.style.color = 'green' } else { @@ -315,7 +315,7 @@ Let us add some style to our titles. If the element has even index we give it gr ```js const titles = document.querySelectorAll('h1') titles.forEach((title, i) => { - title.fontSize = '24px' // all titles will have 24px font size + title.style.fontSize = '24px' // all titles will have 24px font size if (i % 2 === 0) { title.style.backgroundColor = 'green' } else { @@ -331,7 +331,7 @@ Let us add some style to our titles. If the element has even index we give it 20 ```js const titles = document.querySelectorAll('h1') titles.forEach((title, i) => { - title.fontSize = '24px' // all titles will have 24px font size + title.style.fontSize = '24px' // all titles will have 24px font size if (i % 2 === 0) { title.style.fontSize = '20px' } else { diff --git a/22_Day/22_day_dom_day_2.md b/22_Day/22_day_dom_day_2.md index 8b91ebba..acf563e3 100644 --- a/22_Day/22_day_dom_day_2.md +++ b/22_Day/22_day_dom_day_2.md @@ -115,6 +115,7 @@ To see a created element on the HTML document we should append it to the parent title = document.createElement('h1') title.className = 'title' title.style.fontSize = '24px' + title.textContent = i document.body.appendChild(title) } @@ -219,7 +220,7 @@ The above snippet of code cleared all the child elements. ### Exercises: Level 3 -Check the requirement of this project from both images(jpg and gif). All the data and CSS has been implemented using JavaScript only. The data is found on starter folder project_3. +Check the requirement of this project from both images(jpg and gif). All the data and CSS has been implemented using JavaScript only. The data is found on starter folder project_3. The drop down button has been created using [*details*](https://www.w3schools.com/tags/tag_details.asp) HTML element. ![Challenge Information](./../images/projects/dom_mini_project_challenge_info_day_2.3.gif) diff --git a/24_Day/24_day_dom_day_4.md b/24_Day/24_day_dom_day_4.md index d6ec3e7f..d7613dc8 100644 --- a/24_Day/24_day_dom_day_4.md +++ b/24_Day/24_day_dom_day_4.md @@ -14,7 +14,7 @@ -[<< Day 23](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/23_Day/23_day_dom_day_3.md) | [Day 24 >>]() +[<< Day 23](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/23_Day/23_day_dom_day_3.md) | [Day 25 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/25_Day/25_day_dom_day_5.md) ![Thirty Days Of JavaScript](../images/banners/day_1_24.png) @@ -34,4 +34,4 @@ 🎉 CONGRATULATIONS ! 🎉 -[<< Day 23](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/23_Day/23_day_dom_day_3.md) | [Day 24 >>]() +[<< Day 23](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/23_Day/23_day_dom_day_3.md) | [Day 25 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/25_Day/25_day_dom_day_5.md)