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

javascript tutorial - dynamically change background color using rgb color in javascript - bangla

4 ratings | 678 views
In this video, I have shown how can we change background color dynamically using rgb color in pure javascript. Source code and text tutorial will be available in following link https://github.com/polodev/rgb_dynamic_color_in_javascript_yt_bangla 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 in js we have to use cameCase version 'backgroundColor'. Same goes to similar css properties like fontFamily body.style.backgroundColor = 'red'; body.style.color = 'white'; string interpolation using backtick var name = 'sumon'; var text = `my name is ${name}`; 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 setTimeout and setInterval function in js using setTimeout function we can delayed any execution in certain time, using setInterval method we can do certain work certain time later again and again setTimeout(function () { console.log('helo world') }, 10000); setInterval(function () { console.log(new Date()) }, 3000); How to make a dynamic colors using css rgb colors color using rgb(0, 255, 255) value we require value for red, green, blue. Min value is 0 and max value is 255. So we have to generate 3 random value in between 0 and 255. Which can be done using Math.random() and parseInt() method Math.floor( Math.random() * 255); Once we have 3 random numbers, using string interpolation we will set rgb value var number_one = Math.floor( Math.random() * 255); var number_two = Math.floor( Math.random() * 255); var number_three = Math.floor( Math.random() * 255); body.style.backgroundColor = `rgb(${number_one}, ${number_two}, ${number_three})` Here is the full code for sneak peek. We have added setTimeout and setInterval functionality to make it little more fun var body = document.body; var button = document.querySelector('button') function color_change () { var number_one = Math.floor( Math.random() * 255); var number_two = Math.floor( Math.random() * 255); var number_three = Math.floor( Math.random() * 255); body.style.backgroundColor = `rgb(${number_one}, ${number_two}, ${number_three})` } color_change(); body.style.color = 'white'; button.addEventListener('click', color_change); var auto_color = setInterval(color_change, 500); setTimeout(function () { clearInterval(auto_color); }, 10000); 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 (2)
kawsar bhuiyan (1 month ago)
plz give more javascript project
Rayhan islam (3 months ago)
Thanks vai erokom akta tutorial er jonno ...I like this tutorial

Would you like to comment?

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