In this Project, you get to know How to create Color changing/switcher Using Javascript. There are boxes of Color on a web page and when a user clicks on it the color of the background changes. It makes the web page looks Attractive and Dynamic.
Files we need to Create
1. index.html
2. style.css
3. main.js
Requirements
You need to know about the concept of DOM in Javascript.
Languages Used in Projects. This project contains HTML to create Site structure, CSS for Styling,, and JavaScript to add Dynamic Functionalities.
1. HTML
Create File index.html and run Boilerplate. We create the structure of Webpage using Html
CODE
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Switcher</title></head><body> <code> <h1>Color Switcher Using Java Script </h1>
<ul id="switcher"> <li id="redbtn"></li> <li id="greybtn"></li> <li id="yellowbtn"></li> <li id="bluebtn"></li> <li id="gradient"></li> <li id="gradient2"></li> </ul>
<p> You can change the colour by clicking on the above colour</p></code></body>
<script src="main.js"></script></html>2. CSS
For the Styling, page create style.css and Stato decorating your webpage and make it attractive by changing Margins, padding, attributes, and Typography
CODE
body{
margin: 3rem;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
font-size: 18px;
}
h1{
line-height: 1.5;
margin: 3rem 0 0 ;
}
p{
margin: .5rem;
}
#switcher{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#switcher li{
float: left;
width: 30px;
height: 30px;
margin: 0 15px 15px 0;
border-radius: 30px;
border: 3px solid black;
cursor: pointer;
}
#redbtn{
background-color: red;
}
#greybtn{
background-color: grey;
}
#yellowbtn{
background-color: yellow;
}
#bluebtn{
background-color: blue;
}
#gradient{
background-color: #6200ea;
}
#gradient2{
background-color: #4d698d;
}
3. JAVASCRIPT
Create script.js to add dynamic functionalities to a Web page. Here we use DOM and Id to make this project working
CODE
document.getElementById('redbtn').onclick=switchRed;
document.getElementById('bluebtn').onclick=switchBlue;
document.getElementById('greybtn').onclick=switchGrey;
document.getElementById('yellowbtn').onclick=switchYellow;
document.getElementById('gradient').onclick=switchGradient;
document.getElementById('gradient2').onclick=switchGradient2;
function switchRed(){
document.getElementsByTagName('body')[0].style.backgroundColor='red';
document.getElementsByTagName('body')[0].style.color='white';
}
function switchGrey(){
document.getElementsByTagName('body')[0].style.backgroundColor='grey';
document.getElementsByTagName('body')[0].style.color='black';
}
function switchBlue(){
document.getElementsByTagName('body')[0].style.backgroundColor='blue';
document.getElementsByTagName('body')[0].style.color='white';
}
function switchYellow(){
document.getElementsByTagName('body')[0].style.backgroundColor='yellow';
document.getElementsByTagName('body')[0].style.color='black ';
}
function switchGradient(){
document.getElementsByTagName('body')[0].style.backgroundColor='#6200ea';
document.getElementsByTagName('body')[0].style.color='white ';
}
function switchGradient2(){
document.getElementsByTagName('body')[0].style.backgroundColor='#4d698d';
document.getElementsByTagName('body')[0].style.color='white ';
}
OUTPUT
0 Comments