Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Sleep Cycle Calculator #1112

Merged
merged 3 commits into from
Jun 4, 2024
Merged

Added Sleep Cycle Calculator #1112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7479ba9
Added Sleep Cycle Calculator
anagha-chaudhari Jun 2, 2024
6f8d93e
Update README.md
Rakesh9100 Jun 4, 2024
861904a
Update index.html
Rakesh9100 Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions Calculators/Sleep-Cycle-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# <p align="center">Sleep Cycle Calculator</p>

## 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)
34 changes: 34 additions & 0 deletions Calculators/Sleep-Cycle-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sleep Cycle Calculator</title>
</head>
<body>
<div class="background">
<div class="container">
<h1>Sleep Cycle Calculator</h1>
<div class="input-box">
<div class="time-input">
<input type="number" id="hours" placeholder="HH" min="1" max="12">
<input type="number" id="minutes" placeholder="MM" min="0" max="59">
<select id="ampm">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</div>
<button onclick="calculateBedTimes()">Calculate</button>
</div>
</div>
</div>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<div id="result"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
45 changes: 45 additions & 0 deletions Calculators/Sleep-Cycle-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = '<h2>You should sleep at..</h2>';

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)<br>`;
}

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';
}
110 changes: 110 additions & 0 deletions Calculators/Sleep-Cycle-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2192,6 +2192,20 @@ <h3>Calculates the amount of sleep required based on age and activity level.</h3
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Sleep Cycle Calculator</h2>
<h3>Calculates optimal bedtimes based on desired wake-up time and the scientific 90-min sleep cycles.</h3>
<div class="card-footer">
<a href="./Calculators/Sleep-Cycle-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Sleep-Cycle-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Smith Number Calculator</h2>
Expand Down