TimeTamer

• 

  starting

• 

  time setting

• 

  motivation quotes and get back to stop alarame

• 

  Ending

Inspiration As someone who often gets pulled into endless scrolling on sites like YouTube, TikTok, and Instagram, I realized how easy it is to lose track of time. I wanted to build a simple tool that could help me — and others — stay more intentional with our screen time. I didn’t want a strict blocker; I wanted something that gives you a nudge — loud enough to notice, but respectful of your autonomy.

That’s what inspired me to create TimeTamer — a minimal but persistent web alarm that reminds you to log off and refocus.

🛠️ What I Built TimeTamer is a browser-based tool that:

Lets users set a custom time limit for using distracting websites.

Triggers a loud, looping beep once the timer ends.

Keeps beeping until the user returns to the TimeTamer tab and turns it off manually — like a real alarm clock.

Displays motivational messages to help users resist the urge to keep scrolling.

It runs entirely in the browser, so there's no installation or sign-up required.

🔧 How I Built It I built the project on Replit using:

HTML, CSS, JavaScript for the frontend.

JavaScript’s Audio API to create and loop the beep sound.

Browser tab visibility APIs to detect whether the user is on the TimeTamer tab or not.

SetTimeout and visibility event listeners to keep the logic consistent even when users switch tabs.

🚧 Challenges I Faced Getting the alarm sound to autoplay reliably despite browser restrictions was tricky — most browsers block audio until there’s user interaction.

I had to find a way to detect when users left the tab and keep the alarm running in the background.

Designing the alarm so it couldn’t be ignored (but wasn’t annoying or broken) took some trial and error.

💡 What I Learned How to use tab visibility APIs and audio handling in modern browsers.

The importance of user experience even in small tools — getting the right balance of “persistent but not annoying” was key.

That even small web apps can have a meaningful impact on productivity and habits.

Built With

• browsersapi
• css
• html
• javascript
• javascriptaudioapi
• replit