Q7. Demonstrate the Use of jQuery
Question 7:
Design a website using jQuery and AJAX.
In this assignment, we will create a dynamic website that demonstrates:
- jQuery basics: selection, events, effects, traversal, manipulation
- AJAX call to fetch users dynamically from a JSON API
- Display users with error handling using
try/catch - Responsive and visually appealing design using Bootstrap 5
Example: jQuery users Website
File Name: jquery-users.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Users Website</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!-- jQuery -->
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #f8f9fa;
}
.user-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 15px;
overflow: hidden;
}
.user-card:hover {
transform: translateY(-8px);
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.2);
}
.user-img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #fff;
/* margin-top: -50px; */
background: #eee;
}
.card-body p {
margin: 3px 0;
font-size: 14px;
}
.navbar-brand {
font-weight: bold;
}
.avatar {
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
font-size: 24px;
font-weight: bold;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="#">UsersApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="py-5 text-center text-white" style="background: linear-gradient(135deg,#6a11cb,#2575fc);">
<div class="container">
<h1 class="display-5">Dynamic Users with jQuery</h1>
<p class="lead">Fetch and display user profiles dynamically using JSON + jQuery</p>
<!-- <button id="loadUsers" class="btn btn-light btn-lg mt-3">Load Users</button> -->
</div>
</section>
<!-- Users Section -->
<section class="py-5">
<div class="container">
<h2 class="text-center mb-4">Users List</h2>
<div id="usersContainer" class="row g-4 justify-content-center"></div>
</div>
</section>
<section class="py-5">
<div class="container">
<h2 class="text-center mb-4">JSON Data 👇</h2>
<pre id="showJsonText" style="
font-size: 12px;
border-radius: 10px;
color: rgb(88, 255, 138);
background-color: #212529;
padding: 10px;
margin: 15px 0;
border: 2px solid #444;
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
max-width: 100%;
">
</pre>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-3">
<div class="container text-center">
<p>© 2025 Designed by <strong>Ansari Intesab</strong> for MCA-420 Lab Assignment</p>
</div>
</footer>
<!-- Script -->
<script src="./jquery.js"></script>
<!-- Tumhara jQuery code -->
<script>
const users = [{
"id": 1,
"firstName": "Emily",
"lastName": "Johnson",
"maidenName": "Smith",
"age": 28,
"gender": "female",
"email": "emily.johnson@x.dummyjson.com",
"phone": "+81 965-431-3024",
"username": "emilys",
"password": "emilyspass",
"birthDate": "1996-5-30",
"image": "https://dummyjson.com/icon/emilys/128",
"bloodGroup": "O-",
"height": 193.24,
"weight": 63.16,
"eyeColor": "Green",
"hair": {
"color": "Brown",
"type": "Curly"
},
"ip": "42.48.100.32",
"address": {
"address": "626 Main Street",
"city": "Phoenix",
"state": "Mississippi",
"stateCode": "MS",
"postalCode": "29112",
"coordinates": {
"lat": -77.16213,
"lng": -92.084824
},
"country": "United States"
},
"macAddress": "47:fa:41:18:ec:eb",
"university": "University of Wisconsin--Madison",
"bank": {
"cardExpire": "03/26",
"cardNumber": "9289760655481815",
"cardType": "Elo",
"currency": "CNY",
"iban": "YPUXISOBI7TTHPK2BR3HAIXL"
},
"company": {
"department": "Engineering",
"name": "Dooley, Kozey and Cronin",
"title": "Sales Manager",
"address": {
"address": "263 Tenth Street",
"city": "San Francisco",
"state": "Wisconsin",
"stateCode": "WI",
"postalCode": "37657",
"coordinates": {
"lat": 71.814525,
"lng": -161.150263
},
"country": "United States"
}
},
"ein": "977-175",
"ssn": "900-590-289",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36",
"crypto": {
"coin": "Bitcoin",
"wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
"network": "Ethereum (ERC20)"
},
"role": "admin"
},
{
"id": 2,
"firstName": "Michael",
"lastName": "Williams",
"maidenName": "",
"age": 35,
"gender": "male",
"email": "michael.williams@x.dummyjson.com",
"phone": "+49 258-627-6644",
"username": "michaelw",
"password": "michaelwpass",
"birthDate": "1989-8-10",
"image": "https://dummyjson.com/icon/michaelw/128",
"bloodGroup": "B+",
"height": 186.22,
"weight": 76.32,
"eyeColor": "Red",
"hair": {
"color": "Green",
"type": "Straight"
},
"ip": "12.13.116.142",
"address": {
"address": "385 Fifth Street",
"city": "Houston",
"state": "Alabama",
"stateCode": "AL",
"postalCode": "38807",
"coordinates": {
"lat": 22.815468,
"lng": 115.608581
},
"country": "United States"
},
"macAddress": "79:15:78:99:60:aa",
"university": "Ohio State University",
"bank": {
"cardExpire": "02/27",
"cardNumber": "6737807858721625",
"cardType": "Elo",
"currency": "SEK",
"iban": "83IDT77FWYLCJVR8ISDACFH0"
},
"company": {
"department": "Support",
"name": "Spinka - Dickinson",
"title": "Support Specialist",
"address": {
"address": "395 Main Street",
"city": "Los Angeles",
"state": "New Hampshire",
"stateCode": "NH",
"postalCode": "73442",
"coordinates": {
"lat": 79.098326,
"lng": -119.624845
},
"country": "United States"
}
},
"ein": "912-602",
"ssn": "108-953-962",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Edge/97.0.1072.76 Safari/537.36",
"crypto": {
"coin": "Bitcoin",
"wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
"network": "Ethereum (ERC20)"
},
"role": "admin"
},
{
"id": 3,
"firstName": "Sophia",
"lastName": "Brown",
"maidenName": "",
"age": 42,
"gender": "female",
"email": "sophia.brown@x.dummyjson.com",
"phone": "+81 210-652-2785",
"username": "sophiab",
"password": "sophiabpass",
"birthDate": "1982-11-6",
"image": "https://dummyjson.com/icon/sophiab/128",
"bloodGroup": "O-",
"height": 177.72,
"weight": 52.6,
"eyeColor": "Hazel",
"hair": {
"color": "White",
"type": "Wavy"
},
"ip": "214.225.51.195",
"address": {
"address": "1642 Ninth Street",
"city": "Washington",
"state": "Alabama",
"stateCode": "AL",
"postalCode": "32822",
"coordinates": {
"lat": 45.289366,
"lng": 46.832664
},
"country": "United States"
},
"macAddress": "12:a3:d3:6f:5c:5b",
"university": "Pepperdine University",
"bank": {
"cardExpire": "04/25",
"cardNumber": "7795895470082859",
"cardType": "Korean Express",
"currency": "SEK",
"iban": "90XYKT83LMM7AARZ8JN958JC"
},
"company": {
"department": "Research and Development",
"name": "Schiller - Zieme",
"title": "Accountant",
"address": {
"address": "1896 Washington Street",
"city": "Dallas",
"state": "Nevada",
"stateCode": "NV",
"postalCode": "88511",
"coordinates": {
"lat": 20.086743,
"lng": -34.577107
},
"country": "United States"
}
},
"ein": "963-113",
"ssn": "638-461-822",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36",
"crypto": {
"coin": "Bitcoin",
"wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
"network": "Ethereum (ERC20)"
},
"role": "admin"
},
{
"id": 4,
"firstName": "James",
"lastName": "Davis",
"maidenName": "",
"age": 45,
"gender": "male",
"email": "james.davis@x.dummyjson.com",
"phone": "+49 614-958-9364",
"username": "jamesd",
"password": "jamesdpass",
"birthDate": "1979-5-4",
"image": "https://dummyjson.com/icon/jamesd/128",
"bloodGroup": "AB+",
"height": 193.31,
"weight": 62.1,
"eyeColor": "Amber",
"hair": {
"color": "Blonde",
"type": "Straight"
},
"ip": "101.118.131.66",
"address": {
"address": "238 Jefferson Street",
"city": "Seattle",
"state": "Pennsylvania",
"stateCode": "PA",
"postalCode": "68354",
"coordinates": {
"lat": 16.782513,
"lng": -139.34723
},
"country": "United States"
},
"macAddress": "10:7d:df:1f:97:58",
"university": "University of Southern California",
"bank": {
"cardExpire": "05/29",
"cardNumber": "5005519846254763",
"cardType": "Mastercard",
"currency": "INR",
"iban": "7N7ZH1PJ8Q4WU1K965HQQR27"
},
"company": {
"department": "Support",
"name": "Pagac and Sons",
"title": "Research Analyst",
"address": {
"address": "1622 Lincoln Street",
"city": "Fort Worth",
"state": "Pennsylvania",
"stateCode": "PA",
"postalCode": "27768",
"coordinates": {
"lat": 54.91193,
"lng": -79.498328
},
"country": "United States"
}
},
"ein": "904-810",
"ssn": "116-951-314",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36",
"crypto": {
"coin": "Bitcoin",
"wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
"network": "Ethereum (ERC20)"
},
"role": "admin"
},
{
"id": 5,
"firstName": "Emma",
"lastName": "Miller",
"maidenName": "Johnson",
"age": 30,
"gender": "female",
"email": "emma.miller@x.dummyjson.com",
"phone": "+91 759-776-1614",
"username": "emmaj",
"password": "emmajpass",
"birthDate": "1994-6-13",
"image": "https://dummyjson.com/icon/emmaj/128",
"bloodGroup": "AB-",
"height": 192.8,
"weight": 63.62,
"eyeColor": "Green",
"hair": {
"color": "White",
"type": "Straight"
},
"ip": "224.126.22.183",
"address": {
"address": "607 Fourth Street",
"city": "Jacksonville",
"state": "Colorado",
"stateCode": "CO",
"postalCode": "26593",
"coordinates": {
"lat": 0.505589,
"lng": -157.43281
},
"country": "United States"
},
"macAddress": "32:b9:7e:8d:f5:e8",
"university": "Northeastern University",
"bank": {
"cardExpire": "03/26",
"cardNumber": "5772950119588627",
"cardType": "American Express",
"currency": "CAD",
"iban": "TAVHURD845KVBTB8W81AQXRY"
},
"company": {
"department": "Human Resources",
"name": "Graham - Gulgowski",
"title": "Quality Assurance Engineer",
"address": {
"address": "1460 Sixth Street",
"city": "San Antonio",
"state": "Idaho",
"stateCode": "ID",
"postalCode": "21965",
"coordinates": {
"lat": 44.346545,
"lng": -26.944701
},
"country": "United States"
}
},
"ein": "403-505",
"ssn": "526-210-885",
"userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0",
"crypto": {
"coin": "Bitcoin",
"wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
"network": "Ethereum (ERC20)"
},
"role": "admin"
},
{
"id": 6,
"firstName": "Olivia",
"lastName": "Wilson",
"maidenName": "",
"age": 22,
"gender": "female",
"email": "olivia.wilson@x.dummyjson.com",
"phone": "+91 607-295-6448",
"username": "oliviaw",
"password": "oliviawpass",
"birthDate": "2002-4-20",
"image": "https://dummyjson.com/icon/oliviaw/128",
"bloodGroup": "B+",
"height": 182.61,
"weight": 58,
"eyeColor": "Hazel",
"hair": {
"color": "Gray",
"type": "Curly"
},
"ip": "249.178.112.207",
"address": {
"address": "547 First Street",
"city": "Fort Worth",
"state": "Tennessee",
"stateCode": "TN",
"postalCode": "83843",
"coordinates": {
"lat": 75.32627,
"lng": -26.15285
},
"country": "United States"
},
"macAddress": "9c:7f:ea:34:18:19",
"university": "University of North Carolina--Chapel Hill",
"bank": {
"cardExpire": "05/28",
"cardNumber": "6771923832947881",
"cardType": "Diners Club International",
"currency": "BRL",
"iban": "V6H0O5OE3Q4JVKWDTYWZABMD"
},
"company": {
"department": "Product Management",
"name": "Pfannerstill Inc",
"title": "Research Analyst",
"address": {
"address": "425 Sixth Street",
"city": "Indianapolis",
"state": "Oklahoma",
"stateCode": "OK",
"postalCode": "74263",
"coordinates": {
"lat": 74.986644,
"lng": -132.916888
},
"country": "United States"
}
},
"ein": "921-709",
"ssn": "836-772-168",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15",
"crypto": {
"coin": "Bitcoin",
"wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
"network": "Ethereum (ERC20)"
},
"role": "moderator"
},]
$(document).ready(function () {
// Example JSON (tumhare diya hua data)
// Load users dynamically
$("#usersContainer").html("<p class='text-center'>Loading users...</p>");
let html = "";
$.each(users, function (index, user) {
// helpers
const safe = (v, fallback = '') => (v === undefined || v === null) ? fallback : v;
const initials = (safe(user.firstName, '?').charAt(0) + safe(user.lastName, '?').charAt(0)).toUpperCase();
function formatCard(num) {
if (!num) return '';
const digits = String(num).replace(/\D/g, '');
return digits.match(/.{1,4}/g)?.join('-') ?? digits;
}
function formatIBAN(iban) {
if (!iban) return '';
const cleaned = String(iban).replace(/\s+/g, '');
return cleaned.match(/.{1,4}/g)?.join(' ') ?? cleaned;
}
function formatWallet(wallet) {
if (!wallet) return '';
const w = String(wallet);
if (w.length <= 14) return w; // short enough
return w.slice(0, 6) + '...' + w.slice(-4); // show prefix and suffix
}
// clickable IP (opens http://<ip> in new tab)
const ipLink = user.ip ? `<a href="http://${user.ip}" target="_blank" rel="noopener noreferrer">${user.ip}</a>` : '';
// formatted values
const cardFormatted = formatCard(user.bank?.cardNumber);
const ibanFormatted = formatIBAN(user.bank?.iban);
const walletFormatted = formatWallet(user.crypto?.wallet);
html += `
<div class="col-md-4 mb-4">
<div class="card user-card shadow-sm">
<div class="card-header text-center">
${safe(user.firstName)} ${safe(user.lastName)}
</div>
<div class="card-body">
<div class="avatar">${initials}</div>
<p class="detail-item"><i class="fa fa-user"></i> <strong>Username:</strong> ${safe(user.username)}</p>
<p class="detail-item"><i class="fa fa-key"></i> <strong>Password:</strong> ${safe(user.password)}</p>
<p class="detail-item"><i class="fa fa-envelope"></i> <strong>Email:</strong> ${safe(user.email)}</p>
<p class="detail-item"><i class="fa fa-phone"></i> <strong>Phone:</strong> ${safe(user.phone)}</p>
<p class="detail-item"><i class="fa fa-venus-mars"></i> <strong>Gender:</strong> ${safe(user.gender)}</p>
<p class="detail-item"><i class="fa fa-calendar"></i> <strong>Birthdate:</strong> ${safe(user.birthDate)}</p>
<p class="detail-item"><i class="fa fa-globe"></i> <strong>IP:</strong> ${ipLink}</p>
<p class="detail-item"><i class="fa fa-desktop"></i> <strong>MAC:</strong> ${safe(user.macAddress)}</p>
<hr/>
<p class="detail-item"><strong>Card:</strong> ${cardFormatted || 'N/A'}</p>
<p class="detail-item"><strong>Expires:</strong> ${safe(user.bank?.cardExpire, 'N/A')}</p>
<p class="detail-item"><strong>IBAN:</strong> ${ibanFormatted || 'N/A'}</p>
<p class="detail-item"><strong>Currency:</strong> ${safe(user.bank?.currency, 'N/A')}</p>
<hr/>
<p class="detail-item"><strong>Coin:</strong> ${safe(user.crypto?.coin)}</p>
<p class="detail-item"><strong>Wallet:</strong> <code>${walletFormatted || 'N/A'}</code></p>
<p class="detail-item"><strong>Network:</strong> ${safe(user.crypto?.network)}</p>
</div>
</div>
</div>
`;
$("#usersContainer").html(html);
});
});
$("#showJsonText").text(JSON.stringify(users, null, 2));
</script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Output Preview : jQuery users Website
Last updated on