About
Explore
Events & Classes
Support Us
Join
Sign In
JUSTCodaborate
View Project Page
Run
Fullscreen
Hex Generator
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset='utf-8'> <meta name='author' content='JUSTCodaborate'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> </head> <body> <div class="container"> <h2 class="hexColor">The hex color code is: <span class="hex">#FFFFFF</span></h2> <button type="button" class="hexBtn">generate color</button> </div> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Chewy&display=swap'); *:focus { outline: none; } body { font-family: 'Chewy'; min-height: 100vh; display: flex; overflow: hidden; justify-content: center; align-items: center; } .container { text-align: center; } .hex { font-size: 3rem; } .hexBtn { border-radius: 7px; color: white; border: 3px solid orange; background-color: rgba(0,0,0,0.6); font-size: 1.6rem; padding: 0.25rem 0.5rem; cursor: pointer; }
const hexNumbers = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']; const hexBtn = document.querySelector('.hexBtn'); const bodyBcg = document.querySelector('body'); const hex = document.querySelector('.hex'); hexBtn.addEventListener('click', getHex); function getHex() { let hexCol = '#'; for(let i = 0; i < 6; i++) { let random = Math.floor(Math.random()*hexNumbers.length); hexCol += hexNumbers[random]; } bodyBcg.style.backgroundColor = hexCol; hex.innerHTML = hexCol; }
About
Explore
Events & Classes
Support Us
Join
Sign In
