Skip to content

gdg-pup-webdev/GDG-PUP-JavaScript-25

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

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

About

Repository for the SJ2 in December 14, 2025.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •