JS Practicum

A structured collection of JavaScript exercises designed for beginners and intermediate learners to build strong foundational and practical skills.

Each project focuses on a single concept, from DOM manipulation to state management and API integration.

Purpose

The goal of this practicum is to:

• Reinforce core JavaScript concepts through hands-on implementation
• Encourage structured problem-solving and debugging
• Provide a progressive learning path from fundamentals to applied projects

The emphasis is on understanding and practice, not just completing tasks.

Requirements

• Modern browser (Chrome/Edge/Firefox recommended)
• Code editor (VS Code preferred)
• Basic knowledge of HTML & CSS
• Git (optional, recommended)

Project Structure

Each project follows a consistent folder structure:

quests/
│
├── 01.counter/
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   └── README.md

• index.html → UI structure
• style.css → Styling
• script.js → Implementation of logic
• README.md → Instructions and concepts

How to Use

1. Clone or download the repository:

git clone https://github.com/your-username/JavaScript-Projects.git
cd JavaScript-Projects

2. Start with lower-numbered projects.
3. Read the project README carefully.
4. Implement logic in script.js.
5. Open index.html in a browser and test your solution.
6. Debug using DevTools and iterate until correct.

Quest Levels

1. Level 1 – Core JavaScript & DOM

• Variables, functions, loops, arrays
• Event listeners and DOM manipulation
• Example projects: Counter, To-Do List, Color Changer

2. Level 2 – Practical Applications

• localStorage, fetch() & async/await
• Error handling and basic state management
• Example projects: Weather App, Notes App, Quiz App

3. Level 3 – Mini Systems

• Structured state and UI logic
• Search, filter, and interactive components
• Example projects: E-commerce Cart, Kanban Board, Blog Interface

Best Practices

• Keep functions small and readable
• Avoid changing requirements to pass results
• Use DevTools to debug before seeking external solutions
• Attempt each project fully before consulting references

Solutions

Reference implementations (if available) will be in a separate solutions/ folder. Best practice: attempt first, compare later.

Contributors

Maintained by:

• P. Kawshikk Shriidatta
• G. Ganesh