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 35113b2cc6
commit 7bf50ecf43
3 changed files with 71 additions and 21 deletions
Show Stats Download Patch File Download Diff File

53
app.css
Unescape View File

@ -0,0 +1,53 @@
html, body {
height: 100%;
}
body {
font-size: 10vw;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
}
body.running {
background: lightgreen;
}
main {
width:75%;
}
button {
font-size:0.5em;
padding:1em;
border-radius: 0.5em;
color:white;
}
h1 {
text-align: center;
}
.btn-primary {
background: blue;
}
.btn-primary:disabled {
background: lightblue;
}
.btn-secondary {
background: grey;
}
.btn-secondary:disabled {
background: darkgrey;
}
.btn-danger {
background: red;
}
.btn-danger:disabled {
background: lightpink;
}

28
app.js
Unescape View File

@ -1,9 +1,7 @@
/* TODOs /* TODOs
- no hours, just mins/secs
- enable reset on load if there is saved time from before - enable reset on load if there is saved time from before
- style
- green background for when timer is running
- display previous entries - display previous entries
- display how many 5/10min blocks have passed
- set alarm for after certain times have passed - set alarm for after certain times have passed
- pause when not playing with audio api - pause when not playing with audio api
- deploy - deploy
@ -21,7 +19,6 @@ if(previousSessionAccumulatedSeconds){
savedPreviousSeconds = previousSessionAccumulatedSeconds savedPreviousSeconds = previousSessionAccumulatedSeconds
} }
const padDigits = (value) => { const padDigits = (value) => {
if(value < 10){ if(value < 10){
return '0'+value; return '0'+value;
@ -31,10 +28,9 @@ const padDigits = (value) => {
} }
const formatSeconds = (total) => { const formatSeconds = (total) => {
const hours = Math.floor(total/60/60); const minutes = Math.floor( total / 60 );
const minutes = Math.floor( (total - (hours*60*60)) / 60 ); const seconds = total - minutes*60;
const seconds = total - minutes*60 - hours * 60 * 60; return `${minutes}:${padDigits(seconds)}`;
return `${padDigits(hours)}:${padDigits(minutes)}:${padDigits(seconds)}`;
} }
const getAccumulatedSeconds = (newerTime, olderTime) => { const getAccumulatedSeconds = (newerTime, olderTime) => {
@ -55,6 +51,7 @@ document.querySelector('h1').innerHTML = formatSeconds(savedPreviousSeconds);
document.querySelector('.btn-primary').addEventListener('click', (event) => { document.querySelector('.btn-primary').addEventListener('click', (event) => {
startTime = Date.now(); startTime = Date.now();
running = true; running = true;
document.querySelector('body').classList.add('running');
document.querySelector('.btn-primary').disabled=true; document.querySelector('.btn-primary').disabled=true;
document.querySelector('.btn-secondary').disabled=false; document.querySelector('.btn-secondary').disabled=false;
document.querySelector('.btn-danger').disabled=true; document.querySelector('.btn-danger').disabled=true;
@ -64,6 +61,7 @@ document.querySelector('.btn-primary').addEventListener('click', (event) => {
document.querySelector('.btn-secondary').addEventListener('click', (event) => { document.querySelector('.btn-secondary').addEventListener('click', (event) => {
updateSavedPreviousSeconds(); updateSavedPreviousSeconds();
running = false; running = false;
document.querySelector('body').classList.remove('running');
document.querySelector('.btn-primary').disabled=false; document.querySelector('.btn-primary').disabled=false;
document.querySelector('.btn-secondary').disabled=true; document.querySelector('.btn-secondary').disabled=true;
document.querySelector('.btn-danger').disabled=false; document.querySelector('.btn-danger').disabled=false;
@ -76,10 +74,10 @@ document.querySelector('.btn-danger').addEventListener('click', (event) => {
document.querySelector('.btn-danger').disabled=true; document.querySelector('.btn-danger').disabled=true;
}) })
window.onbeforeunload = function(){ // window.onbeforeunload = function(){
if(running){ // if(running){
updateSavedPreviousSeconds(); // updateSavedPreviousSeconds();
} // }
window.localStorage.setItem('savedPreviousSeconds', savedPreviousSeconds); // window.localStorage.setItem('savedPreviousSeconds', savedPreviousSeconds);
return 'Good bye'; // return 'Good bye';
} // }

11
index.html
Unescape View File

@ -5,15 +5,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Practice Timer</title> <title>Practice Timer</title>
<link rel="stylesheet" href="app.css">
</head> </head>
<body> <body>
<main class="container-fluid"> <main>
<button type="button" class="btn btn-primary">Start</button> <button type="button" class="btn-primary">Start</button>
<button type="button" disabled class="btn btn-secondary">Stop</button> <button type="button" disabled class="btn-secondary">Stop</button>
<button type="button" disabled class="btn btn-danger">Reset</button> <button type="button" disabled class="btn-danger">Reset</button>
<h1></h1> <h1></h1>
</main> </main>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>

Write Preview
Loading…
Cancel
Save