MetaTek

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

<html>
  <head>
    <meta charset="utf-8">
    <title>GenAvatar Test</title>
  </head>
  <body>
    <input type="text" class="inputText" placeholder="Name" />
    <input type="submit" class="inputSubmit" value="Send" />
    <input type="color" class="inputColor1" value="#ffffff" />
    <input type="color" class="inputColor2" value="#f9a51b" />
    <input type="range" min="16" max="512" class="inputSize" value="128" />
    <hr />

    <img src="" />

    <script>
      // Define UI elements
      let inputText = document.querySelector(".inputText");
      let inputSubmit = document.querySelector(".inputSubmit");
      let inputColor1 = document.querySelector(".inputColor1");
      let inputColor2 = document.querySelector(".inputColor2");
      let inputSize = document.querySelector(".inputSize");
      let image = document.querySelector("img");
      // Generate Action
      inputSubmit.addEventListener('click', function() {
        // Gather options
        var hash = inputText.value;
        var color1 = inputColor1.value.replace('#', '');
        var color2 = inputColor2.value.replace('#', '');
        var size = inputSize.value;
        // Change image src to a preset link with the options as GET parameters
        image.src = "/cgi-bin/generate.php?hash=" + hash + "&color1=" + color1 + "&color2=" + color2 + "&size=" + size;
      });
    </script>
  </body>
</html>

MetaTek

User Tools

Site Tools

Page Tools