03 - CSS Variables

03 - CSS VariablesBuild 30 things in 30 days using Vanilla JShttps://javascript30.com What is a 03 - css variables How do you make a 03 - css variables? This script and codes were developed by Dave Alger on 15 October 2021, Friday.

How do I make an 03 - css variables?
  1. 03 - CSS Variables Previews
  2. 03 - CSS Variables HTML Codes
  3. 03 - CSS Variables CSS Codes
  4. 03 - CSS Variables JS Codes
03 - CSS Variables Previews

03 - CSS Variables HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>03 - CSS Variables</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="page">

<div class="left-side">
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
  <label for="spacing">Spacing</label>
  <input type="range" name="spacing" min="0" max="10" value="5" data-sizing="vh">
  
  <br/><br/>

  <label for="blur">Blur</label>
  <input type="range" name="blur" min="0" max="10" value="5" data-sizing="vh">
  
  <br/><br/>

  <label for="base" class="shift">Color</label>
  <input type="color" name="base" value="#368DDA" class="shift">
</div>
</div>
  
<div class="right-side">
<img src="https://raw.githubusercontent.com/run-time/JavaScript30/7139f9058c0a6123491449a27c4f93e4948f33a2/03%20-%20CSS%20Variables/waldo.png" />
</div>

</div>
  
    <script src="js/index.js"></script>

</body>
</html>

03 - CSS Variables CSS Codes

:root {
  --iammenasco_blue: #368DDA;
  --dave_alger_gray: #DADADA;
  --base: #368DDA;
  --spacing: 5vh;
  --blur: 5vh;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #1d1f20;
  background-image:
    radial-gradient(
      circle at top center,
      #2d2f30,
      #1d1f20
    );
  text-align: center;
  font-family: sans-serif;
  color: #fff;
}

h2 {
  color: var(--dave_alger_gray);
  font-size: 28px;
  font-weight: normal;
  margin: 0 0 12px 0;
}

.controls {
  display: inline-block;
  text-align: right;
  margin: 0 0 20px 0;
  padding: 10px;
}

label {
  padding: 0 20px;
  line-height: 24px;
  font-size: 18px;
  display: inline-block;
  text-align: right;
  position: relative;
  top: -5px;
}

img {
  width: 45vh;
  height: 70vh;
  min-width: 140px;
  min-height: 210px;
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

input {
  width: 140px;
}

.shift {
  position: relative;
}

label.shift {
  top: 0;
  left: -6px;
}

input.shift {
  width: 134px;
  left: -6px;
}

.left-side,
.right-side {
  display: inline-block;
  padding: 20px;
  vertical-align: top;
}

.left-side {
  text-align: right;
}

.right-side {
  text-align: left;
  cursor: pointer;
}

.page {
  vertical-align: top;
  padding-top: 4vh;
}

03 - CSS Variables JS Codes

    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('input', handleUpdate));

const waldo = document.querySelector('.right-side');

waldo.addEventListener('click', resetValues);

function resetValues() {
  inputs.forEach(input => {
    console.log(input.type);
    if (input.type === 'range') {
      input.value = 0;
      document.documentElement.style.setProperty(`--${input.name}`, '0');
    }
    else {
      input.value = '#368DDA';
      document.documentElement.style.setProperty(`--${input.name}`, '#368DDA');
    }
  });
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.