HTML Webpage Design and CSS Techniques
Uploaded by
balamurugan2005116HTML Webpage Design and CSS Techniques
Uploaded by
balamurugan2005116EX No: 1 Design a Webpage using all HTML elements
Aim :
To design and develop a structured webpage that demonstrates the use of fundamental and
advanced HTML elements, including headings, paragraphs, lists, tables, forms, multimedia,
hyperlinks, semantic tags, and layout components, in order to understand the structure and
presentation of web content.
Algorithm:
• Plan a layout for your web page.
• Create a HTML page with all necessary elements
• Create Style sheet and add styling to web page
• Link the style sheet and HTML and run in browser.
Program:
[Link]
<html>
<head>
<Title>HOME PAGE</title>
</head>
<frameset cols="20%,80%" Scrolling =no border = 0>
<frame src="[Link]" name="left"/>
<frame src="[Link]"name="right"/>
</frameset>
</html>
[Link]
<html>
<head>
<title> Left Page </title>
</head>
<center>
<img src="[Link] height=300 width=300>
</center>
<br/><br/>
<br/>
<center>
<h3><b><a href="[Link]" target=right>HOME</a></b></h3>
<h3><b><a href="[Link]" target=right>IMAGES</a></b></h3>
<h3><b><a href="[Link]" target=right>SYMPOSIUM</a></b></h3>
<h3><b><a href="[Link]" target=right>CONTACT</a></b></h3>
</center>
</body>
</html>
[Link]
html>
<head>
<title> Right Page </title>
</head>
<center>
<h1>St. JOSEPH'S INSTITUTE OF TECHNOLOGY</h3>
<h3>JEPPIAR NAGAR, OMR </h3>
<h2>DEPARTMENT OF INFORMATION TECHNOLOGY </h2>
<img src="[Link]" width="500" Height="300">
</center>
<div id="right"><br> St. Joseph’s Institute of Technology is a higher education institution in
OMR, Chennai, India,
established in the year 2011, with 6 UG courses (B.E. – CSE, ECE, EEE & Mech. Engg.,
[Link]. IT & [Link] Artificial Intelligence and Data Science is offered from the year 2021.
MBA is offered from the year 2022.
Our college is affiliated to the Anna University and approved by AICTE.
The courses offered from the inception (B.E. – CSE, ECE & Mech. Engg. & [Link]. IT) have
been accredited by NBA in 2017 in the shortest span of 6 years since inception,
and granted Autonomous status by UGC in 2022 which ascertains our quality.
</div></div><div id="bottom">
<center><br><br><font size="2"> Copy [Link] Rights Reserved.</font></center>
</div>
</body>
</html>
[Link]
<html>
<head>
<title> Image Link </title>
</head>
<center>
<h1>DEPARTMENT OF INFORMATION TECHNOLOGY</h1></center>
<center>
<img src="[Link]"><img src=[Link]">
<div id="right"><br><br><br/>
<div id="wrap">
<div id="top">
<b>About us </b> <br><br/>
<b> WHO WE ARE <b><br><br/>
Department of Information Technology with state-of-art research facilities and
well qualified faculty members produces young aspiring Engineers<br><br/>
<b>VISION </b> <br> <br>
To achieve and sustain international prominence in education,
research and professional skill development<br><br/>
<b>MISSION</b> <br> <br>
To set a standard in education by developing the intellectual strength of students and guiding
them to have a sound and
updated knowledge in the emerging areas of technology </div>
</div></div><div id="bottom">
<center><br><br><font size="2"> Copy [Link] Rights Reserved.</font></center>
</div>
</center>
</body>
</html>
[Link]
<html>
<head>
<title> Symposium </title>
</head>
<body>
<center>
<h1>DEPARTMENT OF INFORMATION TECHNOLOGY</h1>
<br/><br/>
<form action="localhost" method="post">
<table>
<tr> <td> Name </td>
<td> <input type="text" name="name"></td>
</tr>
<table>
<tr> <td> College Name </td>
<td> <input type="text" name="cname"></td>
</tr>
<table>
<tr> <td> Department </td>
<td> <input type="text" name="dept"></td>
</tr>
<table>
<tr> <td> Mail ID </td>
<td> <input type="text" name="mail"></td>
</tr>
<table>
<tr> <td> Phone No </td>
<td> <input type="text" name="pno"></td>
</tr>
<tr> <td> <input type="reset" value="Reset"></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
[Link]
<html>
<head>
<title> Contact Page </title>
</head>
<body>
<center>
<h1>St. JOSEPH'S INSTITUTE OF TECHNOLOGY</h3>
<h2>DEPARTMENT OF INFORMATION TECHNOLOGY </h2>
<br/><br/><br/><br/>
<img src="[Link]" height="500" width="500">
</center><br/><br/><br/><br/>
<br/><br/><br/><br/>
<table>
<tr>
<th> Phone no: </th>
<td> 123456789 </td>
</tr>
<tr>
<th> EMAIL-ID: </th>
<td> xyz@[Link] </td>
</tr>
</table>
</body>
</html>
Output :
Result:
The webpage was successfully designed and implemented using various HTML elements.
[Link] : 2 Create a Web Page with all types of Cascading Style Sheets and CSS Selectors
Aim :
To create a fully styled web page that demonstrates the use of all three methods of applying
Cascading Style Sheets (inline, internal, and external) and showcases a comprehensive set of CSS
selectors .
Algorithm:
• Plan a layout for your Web page by applying all type of CSS and CSS selectors.
• Create a HTML page with all necessary elements
• Create Style sheet and add styling to web page
• Link the style sheet and HTML and run in browser
Program
[Link]
<html> <head>
<title> Popular Web Browser </title>
<!--Extended Style Sheet--->
<link rel="stylesheet" type="text/css" href="[Link]">
<!--Embedded Style Sheet--->
<style type="text/css">
p{
background-color:pink;
text-align:justify;
margin:2 em 7em;
</style> </head>
<body id="body">
<h1> WEB BROWSER </h1>
<p> <span style="font:200 x-large fantasy"> Web Browser </span>
takes you anywhere on the internet, letting you see text, images and video from anywhere in the
world. Common used Web browsers are
</p> <!-- Inline Style Sheet -->
<table style ="background-position:center;text-align:Center;padding:3px;">
<tr> <td align ="left">
<div class="div">
<ul>
<li><a href="">Google Chrome </a> </li>
<li><a href="">Mozilla Firefox </a> </li>
<li><a href="">Apple Safari </a> </li>
<li><a href="">Microsoft Edge </a> </li>
<li><a href="">Opera </a> </li>
</ul></div> </td> </tr> </table> </body> </html>
[Link]
h1,h2 {
text-decoration: Underline;
font-style: italic;
text-aligh:center;}
#body{
background-color:tan;
border: red dotted;
text-align:center;
}
.div
{ border:peru solid; }
*{ letter-spacing: 1px; }
a:link
{ color:black; }
a:visited
{ color:yellow; }
a:hover
{color: green; }
a:active
{ colot:blue; }
ul li
{ font-size:small;}
Output:
Result:
The webpage was successfully designed and implemented using CSS and Selectors.
[Link]: 3 Write an HTML page that contains a selection box with a list of 5 countries.
When the user selects a country, its capital should be printed next in the list. Add CSS
to customize the properties of the font of the capital (color, bold and font size).
Aim:
To develop an interactive HTML page featuring a dropdown list of five countries that, upon
selection, dynamically displays the corresponding capital city immediately beside the list, with
the capital’s name styled using CSS to be bold, colored, and sized appropriately, thereby
demonstrating basic DOM manipulation and CSS styling techniques.
Algorithm:
• Create a HTML page with all necessary elements
• Create Style sheet and dropdown list of five countries.
• Add CSS properties to customize capital name style
• Link the style sheet and HTML and run in browser
Program:
<html>
<head>
<title>Capitals of countries</title>
<center>
<h1> Select the Country Name to find its Captial </h1> </center>
<body bgcolor="violet">
<style>
p{
color:red;
font-weight:bold;
font-size:50;
}
</style>
<script language="javascript">
function capital()
{
var cunt=[Link]["frm1"].[Link];
var capital=" Select a country ";
if( cunt=="india")
{ capital="NEW DELHI"; }
if( cunt=="china")
capital="BEIJING";
if( cunt=="pakistan")
{ capital="ISLAMABAD"; }
if( cunt=="bangladesh")
{ capital="DHAKA"; }
if( cunt=="japan")
{ capital="TOKYO"; }
if( cunt=="select")
capital="Select a country";
[Link]("capt").innerHTML=capital;
</script> </head>
<body>
<form name="frm1">
<br/> <center>
<font color="gray" size="6">
Select a Country : <select name="country" onchange="capital()">
<option value="select">--SELECT--</option>
<option value="india">INDIA</option>
<option value="china">CHINA</option>
<option value="pakistan">PAKISTAN</option>
<option value="bangladesh">BANGLADESH</option>
<option value="japan">JAPAN</option>
</select>
<br/>
<br/>
<font color="green" size="6">Capital is :</font> <p id="capt"></p>
</center>
</form>
</body>
</html>
Output
Result: Thus, the JavaScript event listener and CSS rules successfully work together to
dynamically update and style the content
[Link] :4 Write client-side scripts for validating web form control using DHTML
Aim :
To implement client-side form validation using DHTML techniques—combining JavaScript
with dynamic HTML and CSS.
Algorithm:
• Create a HTML form and set-up CSS
• Add event listeners using Java Script.
• Define and run the validation.
• Verify that correct inputs allow form submission and incorrect ones block it until fixed.
Program:
[Link]
function ValidateEmail(input) {
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-
]+)*$/;
if ([Link](validRegex)) {
alert("Valid email address!");
[Link]();
return true;
} else {
alert("Invalid email address!");
[Link]();
return false; } }
[Link]
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8" />
<title>JavaScript Email Validation</title>
<link rel="stylesheet" href="[Link]" type="text/css" />
</head>
<body onload="[Link]()">
<div class="mail">
<h2>Input an email address</h2>
<form name="form1" action="#">
<ul>
<li><input type="text" name="text1" /></li>
<li> </li>
<li class="validate">
<input
type="submit"
name="validate"
value="Validate"
onclick="ValidateEmail(document.form1.text1)"
/> </li>
<li> </li> </ul>
</form> </div>
<script src="[Link]"></script>
</body> </html>
[Link]
li {
list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width:400px;
background:teal;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
color: white;
}
input { font-size: 20pt; }
input:focus, textarea:focus { background-color: lightyellow; }
input validate {font-size: 12pt;}
.rq {
color: #ff0000;
font-size: 10pt;
}
OUTPUT:
Result:
Thus, client-side form validation using DHTML techniques—combining JavaScript with
dynamic HTML and CSS.
Exp 5: To Design the following
a. Design a Image Slider Show
Aim: To design and implement a responsive image slider component using HTML, CSS, and
JavaScript that automatically cycles through a series of images, supports manual navigation
controls.
Algorithm :
• Create a responsive image slider component using HTML, CSS and Java Script.
• Activate the cycle through a series of images.
• Design the code to support manual navigation controls.
Program:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="[Link]
awesome/6.3.0/css/[Link]" integrity="sha512-
SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGK
HEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="[Link]" defer></script>
<title>Image Slider</title>
</head>
<body>
<div class="container">
<a class="btn btn-left"><i class="fa-solid fa-caret-left"></i></a>
<a class="btn btn-right"><i class="fa-solid fa-caret-right"></i></a>
</div>
</body>
</html>
[Link]
function initializeImageSlider(containerSelector, buttonSelector, images) {
const container = [Link](containerSelector);
const btns = [Link](buttonSelector); const imgList =
images;
let index = 0;
[Link](index);
[Link]((button) => {
[Link]('click', () => {
if ([Link]('btn-left')) {
index--;
if (index < 0) { \
index = [Link] - 1;
} else {
index++;
if (index === [Link]) {
index = 0;
[Link] = `url("img/${imgList[index]}.jpg") center/cover fixed
no-repeat`;
});
});
// Usage example:
initializeImageSlider('.container', '.btn', ["1", "2", "3", "4"]);
[Link]
body{
margin:0;
padding:0;
box-sizing: border-box;
background-color: salmon;
.container{
min-height: 80vh;
width:60%;
border:8px solid rgb(129, 187, 174);
margin:4rem auto;
border-radius: 5px;
box-shadow: 10px 10px 35px rgba(0,0,0,0.6);
position:relative;
background: url("img/[Link]") center/cover fixed no-repeat;
transition:background 1s ease-in-out;
.btn-left{
position:absolute;
top:50%;
left:-2%;
background-color: white;
padding:.4em .6em;
border-radius: 2em;
transform:translateY(calc(-50%));
cursor: pointer;
.btn-right{
position:absolute;
top:50%;
right:-2%;
background-color: white;
padding:.4em .6em;
border-radius: 2em;
transform:translateY(calc(-50%));
cursor: pointer; }
Output
b. Design a Digital Clock
Aim : To create an interactive HTML page named [Link] that displays a real-time digital
clock using JavaScript and DHTML, updating every second to reflect the user’s local time and
styled with CSS for clear, visually appealing typography and layout.
Algorithm :
• Create an interactive HTML page to display real-time digital Clock using JavaScript and
DHTML .
• Update the seconds to reflect the user’s local time using CSS.
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div id="clock">8:10:45</div>
<script src="[Link]"></script>
</body> </html>
[Link]
#clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
}
[Link]
// Calling showTime function at every second
setInterval(showTime, 1000);
// Defining showTime funcion
function showTime() {
// Getting current time and date
let time = new Date();
let hour = [Link]();
let min = [Link]();
let sec = [Link]();
am_pm = "AM";
// Setting time for 12 Hrs format
if (hour >= 12) {
if (hour > 12) hour -= 12;
am_pm = "PM";
} else if (hour == 0) {hr
= 12;
am_pm = "AM";
hour =hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;sec = sec < 10 ? "0" + sec : sec;
let currentTime =
hour +
":" +
min +
":" +
sec +
am_pm;
// Displaying the time
[Link](
"clock"
).innerHTML = currentTime;
showTime()
Output :
Result: Thus, the design of HTML page using java script and DHTML was successfully
executed.
Ex: 6 Design a shopping cart application using React. You Shopping webpage a should
have the provisions for selecting the list of items from different category. Once the items
are selected on clicking the submit button the items in the cart with its price should be
displayed.
Aim :
Design a shopping cart application using React. Shopping webpage a should have the
provisions for selecting the list of items from different category. Once the items are selected
on clicking the submit button the items in the cart with its price should be displayed.
Algorithm :
• Plan the layout to design shopping cart application using React.
• .Design the shopping cart webpage such that it should have provisions for selecting
the list of items from different category.
• Activate the items by clicking submit button.
Program.
import React, { useState } from 'react';
const items = [
{ id: 1, name: 'Apple', price: 10 },
{ id: 2, name: 'Banana', price: 5 },
{ id: 3, name: 'Orange' , price:20 },
{ id: 4, name: 'Papaya' , price:15}
];
function App() {
const [cart, setCart] = useState([]);
const [totalPrice, setTotalPrice] = useState(0);
const handleAddToCart = (item) => setCart([...cart, item]);
const handleSubmit = () => {
const total = [Link]((sum, item) => sum + [Link], 0);
setTotalPrice(total);
};
return (
<div>
<h2>Shopping Cart</h2>
{[Link](item => (
<div key={[Link]}> {[Link]} - ${[Link]}
<button onClick={() => handleAddToCart(item)}>Add to Cart</button>
</div>
))}
<h3>Cart:</h3>
{[Link]((item, index) => (
<div key={index}>{[Link]} - ${[Link]}</div>
))}
<button onClick={handleSubmit}>Submit</button>
{totalPrice > 0 && <h3>Total Price: ${totalPrice}</h3>}
</div>
);
}
export default App;
Output:
Result:
Thus, the React shopping cart application was successfully implemented.
Ex: 7 Design an Online super market using ExpressJs and MongoDB database a) Perform
a search based on product id or name b) On retrieving the results , display the product
details of different brands in table format with the price field in stored order using React.
Aim :
To develop a full-stack online supermarket application using [Link] and MongoDB that
allows users to search for products by ID or name, retrieves matching items across different
brands from the database, and presents the results in a React-powered table sorted by price,
thereby demonstrating end-to-end data retrieval, API design, and dynamic front-end rendering.
Algorithm :
• Create a responsive image slider component using HTML, CSS and Java Script.
• Activate the cycle through a series of images.
• Design the code to support manual navigation controls.
Express code
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors'); // Import cors
const app = express();
const port = 3000;
// Use CORS middleware
[Link](cors()); // This will allow all origins by default
// Connect to MongoDB
[Link]('mongodb://localhost:27017/online_supermarket', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => [Link]('MongoDB connected'))
.catch(err => [Link](err));
// Define product schema
const productSchema = new [Link]({
id: Number,
name: String,
brand: String,
price: Number
});
const Product = [Link]('Product', productSchema);
// API endpoints
[Link]('/products', async (req, res) => {
try {
const products = await [Link]();
[Link](products);
} catch (err) {
[Link](500).json({ message: [Link] });
}
});
[Link]('/products/:id', async (req, res) => {
try {
const product = await [Link]([Link]);
if (product == null) {
return [Link](404).json({ message: 'Product not found' });
}
[Link](product);
} catch (err) {
[Link](500).json({ message: [Link] });
}
});
[Link](port, () => {
[Link](`Server listening on port ${port}`);
});
React Code:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './[Link]'; // Import the CSS file
function App() {
const [products, setProducts] = useState([]);
const [filteredProducts, setFilteredProducts] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [error, setError] = useState(null);
useEffect(() => {
const fetchProducts = async () => {
try {
const response = await [Link]('[Link]
[Link]('Products data:', [Link]);
setProducts([Link]);
setFilteredProducts([Link]); } catch (error) {
[Link]("There was an error fetching the products!", error);
setError("Failed to fetch products.");
}
};
fetchProducts();
}, []);
useEffect(() => {
// Filter and sort products whenever searchTerm changes
const filtered = [Link](product =>
[Link]().includes([Link]()) ||
[Link]().includes(searchTerm)
);
// Sort products by price in ascending order
const sorted = [Link]((a, b) => [Link] - [Link]);
setFilteredProducts(sorted);
}, [searchTerm, products]);
// Group products by brand
const groupByBrand = (products) => {
return [Link]((acc, product) => {
if (!acc[[Link]]) {
acc[[Link]] = [];
}
acc[[Link]].push(product);
return acc;
}, {});
};
const productsByBrand = groupByBrand(filteredProducts);
return (
<div className="app-container">
<h1>Online Supermarket</h1>
{error && <p className="error">{error}</p>}
<input
type="text"
placeholder="Search by product ID or name"
value={searchTerm}
onChange={(e) => setSearchTerm([Link])}
className="search-bar"
/>
{[Link](productsByBrand).length > 0 ? (
[Link](productsByBrand).map(brand => (
<div key={brand} className="brand-section">
<h2 className="brand-name">{brand}</h2>
<table className="product-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{productsByBrand[brand].map(product => (
<tr key={product._id}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>${[Link](2)}</td>
</tr>
))}
</tbody>
</table>
</div>
))
):(
<p>No products found</p>
)}
</div>
);
}
export default App;
MongoDB Schema:
{
"_id": "ObjectId",
"id": "Number",
"name": "String",
"brand": "String",
"price": "Number"
}
OUTPUT:
Result:
Thus, the application meets the aim by delivering a seamless, end-to-end search experience for
an online supermarket, demonstrating integration of [Link], MongoDB, and React for real-
time data querying and display.
Ex: 8. Create a <TodoItem> component in React and reuse it inside a <TodoList>
component.
Aim :
To develop a reusable <TodoItem> React component that encapsulates the display and
behavior of a single to-do task, and integrate it within a <TodoList> component to dynamically
render and manage a list of tasks, demonstrating component composition, props passing, and
React’s declarative rendering.
Algorithm:
• Setup the React Project and create the <TodoItem> component
• Integrate <Todolist> in [Link]
• Style the application, Run and test the application
Program:
React Code:
[Link]:
import React from 'react';
import '../components/TodoList';
function TodoItem({ todo, toggle }) {
return (
<li
onClick={() => toggle([Link])}
style={{ textDecoration: [Link] ? 'line-through' : 'none' }}
>
{[Link]}
</li>
);
}
export default TodoItem;
[Link]
// src/components/[Link]
import React, { useState } from 'react';
import TodoItem from '../components/[Link]';
function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: 'Learn React', completed: false },
{ id: 2, text: 'Build a to-do app', completed: false },
{ id: 3, text: 'Master JavaScript', completed: false },
]);
const toggleTodo = (id) => {
setTodos([Link](todo =>
[Link] === id ? { ...todo, completed: ![Link] } : todo
));
};
return (
<ul>
{[Link](todo => (
<TodoItem
key={[Link]}
todo={todo}
toggle={() => toggleTodo([Link])}
/>
))}
</ul>
); }
export default TodoList;
[Link]:
import React from 'react';
import '../src/[Link]'
import TodoList from './components/TodoList';
function App() {
return (
<div className="app-container">
<h1 className="app-title">My To-Do List</h1>
<TodoList />
</div>
);
}
export default App;
Project Structure:
Output:
Result:
Thus, the implementation meets the aim by delivering a clean, interactive to-do list interface
powered by reusable React components and unidirectional data flow.
Ex: 10 Create a basic CRUD operation API by following API following REST syntax for
a given model student with the following fields [ field names].
Aim:
To design and implement a RESTful API that performs basic Create, Read, Update, and Delete
(CRUD) operations on a Student model.
Code:
Set Up Your API in Postman
1. Open Postman and create a new request collection for your Student API to keep
everything organized.
2. Ensure your server is running (i.e., node [Link] or npx nodemon [Link]).
3. Use the base URL for your requests: [Link]
2. CRUD Operations Using Postman
1. Create a Student (POST Request)
• Endpoint: POST [Link]
• Headers:
o Content-Type: application/json
• Body: Select "raw" and set the type to JSON. Use the following JSON structure
{
"name": "John Doe",
"age": 21,
"email": "johndoe@[Link]",
"grade": "A"
}
• Send the request: You should receive a response with the newly created student object
and a 201 Created status.
2. Get All Students (GET Request)
• Endpoint: GET [Link]
• Headers: None required.
• Send the request: This will return an array of all students currently in the database.
3. Get a Single Student by ID (GET Request)
• Endpoint: GET [Link]
• Example: Replace :id with the actual ID of a student (you can get this from the list of
students you retrieved in the previous step).
o E.g., GET [Link]
• Send the request: This will return the details of the specified student.
4. Update a Student (PUT Request)
• Endpoint: PUT [Link]
• Headers:
o Content-Type: application/json
• Body: Use JSON format to specify the fields you want to update
{
"name": "Jane Doe",
"age": 22,
"email": "janedoe@[Link]",
"grade": "B"
}
• Send the request: You should receive a response with the updated student data.
5. Delete a Student (DELETE Request)
• Endpoint: DELETE [Link]
• Example: Replace :id with the ID of the student you want to delete.
o E.g., DELETE [Link]
• Send the request: You should receive a confirmation message that the student has been
deleted.
POST (Create):
json
{
"_id": "64f9082399995d0f1a7c8abc",
"name": "John Doe",
"age": 21,
"email": "johndoe@[Link]",
"grade": "A",
"__v": 0
}
GET (All Students):
json
{
"_id": "64f9082399995d0f1a7c8abc",
"name": "John Doe",
"age": 21,
"email": "johndoe@[Link]",
"grade": "A",
"__v": 0
}
GET (Single Student):
json
{
"_id": "64f9082399995d0f1a7c8abc",
"name": "John Doe",
"age": 21,
"email": "johndoe@[Link]",
"grade": "A",
"__v": 0
}
PUT (Update):
json
{
"_id": "64f9082399995d0f1a7c8abc",
"name": "Jane Doe",
"age": 22,
"email": "janedoe@[Link]",
"grade": "B",
"__v": 0
}
DELETE (Remove):
json
{
"message": "Student deleted successfully"
}
Result:
Thus, the design of RESTful API was implemented successfully.
Ex no:10 To build an AJAX Application
Aim:
To develop a web application using Asynchronous JavaScript and XML (AJAX) techniques
that retrieves data from a server endpoint without reloading the page, dynamically updates the
DOM with the fetched data, and handles loading states and errors to provide a seamless user
experience.
Algorithm
• Design the project structure
• Build the HTML Skeleton and Style the Page
• Implement Ajax Logic , wait for the DOM to load and select your element.
• Set the server Endpoint and test the application
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX User Data</title>
<style>
body {
font-family: Arial, sans-serif;
}
#userData {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Get User Data</h1>
<button onclick="fetchUserData()">Get Data</button>
<div id="userData"></div>
<script>
function fetchUserData() {
const xhr = new XMLHttpRequest();
[Link]('GET', '[Link]', true);
[Link] = function () {
if ([Link] === 200) {
const user = [Link]([Link]);
[Link]('userData').innerHTML = `
<p><strong>Name:</strong> ${[Link]}</p>
<p><strong>Email:</strong> ${[Link]}</p>
<p><strong>Age:</strong> ${[Link]}</p>
`;
} else {
[Link]('userData').innerHTML = 'Error fetching data.';
}
};
[Link]();
}
</script>
</body>
</html>
[Link]
{
"name": "basker",
"email": "basker@[Link]",
"age": 30
}
Output
Result
Thus, the AJAX application successfully fetched data from the server without reloading the page when
the Load Data button was clicked.