gather actual input in the form, support keyboard shortcut for submit

2021-10-18 04:29:31 +00:00
parent de2b83c144
commit 59c6152380
1 changed files with 93 additions and 17 deletions
--- a/index.html
+++ b/index.html
@@ -34,6 +34,14 @@
        <meta property="twitter:image"
              content="https://s3.amazonaws.com/cdn.buildspace.so/courses/ethereum-smart-contracts/metadata.png">
        <style>
+
+            #confirm {
+                color: red; 
+                display: none; 
+                text-align: center;
+                margin-top: 1em;
+            }
+
            .mainContainer {
                display: flex;
                justify-content: center;
@@ -48,6 +56,19 @@
                max-width: 600px;
            }

+            form {
+                margin: 0 auto;
+                padding: 2em 0;
+            }
+
+            textarea {
+                margin: 0 3em;
+                resize: none;
+                font-size: 1em;
+                border: none;
+                outline: none;
+            }
+
            .header {
                text-align: center;
                font-size: 32px;
@@ -60,13 +81,14 @@
                margin-top: 16px;
            }

-            .waveButton {
+            .whistleButton {
                cursor: pointer;
-                margin-top: 16px;
+                text-align: center;
+                margin: 0 auto;
                padding: 8px;
+                width: 200px;
                border: 0;
-                border-radius: 5px;
-
+                background-color: yellow;
            }

            body {
@@ -88,6 +110,60 @@

    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
-        <script src="js/scripts.js"></script>
+
+
+        <div class="mainContainer">
+
+            <div class="dataContainer">
+                <div class="header">
+                    👋 Hey there!
+                </div>
+
+                <div class="bio">
+                    Hey, I'm Zev and this is a place to put sensitive whistleblower disclosures (not really! it's a proof of concept) into the ethereum blockchain.
+                </div>
+
+                <form action="javascript:;" onsubmit="whistle()" id="whistleForm">
+                    <label for=disclosure>
+                        Sensitive Disclosure
+                    </label>
+                </form>
+
+                <textarea autofocus rows="5" cols="30" name=disclosure></textarea>
+
+                <button type=submit form="whistleForm" value="Disclose" class="whistleButton">
+                    Disclose
+                </button>
+                <div id=confirm>Disclosure sent!</div>
+            </div>
+        </div>
+        <script>
+            const box = document.getElementsByName("disclosure")[0]
+
+            const whistle = () => {
+                const disclosure = box.value
+                console.log(disclosure)
+                box.value = ""
+                showConfirm()
+            }
+
+            const confirm = document.getElementById("confirm")
+
+            const showConfirm = () => {
+                confirm.style.display = "block"
+                console.log('displaying confirm')
+                setTimeout(() => {
+                    confirm.style.display = "none"
+                    console.log('hiding confirm')
+                }, 5000)
+            }
+
+            document.addEventListener('keydown', (event) => {
+                if(event.ctrlKey && event.key == "Enter" || event.metaKey && event.key == "Enter") {
+                    whistle()
+                    box.blur()
+            }
+});
+        </script>
    </body>
 </html>