This content originally appeared on DEV Community and was authored by Gaurav Singh Mehra
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])
// PineApple
console.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, id’s should be unique, so it’s 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.
This content originally appeared on DEV Community and was authored by Gaurav Singh Mehra
Gaurav Singh Mehra | Sciencx (2021-09-29T13:46:24+00:00) Color Flipper App ==>> Basic DOM Project. Retrieved from https://www.scien.cx/2021/09/29/color-flipper-app-basic-dom-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.