//Data
var roughInTotal = 0;
//Text
var roughInText= document.getElementById("rough-in-total");
//UI Objects
var roughInButton = document.getElementById("rough-btn");
var roughInBar = document.getElementById("rough-in-bar");
roughInButton.addEventListener("click",function(){
addHour(1, roughInText);
});
//Setting everything on our website
roughInText.textContent = roughInTotal + " hours";
function addHour(addAmount, textToChange) {
//Add the amount of hours worked...
roughInTotal += addAmount;
//Update the display of our text
textToChange.textContent = roughInTotal + " hours worked";
//Debug the amount of hours we have
var widthElem= document.getElementById('rough-in-bar').offsetWidth;
if(widthElem<document.getElementById('rough-in-progress').offsetWidth-20)
document.getElementById('rough-in-bar').style.width=widthElem + 100 + 'px'
}
<style>
body{
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
}
h1 {
text-align: center;
font-weight: 100;
font-size: 270%;
color:white;
margin: auto;
height: 50px;
padding-top:10px;
}
div {
margin: 5% 5%;
background-color: rgb(250, 233, 249);
padding:20px;
box-shadow: 0px 4px 4px rgba(44, 62, 80 ,0.15);
}
h4{
text-align: center;
}
h2{
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding: 0px;
margin:auto;
}
.item p{
width: 100%;
height: 10%;
}
#rough-in-total{
background-color: rgb(197, 197, 197, 0.6);
padding: 5px;
box-shadow: 0px 4px 4px rgba(2, 2 , 2, 0.10);
}
p{
text-align: center;
font-size: 20px;
}
header p {
margin-top: 0;
color: white;
font-family: 'Roboto Condensed', sans-serif;
font-size: 0.8em;
font-weight: 100;
text-transform: uppercase;
}
button{
text-decoration: none;
font-size: 100%;
padding: .5em 1em;
color: rgba(0, 0, 0, 0.8);
border: transparent;
background-color: rgb(201, 199, 199);
border-radius: 2px;
margin-left: 45%;
box-shadow: 0px 4px 4px rgba(2, 2 , 2, 0.10);
}
button:hover{
background-color: rgb(90, 90, 90);
color: white;
}
header{
background-color: rgb(109, 109, 146);
height: 100px;
}
#rough-in-progress{
width:100%;
margin: auto;
margin-bottom: 20px;
height: 30px;
padding: 0;
background-color: gray;
}
#rough-in-bar{
width: 1%;
height: 30px;
background-color: rgb(255, 152, 241);
margin: auto;
padding: 0;
box-shadow: none;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300" rel="stylesheet">
<title>Breakwell Electrical</title>
</head>
<body>
<header>
<h1> Welcome Keanu Barnard</h1>
<p>This will include how many hours you have worked at each job</p>
</header>
<section>
<div class ="item">
<h2><span>Rough In's</span></h2>
<p>This will be an account for how many hours you have spent working at rough ins with break well. Including marking out
,roughing in cable etc..
</p>
<!--Insert our Horizontal Graph Here that will increase when we add hours to it for now we just use number-->
<p id ="rough-in-total"> 123 hours</p>
<div id ="rough-in-progress">
<div id="rough-in-bar">
</div>
</div>
<button id = "rough-btn">Add hour</button>
</div>
</section>