mahuntington
/
timer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styling

Browse Source
master
Matt Huntington 6 years ago
parent 1d6c5a10a5
commit 7d5ffe57f5
3 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File

31
app.css
Unescape View File

@ -18,36 +18,53 @@ main {
width:75%; width:75%;
} }
main section {
display: flex;
justify-content: center;
}
button { button {
font-size:0.5em; font-size:0.5em;
padding:1em; padding:1em;
margin:0.1em;
border-radius: 0.5em; border-radius: 0.5em;
color:white; color:white;
width:30%;
box-sizing: border-box;
} }
h1 { button:not(:disabled){
cursor: pointer;
}
code {
margin: 0;
display: block;
text-align: center; text-align: center;
font-family: Arial;
font-weight: bold;
font-size: 2em;
} }
.btn-primary { #start {
background: blue; background: blue;
} }
.btn-primary:disabled { #start:disabled {
background: lightblue; background: lightblue;
} }
.btn-secondary { #stop {
background: grey; background: grey;
} }
.btn-secondary:disabled { #stop:disabled {
background: darkgrey; background: darkgrey;
} }
.btn-danger { #reset {
background: red; background: red;
} }
.btn-danger:disabled { #reset:disabled {
background: lightpink; background: lightpink;
} }

26
app.js
Unescape View File

@ -39,39 +39,39 @@ const getAccumulatedSeconds = (newerTime, olderTime) => {
const displayTime = () => { const displayTime = () => {
const totalSeconds = getAccumulatedSeconds(Date.now(),startTime) + savedPreviousSeconds; const totalSeconds = getAccumulatedSeconds(Date.now(),startTime) + savedPreviousSeconds;
document.querySelector('h1').innerHTML = formatSeconds(totalSeconds); document.querySelector('code').innerHTML = formatSeconds(totalSeconds);
} }
const updateSavedPreviousSeconds = () => { const updateSavedPreviousSeconds = () => {
savedPreviousSeconds += getAccumulatedSeconds(Date.now(), startTime); savedPreviousSeconds += getAccumulatedSeconds(Date.now(), startTime);
} }
document.querySelector('h1').innerHTML = formatSeconds(savedPreviousSeconds); document.querySelector('code').innerHTML = formatSeconds(savedPreviousSeconds);
document.querySelector('.btn-primary').addEventListener('click', (event) => { document.querySelector('#start').addEventListener('click', (event) => {
startTime = Date.now(); startTime = Date.now();
running = true; running = true;
document.querySelector('body').classList.add('running'); document.querySelector('body').classList.add('running');
document.querySelector('.btn-primary').disabled=true; document.querySelector('#start').disabled=true;
document.querySelector('.btn-secondary').disabled=false; document.querySelector('#stop').disabled=false;
document.querySelector('.btn-danger').disabled=true; document.querySelector('#reset').disabled=true;
windowInterval = window.setInterval(displayTime,1000) windowInterval = window.setInterval(displayTime,1000)
}) })
document.querySelector('.btn-secondary').addEventListener('click', (event) => { document.querySelector('#stop').addEventListener('click', (event) => {
updateSavedPreviousSeconds(); updateSavedPreviousSeconds();
running = false; running = false;
document.querySelector('body').classList.remove('running'); document.querySelector('body').classList.remove('running');
document.querySelector('.btn-primary').disabled=false; document.querySelector('#start').disabled=false;
document.querySelector('.btn-secondary').disabled=true; document.querySelector('#stop').disabled=true;
document.querySelector('.btn-danger').disabled=false; document.querySelector('#reset').disabled=false;
window.clearInterval(windowInterval) window.clearInterval(windowInterval)
}) })
document.querySelector('.btn-danger').addEventListener('click', (event) => { document.querySelector('#reset').addEventListener('click', (event) => {
savedPreviousSeconds = 0; savedPreviousSeconds = 0;
document.querySelector('h1').innerHTML = formatSeconds(0); document.querySelector('code').innerHTML = formatSeconds(0);
document.querySelector('.btn-danger').disabled=true; document.querySelector('#reset').disabled=true;
}) })
window.onbeforeunload = function(){ window.onbeforeunload = function(){

10
index.html
Unescape View File

@ -10,10 +10,12 @@
</head> </head>
<body> <body>
<main> <main>
<button type="button" class="btn-primary">Start</button> <section>
<button type="button" disabled class="btn-secondary">Stop</button> <button type="button" id="start">Start</button>
<button type="button" disabled class="btn-danger">Reset</button> <button type="button" disabled id="stop">Stop</button>
<h1></h1> <button type="button" disabled id="reset">Reset</button>
</section>
<code></code>
</main> </main>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
</body> </body>

Write Preview
Loading…
Cancel
Save