HARUN PEHLİVAN

Sleep Calculator Beta

HARUN PEHLİVAN's photo
HARUN PEHLİVAN
·

4 min read

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sleep Calculator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <!-- Logo Section -->
    <div class="logo">
      <img src="logo.png" alt="Sleep Calculator Logo">
      <h2>Sleep Calculator</h2>
    </div>
<h1>Welcome to the Sleep Calculator</h1>
<p>Calculate the best times to wake up or go to bed based on your sleep cycles.</p>
<div class="input-section">
<label for="bedtime">Enter the time you want to go to bed:</label>
<input type="time" id="bedtime">
<button id="calculateWakeup">Calculate Wakeup Times</button>
</div>
<div class="input-section">
<label for="wakeupTime">Enter the time you want to wake up:</label>
<input type="time" id="wakeupTime">
<button id="calculateBedtime">Calculate Bedtimes</button>
</div>
<div class="results" id="results"></div>
<button id="retakeCalculation" class="hidden">Retake Calculation</button>
</div>
<script src="script.js"></script>
</body>
</html>

/* General Styling */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(to bottom, #1e3a8a, #1e293b); /* Nightly gradient */
  color: #ffffff;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden; /* Allow vertical scrolling */
}

/* Container Styling */
.container {
  text-align: center;
  max-width: 600px;
  padding: 30px;
  background: rgba(30, 41, 59, 0.9); /* Semi-transparent overlay */
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  margin: 20px auto; /* Allow space for scrolling */
}

/* Headings */
h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #d1d5db; /* Softer text color */
}

/* Input Section */
.input-section {
  margin: 20px 0;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #f3f4f6; /* Softer white */
}

input[type="time"] {
  padding: 10px;
  width: 90%;
  max-width: 300px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  margin-bottom: 10px;
  background-color: #374151;
  color: white;
}

input[type="time"]:focus {
  outline: 2px solid #4caf50;
}

/* Buttons */
button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #3d9143;
  transform: scale(1.05);
}

/* Results Section */
.results {
  margin-top: 20px;
  font-size: 1rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  margin: 5px 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

/* Hide Button After Results */
.hidden {
  display: none;
}
#retakeCalculation {
  margin-top: 20px;
}
/* Logo Section Styling */
.logo {
  text-align: center;
  margin-bottom: 20px;
}

.logo img {
  width: 80px; /* Adjust size as needed */
  height: auto;
}

.logo h2 {
  font-size: 2.8rem;
  margin: 10px 0 0;
  color: #a3bffa; /* Soft, calming blue */
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Clean, modern font */
  text-shadow: 1px 1px 2px #000; /* Subtle shadow for contrast */
}


/* Basic styling */
body {
  font-family: Arial, sans-serif;
  background: #1a1a2e; /* Nighttime background */
  color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.container {
  max-width: 500px;
  padding: 20px;
  text-align: center;
}

h1, h2 {
  color: #a3bffa;
}

.input-section {
  margin: 20px 0;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button.hidden {
  display: none;
}

button:hover {
  background-color: #45a049;
}

#results {
  margin-top: 20px;
}

/* Styling for individual result boxes */
.result-box {
  background-color: #2d2f3f;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
  text-align: center;
}

.result-box p {
  margin: 5px 0;
}

.result-box strong {
  font-size: 1.3rem;
  color: #f5f5f5;
}

document.addEventListener('DOMContentLoaded', () => {
  const calculateWakeupButton = document.getElementById('calculateWakeup');
  const calculateBedtimeButton = document.getElementById('calculateBedtime');
  const resultsContainer = document.getElementById('results');
  const retakeButton = document.getElementById('retakeCalculation');

  // Function to calculate times and sleep cycles
  const calculateTimes = (baseTime, increment) => {
    const times = [];
    const cycleDurations = [9, 7.5, 6, 4.5]; // Hours for sleep cycles (in hours)
    let time = new Date(`1970-01-01T${baseTime}:00`);

    for (let i = 0; i < cycleDurations.length; i++) {
      time.setMinutes(time.getMinutes() + increment);
      let wakeupTime = time.toTimeString().slice(0, 5);
      let suggestedSleep = cycleDurations[i];
      let cycleCount = 6 - i; // Decreasing sleep cycles
      times.push({ wakeupTime, suggestedSleep, cycleCount });
    }
    return times;
  };

  // Event listener for wakeup calculation
  calculateWakeupButton.addEventListener('click', () => {
    const bedtime = document.getElementById('bedtime').value;
    if (bedtime) {
      const wakeupTimes = calculateTimes(bedtime, 90); // Increment by 90 minutes per sleep cycle
      displayResults('Suggested Wakeup Times:', wakeupTimes);
    } else {
      alert('Please enter a valid bedtime.');
    }
  });

  // Event listener for bedtime calculation
  calculateBedtimeButton.addEventListener('click', () => {
    const wakeupTime = document.getElementById('wakeupTime').value;
    if (wakeupTime) {
      const bedtimeOptions = calculateTimes(wakeupTime, -90).reverse(); // Reverse to show earlier bedtimes first
      displayResults('Suggested Bedtimes:', bedtimeOptions);
    } else {
      alert('Please enter a valid wakeup time.');
    }
  });

  // Display results and show the retake button
  const displayResults = (message, times) => {
    resultsContainer.innerHTML = `<p>${message}</p>`;

    times.forEach((time) => {
      const resultBox = document.createElement('div');
      resultBox.classList.add('result-box');
      resultBox.innerHTML = `
        <p><strong>${time.wakeupTime}</strong></p>
        <p>Suggested ${time.suggestedSleep} hrs of sleep, ${time.cycleCount} sleep cycles</p>
      `;
      resultsContainer.appendChild(resultBox);
    });

    calculateWakeupButton.classList.add('hidden');
    calculateBedtimeButton.classList.add('hidden');
    retakeButton.classList.remove('hidden');
  };

  // Retake button event listener
  retakeButton.addEventListener('click', () => {
    resultsContainer.innerHTML = '';
    document.getElementById('bedtime').value = '';
    document.getElementById('wakeupTime').value = '';
    calculateWakeupButton.classList.remove('hidden');
    calculateBedtimeButton.classList.remove('hidden');
    retakeButton.classList.add('hidden');
  });
});