README.md

Welcome to the Webverse Vol. 2: JavaScript & DOM Manipulation

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.

---

📂 Repository Structure

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.

Your Challenges:

• ✅ Required: Implement addTask(), deleteTask(), and updateTaskCount() 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 .github folder. It contains configuration files for the repository template and isn't part of the workshop.

---

🛠️ Technologies Used

Technology	Purpose
HTML5	Structure and layout
CSS3	Styling with glassmorphism design
JavaScript (ES6+)	Timer logic, DOM manipulation, and interactivity

---

🚀 Getting Started

1. Clone or Download this repository
2. Navigate to the Live Project folder to see the completed code
3. Challenge yourself with the Post Jam Activity folder

# To run locally, simply open pomodoro.html in your browser
# Or use a local server:
cd "Live Project"
npx serve .

---

� What You'll Learn

• ✅ 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! 🚀