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):
<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>
<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