soojeong-park-ca / play-with-css

Play with CSS

Play with CSS is a website where you can change the CSS styles(spacing, blur, color) of elements displayed on the website.

Table of contents

• Overview
  • Screenshots
  • Demo Link
• About the Project
  • Status
  • Built with
  • Reflection
• Author

Overview

Screenshots

Demo video:

play-with-css-demo.mov

Demo Link

💻 Live Site URL

About the Project

Status

✅ Completed & Deployed

Built with

• HTML
• CSS
• Vanilla JS

Reflection

This was another Vanilla JS project from JavaScript 30 course by Wes Bos.

Some features to highlight in this project are:

• using CSS custom properties to define the CSS styles on the :root so that they can be reused or manipulated in the global scope throughout the whole HTML document.

  :root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
  }

• using element.style.setPropery() method to add inline styles to the selected element and setting new values to the CSS custom properties.

  function changeCSSVal(e) {
    const newVal = `${e.target.value}${
      e.target.dataset.sizing ? e.target.dataset.sizing : ""
    }`;
    document.documentElement.style.setProperty(`--${e.target.name}`, newVal);
  }

Something new I learned from this project is:

• using the input event instead of change event to trigger live updates of the changes made to the input elements. 'change' event triggers update only when the mouse is released by the user.

  allInputs.forEach(input => {
    input.addEventListener("input", changeCSSVal);
  });

Author

Soojeong Park @codingsooj