### Unit Title: Building Interactive Web Applications with JavaScript **Unit Overview:** This curriculum teaches JavaScript through practical projects that build web applications, games, data visualization, e-commerce, and social media features. Students will gain hands-on experience with JavaScript, HTML, CSS, and various libraries, focusing on applying skills in realistic scenarios. #### Module 1: Web Applications - **Week 1: Todo List** - **[Day 1]([[Week 1, Day 1 - Introduction to JavaScript and DOM Manipulation in WordPress]])**: Introduction to JavaScript and DOM manipulation. - **[Day 2]([[Week 1, Day 2 - Handling User Input and Events in WordPress]])**: Handling user input and events. - **[Day 3]([[Week 1, Day 3 - Implementing CRUD Operations for Task Management in WordPress]])**: Implementing CRUD operations for task management. - **[Day 4]([[Week 1, Day 4 - Enhancing UI and Adding Features like Task Filtering in WordPress]])**: Enhancing UI and adding features like task filtering. - **[Day 5]([[Week 1, Day 5 - Debugging and Deploying the Todo List Application in WordPress]])**: Debugging and deploying the Todo List application. - **Week 2: Weather App** - **[Day 1]()**: Setting up the project and exploring APIs. - **[Day 2]([[Week 2, Day 2 - Fetching Weather Data Using Asynchronous JavaScript in WordPress]])**: Fetching weather data using asynchronous JavaScript. - **[Day 3]([[Week 2, Day 3 - Handling JSON Data and Updating the UI Dynamically in WordPress]])**: Handling JSON data and updating the UI dynamically. - **[Day 4]([[Week 2, Day 4 - Adding User Input and Error Handling in WordPress]])**: Adding user input and error handling. - **[Day 5](Week 2, Day 5 - Final Adjustments and Deploying the Weather App as a [[Week 2, Day 5 - Final Adjustments and Deploying the Weather App as a WordPress Block Plugin]])**: Final adjustments and application deployment. - **Week 3: Calculator** - **[Day 1]([[Week 3, Day 1 - Designing the Calculator UI]])**: Designing the calculator UI. - **[Day 2]([[Week 3, Day 2 - Implementing Basic Calculator Functions]])**: Implementing basic calculator functions. - **[Day 3]([[Week 3, Day 3 - Adding Complex Functionalities (Scientific Calculations) in WordPress]])**: Adding complex functionalities (scientific calculations). - **[Day 4]([[Week 3, Day 4 - Ensuring Usability and Accessibility of the Calculator in WordPress]])**: Ensuring usability and accessibility. - **Day 5**: Testing and polishing the UI. - **Week 4: Blog Platform** - **[Day 1]([[Week 4, Day 1 - Introduction to Server-Client Interactions with JavaScript in WordPress]])**: Introduction to server-client interactions. - **[Day 2]([[Week 4, Day 2 - Implementing CRUD Operations for Posts using JavaScript in WordPress]])**: Implementing CRUD operations for posts. - **[Day 3]([[Week 4, Day 3 - Adding Interactive Features like Comments and Likes]])**: Adding features like comments and likes. - **[Day 4*]([[Week 4, Day 4 - Enhancing Security and User Authentication with JavaScript]])*: Enhancing security and user authentication. - **[Day 5*]([[Week 4, Day 5 - Deploying and Maintaining the Blog Platform]])*: Deploying and maintaining the blog platform. #### Module 2: Interactive Games - **Week 5: Memory Game** - **[Day 1]([[Week 5, Day 1 - Game Design and Basic Setup for a Memory Game in WordPress]])**: Game design and basic setup. - **[Day 2]([[Week 5, Day 2 - Implementing Game Logic for Card Matching in WordPress]])**: Implementing game logic for card matching. - **[Day 3]([[Week 5, Day 3 - Enhancing UI and Interactive Elements in WordPress]])**: Enhancing UI and interactive elements in WordPress. - **[Day 4*]([[Week 5, Day 4 - Adding Timers and Score Tracking to Memory Game in WordPress]])*: Adding timers and score tracking. - **[Day 5]([[Week 5, Day 5 - Debugging and Final Touches on the Memory Game]])**: Debugging and final touches. - **Week 6: Quiz App** - **[Day 1]([[Week 6, Day 1 - Setting Up the Quiz Framework in WordPress]])**: Setting up the quiz framework. - **[Day 2]([[Week 6, Day 2 - Designing Questions and Handling User Responses in WordPress]])**: Designing questions and handling user responses. - **[Day 3]([[Week 6, Day 3 - Adding Scoring and Progress Tracking in WordPress]])**: Adding scoring and progress tracking. - **[Day 4]([[Week 6, Day 4 - Incorporating Multimedia Elements and Feedback in WordPress]])**: Incorporating multimedia elements and feedback. - **[Day 5]([[Week 6, Day 5 - Final Testing and Deployment of the Quiz App]])**: Final testing and deployment. - **Week 7: Tic-Tac-Toe** - **[Day 1]([[Week 7, Day 1 - Basic Game Setup and Rules for Tic-Tac-Toe in WordPress]])**: Basic game setup and rules. - **[Day 2]([[Week 7, Day 2 - Implementing Game Logic and State Management in WordPress]])**: Implementing game logic and state management. - **[Day 3]([[Week 7, Day 3 - Creating a Dynamic UI for Tic-Tac-Toe in WordPress]])**: Creating a dynamic UI. - **[Day 4]([[Week 7, Day 4 - Adding Multiplayer Features to Tic-Tac-Toe in WordPress]])**: Adding multiplayer features. - **[Day 5](Week 7, Day 5 - Polishing and Deploying the Tic-Tac-Toe Game)**: Polishing and deploying the game. #### Module 3: Data Handling and Visualization - **Week 8: Dashboard** - **[Day 1]([[Week 8, Day 1 - Introduction to Data Visualization Concepts in WordPress]])**: Introduction to data visualization concepts. - **Day 2**: Integrating Chart.js for graphing data. - **Day 3**: Parsing and displaying data dynamically. - **Day 4**: Customizing charts and adding interactivity. - **Day 5**: Debugging and optimizing performance. - **Week 9: Finance Tracker** - **Day 1**: Designing the finance tracking interface. - **Day 2**: Implementing form handling for data entry. - **Day 3**: Aggregating and analyzing financial data. - **Day 4**: Adding visualizations for expenses and income. - **Day 5**: Final adjustments and user testing. #### Module 4: E-commerce and Social Media Interactions - **Week 10: Shopping Cart** - **Day 1**: Basic cart setup and product listing. - **Day 2**: Adding and removing products from the cart. - **Day 3**: Integrating pricing calculations and discounts. - **Day 4**: Ensuring real-time updates and state management. - **Day 5**: Testing and deploying the shopping cart system. - **Week 11: Product Filter** - **Day 1**: Designing filters for product attributes. - **Day 2**: Implementing dynamic filtering logic. - **Day 3**: Optimizing performance for large product lists. - **Day 4**: User interface enhancements. - **Day 5**: Review and deployment. - **Week 12: Image Gallery** - **Day 1**: Setting up the gallery and image upload feature. - **Day 2**: Managing image storage and display. - **Day 3**: Implementing user comments and interactions. - - **Day 4**: Adding features like sorting and searching. - **Day 5**: Final review, debugging, and deployment strategies. - **Week 13: Real-Time Chat Application** - **Day 1**: Overview of WebSockets and real-time web technologies. - **Day 2**: Establishing a WebSocket connection. - **Day 3**: Implementing message sending and receiving functionalities. - **Day 4**: Enhancing the chat UI with JavaScript. - **Day 5**: Security considerations and deploying the chat application. **Assessment:** - Weekly project submissions and code reviews. - Final assessment through a capstone project that integrates skills from various modules. **Learning Outcomes:** By the end of this unit, students will have a solid foundation in building interactive web applications using modern JavaScript techniques, with an emphasis on real-world applications and problem-solving skills.