VCHS Computer Science: Balloon

Balloon

Color

Radius (cm)

Hex Code:

Hello, World!

Blueberry Pie

Source Code

<style>
  .round {
    display: table-cell;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    color: white;
  }
  #ball {
    background: black;
    width: 2cm;
    height: 2cm;
    font-size: 1em;
    font-family: courier;
  }
  .blueberry {
    background: blue;
  }
  #pie {
    width: 3cm;
    height: 3cm;
    border-style:solid;
    border-width:5px;
    border-color:brown;
  }
</style>

<p>
  <label>Color</label>
  <input id="color-input" type="color">
</p>
<p>
  <label>Radius (cm)</label>
  <input id="radius-input" type="range" value="1" min="1" max="10">
</p>
<p>
  <label>Hex Code:</label>
  <span id="hex-code"></span>
</p>
<p>
  </p><div id="ball" class="round">Hello, World!</div>
<p></p>
<p>
  </p><div id="pie" class="blueberry round">Blueberry Pie</div>
<p></p>

<script>
  const colorInput = document.getElementById("color-input");
  const radiusInput = document.getElementById("radius-input");
  const hexCode = document.getElementById("hex-code");
  const ball = document.getElementById("ball");
  
  colorInput.addEventListener("change", changeColor);
  radiusInput.addEventListener("change", changeRadius);
  
  function changeColor() {
    const color = colorInput.value;
    hexCode.innerHTML = color;
    ball.style.background = color;
  }
  
  function changeRadius() {
    const radius = parseInt(radiusInput.value);
    const diam = radius * 2;
    ball.style.width = diam + "cm";
    ball.style.height = diam + "cm";
    ball.style.fontSize = radius + "em";
  }
</script>