Project-1 CSS Gradient generator

@miguel Z. Nunez beginners Javascript Projects.

Learning how to use onclick to attach functions to buttons is indeed a fundamental skill in web development. It's amazing how such a simple concept can have such a wide range of applications. Being able to generate random hex colors and dynamically change the background color adds a dynamic and interactive element to your projects. Buttons are everywhere, and knowing how to make them do something meaningful when clicked is invaluable. The ability to handle user interactions like this opens up a world of possibilities for creating engaging and user-friendly experiences.

index.html

<!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">
 <link rel="stylesheet" href="style.css"> 
 <title>Hex Colors</title>
</head>
<body>

  <h2>background: linear-gradient(45deg, #<span id="hex1">000000</span>, #<span id="hex2">000000</span>)</h2>
  <div>
    <button id="generate">Generate</button>
    <button id="copy">Copy</button>
  </div>


  <script src="script.js"></script>
</body>
</html>

style.css

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: white;
  background-color: black;
}

h2 {
  text-shadow: 1px 1px 2px black;
}

button {
  padding: 10px;
  border: 2px solid white;
  border-radius: 5px;
  background-color: transparent;
  color: white;
  cursor: pointer;
  text-shadow: 1px 1px 2px black;
  box-shadow: 1px 1px 2px black;
  transition: 0.3s ease;
}

button:hover {
  transform: scale(1.1);
}

script.js

const hexNumbers = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]
let hex1 = ""
let hex2 = ""

document.querySelector("#generate").addEventListener("click", () => {
  generateRandomHex()
})

document.querySelector("#copy").addEventListener("click", () => {
  copyHex()
})

function generateRandomHex(){
  hex1 = "", hex2 = ""
  for(let i = 0; i < 6; i++){
    hex1 += hexNumbers[Math.floor(Math.random() * hexNumbers.length)]
    hex2 += hexNumbers[Math.floor(Math.random() * hexNumbers.length)]
  }
  document.querySelector("#hex1").innerHTML = hex1
  document.querySelector("#hex2").innerHTML = hex2
  document.body.style.background = `linear-gradient(45deg, #${hex1}, #${hex2})`
}

function copyHex(){
  const gradient = `background: linear-gradient(45deg, #${hex1}, #${hex2})`
  navigator.clipboard.writeText(gradient)
}

Codesandbox : link

Blog

Project-1 CSS Gradient generator

Janani Sankaralingam

Join Our Newsletter. No Spam, Only the good stuff.

Related