Created
July 17, 2024 02:03
-
-
Save valexandersaulys/c673644385e11b054c6f7471b6c7f3c4 to your computer and use it in GitHub Desktop.
Dead Simple Multi-Step Form with Animate.css effects in Go Language HTML Template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{define "all"}} | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <title>Document</title> | |
| <link href="/static/output.css" rel="stylesheet"/> | |
| <meta content="width=device-width, initial-scale=1" name="viewport"> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" | |
| /> | |
| </head> | |
| <body> | |
| <div class="mx-auto max-w-5xl"> | |
| <h1 class="font-bold text-4xl p-8 bg-green-100"> | |
| Hello from {{.ProjectName}}! | |
| </h1> | |
| {{template "thing" .}} | |
| </div> | |
| </body> | |
| <script type="text/javascript"> | |
| document.addEventListener("DOMContentLoaded", () => { | |
| const step1Div = document.querySelector("#step-1"); | |
| const step2Div = document.querySelector("#step-2"); | |
| const nextButton = document.querySelector("button#next"); | |
| nextButton.addEventListener("mouseup", (e) => { | |
| e.preventDefault(); | |
| console.log("mouse up"); | |
| step1Div.classList.toggle("hidden"); | |
| step2Div.classList.toggle("hidden"); | |
| if(e.target.textContent.trim() == "Next") { | |
| // we're on step-1 going to step-2 | |
| e.target.textContent = "Back" | |
| step1Div.classList.remove("animate__bounceInRight"); | |
| step1Div.classList.add("animate__bounceInLeft"); | |
| step2Div.classList.remove("animate__bounceInRight"); | |
| step2Div.classList.add("animate__bounceInLeft"); | |
| } else { | |
| // we're on step-2 going to step-1 | |
| e.target.textContent = "Next"; | |
| step1Div.classList.add("animate__bounceInRight"); | |
| step1Div.classList.remove("animate__bounceInLeft"); | |
| step2Div.classList.add("animate__bounceInRight"); | |
| step2Div.classList.remove("animate__bounceInLeft"); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </html> | |
| {{end}} | |
| {{define "thing"}} | |
| <div class="bg-red-100 p-16"> | |
| <div> | |
| <form method="" action=""> | |
| <div id="step-1" class="animate__animated"> | |
| <div class=""> | |
| <label for="">asdfasdf</label> | |
| <input name="a" type="text" value="" placeholder="AAAAA" /> | |
| </div> | |
| <div> | |
| <label for="">fdasfs</label> | |
| <input name="b" type="text" value="" placeholder="BBBBB" /> | |
| </div> | |
| </div> | |
| <div id="step-2" class="hidden animate__animated"> | |
| <div> | |
| <label for="">asdf</label> | |
| <input name="c" type="text" value="" placeholder="CCCC" /> | |
| </div> | |
| <div> | |
| <label for="">asdf</label> | |
| <input name="d" type="text" value="" placeholder="DDDD" /> | |
| </div> | |
| <button type="submit" class="bg-orange-700 text-white p-4"> | |
| Submit | |
| </button> | |
| </div> | |
| <div> | |
| <button id="next" type="button" class="p-4 bg-orange-100"> | |
| Next | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| {{end}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment