diff --git a/app.css b/app.css
index e3fb8c0..2c26c53 100644
--- 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;
}
diff --git a/app.js b/app.js
index 97be39a..048b6c8 100644
--- 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(){
diff --git a/index.html b/index.html
index 3125159..33f4289 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,12 @@
-
-
-
-
+
+