Differences

This shows you the differences between two versions of the page.

Link to this comparison view

avatar [2019/07/17 14:09] (current)
Alan Shea created
Line 1: Line 1:
 +<​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>​
avatar.txt · Last modified: 2019/07/17 14:09 by Alan Shea
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Recent changes RSS feed Donate Powered by PHP Driven by DokuWiki