styling

6 years ago · 7bf50ecf43
parent 35113b2cc6
commit 7bf50ecf43
3 changed files with 71 additions and 21 deletions
--- a/app.css
+++ b/app.css
@ -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;
+}
--- a/app.js
+++ b/app.js
@ -1,9 +1,7 @@
 /* TODOs
- no hours, just mins/secs
 - enable reset on load if there is saved time from before
- style
- green background for when timer is running
 - display previous entries
+- display how many 5/10min blocks have passed
 - set alarm for after certain times have passed
 - pause when not playing with audio api
 - deploy
@ -21,7 +19,6 @@ if(previousSessionAccumulatedSeconds){
    savedPreviousSeconds = previousSessionAccumulatedSeconds
 }

-
 const padDigits = (value) => {
    if(value < 10){
        return '0'+value;
@ -31,10 +28,9 @@ const padDigits = (value) => {
 }

 const formatSeconds = (total) => {
-    const hours = Math.floor(total/60/60);
-    const minutes = Math.floor( (total - (hours*60*60)) / 60 );
-    const seconds = total - minutes*60 - hours * 60 * 60;
-    return `${padDigits(hours)}:${padDigits(minutes)}:${padDigits(seconds)}`;
+    const minutes = Math.floor( total / 60 );
+    const seconds = total - minutes*60;
+    return `${minutes}:${padDigits(seconds)}`;
 }

 const getAccumulatedSeconds = (newerTime, olderTime) => {
@ -55,6 +51,7 @@ document.querySelector('h1').innerHTML = formatSeconds(savedPreviousSeconds);
 document.querySelector('.btn-primary').addEventListener('click', (event) => {
    startTime = Date.now();
    running = true;
+    document.querySelector('body').classList.add('running');
    document.querySelector('.btn-primary').disabled=true;
    document.querySelector('.btn-secondary').disabled=false;
    document.querySelector('.btn-danger').disabled=true;
@ -64,6 +61,7 @@ document.querySelector('.btn-primary').addEventListener('click', (event) => {
 document.querySelector('.btn-secondary').addEventListener('click', (event) => {
    updateSavedPreviousSeconds();
    running = false;
+    document.querySelector('body').classList.remove('running');
    document.querySelector('.btn-primary').disabled=false;
    document.querySelector('.btn-secondary').disabled=true;
    document.querySelector('.btn-danger').disabled=false;
@ -76,10 +74,10 @@ document.querySelector('.btn-danger').addEventListener('click', (event) => {
    document.querySelector('.btn-danger').disabled=true;
 })

-window.onbeforeunload = function(){
-    if(running){
-        updateSavedPreviousSeconds();
-    }
-    window.localStorage.setItem('savedPreviousSeconds', savedPreviousSeconds);
-    return 'Good bye';
-}
+// window.onbeforeunload = function(){
+//     if(running){
+//         updateSavedPreviousSeconds();
+//     }
+//     window.localStorage.setItem('savedPreviousSeconds', savedPreviousSeconds);
+//     return 'Good bye';
+// }
--- a/index.html
+++ b/index.html
@ -5,15 +5,14 @@
        <meta charset="utf-8">
        <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>
+        <link rel="stylesheet" href="app.css">
    </head>
    <body>
-        <main class="container-fluid">
-            <button type="button" class="btn btn-primary">Start</button>
-            <button type="button" disabled class="btn btn-secondary">Stop</button>
-            <button type="button" disabled class="btn btn-danger">Reset</button>
+        <main>
+            <button type="button" class="btn-primary">Start</button>
+            <button type="button" disabled class="btn-secondary">Stop</button>
+            <button type="button" disabled class="btn-danger">Reset</button>
            <h1></h1>
        </main>
        <script src="app.js" charset="utf-8"></script>