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.
@ -59,7 +59,7 @@ We can access already created element or elements using JavaScript. To access or
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model/title>
<title>Document Object Model</title>
</head>
<body>
@ -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
@ -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)
}
</script>
@ -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.
Asabeneh
5 years ago