Telegram Group Join Now
How to Create Color Flipper Using JavaScript (Source Code)
I hope you enjoy our blog so let’s start with a basic HTML structure for the Color Flipper.
ADVERTISEMENT
Code by | N/A |
Project Download | Link Available Below |
Language used | HTML , CSS and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
HTML Code for Main File (Index.Html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Color Flipper || Simple</title> <!-- styles --> <link rel="stylesheet" href="styles.css" /> </head> <body> <nav> <div class="nav-center"> <h4>color flipper</h4> <ul class="nav-links"> <li><a href="index.html">simple</a></li> <li><a href="hex.html">hex</a></li> </ul> </div> </nav> <main> <div class="container"> <h2>background color : <span class="color">#f1f5f8</span></h2> <button class="btn btn-hero" id="btn">click me</button> </div> </main> <!-- javascript --> <script src="app.js"></script> </body> </html>
There is all the HTML Code for the Index.html. Now, we make Hex.html File For Another Page.
Responsive Gym Website Using HTML ,CSS & JavaScript
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Color Flipper || Hex</title> <!-- styles --> <link rel="stylesheet" href="styles.css" /> </head> <body> <nav> <div class="nav-center"> <h4>color flipper</h4> <ul class="nav-links"> <li><a href="index.html">simple</a></li> <li><a href="hex.html">hex</a></li> </ul> </div> </nav> <main> <div class="container"> <h2>background color : <span class="color">#f1f5f8</span></h2> <button class="btn btn-hero" id="btn">click me</button> </div> </main> <!-- javascript --> <script src="hex.js"></script> </body> </html>
Output
Css Code For Color Flipper
/* =============== Fonts =============== */ @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); /* =============== Variables =============== */ :root { /* dark shades of primary color*/ --clr-primary-1: hsl(205, 86%, 17%); --clr-primary-2: hsl(205, 77%, 27%); --clr-primary-3: hsl(205, 72%, 37%); --clr-primary-4: hsl(205, 63%, 48%); /* primary/main color */ --clr-primary-5: hsl(205, 78%, 60%); /* lighter shades of primary color */ --clr-primary-6: hsl(205, 89%, 70%); --clr-primary-7: hsl(205, 90%, 76%); --clr-primary-8: hsl(205, 86%, 81%); --clr-primary-9: hsl(205, 90%, 88%); --clr-primary-10: hsl( 205, 100%, 96% ); /* darkest grey - used for headings */ --clr-grey-1: hsl(209, 61%, 16%); --clr-grey-2: hsl(211, 39%, 23%); --clr-grey-3: hsl(209, 34%, 30%); --clr-grey-4: hsl(209, 28%, 39%); /* grey used for paragraphs */ --clr-grey-5: hsl(210, 22%, 49%); --clr-grey-6: hsl(209, 23%, 60%); --clr-grey-7: hsl(211, 27%, 70%); --clr-grey-8: hsl(210, 31%, 80%); --clr-grey-9: hsl(212, 33%, 89%); --clr-grey-10: hsl(210, 36%, 96%); --clr-white: #fff; --clr-red-dark: hsl(360, 67%, 44%); --clr-red-light: hsl(360, 71%, 66%); --clr-green-dark: hsl(125, 67%, 44%); --clr-green-light: hsl(125, 71%, 66%); --clr-black: #222; --ff-primary: "Roboto", sans-serif; --ff-secondary: "Open Sans", sans-serif; --transition: all 0.3s linear; --spacing: 0.1rem; --radius: 0.25rem; --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); --max-width: 1170px; --fixed-width: 620px; } /* =============== Global Styles =============== */ *, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--ff-secondary); background: var(--clr-grey-10); color: var(--clr-grey-1); line-height: 1.5; font-size: 0.875rem; } ul { list-style-type: none; } a { text-decoration: none; } h1, h2, h3, h4 { letter-spacing: var(--spacing); text-transform: capitalize; line-height: 1.25; margin-bottom: 0.75rem; font-family: var(--ff-primary); } h1 { font-size: 3rem; } h2 { font-size: 2rem; } h3 { font-size: 1.25rem; } h4 { font-size: 0.875rem; } p { margin-bottom: 1.25rem; color: var(--clr-grey-5); } @media screen and (min-width: 800px) { h1 { font-size: 4rem; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1rem; } body { font-size: 1rem; } h1, h2, h3, h4 { line-height: 1; } } /* global classes */ /* section */ .section { padding: 5rem 0; } .section-center { width: 90vw; margin: 0 auto; max-width: 1170px; } @media screen and (min-width: 992px) { .section-center { width: 95vw; } } main { min-height: 100vh; display: grid; place-items: center; } /* =============== Nav =============== */ nav { background: var(--clr-white); height: 3rem; display: grid; align-items: center; box-shadow: var(--dark-shadow); } .nav-center { width: 90vw; max-width: var(--fixed-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .nav-center h4 { margin-bottom: 0; color: var(--clr-primary-5); } .nav-links { display: flex; } nav a { text-transform: capitalize; font-weight: 700; font-size: 1rem; color: var(--clr-primary-1); letter-spacing: var(--spacing); margin-right: 1rem; } nav a:hover { color: var(--clr-primary-5); } /* =============== Container =============== */ main { min-height: calc(100vh - 3rem); display: grid; place-items: center; } .container { text-align: center; } .container h2 { background: var(--clr-black); color: var(--clr-white); padding: 1rem; border-radius: var(--radius); margin-bottom: 2.5rem; } .color { color: var(--clr-primary-5); } .btn-hero { font-family: var(--ff-primary); text-transform: uppercase; background: transparent; color: var(--clr-black); letter-spacing: var(--spacing); display: inline-block; font-weight: 700; transition: var(--transition); border: 2px solid var(--clr-black); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border-radius: var(--radius); font-size: 1rem; padding: 0.75rem 1.25rem; } .btn-hero:hover { color: var(--clr-white); background: var(--clr-black); }
Html + Css Update Output
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
JavaScript Code for Color Flipper (app.js)
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); btn.addEventListener("click", function () { const randomNumber = getRandomNumber(); // console.log(randomNumber); document.body.style.backgroundColor = colors[randomNumber]; color.textContent = colors[randomNumber]; }); function getRandomNumber() { return Math.floor(Math.random() * colors.length); }
JavaScript Code for Color Flipper (Hex.js)
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); btn.addEventListener("click", function () { let hexColor = "#"; for (let i = 0; i < 6; i++) { hexColor += hex[getRandomNumber()]; } // console.log(hexColor); color.textContent = hexColor; document.body.style.backgroundColor = hexColor; }); function getRandomNumber() { return Math.floor(Math.random() * hex.length); }
Final Output Color Flipper Using JavaScript
Now that we have completed our javascript section. Hope you like the Color Flipper Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
Written by – Code With Random/Anki