First steps with JavaScript



The code we are using in this video is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
            body {
                font-family: "Arial";
                background-color: lightblue;
                text-align: center;
                }
                h1 {
              
                color: blue;
            }
                        #bitcoinprice {
                color: green;
            }
</style>
</head>
<body>
<div align="center">Current bitcoin price is (source Bitfinex):</div><div id="bitcoinprice">10,254</div><br>
<div align="center"><form>Satoshis:<input type="number" name="satoshis" id="satoshis"><br>
<input type="submit" value="Convert" id="submit"><br>
US dollars:<input type="number" name="usdollars" id="usd"></form></div><br>
<h1 align="center">What is the Satoshi to US dollar online converter?</h1>
<p align="center">The idea of this project is to offer you the possibility to get the price of a satoshi directly.</p>
<script>
            // here we are defining a function that we will execute later on.
            function convert() {
            // this line is here for debugging   
            //    console.log('input changed to: ', input.value);
            // let is here to define the variable. output is the variable calculated based on a constant we are defining later on and input.value.           
                let output = (conversion / 100000000) * input.value ;
            // the output will get within the element which has usd as an id
                document.getElementById("usd").value = output;
            }
            // fixed price, later on the api will be added here.
            const conversion = 10254;
            // a variable is named input and it is the value of the field satoshi
            let input = document.getElementById("satoshis");
            // everytime that there is an interaction with the input field it will call convert()
            input.addEventListener('input', convert);
            // when a click is made on submit then we execute the function convert
            document.getElementById("submit").addEventListener("click", convert)
</script>
</body>
</html>
but as previously mentioned this code wasn't perfect in terms of CSS, by chance my colleague Lukas had a look at it and offered a corrected version (in fact you will see that everytime you will pass some code to a developer...she or he will modify more than what was previously planned):
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                text-align: center;
            }

            form .startingline {
                font-weight: bold;
                margin-bottom: 10px;
            }

            label, input, .startingline {
                display: block;
                margin: 5px auto;
            }
        </style>
    </head>
    <body>
        <h1>Converter</h1>
        <form>
            <div class="startingline">Current ...: <span id="price">1234</span> USD</div>
            <label for="satoshis">Satoshis</label>
            <input type="number" id="satoshis">
            <input type="button" value="Convert" id="submit">
            <!-- or:           <button>Convert</button>-->
            <label for="usd">US dollars</label>
            <input type="number" id="usd">
        </form>
        <h2>What?</h2>
        <p>More text...</p>
        <script>
            function convert() {
                console.log('input changed to: ', input.value);
                let output = input.value * conversion;
                document.getElementById("usd").value = output;
            }

            const conversion = 1234;
            let input = document.getElementById("satoshis");
            input.addEventListener('input', convert);
            document.getElementById("submit").addEventListener("click", convert)

        </script>
    </body>
</html>
Now that we know how to make a web page dynamic with JavaScript, let's see how an API can make a web page interactive.
Last modified: Tuesday, 24 September 2019, 8:34 PM