비전공자 개발일기

Random Color Generator 본문

Javascript

Random Color Generator

HiroDaegu 2022. 5. 15. 01:02
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best Color Generator</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div class="container">
    <h1>Welcome to Random Color Generator</h1>
    <p>Click on the HexCode to Copy</p>
    <button class="btn-grad" onclick="randomColor()">Generate</button>
  </div>
  <div class="colorizer" id="colorizer1">
    <div id="pallete1" class="color" onclick="copyToClipboard('pallete1')">#967b28</div>
    <div id="pallete2" class="color" onclick="copyToClipboard('pallete2')">#df9d4f</div>
    <div id="pallete3" class="color" onclick="copyToClipboard('pallete3')">#af704f</div>
    <div id="pallete4" class="color" onclick="copyToClipboard('pallete4')">#97013b</div>
    <div id="pallete5" class="color" onclick="copyToClipboard('pallete5')">#14ae2e</div>
  </div>
</body>
</html>
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
body {  
  height: 100vh;  
  background: linear-gradient(to right,  
  #967b28 0%, #967b28 20%,  
  #df9d4f 20%, #df9d4f 40%,  
  #af704f 40%, #af704f 60%,  
  #97013b 60%, #97013b 80%,  
  #14ae2e 80%, #14ae2e 100%);  
}  
#pallete1,  
#pallete2,  
#pallete3,#pallete4,#pallete5 {  
  color: #ffffff;  
}  
.container {  
  display: flex;  
  flex-direction: column;  
  justify-content: center;  
  align-items: center;  
  background-color: aliceblue;  
  height: 25vh;  
}  
.container p {  
  margin: 5px;  
}  
.colorizer {  
  display: flex;  
  justify-content: space-around;  
  text-align: center;  
  height: 75vh;  
  align-items: center;  
}  
.colorizer .color {  
  padding: 100px;  
  background-color: transparent;  
}  
.btn-grad {background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%)}  
.btn-grad {  
  margin: 10px;  
  padding: 15px 45px;  
  text-align: center;  
  text-transform: uppercase;  
  transition: 0.5s;  
  background-size: 200% auto;  
  color: white;        
  box-shadow: 0 0 20px #eee;  
  display: block;  
  border-radius: 0.5rem;  
  border-color: transparent;  
  cursor: pointer;  
 }  
.btn-grad:hover {  
  background-position: right center; /* change the direction of the change here */  
  color: #fff;  
  text-decoration: none;  
 }
function randomColor() {  
  let body = document.body;  
  let palletes = []  
  for (let index = 1; index <= document.getElementById("colorizer1").childElementCount; index++) {  
    palletes.push(document.getElementById(`pallete${index}`))  
  }  
  let colors = []  
  palletes.forEach((pallete,i)=>{  
    let random = Math.floor(Math.random() * 16777215).toString(16);  
    pallete.innerHTML = '#'+random;  
    colors.push(random);  
  })  
  let randomizer = {}  
  colors.forEach((color,i)=>{  
    randomizer[`random${i+1}`] = "#"+color;  
  })  
  body.style.background = `linear-gradient(to right, ${randomizer['random1']} 0%, ${randomizer['random1']} 20%,  
  ${randomizer['random2']} 20%, ${randomizer['random2']} 40%,  
  ${randomizer['random3']} 40%, ${randomizer['random3']} 60%,  
  ${randomizer['random4']} 60%, ${randomizer['random4']} 80%,  
  ${randomizer['random5']} 80%, ${randomizer['random5']} 100%)`;  
}  
function copyToClipboard(containerid) {  
  if (document.selection) {  
   var range = document.body.createTextRange();  
   range.moveToElementText(document.getElementById(containerid));  
   range.select().createTextRange();  
  } else if (window.getSelection) {  
   var range = document.createRange();  
   range.selectNode(document.getElementById(containerid));  
   window.getSelection().addRange(range);  
   navigator.clipboard.writeText(document.getElementById(containerid).innerText);  
   alert("Color has been copied")  
  }  
}
728x90
LIST

'Javascript' 카테고리의 다른 글

Height Converter  (0) 2022.05.17
Light AND Dark Mode Toggle  (0) 2022.05.16
3D Gallery  (0) 2022.05.14
Draggable DIV  (0) 2022.05.12
Animated Submit BUTTON  (0) 2022.05.10
'Javascript' Related Articles more