Random hex color

by schrodingers

HTML

<div>

  <button class="btn">
    Random hex
  </button>
  <span class="result"></span>

</div>
<!-- 
Try later
https://www.youtube.com/watch?v=qQd6X2rb_LU
 -->

CSS

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 50vh;
  background: #222f3e;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  font-family: sans-serif;
  font-size: 16px;
}

div {}

.btn {
  border: none;
  padding: 1em;
  transition: all 0.3s ease;
  background-color: white;
  text-transform: uppercase;
}

.btn:hover {
  background-color: dodgerblue;
  filter: invert(1);
}

.result {
  display: block;
  color: white;
}

JavaScript

const btn = document.querySelector('.btn');
let result = document.querySelector('.result');

function generateHex() {
    result.innerHTML = '#' + Math.random().toString(16).substr(-6);
  }

btn.addEventListener('click', generateHex);