Color-Flipper
Hello friends welcome to my java script related blog.
Learn to make color flipper with the help of JavaScript in a very easy way.
Description:-
I have used html, css, javascript to make color flipper, in this I have given javascript inside css and script tag inside internal style tag, you can use it to change the background of your web page For example light and dark mode.
Step 1.
Open visual studio code editor
Step 2.
Copy this code and paste your editor.
<script>
/////////////////
const x = ["green","red","black","#5591c5"
,"#d9e051","#b479be","#2a0867","#b2bb58","#0e6d9b"];
const y = document.getElementById('btn');
const color = document.querySelector('.color');
y.addEventListener("click", function (){
const changeColur = getRandomNumber();
document.body.style.backgroundColor = x[changeColur];
color.textContent = x[changeColur];
});
function getRandomNumber(){
return Math.floor(Math.random() * x.length)
}
</script>
Using important tags and method:-
JavaScript array is used to store multiple elements in a single variable. It is often used when we want to store a list of elements and access them by a single variable. Unlike most languages where the array is a reference to the multiple variables, in JavaScript array is a single variable that stores multiple elements.
Ex. const x = [ "green","red","yellow","blue","Oranged"];
The document method document.getElementById() returns an element object representing the element whose id property matches with the given value. This method is used to manipulate an element on our document & is widely used in web designing to change the value of any particular element or get a particular element. If the passed ID to the method does not exist then it returns null.
A unique id should be used in the web pages. Although, if there is more than one element for the specific id exist then the only first element will consider & return by getElementByID in the code.
Ex. const y = document.getElementById("btn");
Diffrence between queryselector and queryselectorall
As seen above, querySelector() methodcan only be used to access a single element while querySelectorAll() method can be used to access all elements which match with a specified CSS selector. To return all matches, querySelectorAll has to be used, while to return a single match, querySelector is used.
Ex. const color = document.querySelector(".color");
The addEventListener() is an inbuilt function in JavaScript which takes the event to listen for, and a second argument to be called whenever the described event gets fired. Any number of event handlers can be added to a single element without overwriting existing event handlers.
Ex. element.addEventListener(event, listener, useCapture);
A function is a set of statements that take inputs, do some specific computation, and produce output. The idea is to put some commonly or repeatedly done tasks together and make a function so that instead of writing the same code again and again for different inputs, we can call that function.
function getRandomNumber(){
return Math.floor(Math.random() * x.length)
}
The Javascript Math.floor() method is used to round off the number passed as a parameter to its nearest integer in a Downward direction of rounding i.e. towards the lesser value.
Return Value: The Math.floor() method returns the smallest integer greater than or equal to the given number.
Ex. return Math.floor(Math.random() * x.length);
The Javascript Math.random() function is used to return a floating-point pseudo-random number between range [0,1), 0 (inclusive), and 1 (exclusive). This random number can then be scaled according to the desired range.
Ex. Math.random();