Scribd
Upload
16 views

Assignment 2 Web

The document contains a series of web technology assignments focusing on JavaScript implementations for parking charge calculations, a web page layout with a digital clock and style customization, and string manipulation features. Each assignment includes HTML and JavaScript code snippets that demonstrate the required functionalities. The document serves as a guide for creating interactive web applications using JavaScript.

Uploaded by

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

Assignment 2 Web

The document contains a series of web technology assignments focusing on JavaScript implementations for parking charge calculations, a web page layout with a digital clock and style customization, and string manipulation features. Each assignment includes HTML and JavaScript code snippets that demonstrate the required functionalities. The document serves as a guide for creating interactive web applications using JavaScript.

Uploaded by

epooja413
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

WEB TECHNOLOGY POOJA E

ASSIGNMENT 2 23BIT0351

1.) A parking garage charges a $2.00 minimum fee to park for up to three hours. The
garage charges an additional $0.50 per hour for each hour or part thereof above three
hours. The maximum charge for any given 24-hour period is $10.00. Assume that no car
parks for longer than 24 hours at a time. Write a script that calculates and displays the
parking charges for each customer who parked a car in this garage yesterday. You
should input from the user the hours parked for each customer. The program should
display the charge for the current customer and should calculate and display the
running total of yesterday's receipts. The program should use the function calculate
Charges to determine the charge for each customer. Use a prompt dialog to obtain input
from the user.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Parking Garage Charges</title>

</head>

<body>

<script>

function calculatecharges(hours) {

if (hours <= 3) {

return 2.00;

} else {

return Math.min(2.00 + (0.50 * (hours - 3)), 10.00);

var total = 0.0;


function parking_data() {

while (true) {

var input = prompt("Enter hours parked for customer (or -1 to stop):");

var hours = parseFloat(input);

if (hours === -1) {

break;

} else if (isNaN(hours) || hours < 0 || hours > 24) {

alert("Invalid input. Hours must be between 0 and 24.");

continue;

var charge = calculatecharges(hours);

alert("Parking charge for this customer: $" + charge.toFixed(2));

total += charge;

alert("Running total of yesterday's receipts: $" + total.toFixed(2));

alert("Total receipts for yesterday: $" + total.toFixed(2));

parking_data();

</script>

</body>

</html>
Input 1:

Input 2:

Input 3:
Input 4:

Input 5:

2.) Create a web page containing three divisions.

a) The first division displays a digital clock on the rightmost end.

b) The width of the first division is 100%. The second division and third division lay
side by side.

c) The second division has an image slider and the third division has a color picker and
two list boxes having font family and size and a button. When a button is clicked the
background color, font, and font size should change for a whole page. Use JavaScript to
implement the above.
CODE:

<!DOCTYPE html>

<html>

<head>

<title>Three Divisions</title>

<style>

body {

font-family: sans-serif;

transition: background-color 0.5s, font-family 0.5s, font-size 0.5s;

#div1 {

width: 100%;

text-align: right;

padding: 10px;

#div2 {

width: 50%;

float: left;

padding: 10px;

#div3 {

width: 50%;
float: right;

padding: 10px;

margin-bottom:50px;

.clearfix::after {

content: "";

display: table;

clear: both;

#imageSlider img {

max-width: 100%;

height: auto;

</style>

</head>

<body>

<div id="div1">

<span id="clock"></span>

</div>

<div class="clearfix"> <div id="div2">

<div id="imageSlider">

<img src="image1.png" alt="Image 1" width=300 height=300>

<img src="image2.png" alt="Image 2" width=300 height=300>


<img src="image3.png" alt="Image 3" width=300 height=300>

</div>

</div>

<div id="div3">

<input type="color" id="colorPicker" value="#000000">

<select id="fontFamily">

<option value="Arial">Arial</option>

<option value="Verdana">Verdana</option>

<option value="Times New Roman">Times New Roman</option>

<option value="Courier New">Courier New</option>

</select>

<select id="fontSize">

<option value="12px">12px</option>

<option value="14px">14px</option>

<option value="16px">16px</option>

<option value="18px">18px</option>

</select>

<button onclick="applyStyles()">Apply Styles</button>

</div>

</div>

<script>

function updateClock() {

var now = new Date();


document.getElementById("clock").textContent = now.toLocaleTimeString();

setInterval(updateClock, 1000);

updateClock();

var images = document.querySelectorAll("#imageSlider img");

var currentImage = 0;

setInterval(() => {

images[currentImage].style.display = "none";

currentImage = (currentImage + 1) % images.length;

images[currentImage].style.display = "block";

}, 2000);

images[0].style.display = "block";

for (let i = 1; i < images.length; i++){

images[i].style.display = "none";

function applyStyles() {

document.body.style.backgroundColor =
document.getElementById("colorPicker").value;

document.body.style.fontFamily = document.getElementById("fontFamily").value;

document.body.style.fontSize = document.getElementById("fontSize").value;

</script>

</body>

</html>
3.) Write the JavaScript code to add behavior to the following page for manipulating
strings.

a) The page UI allows the user to type a phrase into a text box. The user can click the
"Go!" button to display the words in that phrase in reverse order. Each word in the
phrase should be inserted as a span with a class of word, inside a div with the id of
words. Every other word (the first, third, fifth, etc.) should also be underlined

b) The user can optionally specify a "filter" text by typing into a text box with the id of
the filter. If a non-blank filter is specified, you should exclude any words from the
phrase that contains that filter text, case-insensitively. For example, if the filter text is
"abc", exclude any words containing abc, ABC, aBc, etc.

c) If any words are excluded, under the list of words you should modify the div with an
id of count to display the text of the form, "5 word(s) filtered out". The code should
work for multiple clicks of the button. On each click, it should clear any previous
information you injected. You may assume that words in the phrase are separated by
single spaces.

d) These screenshots show the initial state, and after phrases have been typed and "Go!"
is clicked.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>String Manipulation</title>

<style>

.word {

margin-right: 10px;

border:dotted red;

color:red;

.word.underlined {

text-decoration: underline;
}

</style>

</head>

<body>

<h1>Sentence Reverser!</h1>

Phase: <input type="text" id="phrase" size="30"><br><br>

Filter:<input type="text" id="filter"><br><br>

<button onclick="reverseWords()">Go!</button><br><br>

<div id="words"></div>

<div id="count"></div>

<script>

function reverseWords() {

var phrase = document.getElementById("phrase").value;

var filter = document.getElementById("filter").value.toLowerCase();

var wordsDiv = document.getElementById("words");

var countDiv = document.getElementById("count");

wordsDiv.innerHTML = "";

countDiv.innerHTML = "";

if (phrase == "")

return;

var words = phrase.split(" ");


var reversedWords = [];

var filteredCount = 0;

for (var word of words) {

if (filter !== "" && word.toLowerCase().includes(filter)) {

filteredCount++;

continue;

reversedWords.unshift(word);

for (let i = 0; i < reversedWords.length; i++) {

var wordSpan = document.createElement("span");

wordSpan.className = "word";

if (i % 2 === 0) {

wordSpan.classList.add("underlined");

wordSpan.textContent = reversedWords[i];

wordsDiv.appendChild(wordSpan);

if (filteredCount > 0) {

countDiv.textContent = `${filteredCount} word(s) filtered out`;

</script>
</body>

</html>

You might also like