Scribd
Upload
31 views28 pages

Android Web Technology ASSESSMENTS

The document displays information about three products - AMG G63, Porsche 911 GT3 RS and Land Cruiser. Hyperlinks are provided to view detailed specifications of each product along with their images on clicking the product name.

Uploaded by

Altamash Pathan
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
31 views28 pages

Android Web Technology ASSESSMENTS

The document displays information about three products - AMG G63, Porsche 911 GT3 RS and Land Cruiser. Hyperlinks are provided to view detailed specifications of each product along with their images on clicking the product name.

Uploaded by

Altamash Pathan
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/ 28

Android Web Technology ASSESSMENTS

PSDA 01:-

Create a web page that will have separate links to show maps of India and
the World. When a user will open a map of India, create links to display the
information of each state i.e. highlighted in the map in a separate
window/document. (The information should be brief i.e. not more than 3-4
sentences.) When the user will open a world map, show the list of countries
on clicking the image in a new window.

Code:-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maps</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
text-align: center;
margin-top: 50px;
}
.map-link {
margin: 10px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 18px;
transition: background-color 0.3s ease;
}
.map-link:hover {
background-color: #0056b3;
}
.country-link, .state-link {
display: inline-block;
margin: 10px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 18px;
transition: background-color 0.3s ease;
}
.country-link:hover, .state-link:hover {
background-color: #0056b3;
}
.map-section {
display: none;
padding: 20px;
}
.map-img {
max-width: 100%;
height: auto;
}
h1 {
color: #333;
}
h2 {
color: #555;
}
p{
color: #777;
}
</style>
</head>
<body>
<div class="container">
<a href="#" class="map-link" onclick="showMap('india-map')">India Map</a>
<a href="#" class="map-link" onclick="showMap('world-map')">World Map</a>
</div>

<!-- India Map -->


<div id="india-map" class="map-section">
<h1>India Map</h1>
<img
src="https://skillotoys.com/cdn/shop/products/Buy_India_Map_Learning_Board_-_SkilloToys.co
m.jpg?v=1682867561" alt="India Map" class="map-img">
<a href="#andhra_pradesh" class="state-link"
onclick="showStateInfo('andhra_pradesh')">Andhra Pradesh</a>
<a href="#maharashtra" class="state-link"
onclick="showStateInfo('maharashtra')">Maharashtra</a>
<a href="#uttar_pradesh" class="state-link" onclick="showStateInfo('uttar_pradesh')">Uttar
Pradesh</a>
<a href="#karnataka" class="state-link" onclick="showStateInfo('karnataka')">Karnataka</a>
</div>

<div id="world-map" class="map-section">


<h1>World Map</h1>
<img
src="https://i.etsystatic.com/10040283/r/il/914368/928139657/il_1080xN.928139657_8mip.jpg"
alt="World Map" class="map-img">
<a href="#usa" class="country-link" onclick="showCountryInfo('usa')">USA</a>
<a href="#china" class="country-link" onclick="showCountryInfo('china')">China</a>
<a href="#brazil" class="country-link" onclick="showCountryInfo('brazil')">Brazil</a>
</div>

<!-- State Information -->


<div id="state-info" class="map-section">
<h1>State Information</h1>
<div id="andhra_pradesh">
<h2>Andhra Pradesh</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/AP_map.jpg" alt="Andhra
Pradesh Map" class="map-img">
<p>Andhra Pradesh is a state in the south-eastern coastal region of India. It is the
seventh-largest state by area covering an area of 162,975 km² and tenth-most populous state,
with 49,386,799 inhabitants. The new capital city of Andhra Pradesh is Amaravati which is being
developed as a Smart City.</p>
</div>
<div id="maharashtra">
<h2>Maharashtra</h2>
<img
src="https://t3.ftcdn.net/jpg/05/69/14/76/360_F_569147617_KpXcK6GMeeFf7QEExsIUeQxp7d
3Q5g0V.jpg" alt="Maharashtra Map" class="map-img">
<p>Maharashtra is a state in the western peninsular region of India occupying a substantial
portion of the Deccan Plateau. Maharashtra is the second-most populous state in India and the
third-largest by area. Mumbai, the capital city of Maharashtra, is the financial capital of
India.</p>
</div>
<div id="uttar_pradesh">
<h2>Uttar Pradesh</h2>
<img
src="https://www.burningcompass.com/countries/india/maps/uttar-pradesh-mandal-map.jpg"
alt="Uttar Pradesh Map" class="map-img">
<p>Uttar Pradesh is a state in northern India. With over 200 million inhabitants, it is the most
populous state in India as well as the most populous country subdivision in the world. The city of
Lucknow is the capital.</p>
</div>
<div id="karnataka">
<h2>Karnataka</h2>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Karnataka_locator_map.svg/8
00px-Karnataka_locator_map.svg.png" alt="Karnataka Map" class="map-img">
<p>Karnataka is a state in southwest India with Arabian Sea coastlines. The capital,
Bengaluru (formerly Bangalore), is a high-tech hub known for its shopping and nightlife. To the
southwest, Mysore is home to lavish temples including Mysore Palace, former seat of the
region's maharajas.</p>
</div>
</div>

<!-- Country Information -->


<div id="country-info" class="map-section">
<h1>Country Information</h1>
<div id="usa">
<h2>USA</h2>
<img
src="https://m.media-amazon.com/images/I/71pFOeSBrHL._AC_UF1000,1000_QL80_.jpg"
alt="USA Map" class="map-img">
<p>The United States of America (USA) is a country primarily located in North America. It
consists of 50 states, a federal district, five major self-governing territories, and various
possessions. The capital city is Washington, D.C., and the most populous city is New York
City.</p>
</div>
<div id="china">
<h2>China</h2>
<img src="https://www.infoplease.com/sites/default/files/i_infopls_com/images/mchina.gif"
alt="China Map" class="map-img">
<p>China, officially the People's Republic of China (PRC), is a country in East Asia. It is the
world's most populous country, with a population of over 1.4 billion. Beijing is the capital city of
China, while Shanghai is its most populous city.</p>
</div>
<div id="brazil">
<h2>Brazil</h2>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTs0zPP6ZrF9KxeR1IZTsaL3egk
N__XEP4LOGys8UnPlg&s" alt="Brazil Map" class="map-img">
<p>Brazil is the largest country in both South America and Latin America. It is the world's
fifth-largest country by area and the sixth-most populous country. Brasília is the capital city of
Brazil, and São Paulo is the largest city.</p>
</div>
</div>

<script>
function showMap(mapId) {
var maps = document.getElementsByClassName('map-section');
for (var i = 0; i < maps.length; i++) {
maps[i].style.display = 'none';
}
document.getElementById(mapId).style.display = 'block';
}

