# 🎓 Student Toolkit

A simple **all-in-one student productivity dashboard** that brings four useful student tools together in one place.

Instead of keeping separate projects for different tasks, Student Toolkit provides quick access to:

* 📊 Student GPA Calculator

* 📝 Student Quiz Website

* 📅 Student Study Planner

* 💰 Student Budget Planner

---

## 🛠️ Technologies Used

* 🌐 **HTML5** — Structure and content

* 🎨 **CSS3** — Styling, responsive layout, themes, and animations

* ⚡ **JavaScript** — Interactivity, navigation, theme customization, and functionality

* 💾 **LocalStorage** — Saving theme preferences

---

## ✨ Features

* 🎓 All-in-one student dashboard

* 📊 GPA Calculator

* 📝 Interactive Quiz Website

* 📅 Study Planner

* 💰 Budget Planner

* 🌙 Light and Dark Mode

* 🎨 Custom Accent Colors

* 💾 Saves theme preferences using LocalStorage

* 📱 Responsive design for different screen sizes

* 🔗 Easy navigation between all four student tools

* 🖥️ Simple and clean user interface

---

## 🔨 Process

I built Student Toolkit by combining my four previous student-focused projects into one dashboard.

### 1️⃣ Designed the Dashboard

Created a central homepage where students can easily access all four tools.

### 2️⃣ Added the Existing Projects

Organized the four projects into separate folders inside Student Toolkit.

### 3️⃣ Connected the Tools

Added navigation so each dashboard button opens its corresponding project.

### 4️⃣ Added Theme Customization

Implemented Light Mode, Dark Mode, and multiple accent colors.

### 5️⃣ Added LocalStorage

Used LocalStorage to remember the user's selected theme and accent color.

### 6️⃣ Tested the Project

Tested the dashboard and all four project links locally to make sure everything works correctly.

---

## ▶️ How to Run

1. 📥 Download or clone this repository.

2. 📂 Open the **Student Toolkit** folder.

3. 🌐 Open index.html in your browser.

4. 🎯 Choose any of the four student tools from the dashboard.

No additional installation or dependencies are required.

---

## 📁 Project Structure

Student Toolkit/

│

├── index.html

├── style.css

├── script.js

│

├── gpa/

│   └── GPA Calculator files

│

├── quiz/

│   └── Quiz Website files

│

├── planner/

│   └── Study Planner files

│

└── budget/

    └── Budget Planner files

---

## 💡 What I Learned

* 🧱 How to structure a multi-page web project

* 🔗 How to connect multiple projects through a central dashboard

* 🎨 How to create responsive and reusable UI components

* 🌙 How to implement Light and Dark Mode

* 🎨 How to create customizable themes

* 💾 How to use LocalStorage with JavaScript

* 📂 How to organize files and folders for a larger project

* 🧪 How to test and debug a multi-project website

---

## 🎥 Video

### 🎬 Student Toolkit — Project Demo

🎥 **Video:**

[Watch the video] (https://github.com/user-attachments/assets/bb4208c8-33dd-4b1a-b82a-5d44282991a4 )