📝 GitHub Issue Tracker

📌 Project Overview

GitHub Issue Tracker is a responsive web application built with HTML, CSS, and JavaScript.
Users can manage issues efficiently by adding new issues, viewing all available issues, deleting unnecessary issues, and tracking statistics like total created, total selected, and total deleted issues.

This project demonstrates vanilla JS frontend development, responsive design, and interactive UI without using any frameworks.

---

📸 Screenshot

---

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)
• Font Awesome (icons)
• Local Storage (for saving issues)

---

✨ Main Features

• Add / Delete Issues: Easily add new issues and remove unwanted issues.
• View All Issues: Display all active issues in a clean interface.
• Issue Statistics: Track total created, total selected, and total deleted issues.
• Responsive Design: Works smoothly on mobile, tablet, and desktop.
• Interactive UI: Buttons, notifications, and dynamic DOM updates using JavaScript.

---

📦 Dependencies

This project uses only vanilla JS and CSS. Optional dependencies:

• Font Awesome (for icons)
• Google Fonts (for typography)

---

💻 How to Run Locally

1️⃣ Clone the repository

git clone https://github.com/your-username/github-issue-tracker.git

2️⃣ Navigate to the project folder

cd github-issue-tracker

3️⃣ Open index.html in a browser

Simply double click index.html or run a live server in VS Code.

Example using VS Code Live Server extension:

Right click index.html → Open with Live Server

---

🔗 Live Link & GitHub Repository

• 🌐 Live Site: https://nowshintisha230.github.io/Github_issue_tracker/
• 💻 GitHub Repository: https://github.com/nowshintisha230/github-issue-tracker

---

👩‍💻 Author

Nafisa Nowshin Tisha
Frontend Developer | CSE Student | JavaScript & Web Development Enthusiast

Some Basic Q&A

Differance between let,var and const

• var – function-scoped, can be redeclared & updated, hoisted.
• let – block-scoped, can be updated, cannot be redeclared in the same block.
• const – block-scoped, cannot be updated or redeclared, must be initialized.

Spread opeartor(...):Expands arrays or objects.

js example:

const arr1 = [1,2,3]; const arr2 = [...arr1,4,5]; // [1,2,3,4,5]

Differance between map(),filter(),and foreach():

map() – Transforms each element and returns a new array.
filter() – Returns a new array with elements that pass a condition.
forEach() – Executes a function on each element, does not return a new array.

Arrow function: A shorter way to write functions using =>.

js example:

const add = (a, b) => a + b; // same as function add(a, b) { return a + b; }

Template Literals – Strings using backticks ` that can embed variables or expressions.

js example:

const name = "Tisha"; const greeting = Hello, ${name}!; // "Hello, Tisha!" const sum = 2 + 3 = ${2 + 3}; // "2 + 3 = 5"