Scribd
Upload
3 views7 pages

JavaScript DOM

The document outlines several tasks involving JavaScript DOM manipulation, including features like image upload previews, theme toggling, a simple counter, form validation, image toggling, dropdown creation, real-time filtering of list items, a real-time clock with background color changes, and user authentication status management. Each task requires specific functionalities to enhance user interaction on a webpage. The document serves as a guideline for implementing these features effectively using JavaScript.

Uploaded by

annnuji2030
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views7 pages

JavaScript DOM

The document outlines several tasks involving JavaScript DOM manipulation, including features like image upload previews, theme toggling, a simple counter, form validation, image toggling, dropdown creation, real-time filtering of list items, a real-time clock with background color changes, and user authentication status management. Each task requires specific functionalities to enhance user interaction on a webpage. The document serves as a guideline for implementing these features effectively using JavaScript.

Uploaded by

annnuji2030
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JavaScript DOM

1. Your client needs a feature to upload a profile picture on their


website. Your task is to create an "input type=file" element that
allows users to select images. Once an image is uploaded,
display a preview of the selected image below the file input. You
are required to achieve this using JavaScript DOM manipulation.
2. You have been assigned a task to implement a theme toggle
feature for a website. The website currently displays which mode
it is in (either "Dark Mode" or "Light Mode") and has a toggle
button. The challenge is to use DOM manipulation to toggle the
theme between dark and light modes when the button is clicked.

3. You are tasked with building a simple web counter that displays
two buttons: "+" and "-". When the user clicks the "+" button, the
counter should increment by one, and when the user clicks the
"-" button, the counter should decrement by one. If the counter
goes below zero, you must notify the user through an alert.
4. You are tasked to create form validation using JS DOM. Ensure
that the username must be at least 3 characters long, and the
password must be at least 8 characters long. On form
submission, display an alert stating "Form Validation successful"
if the conditions are met, otherwise, show "Form Validation
failed." Remember, on form submission, the webpage must not
be reloaded.
5. Your task is to implement an image toggle using JS DOM.
Create a heading to display the current state of the image and a
toggle button. When the button is clicked, if the image is hidden,
make it visible, and update the message accordingly. If the
image is visible, hide it, and update the message accordingly.
6. Your task is to use JS DOM to create a heading element and a
dropdown element. You have an array of options, and you need
to loop through them, adding each option as a dropdown item.
Below are the reference images.

7. You are tasked to create an input field and a list of items. As the
user types in the input field, dynamically filter the list to show
only items that match the input. Making sure the list updates in
real-time as the user types.
8. Your task is to create a webpage that displays the time in hours,
minutes, and seconds in the center of the screen. Format the
time to have 2 digits for hours, minutes, and seconds, and use
the time's values to assign a hex code to the background. The
timer should update in real-time without any user interaction. For
Example: If the time is 12:10:50 the background color of the
webpage will have the hex code “#121050”.

9. Your task is to create a simple webpage with two buttons:


"Login" and "Logout." When the "Login" button is clicked, the
user's authentication status should be stored in localStorage.
When the "Logout" button is clicked, the authentication status
should be removed from localStorage. Additionally, display a
heading below the buttons to indicate whether the user is logged
in or not.

You might also like