Scribd
Upload
11 views4 pages

WE Lab Assignment 1

The document describes a web page code that displays product data dynamically using jQuery and AJAX. It loads product data and renders product cards with images, names and prices. It also adds mouse hover effects and a jQuery UI dialog confirmation for the 'Buy Now' button.

Uploaded by

Aroosha Fatima
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
11 views4 pages

WE Lab Assignment 1

The document describes a web page code that displays product data dynamically using jQuery and AJAX. It loads product data and renders product cards with images, names and prices. It also adds mouse hover effects and a jQuery UI dialog confirmation for the 'Buy Now' button.

Uploaded by

Aroosha Fatima
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/ 4

University of Engineering and Technology Taxila

WE Lab Assignment 1

Submitted By:
21-SE-41 Syed Makhdoom Muhammad Mehdi
21-SE-69 Maryam Sarfaraz
21-SE-89 Abdur Rehman Zahid

Submitted to:

Mam Sidra Shafi

Subject:

Web Engineering

Date: 9-04-2024
Use of jQuery Effects, Ajax and UI Components

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Outdoor Gear Store</title>
<link
rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
#products {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
padding: 10px;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>Outdoor Gear Store</h1>
</div>
<div id="products"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-
ui.js"></script>
<script>
// Simulated product data
var products = [
{ name: "Hiking Backpack", price: 59.99, image: "backpack.jpg"
},
{ name: "Camping Tent", price: 129.99, image: "tent.jpg" },
{ name: "Outdoor Cooking Set", price: 39.99, image: "cooking-
set.jpg" },
];

$(document).ready(function () {
// Load products dynamically using Ajax
$.each(products, function (index, product) {
var productHtml = `
<div class="product">
<img src="${product.image}" alt="${product.name}"
width="150">
<h3>${product.name}</h3>
<p>$${product.price}</p>
<button class="buy-btn">Buy Now</button>
</div>
`;
$("#products").append(productHtml);
});

// JQuery UI effects
$(".product")
.mouseenter(function () {
$(this).css("background-color", "#f0f0f0");
})
.mouseleave(function () {
$(this).css("background-color", "#fff");
});

// JQuery UI dialog for "Buy Now" button


$(".buy-btn").click(function () {
$(
'<div title="Thank You">Thank you for your purchase!</div>'
).dialog();
});
});
</script>
</body>
</html>

Output:

You might also like