diff --git a/index.html b/index.html
index 4771b50..cfbf34d 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,40 @@
- Timer
+ stopwatch
+
+
+
+
-
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index 6a892a0..bf21e0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "timer-swe1",
+ "name": "timer-bootcamp",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
diff --git a/script.js b/script.js
index e2d0297..7bf2f67 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,104 @@
-// Please implement exercise logic here
+// create stopwatch face
+const stopwatchContainer = document.createElement('div');
+stopwatchContainer.id = 'stopwatchContainer';
+document.body.append(stopwatchContainer);
+
+// create display
+const leftOuter = document.createElement('div');
+leftOuter.classList.add('outer');
+stopwatchContainer.appendChild(leftOuter);
+
+const lapTime = document.createElement('span');
+lapTime.classList.add('center');
+leftOuter.appendChild(lapTime);
+lapTime.innerText = 'lap time';
+
+const rightOuter = document.createElement('div');
+rightOuter.classList.add('outer');
+stopwatchContainer.appendChild(rightOuter);
+
+// timer output
+const display = document.createElement('div');
+display.id = 'display';
+rightOuter.appendChild(display);
+
+// create buttons
+const buttons = document.createElement('div');
+buttons.id = 'buttons';
+rightOuter.appendChild(buttons);
+
+const topButtons = document.createElement('div');
+buttons.appendChild(topButtons);
+
+const startButton = document.createElement('button');
+startButton.innerText = 'start';
+startButton.classList.add('left');
+topButtons.appendChild(startButton);
+
+const stopButton = document.createElement('button');
+stopButton.innerText = 'stop';
+stopButton.classList.add('right');
+topButtons.appendChild(stopButton);
+
+const bottomButtons = document.createElement('div');
+buttons.appendChild(bottomButtons);
+
+const resetButton = document.createElement('button');
+resetButton.innerText = 'reset';
+resetButton.classList.add('left');
+bottomButtons.appendChild(resetButton);
+
+const lapButton = document.createElement('button');
+lapButton.innerText = 'lap';
+lapButton.classList.add('right');
+bottomButtons.appendChild(lapButton);
+
+// //show timer output
+// const output = document.createElement('div');
+// output.classList.add("display")
+// output.id = 'center'
+// document.body.appendChild(output);
+
+// declare variables
+let milliseconds = 1000;
+const delayInMilliseconds = 1000;
+display.innerText = '00:00:00';
+
+let ref = null;
+
+const start = () => {
+ // output.innerText = `00:00:00`;
+ if (ref === null) {
+ ref = setInterval(() => {
+ stopButton.addEventListener('click', () => { clearInterval(ref);
+ ref = null; });
+
+ const totalSeconds = Math.floor(milliseconds / 1000);
+ const totalMinutes = Math.floor((milliseconds / 1000) / 60);
+ let hours = Math.floor(totalMinutes / 60);
+ let minutes = totalMinutes - hours * 60;
+ let seconds = totalSeconds - hours * 60 * 60 - minutes * 60;
+
+ if (seconds < 10) {
+ seconds = `0${seconds}`;
+ }
+ if (minutes < 10) {
+ minutes = `0${minutes}`;
+ }
+ if (hours < 10) {
+ hours = `0${hours}`;
+ }
+ display.innerText = `${hours}:${minutes}:${seconds} `;
+ console.log(milliseconds);
+
+ milliseconds += 1000;
+ }, delayInMilliseconds);
+ }
+};
+
+// add event listeners
+
+startButton.addEventListener('click', start);
+resetButton.addEventListener('click', () => window.location.reload());
+
+// how to make it reset
diff --git a/styles.css b/styles.css
index 04e7110..faea760 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,51 @@
body {
- background-color: pink;
+ background-color: lightsteelblue;
+ box-sizing: border-box;
+ text-align: center;
+ font-size: 30px;
+ font-family: "Orbitron", sans-serif;
+}
+
+#stopwatchContainer {
+ display: block;
+ width: 50%;
+ margin: auto auto;
+}
+
+div {
+ text-align: center;
+ /* position: fixed; */
+}
+.outer {
+ border: 2px solid black;
+ background-color: lightsteelblue;
+ height: 200px;
+ width: 50%;
+ float: left;
+ margin: 0 auto;
+}
+
+.left,
+.right {
+ width: 40%;
+ margin: 5%;
+}
+
+button {
+ margin: 15%;
+ border: 2px solid slategrey;
+ background-color: lightskyblue;
+}
+
+button:hover {
+ background-color: lightseagreen;
+ color: white;
+}
+
+#display {
+ height: 20px;
+ margin-bottom: 20%;
+}
+div > div {
+ box-sizing: border-box;
}