Scribd
Upload
13 views5 pages

Web 230 As 6

Web Technology Questions.

Uploaded by

Naveen Chadha
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
13 views5 pages

Web 230 As 6

Web Technology Questions.

Uploaded by

Naveen Chadha
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
You are on page 1/ 5

Question 1:

You are tasked with creating a simple to-do list application. Below is the provided HTML
structure for the application. Your task is to implement the JavaScript functionality for this to-do
list. The application should meet the following requirements:

● Users should be able to input tasks into the text field (#taskInput) and add them to the
list by clicking the "Add Task" button (#addTaskBtn).

● Each task should be displayed as an <li> element within the <ul id="taskList">. Initially, You must separate each line item with a ;

the list is empty.

● When a task is added, it should be displayed in the list with a checkbox beside it. Users
should be able to mark tasks as completed by checking the checkbox. and modifying the CSS to make the task have a strike through

● Additionally, each task item should have a "Delete" button appended to it. Clicking this
button should remove the respective task from the list.

Your implementation should utilize event listeners to handle user interactions and manipulate
the DOM accordingly. All HTML modifications (e.g., adding tasks, marking as completed,
deleting tasks) must be done through JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
/* Add your CSS styling here if needed */
</style>
</head>
<body>
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Enter task">
<button id="addTaskBtn">Add Task</button>
<ul id="taskList">
<!-- Tasks will be dynamically added here -->
</ul>

<script src="script.js"></script>
</body>
</html>
Question 2:

Getting Started:
● Below is a provided HTML file, open it in a web browser of your choice.

Initial Display:
● Upon loading the webpage, you'll see the title "Background Color Changer" along
with a paragraph displaying the current background color, initially set to "Initial light blue

color".

RGB Input Fields:


● Below the current background color display, you'll find three input fields labeled
"Enter RGB values".
● Each input field allows you to specify a value for one of the RGB components:
Red, Green, and Blue.
● You can input numeric values between 0 and 255 for each RGB component.
These values will determine the new background color when you click the
"Change Color" button.

Changing the Background Color:


● To change the background color, click the "Change Color" button located below
the RGB input fields.
● Upon clicking the button, the background color of the webpage will change based
on the RGB values specified in the input fields. You will need to print to the console these rgb values separated by a colon

● The new background color will be displayed above the input fields.

Additional Notes:
● Ensure that the RGB values you input are within the valid range of 0 to 255. You must use try catch and throw statements

● Experiment with different combinations of RGB values to create various colors for
the background.
● You can always modify the RGB values and click the "Change Color" button again
to see the updated background color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Changer</title>
<style>
body {
text-align: center;
padding-top: 50px;
font-family: Arial, sans-serif;
}
#colorDisplay {
font-size: 24px;
}
#colorBtn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.rgbInput {
width: 60px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Background Color Changer</h1>
<p>Current background color: <span id="colorDisplay">Initial
color</span></p>
<p>Enter RGB values:</p>
<input type="number" id="redInput" class="rgbInput" min="0" max="255"
placeholder="Red">
<input type="number" id="greenInput" class="rgbInput" min="0" max="255"
placeholder="Green">
<input type="number" id="blueInput" class="rgbInput" min="0" max="255"
placeholder="Blue">
<button id="colorBtn">Change Color</button>

<script src="script.js"></script>
</body>
</html>
Submission Instructions:

Submit both your Javascript and HTML files together in a zipped up folder.

Remember, your na

You might also like