timer working w lap functionality

script.js

@@ -1 +1,106 @@
 // Please implement exercise logic here
+
+let time = 0
+let laps = []
+let timerInterval 
+let stopped = true
+
+
+const timeConverter = (time) => {
+  let seconds = (time%60).toString()
+  let minute = Math.floor(time/60).toString()
+
+  seconds = seconds.length < 2 ? `0${seconds}` : seconds
+  minute = minute.length < 2 ? `0${minute}` : minute
+
+  return `${minute}:${seconds}`
+}
+
+const ui = document.createElement('div')
+ui.classList.add('ui')
+
+document.body.appendChild(ui)
+
+
+const lapDataColumn = document.createElement('div')
+lapDataColumn.classList.add('column')
+ui.appendChild(lapDataColumn)
+
+const timerColumn = document.createElement('div')
+timerColumn.classList.add('column')
+ui.appendChild(timerColumn)
+
+const timer = document.createElement('div')
+timer.classList.add('timer')
+timer.innerText = timeConverter(time)
+timerColumn.appendChild(timer)
+
+
+let x = 0
+const start = ()=> {
+  stopped = false
+  timerInterval = setInterval(() => {
+    time += 1
+    timer.innerText = timeConverter(time)
+  }, 1000)
+}
+
+const stop = () => {
+  stopped = true
+  clearInterval(timerInterval)
+}
+
+const calculateLapTime = (time) => {
+  if (laps.length  === 1){
+    return time
+  }
+  const lapTime = time - laps[laps.length -2]
+  return lapTime
+
+}
+
+const lap =  () => {
+  if (!stopped){
+      laps.push(time)
+  const newLap = document.createElement('p')
+  newLap.innerText = `Lap ${laps.length} - ${timeConverter(calculateLapTime(time))}(SPLIT) - ${timeConverter(time)}`
+  newLap.style.color = "white"
+  lapDataColumn.appendChild(newLap)
+  }
+}
+
+const reset = () => {
+  time = 0
+  laps = 0
+  clearInterval(timerInterval)
+  timer.innerText = timeConverter(time)
+  lapDataColumn.innerHTML = ""
+}
+
+const startButton = document.createElement('button')
+startButton.classList.add('button')
+startButton.innerHTML="start"
+startButton.addEventListener("click", start)
+timerColumn.appendChild(startButton)
+
+const stopButton = document.createElement('button')
+stopButton.classList.add('button')
+stopButton.innerHTML="stop"
+stopButton.addEventListener("click", stop)
+timerColumn.appendChild(stopButton)
+
+const lapButton = document.createElement('button')
+lapButton.classList.add('button')
+lapButton.innerHTML="lap"
+lapButton.addEventListener("click", lap)
+timerColumn.appendChild(lapButton)
+
+const resetButton = document.createElement('button')
+resetButton.classList.add('button')
+resetButton.innerHTML="reset"
+resetButton.addEventListener("click", reset)
+timerColumn.appendChild(resetButton)
+
+
+
+

styles.css

@@ -1,3 +1,34 @@
 body {
-  background-color: pink;
+    background-color: pink;
+}
+
+.ui {
+    width: 100%;
+    display: flex;
+}
+
+.column {
+    display: inline-block;
+    width: 50%;
+    background-color: gray;
+    padding: 50px;
+    height: 500px;
+}
+
+.timer {
+    width: 60%;
+    margin: 50px auto 50px auto;
+    padding: 25px;
+    background-color: white;
+    height: 100px;
+    font-size: 4rem;
+    text-align: center;
+}
+
+.button {
+    width: 50%;
+    margin: 20px auto 20px auto;
+    border-color: black;
+    border-radius: 10px;
+    padding: 10px;
 }