An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
June 12, 2022 03:26 pm GMT
Original Link: https://dev.to/tilakjain123/gradient-color-generator-3ei1
Gradient Color Generator
Hello World,
Welcome to my new article. Today, we are going a beautiful Gradient Color Generator using HTML, CSS, Javascript and also use a bit of bootstrap for styling.
Let's get to work!
- Out Boiler Plate
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Bootstrap cdn --> <link rel="stylesheet" href="style.css"> <!-- Our css--> <title>Gradient Color Generator</title><!-- Our main section will go here --><script src="script.js"></script> <!-- our js --></body></html>
- Our main section
<main> <div class="container"> <div id="hex-colors"> <h1>Generate Beautiful Gradient Colors</h1> <h2>background: linear-gradient(to right, #<span id="hexcode1">ffffff</span>, #<span id="hexcode2">ffffff</span>); </h2> <button id="submit" class="btn btn-light">Click Me</button> </div> </div> </main>
We have some bootstrap classes in our main section.
But, we have to give it some basic style.
So, here goes:
- Our CSS (style.css)
.container{ width: 95%; margin: auto; display: flex; justify-content: center; align-items: center; height: 100vh;}#hex-colors{ width: 100%; text-align: center;}#hex-colors h1, h2{ font-size: 2rem; text-transform: uppercase;}#hex-colors h2{ margin-top: 15%; text-transform: lowercase;}
- Our js (script.js)
document.querySelector("#submit").addEventListener("click", () => { var hex_numbers = ["0","1","2","3","4","5","6","7","8","9","A", "B", "C", "D", "E", "F"]; var hexcode1 = ""; var hexcode2 = ""; var random_index = 0; for(let i = 0; i < 6;i++){ random_index = Math.floor(Math.random() * hex_numbers.length); hexcode1 += hex_numbers[random_index]; random_index = Math.floor(Math.random() * hex_numbers.length); hexcode2 += hex_numbers[random_index]; } document.body.style.background = `linear-gradient(to right, #${hexcode1}, #${hexcode2})`; document.querySelector("#hexcode1").textContent = hexcode1; document.querySelector("#hexcode2").textContent = hexcode2; });
See the example below:
What to do after this:
1.You can add more styling
2.You can also make a copy button(that copies the background code)
Did you find it useful?
Comment down your thoughts! Don't forget to give it a heart and follow for more.
See you soon
Bye...
Original Link: https://dev.to/tilakjain123/gradient-color-generator-3ei1
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To