StudyTube banner

StudyTube

Created by: nilusankalukshan64
3 devlogs
2h 23m 37s

Updated Project: StudyTube is a simple web app designed to help students stay focused while studying.
It provides a clean study space with tools like a Pomodoro timer, study sessions, and a distraction-free way to use YouTube for learning.

Thi…

Updated Project: StudyTube is a simple web app designed to help students stay focused while studying.
It provides a clean study space with tools like a Pomodoro timer, study sessions, and a distraction-free way to use YouTube for learning.

This project is built using HTML, CSS, and JavaScript and is focused on learning frontend web development while solving a real problem students face: distraction during study time.

This project uses AI

i got helps from chat gpt to make the readme and debug

Demo Repository

README

Loading README...
nilusankalukshan64
nilusankalukshan64 shipped StudyTube
about 1 month ago

Shipped this project!

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.

nilusankalukshan64
nilusankalukshan64 worked on StudyTube
about 1 month ago
0h 31m logged

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

Attachment
0
nilusankalukshan64
nilusankalukshan64 worked on StudyTube
about 1 month ago
1h 20m logged

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.

Attachment
0
nilusankalukshan64
nilusankalukshan64 worked on StudyTube
about 1 month ago
0h 31m logged

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

Attachment
0