diff --git a/index.html b/index.html
index 4771b50..e2afb9f 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
Timer
+
diff --git a/script.js b/script.js
index e2d0297..4d8d9ab 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,94 @@
-// Please implement exercise logic here
+// Global variables
+let minutes = 0;
+let hours = 0;
+let clock;
+let seconds = 0;
+let displaySeconds;
+let displayMinutes;
+let isTimeRunning = true;
+
+// Create stopwatch display
+const stopwatch = document.createElement('div');
+
+// Create start button
+const start = document.createElement('button');
+start.innerHTML = 'Start';
+document.body.appendChild(start);
+start.addEventListener('click', () => startTimer());
+
+// Create stop button
+const stopButton = document.createElement('button');
+stopButton.innerHTML = 'Stop';
+document.body.appendChild(stopButton);
+stopButton.addEventListener('click', () => stopTimer());
+
+// Create lap button
+const lapButton = document.createElement('button');
+lapButton.innerHTML = 'Lap';
+document.body.appendChild(lapButton);
+lapButton.addEventListener('click', () => showLapTime(seconds));
+
+// Create reset button
+const resetButton = document.createElement('button');
+resetButton.innerHTML = 'Reset';
+document.body.appendChild(resetButton);
+resetButton.addEventListener('click', () => resetTimer());
+
+// Callback function for timer
+const startTimer = () => {
+ isTimeRunning = true;
+ // Create counter
+ const timer = setInterval(() => {
+ stopwatch.innerHTML = `Timer: ${showAsClock(seconds)}`;
+
+ if (isTimeRunning === false) {
+ clearInterval(timer);
+ }
+ seconds += 1;
+ }, 1000);
+ // Append timer to document
+ document.body.appendChild(stopwatch);
+};
+
+// Ensure that displayed seconds resets after 59sec
+const showSeconds = (seconds) => {
+ if (seconds > 59) {
+ displaySeconds = seconds - 60 * (Math.floor(seconds / 60));
+ } else { displaySeconds = seconds; }
+ return displaySeconds;
+};
+
+// Ensure that displayed minutes resets after 59min
+const showMinutes = (seconds) => {
+ minutes = Math.floor(seconds / 60);
+ if (minutes > 59) {
+ displayMinutes = minutes - 60 * (Math.floor(minutes / 60));
+ } else { displayMinutes = minutes; }
+ return displayMinutes;
+};
+
+// Convert seconds to hr, min, sec
+const showAsClock = (seconds) => {
+ hours = Math.floor(minutes / 60);
+ clock = `${hours}: ${showMinutes(seconds)}: ${showSeconds(seconds)} `;
+ return clock;
+};
+
+// Callback function for stop event
+const stopTimer = () => {
+ // This will cause clearInterval() to be run at line 32
+ isTimeRunning = false;
+};
+
+// Callback function for lap event
+const showLapTime = (seconds) => {
+ const lap = document.createElement('div');
+ document.body.appendChild(lap);
+ const lapTime = showAsClock(seconds);
+ lap.innerText = `${lapTime}`;
+};
+
+// // Callback function to reset Timer
+const resetTimer = () => {
+ seconds = 0;
+};
diff --git a/styles.css b/styles.css
index 04e7110..e8408ce 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,38 @@
body {
background-color: pink;
}
+.square {
+ padding: 10px;
+ margin: 10px;
+ background-color: white;
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ vertical-align: top;
+}
+
+.matchInfo {
+ font-size: 50px;
+ font-family: "Lucida Console", monospace;
+}
+
+.gameInfo {
+ font-size: 20px;
+ font-family: "Lucida Console", monospace;
+}
+
+.gameTimer {
+ font-size: 18px;
+ font-family: "Lucida Console", monospace;
+}
+
+timer {
+ font-size: 30px;
+ color: green;
+ font-family: "Source Sans Pro", sans-serif;
+ background-color: black;
+}
+
+name {
+ font-size: 40px;
+}