Pomodoro Timer

\r\n\r\n

25:00

\r\n

\r\n \r\n\r\n \r\n\r\n \r\n\r\n

\r\n\r\n

Completed sessions: 0

\r\n\r\n

","css":" @import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');\r\n\r\n audio {\r\n display: hidden;\r\n }\r\n\r\n :root {\r\n --color: #999;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n /* background-color: #f5f5f5; */\r\n background-color: black;\r\n }\r\n\r\n .container {\r\n text-align: center;\r\n /* width: 10px; */\r\n }\r\n\r\n h1 {\r\n font-size: 2.5em;\r\n color: var(--color);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .timer {\r\n display: inline-block;\r\n background-color: #fff;\r\n border-radius: 5px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n padding: 1rem;\r\n\r\n }\r\n\r\n #time {\r\n font-family: 'Sixtyfour', sans-serif;\r\n font-size: 5rem;\r\n }\r\n\r\n #time {\r\n color: var(--color);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n #controls {\r\n width: 400px;\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n\r\n button {\r\n /* background-color: #fd5252; */\r\n background-color: var(--color);\r\n color: black;\r\n border: 4px solid black;\r\n outline: 4px solid var(--color);\r\n border-radius: 100%;\r\n /* padding: 2rem; */\r\n height: 60px;\r\n width: 60px;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, scale .3s;\r\n }\r\n\r\n button:hover {\r\n background-color: #f43f3f;\r\n }\r\n\r\n button:active {\r\n scale: .95;\r\n }\r\n\r\n .sessions {\r\n margin-top: 1rem;\r\n font-size: 1.2em;\r\n color: var(--color);\r\n }","js":"const timer = document.querySelector('#time');\r\nconst startButton = document.querySelector('#start');\r\nconst stopButton = document.querySelector('#stop');\r\nconst resetButton = document.querySelector('#reset');\r\nconst completedSessions = document.getElementById('completed-sessions');\r\nconst timerAudio = new Audio('https://www.fesliyanstudios.com/soundeffects/2019-03-8/Original/Clock-Ticking-C-www.fesliyanstudios.com.mp3')\r\nconst doneAudio = new Audio('https://assets.mixkit.co/active_storage/sfx/992/992-preview.mp3')\r\n\r\ntimerAudio.loop = true;\r\nlet requestedMinutes = 5;\r\nlet intervalId;\r\nlet minutes = requestedMinutes;\r\nlet seconds = 0;\r\nlet completed = 0;\r\n\r\nfunction updateTimer() {\r\n if (seconds === 0) {\r\n if (minutes === 0) {\r\n timerAudio.pause()\r\n doneAudio.play()\r\n clearInterval(intervalId);\r\n startButton.removeAttribute('disabled')\r\n alert('Session completed!');\r\n doneAudio.pause();\r\n doneAudio.currentTime = 0;\r\n completed++;\r\n completedSessions.textContent = completed;\r\n minutes = requestedMinutes;\r\n seconds = 0;\r\n timerAudio.currentTime = 0\r\n } else {\r\n minutes--;\r\n seconds = 59;\r\n }\r\n } else {\r\n seconds--;\r\n }\r\n\r\n timer.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\r\n}\r\n\r\nstartButton.addEventListener('click', () => {\r\n intervalId = setInterval(updateTimer, 1000);\r\n // console.log('glow');\r\n startButton.setAttribute('disabled', true)\r\n timerAudio.play()\r\n});\r\n\r\nstopButton.addEventListener('click', () => {\r\n\r\n clearInterval(intervalId);\r\n startButton.removeAttribute('disabled')\r\n timerAudio.pause()\r\n timerAudio.currentTime = 0\r\n // timerAudio\r\n});\r\n\r\nresetButton.addEventListener('click', () => {\r\n clearInterval(intervalId);\r\n minutes = requestedMinutes;\r\n seconds = 0;\r\n timer.textContent = `${minutes}:00`;\r\n startButton.removeAttribute('disabled')\r\n timerAudio.pause()\r\n\r\n});\r\ntimer.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; ","user_id":"eb85392e-2ebd-4695-9297-d8ef016b3ea4","project_key":"JEIJED","description":"Pomodoro Timer\r\n","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":true,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "babelActive": false, "cssProcessor": false, "userImportedJS": [], "typescriptActive": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":455}],"profiles":{"username":"this"}}]