Beeper Live Demo A simple web app that chimes on a predefined interval. I used it to keep myself on track (interval configurable via URL query)
Home / Projects / Tech Academy / Beeper

Project DetailsInfo behind this project

This project was not an assignment given by the instructors or the learning platform. I originally came up with the idea when I was grilling and wanted a timer that restarted as soon as it elapsed, while still playing a tone. The site visuals were built with HTML and CSS, with a seven segment font. It would be pretty much impossible to make a configurable timer without the user of Javascript, I didn't use any frameworks or libraries, the client-side script parses the query in the URL and sets the timer, from there you can start and stop the restarting timer as you'd like. You can see the live demo here.

Technologies UsedWhat engines, frameworks and tools were used

Hypertext Markup Language (HTML)

HTML is used to define the general hierarchy and relationships between elements on a webpage. HTML itself, usually doesn't look very presentable and looks like a something you'd find in the 90s, so you'll need to use CSS to add color.

Cascading Style Sheets (CSS)

CSS is used in combination with HTML, it is used to "paint" the canvas that was built with HTML. However, CSS is not a programming language and does not provide any programmable functionality.

Javascript (JS)

Javascript can be utilized to provide functionality and programmable logic to webpages and/or servers assumming it is using a JS runtime on the server. With Javascript you can make a popup open to alert the user about unsaved changes or process a login request.

I used Javascript to ..

  • .. parse and read the query string (including hours, minutes and seconds)
  • .. make a loop that gets called every second to countdown and update the virtual display