The Odin Project Full Stack JavaScript — Live Projects

Welcome to the live versions of my projects from The Odin Project!
This branch hosts the projects I built as part of the The Odin Project Full Stack JavaScript course.

---

🚀 Live Projects

Check out my projects running on GitHub Pages:

• Admin Dashboard
• Sign Up Form
• Tic-Tac-Toe Game
• Digital Library
• Restaurant Page
• To-Do List
• Weather App

---

📚 🛠 Skills & Tools Learned

Throughout these projects, I developed practical skills and worked with modern JavaScript tools, including:

• JavaScript fundamentals: DOM Manipulation, Event Handling, Data Structures & Algorithms, Form Validation
• Asynchronous JavaScript & APIs: Handling async code with async/await, fetching and processing data from public APIs (e.g., Weather App)
• Application state management: Using localStorage for data persistence in the Todo List project
• Modular architecture: Writing clean, maintainable code with ES6 modules, factory functions, and classes
• Responsive UI Design: Building layouts with CSS Flexbox and Grid for mobile-friendly interfaces
• Tooling: Using Webpack and npm for bundling, package management, and asset optimization
• Libraries: Utilizing helpful npm packages such as date-fns for date manipulation and formatting

These combined skills showcase a full-stack JavaScript foundation and modern web development best practices.

---

🛠 Technologies Used

---

Screenshots

Weather App

A simple weather dashboard that fetches live weather data from a weather API.
Built with modern JavaScript using Webpack and npm for bundling.

Weather App Link

---

Admin Dashboard

A static admin dashboard built using HTML and CSS Grid.

• Demonstrates a clean, responsive layout using CSS Grid for positioning elements.
• Focuses on practicing modern layout techniques without JavaScript.
• Includes cards, navigation, and placeholder charts for layout structure.

Admin Dashboard Link

---

Tic Tac Toe Game

A browser-based Tic Tac Toe game with interactive gameplay.

• Uses modular JavaScript patterns (factories, IIFEs) to organize game logic.
• Implements win/tie detection and enforces game rules.
• Lets players enter names, restart the game, and displays game outcomes.
• Focuses on managing game state and updating the DOM accordingly.

Tic-Tac-Toe Game Link

---

Todo List

A fully functional todo list application with:

• Creation, editing, and deletion of tasks and projects
• Task prioritization and completion toggles
• Persistent storage using the Web Storage API (localStorage)

The app emphasizes clean modular code, separation of concerns, and responsive design.

To-Do List Link

---

Digital Library

A simple app to manage a personal library of books.

• Uses a Book constructor and an array to store book objects with unique IDs.
• Allows adding, removing, and toggling read status of books via a form and buttons.
• Demonstrates separation of data management from UI rendering.
• Practices event handling, DOM manipulation, and working with data structures.

Digital Library Link

---

📚 Prerequisite Foundations

These projects build upon the fundamentals I practiced in The Odin Project JavaScript Foundations course.

➡️ You can view those foundational exercises and projects here: FoundationsJS Repository

---

🔄 How to Update

1. Make changes to your local project (e.g., tic-tac-toe).
2. Commit changes on your local main branch:

   git add .
   git commit -m "Update [project name]"