styling

6 years ago · 7d5ffe57f5
parent 1d6c5a10a5
commit 7d5ffe57f5
3 changed files with 43 additions and 24 deletions
--- a/app.css
+++ b/app.css
@ -18,36 +18,53 @@ main {
    width:75%;
 }

+main section {
+    display: flex;
+    justify-content: center;
+}
+
 button {
    font-size:0.5em;
    padding:1em;
+    margin:0.1em;
    border-radius: 0.5em;
    color:white;
+    width:30%;
+    box-sizing: border-box;
 }

-h1 {
+button:not(:disabled){
+    cursor: pointer;
+}
+
+code {
+    margin: 0;
+    display: block;
    text-align: center;
+    font-family: Arial;
+    font-weight: bold;
+    font-size: 2em;
 }

-.btn-primary {
+#start {
    background: blue;
 }

-.btn-primary:disabled {
+#start:disabled {
    background: lightblue;
 }

-.btn-secondary {
+#stop {
    background: grey;
 }

-.btn-secondary:disabled {
+#stop:disabled {
    background: darkgrey;
 }

-.btn-danger {
+#reset {
    background: red;
 }
-.btn-danger:disabled {
+#reset:disabled {
    background: lightpink;
 }
--- a/app.js
+++ b/app.js
@ -39,39 +39,39 @@ const getAccumulatedSeconds = (newerTime, olderTime) => {

 const displayTime = () => {
    const totalSeconds = getAccumulatedSeconds(Date.now(),startTime) + savedPreviousSeconds;
-    document.querySelector('h1').innerHTML = formatSeconds(totalSeconds);
+    document.querySelector('code').innerHTML = formatSeconds(totalSeconds);
 }

 const updateSavedPreviousSeconds = () => {
    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();
    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;
+    document.querySelector('#start').disabled=true;
+    document.querySelector('#stop').disabled=false;
+    document.querySelector('#reset').disabled=true;
    windowInterval = window.setInterval(displayTime,1000)
 })

-document.querySelector('.btn-secondary').addEventListener('click', (event) => {
+document.querySelector('#stop').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;
+    document.querySelector('#start').disabled=false;
+    document.querySelector('#stop').disabled=true;
+    document.querySelector('#reset').disabled=false;
    window.clearInterval(windowInterval)
 })

-document.querySelector('.btn-danger').addEventListener('click', (event) => {
+document.querySelector('#reset').addEventListener('click', (event) => {
    savedPreviousSeconds = 0;
-    document.querySelector('h1').innerHTML = formatSeconds(0);
-    document.querySelector('.btn-danger').disabled=true;
+    document.querySelector('code').innerHTML = formatSeconds(0);
+    document.querySelector('#reset').disabled=true;
 })

 window.onbeforeunload = function(){
--- a/index.html
+++ b/index.html
@ -10,10 +10,12 @@
    </head>
    <body>
        <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>
+            <section>
+                <button type="button" id="start">Start</button>
+                <button type="button" disabled id="stop">Stop</button>
+                <button type="button" disabled id="reset">Reset</button>
+            </section>
+            <code></code>
        </main>
        <script src="app.js" charset="utf-8"></script>
  </body>