<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
<div class = 'container'>
<div class = 'flex-column'>
<p class = 'info'>Enter a number with decimals.</p>
<input type = 'number' id ='number'>
<button type = 'button' id = 'submit'>Submit</button>
<h2>Your Number</h2>
<div id = 'user-number'> </div>
<h2>3 Decimals</h2>
<div id ='three-decimals'> </div>
<h2>3 Digits</h2>
<div id = 'three-digits'> </div>
</div>
body {
font-family: 'Karla', sans-serif;
background-color: #fcfcfc;
width: 100vw;
}
.container {
background-color: #efefef;
width: 400px;
height: 85vh;
margin: 0 auto;
margin-top: 25px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.40);
box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.40);
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.info {
margin-bottom: 20px;
}
#number {
border: none;
height: 30px;
width: 200px;
background-color: #fff;
border-radius: 5px;
margin-bottom: 10px;
}
input[type='number'] {
font-family: 'Karla', sans-serif;
font-size: 24px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
#submit {
background-color: #7fdbb7;
border: none;
border-radius: 5px;
font-family: 'Karla', sans-serif;
font-size: 20px;
width: 120px;
cursor: pointer;
-webkit-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.40);
box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.40);
transition: 0.1s linear all;
}
#submit:hover {
box-shadow: none;
background-color: #45d19a;
}
#submit:focus {
outline: 0;
}
h2 {
font-size: 20px;
margin-bottom: 0;
}
p {
margin-bottom: 0;
}
//Add event listener for clicked submit.
document.getElementById('submit').addEventListener('click', function(){
//Get the submited value as a string.
var number = document.getElementById('number').value;
//Convert string to a number.
var numberInt = parseFloat(number);
//Surround the numbers in a <p> tag.
var userNumber = '<p>' + numberInt + '</p>';
var threeDec = '<p>' + numberInt.toFixed(3) + '</p>';
var threeDig = '<p>' + numberInt.toPrecision(3) + '</p>';
//Create variables of the divs the numbers will be displayed in.
var usrNmbr = document.getElementById('user-number');
var threeDecimals = document.getElementById('three-decimals');
var threeDigits = document.getElementById('three-digits');
//Push the <p>number</p> variables into the divs using innerHTML.
usrNmbr.innerHTML = userNumber;
threeDecimals.innerHTML = threeDec;
threeDigits.innerHTML = threeDig;
});
Also see: Tab Triggers