function showStateInfo(stateId) {
showMap('state-info');
document.getElementById(stateId).scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function showCountryInfo(countryId) {
showMap('country-info');
document.getElementById(countryId).scrollIntoView({ behavior: 'smooth', block: 'start' });
}
</script>
</body>
</html>

Output :-
PSDA 02:-

Write an HTML page to display information of three products. The name of


three products should be displayed at the top. The hyperlink should be
provided to move to the details of the product like its features, size, price
etc. along with its image. The link should be an internal link.

Input:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Information</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.product {
margin-bottom: 30px;
}
.product img {
max-width: 100%;
height: auto;
}
.product h2 {
margin-top: 10px;
color: #555;
}
.product a {
display: block;
text-align: center;
margin-top: 10px;
text-decoration: none;
color: #007bff;
font-weight: bold;
}
.details {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Product Information</h1>

<!-- Product 1: AMG G63 -->


<div class="product">
<img
src="https://wallpapers.com/images/hd/mercedes-car-4k-mpm064zou9ro32p0.jpg"
alt="AMG G63">
<h2>AMG G63</h2>
<a href="#amg-g63-details">View Details</a>
</div>

<!-- Product 2: Porsche 911 GT3 RS -->


<div class="product">
<img src="https://www.topgear.com/sites/default/files/2022/08/CFM_2458v1.jpg"
alt="Porsche 911 GT3 RS">
<h2>Porsche 911 GT3 RS</h2>
<a href="#porsche-911-details">View Details</a>
</div>

<!-- Product 3: Land Cruiser -->


<div class="product">
<img
src="https://static3.toyotabharat.com/images/showroom/lc300/popup-img.webp"
alt="Land Cruiser">
<h2>Land Cruiser</h2>
<a href="#land-cruiser-details">View Details</a>
</div>

</div>

<!-- Product Details Sections -->


<div class="details" id="amg-g63-details">
<h2>AMG G63 Details</h2>
<p>Features: High-performance SUV, powerful engine, luxurious interior.</p>
<p>Size: Full-size SUV</p>
<p>Price: Starting at $156,450</p>
<img
src="https://wallpapers.com/images/hd/mercedes-car-4k-mpm064zou9ro32p0.jpg"
alt="AMG G63">
<a href="#">Back to Products</a>
</div>

<div class="details" id="porsche-911-details">


<h2>Porsche 911 GT3 RS Details</h2>
<p>Features: High-performance sports car, advanced aerodynamics, track-focused
design.</p>
<p>Size: Sports Car</p>
<p>Price: Starting at $187,500</p>
<img src="https://www.topgear.com/sites/default/files/2022/08/CFM_2458v1.jpg"
alt="Porsche 911 GT3 RS">
<a href="#">Back to Products</a>
</div>

<div class="details" id="land-cruiser-details">


<h2>Land Cruiser Details</h2>
<p>Features: Legendary off-road capability, spacious interior, rugged design.</p>
<p>Size: Full-size SUV</p>
<p>Price: Starting at $85,665</p>
<img src="https://static3.toyotabharat.com/images/showroom/lc300/popup-img.webp"
alt="Land Cruiser">
<a href="#">Back to Products</a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const productLinks = document.querySelectorAll('.product a');
productLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
const productId = this.getAttribute('href').slice(1);
const detailsSections = document.querySelectorAll('.details');
detailsSections.forEach(function(section) {
section.style.display = 'none';
});
const productDetails = document.getElementById(productId);
productDetails.style.display = 'block';
});
});
});
</script>
</body>
</html>

Output :-
PSDA 03:-

Design and develop any suitable web application using


HTML,CSS and XML

