In this task, we will learn how to calculate sleep cycles using JavaScript. A good night’s sleep involves completing 5 to 6 sleep cycles, each lasting around 90 minutes. By calculating sleep cycles, our WakeUpTimes app can suggest wake up times that align with the end of a sleep cycle and help users wake up feeling refreshed and energized.
JavaScript is a programming language used to add interactivity and dynamic behavior to web pages. It is an essential component of modern web development, allowing developers to create rich, responsive, and engaging applications that can be accessed from anywhere in the world with an internet connection.
Getting started with JavaScript is easy, especially for those who have experience programming in languages such as Java, C++, or Python. Let’s write and run a “Hello, World!” program.
To begin, create a folder where you want to store the source code for the WakeUpTimes app. I created mine and named it wakeuptimes-app. Open this folder in Visual Studio Code (VSCode) and create a new file named index.js. This will be our JavaScript file. You can do this using the following commands in the terminal:
mkdir wakeuptimes-app # Create a new directory
cd wakeuptimes-app # Change to the new directory
code . # Open VSCode in the current directory
touch index.js # Create a new file named index.jsOpen the index.js file and type the following code:
console.log("Hello, world!");To run the script, we will use Node.js, a JavaScript runtime built on Chrome’s V8 JavaScript engine. From the terminal, type the following command to run the script:
node index.js # Run the JavaScript fileThe message “Hello, world!” should be displayed in the console. Congratulations! You have written your first program in JavaScript. In the next section, we will learn how to calculate sleep cycles using JavaScript.
The first step in calculating sleep cycles is to get the current time using JavaScript’s Date object. This object represents a date and time value and provides a number of methods to work with dates and times.
const now = new Date();
console.log(now);Running the script will print the current date and time in the Coordinated Universal Time (UTC) time zone to the terminal.
If you want to print the date and time in the local time zone, you can use the following code:
const now = new Date();
console.log(now.toLocaleString("en-US"));Next, we need to calculate the time it takes to fall asleep. For simplicity, we will assume that the user goes to bed immediately and it takes an average person 14 minutes to fall asleep. We can calculate the fall asleep time by adding 14 minutes to the current time.
const fallAsleepTime = new Date();
fallAsleepTime.setMinutes(fallAsleepTime.getMinutes() + 14);
console.log(fallAsleepTime.toLocaleString("en-US"));If you are only interested in the current time, you can further format the date object as follows:
const fallAsleepTime = new Date();
fallAsleepTime.setMinutes(fallAsleepTime.getMinutes() + 14);
console.log(fallAsleepTime.toLocaleTimeString("en-US", {
timeStyle: "short",
}));With the fall asleep time determined, we can now calculate the end time for the first sleep cycle.
const fallAsleepTime = new Date();
fallAsleepTime.setMinutes(fallAsleepTime.getMinutes() + 14);
console.log(
"You will fall sleep at",
fallAsleepTime.toLocaleTimeString("en-US", {
timeStyle: "short",
})
);
const wakeUpTime = new Date(fallAsleepTime);
wakeUpTime.setMinutes(wakeUpTime.getMinutes() + 90);
const wakeUpTimeString = wakeUpTime.toLocaleTimeString("en-US", {
timeStyle: "short",
});
console.log(`Your first sleep cycle ends at ${wakeUpTimeString}`);We can now calculate the end times for 6 sleep cycles, each 90 minutes long, from the fall asleep time. We can do this by looping through the cycles and adding 90 minutes to the previous end time.
const fallAsleepTime = new Date();
const wakeUpTime = new Date(fallAsleepTime);
for (let i = 1; i <= 6; i++) {
wakeUpTime.setMinutes(wakeUpTime.getMinutes() + 90);
const wakeUpTimeString = wakeUpTime.toLocaleTimeString("en-US", {
timeStyle: "short",
});
console.log(`Sleep cycle #${i} ends at ${wakeUpTimeString}`);
}Finally, we will refactor our code to add the calculated wake-up times to an array instead of printing each cycle inside the loop. This will make it easier to work with the wake-up times later on.
const fallAsleepTime = new Date();
const wakeUpTime = new Date(fallAsleepTime);
const wakeUpTimes = [];
for (let i = 1; i <= 6; i++) {
wakeUpTime.setMinutes(wakeUpTime.getMinutes() + 90);
const wakeUpTimeString = wakeUpTime.toLocaleTimeString("en-US", {
timeStyle: "short",
});
wakeUpTimes.push(wakeUpTimeString);
}
console.log("Wake-up times:", wakeUpTimes.join(", "));Calculating sleep cycles using JavaScript is easy and intuitive. The syntax is easy to read and familiar to programmers who have taken an introductory programming course.
At this point, you should have the following code in index.js file.
const fallAsleepTime = new Date();
fallAsleepTime.setMinutes(fallAsleepTime.getMinutes() + 14);
console.log(
"You will fall sleep at",
fallAsleepTime.toLocaleTimeString("en-US", {
timeStyle: "short",
})
);
const wakeUpTime = new Date(fallAsleepTime);
const wakeUpTimes = [];
for (let i = 1; i <= 6; i++) {
wakeUpTime.setMinutes(wakeUpTime.getMinutes() + 90);
const wakeUpTimeString = wakeUpTime.toLocaleTimeString("en-US", {
timeStyle: "short",
});
wakeUpTimes.push(wakeUpTimeString);
}
console.log("Wake-up times:", wakeUpTimes.join(", "));Let’s go through the JavaScript code statement by statement:
const fallAsleepTime = new Date();This line of code creates a new Date object fallAsleepTime which contains the current date and time.
fallAsleepTime.setMinutes(fallAsleepTime.getMinutes() + 14);This line of code sets the fallAsleepTime object to 14 minutes from the current time. It first retrieves the current minutes using getMinutes() method and then adds 14 to it, and then sets this new value to the fallAsleepTime object using the setMinutes() method.
console.log(...);This line of code prints the time at which you will fall asleep. The toLocaleTimeString method is used to format the fallAsleepTime object to a time string according to the ‘en-US’ locale and with a ‘short’ time style.
const wakeUpTime = new Date(fallAsleepTime);This line of code creates another Date object wakeUpTime and initializes it with the fallAsleepTime object.
const wakeUpTimes = [];This line of code initializes an empty array wakeUpTimes.
for (let i = 1; i <= 6; i++) {...}This loop iterates 6 times to calculate 6 different wake-up times.
wakeUpTime.setMinutes(wakeUpTime.getMinutes() + 90);Inside the loop, this line of code sets the wakeUpTime object to 90 minutes from its current value. Similar to the fallAsleepTime case, it retrieves the current minutes, adds 90, and then sets this new value.
const wakeUpTimeString = wakeUpTime.toLocaleTimeString("en-US", {...});This line of code converts the wakeUpTime object to a formatted time string similar to the fallAsleepTime case.
wakeUpTimes.push(wakeUpTimeString);This line of code adds the wakeUpTimeString to the wakeUpTimes array.
console.log("Wake-up times:", wakeUpTimes.join(", "));After the loop, this line of code prints all the calculated wake-up times. The join method is used to concatenate all elements of the wakeUpTimes array into a single string separated by commas and spaces.