A Pen by Jackromo34 on CodePen.
Created
November 21, 2022 10:32
-
-
Save jackromo888/d8f04a5e8602a0bfb5f8377e4c6e6701 to your computer and use it in GitHub Desktop.
hello-world
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Hello World!</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js"></script> | |
| <!-- TODO: Step 1: Include Fortmatic SDK Script --> | |
| <!-- End Step 1 --> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img alt="logo" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAwSDIyLjVIMzBWNy41MTA3NEgyMi41SDE1SDcuNVYxNS4wMjJWMTUuNTAzNFYyMi40ODkzVjIyLjUzMjdWMzBIMFYyMi41MzI3VjIyLjQ4OTNWMTUuNTAzNFYxNS4wMjJWNy41MTA3NFYwSDcuNUgxNVpNMjIuNSAyMi40ODg4SDE1LjA0M1YxNS4wMjE1SDI5Ljk5NDFWMjIuNzUxNUMyOS45OTQxIDI0LjY3MjkgMjkuMjMyNCAyNi41MTYxIDI3Ljg3NyAyNy44NzVDMjYuNTE5NSAyOS4yMzQ0IDI0LjY3OTcgMjkuOTk4NSAyMi43NjE3IDI5Ljk5OTVIMjIuNVYyMi40ODg4WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4xIi8+Cjwvc3ZnPgo=" | |
| /> | |
| <h1>Spare some change in test ether ❤️</h1> | |
| <div class="divider"></div> | |
| <h2>Amount to send in test ether</h2> | |
| <input id="input-amount" type="number" name="amount" /> | |
| <h2>Destination Ethereum address</h2> | |
| <textarea id="input-address" name="address" cols="21" rows="2" maxlength="42"></textarea> | |
| <input id="btn-send" type="button" value="Send Transaction" /> | |
| </div> | |
| </body> | |
| </html> |
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
| // TODO: Step 2: Setup Developer API Key | |
| // End Step 2 | |
| let handleSendTransaction = function(amount, address) { | |
| // TODO: Step 3: Send Transaction Implementation | |
| // End Step 3 | |
| }; | |
| // Initialize elements and events (no need to change) | |
| const defaultAmount = 0.01; | |
| const defaultAddress = '0x22b05d73097c0a2440d29af61db4b4ed3803e55e'; | |
| const inputAmount = document.getElementById('input-amount'); | |
| inputAmount.setAttribute('placeholder', defaultAmount); | |
| inputAmount.setAttribute('value', defaultAmount); | |
| const inputAddress = document.getElementById('input-address'); | |
| inputAddress.setAttribute('placeholder', defaultAddress); | |
| inputAddress.innerText = defaultAddress; | |
| document.getElementById('btn-send').onclick = function() { | |
| let amount = inputAmount.value ? inputAmount.value : defaultAmount; | |
| let address = inputAddress.value ? inputAddress.value : defaultAddress; | |
| handleSendTransaction(amount, address); | |
| }; |
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
| html, | |
| body { | |
| background-color: #211F2B; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-align: center; | |
| } | |
| h1, | |
| h2 { | |
| margin: 0; | |
| } | |
| h1 { | |
| color: white; | |
| font-size: 16px; | |
| font-weight: 500; | |
| margin-top: 10px; | |
| } | |
| h2 { | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 10px; | |
| } | |
| form { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| } | |
| .divider { | |
| width: 100px; | |
| height: 3px; | |
| margin: 20px auto; | |
| background-color: #617BFF; | |
| } | |
| input, | |
| textarea { | |
| position: relative; | |
| text-align: center; | |
| display: block; | |
| margin: 0; | |
| border-radius: 7px; | |
| border: 2px white solid; | |
| background-color: white; | |
| padding: 10px 20px; | |
| width: 100%; | |
| color: #1E1C29; | |
| margin-bottom: 20px; | |
| box-sizing: border-box; | |
| transition: all 0.2s; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| outline: none; | |
| border: 2px #617BFF solid; | |
| } | |
| .container { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| width: 300px; | |
| margin: 0 auto; | |
| border-radius: 14px; | |
| padding: 30px 30px 20px 30px; | |
| margin-top: 50px; | |
| } | |
| input[name="amount"] { | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| input[type=number]::-webkit-inner-spin-button, | |
| input[type=number]::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| #btn-send { | |
| display: block; | |
| text-decoration: none; | |
| border-radius: 7px; | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| font-size: 20px; | |
| font-weight: 600; | |
| border: 2px #617BFF solid; | |
| color: white; | |
| background-color: #617BFF; | |
| padding: 15px; | |
| transition: all 0.2s; | |
| } | |
| #btn-send:hover { | |
| border: 2px #8095FF solid; | |
| background-color: #8095FF; | |
| } | |
| textarea[name="address"] { | |
| resize: none; | |
| font-size: 16px; | |
| font-weight: 600; | |
| padding: 10px 2.7rem; | |
| font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment