HomeНаука и техникаRelated VideosMore From: shibu deb polo

javascript tutorial - Background color change dynamically using pure javascript - bangla

2 ratings | 356 views
In this video I have shown how can we change background color dynamically using javascript. Source code and tutorial will be available from following link https://github.com/polodev/dynamic_color_in_javascript_yt_bangla Dynamic Background color using pure javascript This is a funny little project, which will help you to practice some javascript with fun. Things I have covered in this lesson Math object Math object is a collections of properties and method to perform mathematical calculation. // for getting pi value Math.PI // for getting ceil value Math.ceil(2.33); //for getting floor value Math.floor(2.33); //for getting round value Math.round(2.33); Math.round(2.63); //for getting random number between 0 - 1; Math.random() //for getting random number between 0 - 5; Math.random() * 5 //for getting random integer number between 0 - 5; Math.floor(Math.random() * 5) //for getting random integer number between 0 - 5 using pareInt function // I mean instead of Math.floor() method we can use parseInt function parseInt(Math.random() * 5) style in js using element.style object we can style our html document in javascript. In css, we are using background-color as css property. But in js hyphen (-) treated as arithmetic operator. So instead of background-color we will use cameCase version 'backgroundColor'. Same goes to similar css properties like fontFamily body.style.backgroundColor = colors[ parseInt(Math.random() * colors.length) ]; body.style.color = 'white'; addEventListener using addEventListener we can attach any event to a element button.addEventListener('click', function () { // whatever you want to execute on click event }); Here first parameter is event name, second parameter is a function How to make a dynamic colors we will make array of colors and make background color from colors array using js. We will select random color from colors array using Math.random() and parseInt() method. Here is the full code var body = document.body; var button = document.querySelector('button'); var colors = ['teal', 'salmon', 'tomato', 'blue', 'green', 'maroon', 'dodgerblue']; function color_change() { body.style.backgroundColor = colors[ parseInt(Math.random() * colors.length) ]; } color_change(); button.addEventListener('click', color_change); body.style.color = 'white'; My name is shibu deb polo Thanks Please subscribe to my channel https://www.youtube.com/c/polodev10 Happy coding!
Html code for embedding videos on your blog
Text Comments (1)
Sumon Ahmed BD (10 months ago)
sir aitar jonno opekkhay chilam, thnx thnx shibo sir

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.