This repository contains the materials and activities for our study jam. Whether you're a beginner or looking to refresh your skills, this repo will guide you through building your first Pomodoro Timer web application.
Explore the contents of this repository below. Click on the folder names to navigate!
1. 📁 Live Project
This folder contains the Finished Code we used during the live coding session.
| Use this if: | You want to review what we built during the event or understand the complete Pomodoro Timer. |
| Contains: | pomodoro.html, main.js, pomodoro.css, and a comprehensive guide explaining each function. |
2. 📁 Post Jam Activity
This is your Challenge! 🎯
| Use this if: | You are ready to apply what you learned and extend the Pomodoro Timer. |
| The Mission: | Implement the Task Management feature and add any bonus features you want! |
| Contains: | A modified boilerplate with empty functions and instructions for the activity. |
- ✅ Required: Implement
addTask(),deleteTask(), andupdateTaskCount()functions - 🌟 Bonus: Choose from 10+ feature ideas like background music, keyboard shortcuts, dark mode, and more!
3. 📁 Assets
Contains images and resources used in the guides and tutorials.
Note: You can ignore the
.githubfolder. It contains configuration files for the repository template and isn't part of the workshop.
| Technology | Purpose |
|---|---|
| HTML5 | Structure and layout |
| CSS3 | Styling with glassmorphism design |
| JavaScript (ES6+) | Timer logic, DOM manipulation, and interactivity |
- Clone or Download this repository
- Navigate to the
Live Projectfolder to see the completed code - Challenge yourself with the
Post Jam Activityfolder
# To run locally, simply open pomodoro.html in your browser
# Or use a local server:
cd "Live Project"
npx serve .- ✅ Variables and Constants (
const,let) - ✅ DOM Selection (
getElementById) - ✅ Functions and Event Listeners
- ✅ Timers (
setInterval,clearInterval) - ✅ String Methods (
padStart) - ✅ CSS Custom Properties manipulation
- ✅ Conditional Logic and State Management
Made with ❤️ by GDG PUP Web Dev Team
Happy Coding! 🚀