🟨 Beginner Projects in JavaScript

Hands-on mini projects to learn JavaScript, HTML & CSS from scratch

A collection of beginner-friendly JavaScript projects built with vanilla HTML, CSS and JS — no frameworks, no libraries, just pure fundamentals.

Projects · How to Run · What You Learn · Contribute

---

📦 Projects

🧮 Calculator

A fully functional calculator with a clean UI

Features:

• Basic arithmetic — addition, subtraction, multiplication, division
• Clear and delete buttons
• Keyboard-friendly input handling
• Responsive layout

Concepts covered: DOM manipulation, event listeners, string parsing, conditional logic

---

✂️ Rock Paper Scissors

Classic hand game against the computer

Features:

• Player vs Computer gameplay
• Random computer choice generation
• Win / Lose / Draw result display
• Score tracking across rounds

Concepts covered: Math.random(), conditionals, DOM updates, game state logic

---

✅ To-Do List

A simple task manager to track your work

Features:

• Add new tasks
• Mark tasks as complete
• Delete tasks
• Clean, minimal UI

Concepts covered: Array manipulation, dynamic DOM creation, event delegation, localStorage (if added)

---

🚀 How to Run

No installation needed — these are pure frontend projects. Just open them in a browser.

Option 1 — Open directly

1. Clone the repo:

git clone https://github.com/Mayurkshirsagar-web/Beginner-Projects-in-JavaScript.git
cd Beginner-Projects-in-JavaScript

2. Navigate into any project folder:

cd Calculator        # or Rock-Paper-Scissors or To-Do-List

3. Open index.html in your browser:

# Windows
start index.html

# Mac
open index.html

# Linux
xdg-open index.html

Option 2 — VS Code Live Server (recommended)

1. Install the Live Server extension in VS Code
2. Open any project folder in VS Code
3. Right-click index.html → Open with Live Server
4. Auto-reloads on every save — perfect for learning

---

📁 Project Structure

Beginner-Projects-in-JavaScript/
│
├── Calculator/
│   ├── index.html
│   ├── style.css
│   └── script.js
│
├── Rock-Paper-Scissors/
│   ├── index.html
│   ├── style.css
│   └── script.js
│
├── To-Do-List/
│   ├── index.html
│   ├── style.css
│   └── script.js
│
└── README.md

---

🧠 What You Learn

These projects cover the core JavaScript concepts every beginner needs:

Concept	Where you use it
DOM Selection	All projects — getElementById, querySelector
Event Listeners	All projects — onclick, addEventListener
Conditionals	Rock-Paper-Scissors — game logic
String & Math	Calculator — parsing input, evaluating expressions
Arrays	To-Do List — managing task list
Dynamic HTML	To-Do List — creating elements with JS
Math.random()	Rock-Paper-Scissors — computer move
CSS + JS together	All projects — toggling classes, styling on state change

---

🤝 Contributing

Want to add a new beginner project? Go for it!

1. Fork this repo
2. Create your project folder with index.html, style.css, script.js
3. Keep it beginner-friendly — vanilla JS only, no frameworks
4. Open a pull request with a short description of what it does

Ideas for new projects: Stopwatch, Quiz App, Number Guessing Game, Color Picker, Tip Calculator

---

🔗 More Projects

Check out my other work:

• 🤖 Friday Virtual Assistant — Python voice assistant with Gemini AI
• 📅 AttendanceTracker.io — Smart attendance tracker for students

---

Made with 💛 by Mayur Kshirsagar

The best way to learn JavaScript is to build things — start here.