color sliders

by trentHarlem

HTML

<header>
   <h1 id="logo" class="slide"><span class="one">color</span><span class="four">Sliders</span></h1>
  </header>


  <article> <!--background color-->
      <h2>Slide your color <span id="colorOutput"></span></h2>

<div class="container">
<label for="red">RED</label>
<input type="range" name="red" id="red" min="0" max="255" value="0">
<label for="green">GREEN</label>
<input type="range" name="green" id="green" min="0" max="255" value="100">
<label for="blue">BLUE</label>
<input type="range" name="blue" id="blue" min="0" max="255" value="100">
</div>
</article>

  <article> <!--font color-->
    <h2>Font color <span id="font"></span></h2>

<div class="container">
<label for="red">Red</label>
<input type="range" min="0" max="255" value="155" class="slider" id="fontRed">

<label for="green">Green</label>
<input type="range" min="0" max="255" value="255"  class="slider" id="fontGreen">

<label for="blue">Blue</label>
<input type="range" min="0" max="255" value="255" class="slider" id="fontBlue">
<p id="colorMessage"></p>
</div>    
</article>

CSS

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {font-family: 'Work Sans', sans-serif; }

.slide {
 animation: slide 9s linear 1s infinite alternate;
}

@keyframes slide {
  0%   {margin-left:0px;}
  /* 25%  {margin-left:0px;} */
  /* 75%  {margin-left:150px;} */
  100% {margin-left:180px;}
}

article {
    margin: 20px 5px;
    box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 9px;
}
.container {
display: grid;
}

h2 {
  font-weight: 400;
  text-shadow: 1px 1px 1px #0f0f0f2e;
}

.one {
  font-weight: 100;
}
.two {
  font-weight: 200;
}
.three {
  font-weight: 300;
}
.four {
  font-weight: 400;
}

JavaScript

function changeColor() {
  let red = document.getElementById('red').value;
  let green = document.getElementById('green').value;
  let blue = document.getElementById('blue').value; 
  let color = `rgb(${red},${green},${blue})`;
  console.log(color);
  document.body.style.backgroundColor = color;
  document.getElementById('colorOutput').innerHTML = `${color}`;

}
changeColor()
document.getElementById('red').addEventListener("input",changeColor);
document.getElementById('green').addEventListener('input',changeColor);
document.getElementById('blue').addEventListener('input',changeColor);

function fontColor() {
  let red = document.getElementById('fontRed').value;
  let green = document.getElementById('fontGreen').value;
  let blue = document.getElementById('fontBlue').value; 
  let color = `rgb(${red},${green},${blue})`;
  console.log(color); 
  document.body.style.color = color;
  document.getElementById('font').innerHTML = `${color}`;
 
}
fontColor()

document.getElementById('fontRed').addEventListener("input",fontColor);
document.getElementById('fontGreen').addEventListener('input',fontColor);
document.getElementById('fontBlue').addEventListener('input',fontColor);