JavaScript Learning Projects 🚀

This repository documents my JavaScript learning journey through small, beginner-friendly projects. Each project focuses on understanding core JavaScript concepts by applying them in practice.

The projects are built while following a structured JavaScript tutorial and creating my own versions to strengthen fundamentals.

---

📌 Projects Included

✅ Day 1 – Console-Based Calculator

• Performs basic arithmetic operations
• Output is logged in the browser console
• Focus areas:
  • Variables
  • String-based calculations
  • Functions
  • Conditional logic

---

✅ Day 2 – Number Guessing Game (Simple UI)

• JavaScript generates a random number between 1–10
• User guesses the number using a simple UI
• Feedback is shown (Too high / Too low / Correct)
• Focus areas:
  • Math.random() and Math.floor()
  • Conditionals
  • Functions
  • JavaScript logic

Note: Basic HTML/CSS is used only to create a minimal interface.
The primary focus of these projects is JavaScript logic.

---

✅ Day 3 – Dice Roll Simulator & Rock Paper Scissors Game

Dice Roll Simulator

• Click a button to roll a dice (1–6)
• Result is displayed on the screen and logged in the console
• Focus areas:
  • Math.random() and Math.floor()
  • Functions
  • Basic JavaScript logic

Rock Paper Scissors Game

• User selects Rock, Paper, or Scissors
• Computer makes a random choice
• Game result (win / lose / tie) is shown using alerts
• Focus areas:
  • Random number generation
  • Conditional logic
  • Functions
  • Event handling

---

✅ Day 4 – Rock Paper Scissors with Scoreboard

• Upgraded the Rock Paper Scissors game
• Added a scoreboard for Player vs Computer
• Added reset functionality
• Results are displayed on the UI instead of alerts
• Focus areas:
  • State management using variables
  • Reusing existing game logic
  • Updating the UI dynamically
  • Functions and conditionals

---

✅ Day 5 – Random Quote Generator

• Displays a random quote on button click
• Quotes are stored in a JavaScript array
• Focus areas:
  • Arrays
  • Random index generation
  • Functions
  • DOM updates

---

✅ Day 6 – Character Counter & Random Color Generator

Character & Word Counter

• Counts characters and words in real time as the user types
• Uses a textarea input for multi-line text
• Focus areas:
  • String handling
  • Input events
  • DOM updates

Random Color Generator

• Generates a random background color on button click
• Displays the generated hex color code on the screen
• Focus areas:
  • Loops
  • Strings
  • DOM style manipulation

---

✅ Day 7 – To-Do List (Core Features)

Built a basic to-do list application.

Features:

• Add tasks dynamically
• Delete individual tasks
• Live task counter

Concepts practiced:

• DOM manipulation
• Event handling
• Basic state management

---

✅ Day 8 – To-Do App Enhancement & Mini Project

🔹 To-Do App Enhancement

Enhanced the existing to-do app by adding task completion.

Features:

• Mark tasks as completed using checkboxes
• Visual feedback for completed tasks
• Task counter remains accurate

Concepts practiced:

• Checkbox input handling
• Conditional UI updates
• DOM manipulation

🔹 Mini Project: Live Search Filter

Built a small project to filter list items in real time.

Features:

• Filters items as the user types
• Case-insensitive search

Concepts practiced:

• oninput event
• String comparison
• Dynamic show/hide of elements

---

✅ Day 9 – Text Utility Tool

Built a text utility mini project combining multiple JavaScript concepts.

Features:

• Live character count
• Live word count
• Convert text to uppercase and lowercase
• Clear text and reset counts

Concepts practiced:

• String methods
• Input events
• Conditional logic
• DOM updates

---

✅ Day 10 – Expense Tracker (Final Project)

Built a mini expense tracker as the final project of the challenge.

Features:

• Add expenses with name and amount
• Delete individual expenses
• Live total expense calculation

Concepts practiced:

• DOM creation and deletion
• Number handling
• Event-driven logic
• Real-time UI updates

---

🛠️ Technologies Used

• JavaScript
• HTML
• CSS (basic)

---

🎯 Goal of This Repository

• Build a strong foundation in JavaScript fundamentals
• Practice concepts through small projects
• Document learning progress publicly
• Gradually improve and refactor projects over time

---

📅 Learning Approach

• Follow one structured tutorial
• Implement concepts independently
• Avoid rushing into advanced topics
• Focus on clarity, consistency, and honesty

---

More projects will be added as I continue learning 🚀

🎯 10 Days of JavaScript – Summary

This challenge helped me build consistency and confidence with core JavaScript concepts by creating small, focused projects every day and gradually increasing complexity.