Hey guys , I built StudyTube, a focused study platform that combines a Pomodoro timer with a distraction-free video player. The hardest part was making the timer continue running seamlessly when switching to the focused video page, but I figured it out using localStorage. I’m really proud of how clean and simple the interface feels, and I hope it helps students stay motivated and focused while studying.
Today, I updated the StudyTube project to make the video player more focused. Instead of embedding videos directly on the main page, users now enter a YouTube link and are redirected to a second page that only shows the video and the timer. I also connected the timer between pages using localStorage, so it keeps counting even after moving to the focused video page. This makes the study experience cleaner and distraction-free. AND ITS AVAILABLE ON PUBLIC NOWs
Log in to leave a comment
Today I implemented a YouTube video input feature for my StudyTube project. Users can paste a video link, and the JavaScript extracts the video ID to display the video in a responsive iframe. Once a video is added, the input box automatically disappears to keep the page clean. I also styled the video with CSS so it appears larger, centered, and maintains a 16:9 aspect ratio, making it responsive on different screen sizes. Additionally, I added a 25-minute focused timer with Start and Reset buttons that updates every second, working independently from the video player. Finally, I integrated both the video system and the timer into the same page with clean HTML structure, ensuring consistent IDs and classes for easy management. Next steps include allowing multiple videos to appear in a feed, storing videos in a database like Firebase for a full blogging platform, and improving the UI/UX for a more polished appearance.
Log in to leave a comment
Today,I created the basic structure of StudyTube, a study-focused web app. I built:
• an HTML page for the layout
• CSS for basic styling
• JavaScript logic for a Pomodoro-style study timer
• a notes feature that saves data using localStorage
The app now allows users to start a 25-minute study timer, reset it, and write study notes that stay saved even after refreshing the page.
What I learned:
• How to separate a project into HTML, CSS, and JavaScript files
• How timers work in JavaScript using setInterval
• How to store and retrieve data using localStorage
• Why choosing the right tools for a project is important
Next steps:
• Improve the UI
• Add a YouTube study video embed
• Add more focus-related features
Log in to leave a comment
