Dad Joke Generator

This is an old revision of the document!

  <title>Slider with Rotating Arrow on Grid</title>
  <style>
      body {
          text-align: center;
          font-family: Arial, sans-serif;
      }
      
      #grid-container {
          position: relative;
          width: 200px;
          height: 200px;
          background-image: linear-gradient(to right, lightgray 1px, transparent 1px),
                            linear-gradient(to bottom, lightgray 1px, transparent 1px);
          background-size: 20px 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 20px auto;
      }

      #arrow {
          position: absolute;
          width: 0;
          height: 0;
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
          border-bottom: 60px solid black;
          transform-origin: bottom center;
          transform: rotate(1deg);
          transition: transform 0.1s ease-in-out;
      }
  </style>
  <script>
      function updateValue(val) {
          document.getElementById("sliderValue").innerText = val;
          document.getElementById("arrow").style.transform = `rotate(${val}deg)`;
      }
  </script>

</head> <body>

  <label for="slider">Select an angle (1-90 degrees):</label>
  <input type="range" id="slider" min="1" max="90" step="1" value="1" oninput="updateValue(this.value)">
  <span id="sliderValue">1</span>°

  <div id="grid-container">
      <div id="arrow"></div>
  </div>

</body> </html>