I'm 15 and Here's How I Made a 😴 Bedtime Calculator with React JS

Ever wake up feeling groggy, even though you thought you had enough sleep? It turns out that by timing your wake up time based on REM cycles, you can wake up more refreshed and more productive.

This got me thinking, why don't I put my front-end web development skills to the test and build a tool that will help people, especially coders who are known for working late at night know when they should go to bed depending on when they want to wake up?

So, I built a bedtime calculator with React JS, CSS, and some HTML for the landing page.

I would love anyone's feedback, and I think it's a useful tool because it will help anyone who uses it calculate when they should go to bed by choosing a time when they want to wake up.

So, how did I build this tool?

Day 1: I Planned How The App Would Look & Function

First, I planned how the application would look and function. To start, I went on different design inspiration sites (dribbble, behance, and logopond), and I tried to find similar projects with simple designs.

After finding 5 different yet similar designs, I tried to pick out sections from each to determine how the application would look once I implemented it.

Then, I looked at React JS frameworks that would allow me to easily integrate a well-designed clock for users to be able to choose a time from.

Once I found an easy-to-integrate React JS framework for my bed time calculator app, I made a new React JS project in Visual Studio Code, and began coding.

Days 2-7: I Built The Interface Of The App

After finding designs and a React JS clock component to integrate into my app, I began outlining the code.

By outlining, I mean I made a basic structure for how the code would look like for this project so I could have a better understanding of what the final result should be.

So, I started with making the background of the app, trying to find the best colors to make the app be built with the best UI.

I decided to go with a linear gradient for the background of the app:

background: linear-gradient(180deg,#030729,#030B35,#030729);

After choosing some colors for the app, I realized that if I added a cool glowing moon and moving stars affect, my app would be well-received.

So, that’s what I did. First, inside the main container with a class of .bed-time-calculator, I made a section with a class of

.bed-time-calculator__stars

(I built this app using BEM conventions).

Then, inside this stars

<div>

, I added two

<img>

tags that would be stars in the final result. However, I needed to style this section and the images so they would look like realistic stars, glowing in the night.

In the

bed-time-calculator__stars

container, I added these styles to have the stars be next to each other horizontally:

width: 100%;

display: flex;

justify-content: space-around;

align-content: center;

position: relative;

top: 50px;

At this point, the stars looked like small white dots on the screen, but they didn’t look like actual stars...yet.

What I did next was add styles to the two images inside the stars container with these styles:

width: 612px;

height: 72px;

transform: scale(3);

I wanted to make the stars bigger, and for them to take up the entire width of the screen. Then, I styled the star images separately by adding cool animations:

.bed-time-calculator__stars-graphic:nth-child(1) {

 animation-name: stars-left;

 animation-duration: 5s;

 animation-iteration-count: infinite;

}

And for the second star graphic:

.bed-time-calculator__stars-graphic:nth-child(2) {

 animation-name: stars-right;

 animation-duration: 7s;

 animation-iteration-count: infinite;

}

My goal when styling these stars was to make them look as realistic as possible, and they ended up looking quite nice:

Okay, so I implemented the stars, but something was missing...the moon.

My next task was to implement a moon. The easy part? Styling an image of a moon. The hard part? Styling an image of a moon to look realistic and make users say, “wow, that’s a cool moon”.

So, I started by making a

<div>

with a class of bed-time-calculator__header right below the stars container.

Inside this header section, I added a

<div>

with a class of bed-time-calculator__logo, and inside that, an

<img>

tag.

So, how did I style this moon?

First, I wanted it to be centered horizontally, so I used on the container of the actual image:

.bed-time-calculator__logo {

 margin-left: auto;

 margin-right: auto;

}

Next, the fun part. I decided to go with a medium-paced glow effect that would be subtle yet stunning.

So, on the

<img>

inside the moon container, I added these styles:

.bed-time-calculator__logo img {

    border-radius: 50%;

    padding: 0;

    margin: 0;

    background-color: transparent;

    clip-path: circle(90px);

    animation-name: moon;

    animation-duration: 3s;

    animation-iteration-count: infinite;

}

I wanted the glow effect to last forever, and for it to take 3 seconds. The result? A glowing moon with a nice animation, if I say so myself.

After implementing glowing stars and a glowing moon, it was time to build the actual tool section of the app.

First, below the

.bed-time-calculator__header

section, I made a

<div>

with a class of

.bed-time-calculator__tool

.

This section would include the actual dropdown where users could select what time they want to wake up at, and the calculate button which would call a function to make the app take the value of the users’ input and calculate three times which would be calculated using REM sleep cycles.

So, after some time researching designs of dropdowns and submit buttons, I ended up implementing the tool section to look like this:

I also realized that I needed to have an alert message showing users they need to select an hour and minute before pressing the calculate button. So, I implemented it directly below the calculate button and would only display it if users selected the calculate button without choosing a time. Here’s how it looked:

Now, I won’t go too much into how I implemented the actual functionality, but I can tell you this:

Using React JS, especially easy-to-integrate clock components, is FUN.

I also didn’t explain how I styled the title and subtitle of the application, but it wasn’t very complicated, and I’m sure it wouldn’t be very interesting if I explained. Feel free to visit the tool and inspect the element :).

The last thing I implemented was the results page, which would appear when users selected a time to wake up at and clicked the calculate button. With simplicity in mind, the end result looked like this:

Of course, there’s more to the story. There were countless times when building this tool when I was confused and stuck, not knowing how the app would look like when I built it. But guess what? That happens to every web developer, and it’s normal.

Why I Built This Tool

So, I explained how I built the bed time calculator, but I didn’t explain to you why I built it.

Before building this tool, I had a problem. I woke up with 8 hours of sleep after a comfortable night, but I didn’t feel energized. Despite getting the recommended 8 hours of sleep, I actually felt sleepy and tired.

So I did some research, and I realized that the reason I wasn’t energized despite getting 8 hours of sleep was because I was waking up during a REM sleep cycle, but I should have been waking up in between REM sleep cycles.

What is a REM cycle? During a REM sleep cycle, your eyes move quickly in different directions and you are basically in deep sleep, where if you woke up during one, you would feel tired and sleepy just like I did.

I realized that if I have this problem, then other people do too, right? Right. If you’re like me, you won’t let a problem not be solved if you find one.

So, using my coding skills, I built a bed time calculator that would help people just like me solve the problem of not knowing exactly when they should go to bed to get optimal REM sleep.