Color Flipper App ==>> Basic DOM Project

Content

• Introduction*
• What is this Project?*
• Concepts used*
• Notes and Syntax*

Introduction

It is said that for getting into Web Development , one must have a good hand in JavaScript. Learning JS can be very challenging if your approach is not project based. The most likely route of Full Stack Web Development goes through DOM Scripting.

And for the sake of learning DOM, i am making these posts on Projects i made while learning DOM and VanillaJS.
Concepts used in projects are kind of explained here.

Here is the link of very basic level DOM Project
--> colorflipper.live
and here is its code in Github
--> colorflipper.source
and here is the link of tutorial video i am learning from
-->freecodecamp.projects

What is this Project?

This is basic level DOM Project to make you familiar with writing code using JS. In this project we learn how can we get random background color with just a click by user. Plus the color will that is new background color displays on screen each time we click.

Concepts used :

arrays

array.length

document.getElementById()

document.querySelector()

addEventListener()

document.body.style.backgroundColor

Math.floor()

Math.random

Notes and Syntax

Arrays

An array is a data structure, which can store a fixed-size collection of elements of the same data type.
Example of an array:

let fruits = ['PineApple', 'Guava','Banana','Mango']

Also,Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations.
For example, if we use some methods on 'fruits' array we made earlier, we wil get this on console. :

• accesing the array item using its index number

console.log(fruits[0])// PineAppleconsole.log(fruits[fruits.length - 1])// Mango

For knowing more array methods in JS , read from here
--> array-js-mdn

array.length

Obviously array.length is method to get length of an array.
Using 'fruits' array from last topic we can find out how to use it.

console.log(fruits.length)// 4

document.getElementById()

The Document method returns an Element object representing the element whose id property matches the specified string.
Syntax :

var element = document.getElementById('id');

As we know, ids should be unique, so its a very helpful method to get only the element you want.

document.querySelector()

The Document method returns the first Element within the document that matches the specified CSS selector.
Syntax :

var element = document.querySelector('selectors');

EventTarget.addEventListener()

The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target.This looks tough right thats why you should read about it more to understand more.Also it seems like i am talking to me by saying you.
Syntax:

target.addEventListener(type, listener);target.addEventListener(type, listener, options);target.addEventListener(type, listener, useCapture);

you want to know more in detail--> addEventListener-mdn

document.body.style.backgroundColor

Very easy to guess no, it changes background Color of the body. That's why i don't think its syntax is needed here.

Math.floor

This function returns the largest integer less than or equal to a given number.
Example:

console.log(Math.floor(5.95));// 5

Math.random

This function returns a floating-point, pseudo-random number in the range 0 to less than 1. Basicallly this provides a random number between 0 to 1. And do you how many numbers are posssible between zero to one. Comment Below.

Know more about this function from here-->math.random-mdn

That's it for today.
Thank you for reading till here.