Skip to content

Instantly share code, notes, and snippets.

@bigdot123456

bigdot123456/hello-world.markdown

Created January 27, 2020 05:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bigdot123456/86b03cfa2dabfda7f23659e90c54d7bf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bigdot123456/86b03cfa2dabfda7f23659e90c54d7bf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bigdot123456 revised this gist Jan 27, 2020. No changes.
  2. bigdot123456 created this gist Jan 27, 2020.
    7 changes: 7 additions & 0 deletions hello-world.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    hello-world
    -----------


    A [Pen](https://codepen.io/fortmatic/pen/RezomG) by [Fortmatic](https://codepen.io/fortmatic) on [CodePen](https://codepen.io).

    [License](https://codepen.io/fortmatic/pen/RezomG/license).
    28 changes: 28 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <!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>
    26 changes: 26 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    // 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);
    };
    111 changes: 111 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,111 @@
    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;
    }