diff --git a/Calculators/Sleep-Cycle-Calculator/README.md b/Calculators/Sleep-Cycle-Calculator/README.md new file mode 100644 index 000000000..c371d6e86 --- /dev/null +++ b/Calculators/Sleep-Cycle-Calculator/README.md @@ -0,0 +1,15 @@ +#

Sleep Cycle Calculator

+ +## Description :- + +The Sleep Calculator calculates optimal bedtimes based on desired wake-up time and the scientific 90-minute sleep cycles. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/54c29147-b47e-474a-b1bb-e28bc175f555) diff --git a/Calculators/Sleep-Cycle-Calculator/index.html b/Calculators/Sleep-Cycle-Calculator/index.html new file mode 100644 index 000000000..ec18ee884 --- /dev/null +++ b/Calculators/Sleep-Cycle-Calculator/index.html @@ -0,0 +1,34 @@ + + + + + + + Sleep Cycle Calculator + + +
+
+

Sleep Cycle Calculator

+
+
+ + + +
+ +
+
+
+ + + + diff --git a/Calculators/Sleep-Cycle-Calculator/script.js b/Calculators/Sleep-Cycle-Calculator/script.js new file mode 100644 index 000000000..1cb22044a --- /dev/null +++ b/Calculators/Sleep-Cycle-Calculator/script.js @@ -0,0 +1,45 @@ +function calculateBedTimes() { + const hoursInput = parseInt(document.getElementById('hours').value); + const minutesInput = parseInt(document.getElementById('minutes').value); + const ampmInput = document.getElementById('ampm').value; + + if (isNaN(hoursInput) || isNaN(minutesInput)) { + alert('Please enter valid time.'); + return; + } + + let wakeUpTime = new Date(); + wakeUpTime.setHours(hoursInput); + wakeUpTime.setMinutes(minutesInput); + + if (ampmInput === 'pm' && wakeUpTime.getHours() !== 12) { + wakeUpTime.setHours(wakeUpTime.getHours() + 12); + } else if (ampmInput === 'am' && wakeUpTime.getHours() === 12) { + wakeUpTime.setHours(0); + } + + const sleepCycleMinutes = 90; + const totalSleepCycles = 6; + let result = '

You should sleep at..

'; + + for (let i = totalSleepCycles; i >= 1; i--) { + const bedTime = new Date(wakeUpTime.getTime() - i * sleepCycleMinutes * 60000); + const hours = bedTime.getHours().toString().padStart(2, '0'); + const minutes = bedTime.getMinutes().toString().padStart(2, '0'); + const ampm = bedTime.getHours() >= 12 ? 'PM' : 'AM'; + const bedTimeStr = `${hours}:${minutes} ${ampm}`; + result += `🌙 ${bedTimeStr} (for ${i} sleep cycles)
`; + } + + const modal = document.getElementById('modal'); + const modalContent = document.querySelector('.modal-content'); + const resultDiv = document.getElementById('result'); + resultDiv.innerHTML = result; + modal.style.display = 'block'; + modalContent.style.top = `calc(50% - ${modalContent.clientHeight / 2}px)`; +} + +function closeModal() { + const modal = document.getElementById('modal'); + modal.style.display = 'none'; +} \ No newline at end of file diff --git a/Calculators/Sleep-Cycle-Calculator/style.css b/Calculators/Sleep-Cycle-Calculator/style.css new file mode 100644 index 000000000..55fb2a096 --- /dev/null +++ b/Calculators/Sleep-Cycle-Calculator/style.css @@ -0,0 +1,110 @@ +body, html { + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 0; + height: 100%; +} + +.background { + background-color: #0c1d39; + background-size: cover; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + background-color: #0b3d91; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + text-align: center; + color: white; +} + +h1 { + margin-bottom: 20px; +} + +#ampm { + text-align: center; + font-size: 10px; +} + +.input-box { + display: flex; + flex-direction: column; + align-items: center; +} + +.time-input { + display: flex; + margin-bottom: 20px; +} + +input[type="number"], select { + width: 50px; + padding: 5px; + margin: 0 5px; +} + +button { + padding: 10px 20px; + background-color: #ebd9bf; + border: 2px solid #0c1d39; + color: #0c1d39; + border-radius: 5px; + cursor: pointer; + +} + +button:hover { + background-color: #ffe5c0;; + +} + +#result { + margin-top: 20px; + font-size: 1.2em; + text-align: center; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: transparent; +} + +.modal-content { + background-color: #5764b3; + box-shadow: 5px 5px 5px rgb(250, 214, 114); + color: rgb(255, 249, 221); + text-shadow: 30px 10px 20px solid #000000; + margin: 15% auto; + padding: 20px; + border-radius: 10px; + width: 30%; +} +.resultDiv { + margin-left: 50%; +} +.close { + color: #ffffff; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: rgb(255, 234, 0); + text-decoration: none; + cursor: pointer; +} \ No newline at end of file diff --git a/index.html b/index.html index f404388d7..c74d3bda9 100644 --- a/index.html +++ b/index.html @@ -2192,6 +2192,20 @@

Calculates the amount of sleep required based on age and activity level.

+
+
+

Sleep Cycle Calculator

+

Calculates optimal bedtimes based on desired wake-up time and the scientific 90-min sleep cycles.

+
+ + + + + Source Code + +
+
+

Smith Number Calculator