CS50 - Harvard Introduction to Computer Science
The Harvard CS50 class is an introductory computer science course offered by Harvard University that covers the fundamental principles of computer science, including algorithms, data structures, encapsulation, resource management, security and software engineering, using a diverse set of programming languages such as C, Python and JavaScript plus SQL, CSS and HTML.
Relevant Context
This course was for me an introduction to the world of Computer Science. Throughout the weeks, I was able to discover (or re-discover) many programming languages. It was also my first time doing web development. This is why, for the capstone project of this course, I decided to further my learning of web development and create my first-ever website.
The main objective of this website was to draw inspiration from the "breathing" functionality of the Apple Watch and from the sleep aid device Dodow.
The main objective of this website was to draw inspiration from the "breathing" functionality of the Apple Watch and from the sleep aid device Dodow.
Apple Breathe App
The Breathe app on the Apple Watch is designed to guide you through short breathing exercises to help you relax, focus and potentially reduce stress.
Dodow Sleep Aid Device
The Dodow sleep aid device is a compact, battery-operated device designed to help individuals fall asleep more quickly and easily. It works based on the principles of cognitive behavioral therapy for insomnia and meditation by employing light and breathing techniques.
It projects a soft blue halo of light that rhythmically expands and retracts, guiding the user to synchronize their breathing with this pattern. This process slows the breathing rate, fostering relaxation and sleep readiness.
It projects a soft blue halo of light that rhythmically expands and retracts, guiding the user to synchronize their breathing with this pattern. This process slows the breathing rate, fostering relaxation and sleep readiness.
Breathing App
The idea behind the application I designed was to make a web application that combined the advantages of both systems and added some new innovative features. Here is a brief overview of the Application:
- Let the user choose between 1 and 10 minutes of breathing.
- The user can choose between some songs to help them relax such as Lofi or rain sounds.
- Once the breathing exercise is done, the screen will turn black to avoid bothering the user if they have fallen asleep.
The Results
The application is available online to help anyone fall asleep or relax. To facilitate the synchronization I used a circle that extends as the light changes. It allows the user to breathe while looking at their screen, or to tilt the screen towards the ceiling to guide them fall asleep.
Languages Used
Python (Flask)
The Python language, with the Flask framework, was used to handle the server-side operations of the application. It provided the routing mechanism that helped to navigate between different pages of the website based on user interaction. Python also helped manage the HTTP methods GET and POST, which were essential for respectively retrieving and submitting user data.
HTML
HTML played a significant role in structuring the content of the web application, defining the skeleton for both the homepage and the breathing page. It also created user interaction elements such as dropdown lists and buttons, and included scripts and stylesheets to facilitate dynamic behavior and styling.
CSS
CSS was employed to provide the visual aesthetics of the website, such as the color transitions, the size and placement of elements, and the dynamic animations of the circles. The keyframe animation feature in CSS was particularly instrumental in achieving the breathing effect, allowing for a smooth, timed transition of colors and sizes.
JavaScript
JavaScript was responsible for implementing dynamic client-side functionalities such as triggering the fullscreen mode, managing the audio player, and handling the fading out of instructions. In addition, it utilized the setTimeout function to schedule the fade-out effect of the instruction text, demonstrating a basic understanding of asynchronous operations.
Harvard Submission
In order to complete the Harvard CS50x course, all the students have to upload a video of their final project. Here is the link to the video where I present my realization.
