Mini project

Init web

DATE \@ "MMMM d" \* MERGEFORMAT

May 18

USTHB
Under the guidance of Mr. Bellach
Authored by: Your Name 1
The project subject:
Administrative To-Do List Website Report
Admin access:
[email protected]
password :admin

Introduction

This report outlines the development and functionalities of the to do list website, a
web-based application designed to streamline administrative tasks and improve
productivity.

In this report, I will focus on aspects of [your project/topic] that haven't

been covered in the videos.
Problem Statement

Administrative work often involves juggling numerous tasks with varying

deadlines. Traditional methods like paper to-do lists or scattered digital notes can
lead to disorganization, missed deadlines, and decreased efficiency.

Solution

my tackles these challenges by providing a centralized platform for managing

administrative to-do lists. It offers features that promote organization,
prioritization, collaboration, and efficiency.

Features

 Task Management: Create, edit, and manage individual tasks with clear
descriptions, deadlines;
 Centralized View: Access all your to-do lists from a single dashboard, allowing
for a holistic overview of your workload.
 Progress Tracking: Monitor progress on individual and team tasks, fostering
accountability and transparency.
2
  (Optional) Reporting: Generate reports on completed tasks, time spent, and
team member performance (if applicable).
 (Optional) Mobile Accessibility: Offer a mobile-friendly interface for accessing
to-do lists and managing tasks on the go.

Target Audience

Small entrpries caters to various administrative professionals, including:

 Office managers
 Personal assistants
 Executive assistants
 Project coordinators
 Team leaders
 And any individual managing multiple administrative tasks

Benefits
 Increased Productivity: Streamlined task management and automation lead to
a more productive work environment.
 Improved Time Management: Prioritization and deadline setting ensure
efficient time allocation.
 Enhanced Collaboration: Team members can work together seamlessly on
shared tasks and projects.
 Reduced Stress: Clear organization and reminders minimize missed deadlines
and task-related anxiety.
 Improved Communication: Collaboration features facilitate better
communication within teams.
 Data-Driven Insights: (Optional) Reports provide valuable data for optimizing
workflow and individual performance.

3
Development
The website was built using a combination of modern web
development technologies to ensure a user-friendly and efficient
experience. Here's a breakdown of the key technologies used:
 Front-End Development:
o HTML (Hypertext Markup Language): Provides the

foundation for the website's structure and content.

o CSS (Cascading Style Sheets): Defines the visual style

and layout of the website, ensuring a clean and intuitive

user interface.
o JavaScript: Enables dynamic interactivity and

functionality within the website, such as creating and

managing tasks, setting reminders, and handling user
interactions.
 Data Persistence:
o Local Storage: Leverages the browser's local storage

capabilities to save user data locally on their device. This

allows users to access and manage their to-do lists even
when offline.

4
5
6
The java script functions

1. Getter(localvar)
This function retrieves data from the browser's local storage for a specific key
(localvar).

 Steps:
o Initializes an empty list (list).
o Retrieves the data stored under the key localvar using
localStorage.getItem(localvar).
o Checks if the retrieved data (storedData) is not null and not an empty
string after trimming whitespace.
 If the condition is true, it parses the JSON-formatted data using
JSON.parse(storedData) and stores it in the list variable.
o Returns the populated list containing the retrieved data or an empty list
if no data was found.

7
2. GetterUser()
This function is a simplified version of Getter(localvar), specifically designed to
retrieve user data stored under the key "user".

 Steps:
o Retrieves data stored under the key "user" using
localStorage.getItem("user").
o Follows the same logic as Getter(localvar) to check for null/empty
data and parse it if valid.
o Returns the populated list containing the user data or an empty list if no
data was found.

3. adduser()
This function handles adding a new user to the local storage.

 Steps:
o Retrieves the user's email and password from the corresponding form fields
using
document.querySelector('input[name="email"]').valu
e and similar for password.
o Calls the Getter("users") function to retrieve existing user data from
local storage.
o Validates if both email and password are entered, displaying an alert if not.
o If both fields are filled:
 Initializes a flag exist to false, assuming the user doesn't exist yet.
 Loops through the existing users (users) using forEach.
 Checks if the entered email already exists in the list. If found,
sets the exist flag to true.
 If the email doesn't exist (!exist):
 Creates a new user object with email, password, and
timestamp using the date() function.
 Pushes the new user object into the existing users list
(users.push(req)).
 Updates the local storage with the updated user list using
localStorage.setItem("users",
JSON.stringify(users)).
 Displays a success alert and calls displayUsers() to
update the user list on the page.
8
  If the email already exists, displays an alert informing the user.

4. date()
This function retrieves the current date and time and formats it into a string.

 Steps:
o Creates a now object representing the current date and time using new
Date().
o Extracts individual components like year, month, day, hour, and minute.
o Formats the date and time components by adding leading zeros for single-
digit values using padStart(2, "0").
o Combines the formatted date and time into a single string
(formattedDateTime).
o Returns the formatted date and time string.

5. displayUsers()
This function retrieves user data from local storage and displays it in a table on the
webpage.

 Steps:
o Retrieves a reference to the HTML element with the ID "userTable"
where the users will be displayed.
o Calls Getter("users") to retrieve the user data from local storage.
o Clears the existing content of the user table (userList.innerHTML =
"").
o Loops through the retrieved users (users.forEach((user) =>
{ ... })).
 Creates a new table row element (<tr>).
 Creates table data elements (<td>) for email, password, and a delete
button.
 Sets the content of each table data element based on the user object's
properties (email, password).
 Creates a button element with an onclick event handler that calls
deleteUser(user.email) when clicked.
 Appends the table data elements and the button element to the table
row.
 Appends the populated table row to the user table element.

9
  Finally, adds an event listener to the window's load event, which calls
displayUsers() when the page loads to populate the user table initially.

6. deleteUser(email)
This function removes a specific user from the local storage based on their email
address.

 Steps:
o Calls Getter("users") to retrieve the user data from local storage.
o Uses `findIndex((user) => user.email ===

Conclusion
The to do list website offers a comprehensive
solution for managing administrative to-do lists.
By promoting organization, prioritization,
collaboration, and efficiency, it empowers users
to achieve a more productive and stress-free
work experience.

10