var cost = 9.99;
var subtotal;
document.querySelector("#button-1").onclick = click
//console.log(document);
function click(){
var i = document.querySelector("#input-1");
var v = i.value;
console.log(typeof(v));
var subtotal = cost*v; //coercion
var total = addTax(subtotal);
total = total.toFixed(2);
var message = "Your total for "+v+" shirts is $"+total;
document.querySelector("#paragraph-1").innerHTML = message;
//console.log("button has been clicked", v, subtotal, total);
if(v==1){
var message2 = "Your total for "+v+" shirt is $"+total;
console.log(message2);
document.querySelector("#paragraph-1").innerHTML = message2
}
else{
console.log(message);
}
}
function addTax(num){
//var taxRate = 0.13;
//var taxAmount = num*taxRate;
//var total = num+taxAmount;
var tax = 1.13;
var total = num*tax;
//console.log(total);
return total
}
h1{
color: antiquewhite;
text-align: center;
font-family: 'Georgia', Times New Roman, Times, serif;
}
#container{
width: 70%;
margin: auto;
text-align: center;
position: relative;
}
#paragraph-1 {
position: absolute;
bottom: -2.5rem;
left: 50%;
transform: translateX(-50%);
}
body{
background-color: rgb(95, 147, 119);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: antiquewhite;
}
button{
background-color:rgb(95, 147, 119);
color: antiquewhite;
border-color: antiquewhite;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
cursor:pointer;
}
input{
background-color: rgb(95, 147, 119);
color:antiquewhite;
border-color:antiquewhite;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
img{
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "m3.css">
</head>
<body>
<div id = "container">
<h1 id= "mainHeading">module 3: functions</h1>
<h2>How many shirts would you like to buy?</h2>
<button id="button-1">submit</button>
<input id="input-1" type="number">
<p id="paragraph-1"></p>
</div>
<br clear="top">
<p><img src = https://media3.giphy.com/media/3o6Mb7jQurR1B7mM5G/giphy.gif>
</p>
<script src="m3.js"></script>
</body>
</html>