Input:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indian Authors Manager</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"],
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
button.delete-btn {
background-color: #dc3545;
color: #fff;
}
button.delete-btn:hover {
background-color: #c82333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
li h3 {
margin-top: 0;
color: #333;
}
li p {
margin: 5px 0;
color: #666;
}
li.completed {
text-decoration: line-through;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<h1>Indian Authors Manager</h1>
<form id="author-form">
<input type="text" id="author-input" placeholder="Add Author...">
<input type="text" id="books-input" placeholder="Best Books...">
<input type="text" id="published-input" placeholder="Books
Published...">
<input type="text" id="experience-input" placeholder="Years of
Experience...">
<input type="submit" value="Add Author">
</form>
<ul id="author-list"></ul>
</div>
<script>
const authorForm = document.getElementById('author-form');
const authorInput = document.getElementById('author-input');
const booksInput = document.getElementById('books-input');
const publishedInput = document.getElementById('published-input');
const experienceInput = document.getElementById('experience-input');
const authorList = document.getElementById('author-list');

authorForm.addEventListener('submit', function(e) {
e.preventDefault();
const authorName = authorInput.value.trim();
const bestBooks = booksInput.value.trim();
const booksPublished = publishedInput.value.trim();
const yearsExperience = experienceInput.value.trim();
if (authorName !== '') {
addAuthor(authorName, bestBooks, booksPublished,
yearsExperience);
authorInput.value = '';
booksInput.value = '';
publishedInput.value = '';
experienceInput.value = '';
}
});

function addAuthor(authorName, bestBooks, booksPublished,


yearsExperience) {
const li = document.createElement('li');
const authorHeader = document.createElement('h3');
authorHeader.textContent = authorName;
const booksInfo = document.createElement('p');
booksInfo.innerHTML = `<strong>Best Books:</strong>
${bestBooks}<br><strong>Books Published:</strong>
${booksPublished}<br><strong>Years of Experience:</strong>
${yearsExperience}`;
li.appendChild(authorHeader);
li.appendChild(booksInfo);
li.addEventListener('click', toggleAuthor);
const deleteBtn = document.createElement('button');
deleteBtn.innerText = 'Delete';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', deleteAuthor);
li.appendChild(deleteBtn);
authorList.appendChild(li);
}

function toggleAuthor() {
this.classList.toggle('completed');
}

function deleteAuthor() {
this.parentElement.remove();
}
</script>
</body>
</html>

Output:-
PSDA 04:-

Develop web-based applications using suitable client side and


server-side web technologies.

Input:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popular Movies</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
li {
margin: 10px;
width: 200px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
img {
width: 100%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.movie-info {
padding: 10px;
}
.movie-title {
font-weight: bold;
margin-top: 0;
}
.movie-rating {
color: #007bff;
}
</style>
</head>
<body>
<div class="container">
<h1>Popular Movies</h1>
<ul id="movie-list">
<!-- List of movies will be dynamically added here -->
</ul>
</div>

<script>
const movies = [
{
title: "Inception",
poster:
"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRRyuWmayVBv
qjd1MxTKpRgauq2cCtUzb7Q9QvaFTkAuxAU_EYMoCE3wBuJeftxIzf0grreI
w",
rating: 8.8,
genre: "Action, Adventure, Sci-Fi",
year: 2010
},
{
title: "The Shawshank Redemption",
poster:
"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSf1DK32xKMQz
qSl8wnY1BLVu_gdwsRYzVSNM6A03r6c-fEwrif8raKzkFRuerw1KHdDICvO
w",
rating: 9.3,
genre: "Drama",
year: 1994
},
{
title: "The Godfather",
poster:
"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQAY2xsJVIZxm
3K0gNtOMr9CSCvLdr5kdo3V3pv2HMuUkTBhFzRe5-b8NDRmO1mt5S5X
p_YyQ",
rating: 9.2,
genre: "Crime, Drama",
year: 1972
},
{
title: "The Dark Knight",
poster:
"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTfE_qrYMBZ_J
B8om-34WGaZARhpX26yWRttqIDvn4_7l--UzX8mxKcPrc59IcvTpEA_G8g
PA",
rating: 9.0,
genre: "Action, Crime, Drama",
year: 2008
}
];

const movieList = document.getElementById("movie-list");

movies.forEach(movie => {
const listItem = document.createElement("li");
const posterImg = document.createElement("img");
posterImg.src = movie.poster;
listItem.appendChild(posterImg);

const movieInfo = document.createElement("div");


movieInfo.classList.add("movie-info");

const title = document.createElement("h2");


title.classList.add("movie-title");
title.textContent = movie.title;
movieInfo.appendChild(title);

const rating = document.createElement("p");


rating.classList.add("movie-rating");
rating.textContent = `Rating: ${movie.rating}`;
movieInfo.appendChild(rating);

const genre = document.createElement("p");


genre.textContent = `Genre: ${movie.genre}`;
movieInfo.appendChild(genre);
const year = document.createElement("p");
year.textContent = `Year: ${movie.year}`;
movieInfo.appendChild(year);

listItem.appendChild(movieInfo);

movieList.appendChild(listItem);
});
</script>
</body>
</html>

Output:-

You might also like