Advance JS Assignment
Assignment 1: Array Manipulation
This task includes various functions related to array manipulation. Decide the UI option by
yourself.
●
●
●
●
●
Write a function that takes an array of numbers and returns a new array with each
number squared.
Implement a function that filters out all even numbers from an array.
Create a function that finds the maximum and minimum values in an array without
using built-in methods.
Write a function that reverses the elements of an array.
Combine multiple arrays into one and remove duplicate elements.
Assignment 2: Object Manipulation
In this project, you will create an interactive weather dashboard using HTML, CSS, and
JavaScript. The dashboard will allow users to manage their favorite cities and view simulated
weather information directly on the webpage. This project emphasizes understanding local
storage for data persistence and dynamic UI updates based on user interactions.
Project Steps:
Setup: Create HTML, CSS, and JavaScript files. Link them together and set up the basic
structure of the dashboard.
Local Storage: Implement functions to manage adding and retrieving favorite cities using
local storage.
Weather Simulation: Define simulated weather data as JS Object for a few cities to display
on the dashboard.
UI Updates: Write JavaScript functions to update the UI dynamically when users interact
with the dashboard.
Conclusion: We need to store weather data for some cities as a JavaScript object in
the backend. Users can add these cities using a text box, and after adding them and
clicking, the weather information should be displayed to the user. The main
requirement of this project is that when the user refreshes the page, the added cities
should not be removed, and users should not need to add them again. Use
localStorage to achieve this.
Assignment 3: Object Manipulation
In this project, you will create an expense tracker application using HTML, CSS, and
JavaScript. The application will allow users to log their daily expenses, categorize them, and
provide a budget analysis. This project emphasizes understanding local storage for
persistent data storage and implementing basic math logic for budget calculations.
Features to Implement:
Expense Logging: Allow users to input daily expenses with details like amount, category
(e.g., groceries, transportation), and date.
Category Management: Provide options to categorize expenses for better analysis (e.g.,
food, utilities, entertainment).
Budget Analysis: Display a summary of total expenses, remaining budget, and percentage
spent relative to the budget.
Local Storage Integration: Use local storage to persist expense logs and budget data
across sessions.
Project Steps:
Setup: Create HTML, CSS, and JavaScript files. Link them together and set up the basic
structure of the expense tracker application.
Local Storage Management: Implement functions to store and retrieve expense logs and
budget data using local storage.
Expense Logging: Write JavaScript functions to capture user input for logging expenses,
categorizing them, and updating the expense list.
Budget Analysis: Calculate total expenses, remaining budget, and percentage spent based
on user inputs and display the results on the UI.
Conclusion: For this task, we need to create an expense tracker where the user can
set their total budget. Every time the user adds an expense along with its category,
they should be able to see how much of the budget remains and what percentage they
have spent. Additionally, a list will be created that displays expenses categorized by
date.
The key requirement is that all lists and dynamic values should persist even if the
page is refreshed. We can achieve this using either localStorage or JavaScript
cookies.
Assignment 4: Creating a Shopping Cart with Persistent
Data
Objective: Design a web application that simulates a shopping cart functionality without
relying on server-side databases, utilizing local storage for persistence.
Description: You are tasked with developing a shopping cart feature. The shopping cart
should allow users to add products, view their selected items, and calculate the total cost
dynamically. Here are the key features and requirements:
Note:- Basically in this task, there are two sections in our web page first named products and
the other Cart add some products in your code statically when the user adds the product
Display the list of products added to the cart, along with their quantities and individual prices.
At the same time calculate and display the total cost of all items in the cart.
Include functionalities to add, or remove, the products in the cart.
Ensure that changes to the cart (additions, deletions) are reflected immediately in the
displayed total cost.
Note:- persist the cart data across page refreshes and sessions.