diff --git a/unit_02/w05d02/morning_exercise/stopwatch/css/style.css b/unit_02/w05d02/morning_exercise/stopwatch/css/style.css new file mode 100644 index 0000000..9dbdf65 --- /dev/null +++ b/unit_02/w05d02/morning_exercise/stopwatch/css/style.css @@ -0,0 +1,35 @@ +body { + text-align: center; + font-family: 'Orbitron', 'Courier New', monospace; +} + +#stopwatch { + width: 400px; + height: 100px; + margin: 0 auto; + border: 1px solid black; + padding: 12px; + + line-height: 100px; + font-size: 75px; + text-align: right; + + margin-bottom: 20px; +} + +#controls { + text-align: center; +} + +button { + padding: 24px 24px 16px 24px; + background: mediumseagreen; + border:none; + border-bottom: 2px solid forestgreen; + border-radius: 5px; + + color: white; + font-size: 24px; + font-family: 'Orbitron', 'Courier New', monospace; + font-weight: 700; +} diff --git a/unit_02/w05d02/morning_exercise/stopwatch/index.html b/unit_02/w05d02/morning_exercise/stopwatch/index.html new file mode 100644 index 0000000..a7918a8 --- /dev/null +++ b/unit_02/w05d02/morning_exercise/stopwatch/index.html @@ -0,0 +1,20 @@ + + + + + + + + +
+ 0 +
+ +
+ + + + +
+ + diff --git a/unit_02/w05d02/morning_exercise/stopwatch/js/app.js b/unit_02/w05d02/morning_exercise/stopwatch/js/app.js new file mode 100644 index 0000000..501a6bb --- /dev/null +++ b/unit_02/w05d02/morning_exercise/stopwatch/js/app.js @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/unit_02/w05d02/morning_exercise/stopwatch_solution/css/style.css b/unit_02/w05d02/morning_exercise/stopwatch_solution/css/style.css new file mode 100644 index 0000000..9dbdf65 --- /dev/null +++ b/unit_02/w05d02/morning_exercise/stopwatch_solution/css/style.css @@ -0,0 +1,35 @@ +body { + text-align: center; + font-family: 'Orbitron', 'Courier New', monospace; +} + +#stopwatch { + width: 400px; + height: 100px; + margin: 0 auto; + border: 1px solid black; + padding: 12px; + + line-height: 100px; + font-size: 75px; + text-align: right; + + margin-bottom: 20px; +} + +#controls { + text-align: center; +} + +button { + padding: 24px 24px 16px 24px; + background: mediumseagreen; + border:none; + border-bottom: 2px solid forestgreen; + border-radius: 5px; + + color: white; + font-size: 24px; + font-family: 'Orbitron', 'Courier New', monospace; + font-weight: 700; +} diff --git a/unit_02/w05d02/morning_exercise/stopwatch_solution/index.html b/unit_02/w05d02/morning_exercise/stopwatch_solution/index.html new file mode 100644 index 0000000..a7918a8 --- /dev/null +++ b/unit_02/w05d02/morning_exercise/stopwatch_solution/index.html @@ -0,0 +1,20 @@ + + + + + + + + +
+ 0 +
+ +
+ + + + +
+ + diff --git a/unit_02/w05d02/morning_exercise/stopwatch_solution/js/app.js b/unit_02/w05d02/morning_exercise/stopwatch_solution/js/app.js new file mode 100644 index 0000000..d18cebf --- /dev/null +++ b/unit_02/w05d02/morning_exercise/stopwatch_solution/js/app.js @@ -0,0 +1,36 @@ +window.onload = function() { + document.getElementById("start").addEventListener("click", startTimer); + document.getElementById("stop").addEventListener("click", stopTimer); + document.getElementById("reset").addEventListener("click", resetTimer); + document.getElementById("countdown").addEventListener("click", countdownTimer); +}; + +var startTimer = function() { + var time = parseInt(document.getElementById("stopwatch").textContent); //move variable declarations outside the window.onload so that each function can have acess to the variables. + stopWatchHandle = setInterval(function() { + time += 1; + var timer = document.getElementById("stopwatch"); + timer.textContent = time; + }, 1000); +}; + +var resetTimer = function() { + clearInterval(stopWatchHandle); + var timer = document.getElementById("stopwatch"); + timer.textContent = "0"; +}; + +var countdownTimer = function () { + clearInterval(stopWatchHandle); + var time = parseInt(document.getElementById("stopwatch").textContent); + stopWatchHandle = setInterval(function() { + time -= 1; + var timer = document.getElementById("stopwatch"); + timer.textContent = time; + }, 1000); +}; + +var stopTimer = function() { + clearInterval(stopWatchHandle); +}; + \ No newline at end of file