Scribd
Upload
4 views7 pages

Lab2 Assignment

The document outlines three web development assignments: a billing page with a dropdown for product selection, a bouncing ball animation using JavaScript, and a webpage displaying an image with sliding text. Each section includes HTML, CSS, and JavaScript code to implement the specified functionality. The assignments demonstrate various web design and programming techniques.

Uploaded by

aryanpattanvall200040
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
4 views7 pages

Lab2 Assignment

The document outlines three web development assignments: a billing page with a dropdown for product selection, a bouncing ball animation using JavaScript, and a webpage displaying an image with sliding text. Each section includes HTML, CSS, and JavaScript code to implement the specified functionality. The assignments demonstrate various web design and programming techniques.

Uploaded by

aryanpattanvall200040
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/ 7

LAB 2: Home Assignment

Aryan 220905324
Webpage Dropdown Bill
The webpage has been designed with the specified
requirements. Users can select a brand from the dropdown,
choose a product type (Mobile or Laptop), enter the quantity,
and click the "Produce Bill" button to see an alert with the total
amount. Let me know if further customization is needed!

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Billing Page</title>
<style>
body { font-family: Arial, sans-serif; display: flex; justify-content: center;
align-items: center; height: 100vh; margin: 0; background: #f9f9f9; }
form { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0
4px 6px rgba(0, 0, 0, 0.1); width: 300px; }
h1 { text-align: center; margin-bottom: 20px; color: #333; }
label, select, input, button { width: 100%; margin-bottom: 15px; }
input[type="checkbox"] { width: auto; margin-right: 10px; }
button { padding: 10px; background: #007bff; color: #fff; border: none;
border-radius: 4px; cursor: pointer; }
button:hover { background: #0056b3; }
</style>
<script>
function produceBill() {
const brand = document.getElementById("brand").value;
const productType = document.getElementById("mobile").checked ?
"Mobile" : document.getElementById("laptop").checked ? "Laptop" : "";
const quantity = parseInt(document.getElementById("quantity").value) ||
0;
if (!brand || !productType || quantity <= 0) return alert("Please select
valid inputs.");
const prices = { Mobile: 500, Laptop: 1000 };
alert(`Brand: ${brand}\nProduct: ${productType}\nQuantity: $
{quantity}\nTotal Amount: $${prices[productType] * quantity}`);
}
</script>
</head>
<body>
<form>
<h1>Billing Page</h1>
<label for="brand">Select Brand:</label>
<select id="brand">
<option value="">--Select--</option>
<option value="HP">HP</option>
<option value="Nokia">Nokia</option>
<option value="Samsung">Samsung</option>
<option value="Motorola">Motorola</option>
<option value="Apple">Apple</option>
</select>
<label>Product Type:</label>
<input type="checkbox" id="mobile">Mobile
<input type="checkbox" id="laptop">Laptop
<label for="quantity">Enter Quantity:</label>
<input type="number" id="quantity" min="1">
<button type="button" onclick="produceBill()">Produce Bill</button>
</form>
</body>
</html>
2. Implement the bouncing ball using animate() function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouncing Ball</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center;
height: 100vh; background: #f0f0f0; }
#ball { position: absolute; top: 0; left: 50%; width: 50px; height: 50px;
background: red; border-radius: 50%; transform: translateX(-50%); }
</style>
<script>
function animateBall() {
const ball = document.getElementById('ball');
let position = 0;
let direction = 1;
const maxHeight = window.innerHeight - 50; // Subtract ball's height

function move() {
position += direction * 5;
if (position >= maxHeight || position <= 0) direction *= -1;
ball.style.top = position + 'px';
requestAnimationFrame(move);
}

move();
}

window.onload = animateBall;
</script>
</head>
<body>
<div id="ball"></div>
</body>
</html>
3. Write a web page which displays image and show the sliding
text on the image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Sliding Text on Image</title>
<style>
body { margin: 0; display: flex; justify-content: center;
align-items: center; height: 100vh; background: #f0f0f0; }
.container { position: relative; width: 80%; max-width:
600px; }
.image { display: block; width: 100%; height: auto; }
.text { position: absolute; bottom: 0; background: rgba(0,
0, 0, 0.5); color: white; width: 100%; text-align: center; font-
size: 1.5em; padding: 10px 0; animation: slideText 5s infinite; }
@keyframes slideText {
0% { transform: translateY(100%); }
50% { transform: translateY(0); }
100% { transform: translateY(100%); }
}
</style>
</head>
<body>
<div class="container">
<img src="D:\my website\image.jpg" alt="Sample"
class="image">
<div class="text">Sliding text</div>
</div>
</body>
</html>

You might also like