Background Color Demo

See how any background color looks!

by SpeedoThreeSixty

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="See how any background color looks!">
    <title>Background Color Demo</title>
  </head>
  <body>
    <form id="demo">
      <input id="bg" type="text" value="red">
      <button type="submit">Update Background Color</button>
    </form>
    <p>We love cats!</p>
    <a href="#">Here's a link back here</a>
    <a href="https://example.com">Hello</a>
    <br>
    <textarea rows="8" cols="24">Never gonna give you up,
Never gonna let you down,
Never gonna run around,
And desert you!
Never gonna make you cry,
Never gonna say goodbye,
Never gonna tell a lie,
And hurt you!</textarea>
    <br>
    <textarea rows="1" cols="18" readonly>Speedo is the best!</textarea>
    <br>
    <iframe src="https://a-minecraft-struggle.fandom.com/wiki/Speedo" width="1250" height="450">
      R.I.P.
    </iframe>
  </body>
</html>

SCSS

*, *::before, *::after {
  box-sizing: border-box;
  margin: 10px;
}
body {
  font-family: system-ui, Arial, Helvetica, sans-serif;
}
a {
  margin-right: 20px;
}

JavaScript

document.getElementById("demo").addEventListener("submit", e => {
	e.preventDefault()
  document.body.style.backgroundColor = document.getElementById("bg").value.toString()
})