Scribd
Upload
11 views54 pages

Webtech

The document outlines a series of programming tasks related to web development, including the creation of static web pages for an online bookstore, form validation using JavaScript, and the implementation of various HTML and CSS features. It includes specific requirements for pages such as a home page, login page, registration page, and catalogue page, along with examples of JavaScript functions and CSS styling. Additionally, it covers the use of tables, lists, and image handling in HTML.

Uploaded by

kartikey chaudhary
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 views54 pages

Webtech

The document outlines a series of programming tasks related to web development, including the creation of static web pages for an online bookstore, form validation using JavaScript, and the implementation of various HTML and CSS features. It includes specific requirements for pages such as a home page, login page, registration page, and catalogue page, along with examples of JavaScript functions and CSS styling. Additionally, it covers the use of tables, lists, and image handling in HTML.

Uploaded by

kartikey chaudhary
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/ 54

LIST OF PROGRAMS

S.No. Name of the Experiment Pg.No. Date Signature

Design the following static web pages required for an online book store
web site.
10
1) HOME PAGE: The static home page must contain three
frames.
2) LOGIN PAGE
3) CATOLOGUE PAGE: The catalogue page should contain
the details of all the books available in the web site in a table.
4) REGISTRATION PAGE

Write JavaScript to validate the following fields of the Registration page.


11 1. First Name (Name should contains alphabets and the length
should not be less than 6 characters).
2. Password (Password should not be less than 6 characters
length).
3. E-mail id (should not contain any invalid and must follow the
standard pattern [email protected])
4. Mobile Number (Phone number should contain 10 digits only).
5. Last Name and Address (should not be Empty).

Develop and demonstrate the usage of inline, internal and external style sheet
using CSS
12

Develop and demonstrate JavaScript with POP-UP boxes and functions for
the following problems:
13
a) Input: Click on Display Date button using onclick( ) function Output:
Display date in the textbox
b) Input: A number n obtained using prompt
Output: Factorial of n number using alert
c) Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using alert
d) Input: A number n obtained using prompt and add another number
using confirm
Output: Sum of the entire n numbers using alert
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.
14
Add CSS to customize the properties of the font of the capital (color,bold and
font size).
PROGRAM: 1
Create a table to implement with Rowspan and Colspan.
HTML Table - Colspan
To make a cell span over multiple columns, use
the colspan attribute:

OUTPUT:
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:

OUTPUT:
PROGRAM: 2

Implement all types of list.

OUTPUT:
Ordered Lists

The Ordered lists have an order which is either numerical or alphabetical.


The <ol> tag is used to create ordered lists in HTML and just like
unordered list, we use <li> tag to define or show lists inside <ol> tag.

OUTPUT:
PROGRAM: 3
Create a college registration form.
HTML Registration Form is a web-based form designed to collect user
information such as name, email, password, and other details. It
typically includes input fields, validation, and a submit button to register
users on a website.
OUTPUT:
PROGRAM: 4
Create 4 frames in a page & display 4 images in those frames.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Image Frames</title>

<style>

/* Style for the container that holds the frames */

.frame-container {

display: flex; flex-

wrap: wrap; gap:

20px; justify-

content: center;

margin: 20px;

/* Style for each frame */

.frame { width:

200px; height: 200px;

border: 5px solid #333;

padding: 10px; box-

sizing: border-box;

overflow: hidden;

display: flex; justify-

content: center; align-

items: center;

background-color: #f4f4f4;

/* Style for images inside the frames */

.frame img {

width: 100%; height: 100%; object-fit: cover; /* Ensures the

image covers the frame without distortion */

}
</style>

</head>

<body>

<div class="frame-container">

<div class="frame">

<img
src="file:///C:/Users/satvi/OneDrive/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83
%88/imag e1.jpg "alt="image1">

</div>

<div class="frame">

<imgsrc="
file:///C:/Users/satvi/OneDrive/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88/i
mage2.jp g"alt="image2">

</div>

<div class="frame">

<img
src="file:///C:/Users/satvi/OneDrive/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83
%88/imag e3.jpg "alt="image3">

</div>

<div class="frame">

<img
src="file:///C:/Users/satvi/OneDrive/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83
%88/imag e4.jpg "alt="image4">

</div>

</div>

</body>

</html>

OUTPUT:
PROGRAM: 5
Create a login page with validation.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style all input fields
*/ input { width:
100%; padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
}
/* Style the container for inputs */
.container {
background-color: #f1f1f1;
padding: 20px;
}
/* The message box is shown when the user clicks on the password field */
#message {
display:none;
background: #f1f1f1;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
/* Add a green text color and a checkmark when the requirements are right
*/
.valid {
color: green;
}

.valid:before {
position: relative;
left: -35px;

content: "✔";
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: red;
}
.invalid:before {
position: relative;
left: -35px;
content: "✖";
}
</style>
</head>
<body>
<h3>Password Validation</h3>
<p>Try to submit the form.</p>
<div class="container">
<form action="/action_page.php">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" required>
<label for="psw">Password</label>
<input type="password" id="psw" name="psw"
pattern="(?=.*\d)(?=.*[az])(?=.*[A-Z]).{8,}" title="Must contain at least
one number and one uppercase and lowercase letter, and at least 8 or more
characters" required>
<input type="submit" value="Submit">
</form>
</div>
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital =
document.getElementById("capital"); var number
= document.getElementById("number"); var
length = document.getElementById("length");
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// When the user starts to type something inside the password
field myInput.onkeyup = function() { // Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid"); letter.classList.add("valid");

} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
// Validate capital letters var
upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters))
{ capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate numbers var numbers
= /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid"); }
// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
}
else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>
</body>
</html>
OUTPUT:
PROGRAM: 6
Implement and load image in an html page.

OUTPUT:
PROGRAM: 7
Implement onload event in an html page.

OUTPUT:
PROGRAM: 8
Insert a node & attribute in html page to DOM.

OUTPUT:
PROGRAM: 9
Implement a JAVASCRIPT to file with regular
expression.

OUTPUT:
PROGRAM: 10
Design the following static web pages required for an online
book store website.
• HOME PAGE: The static homepage must contain three
frames.
• LOGIN PAGE:
• CATALOGUE PAGE: The catalogue page should contain the
details of all the books available in the website in a table.
• REGISTRATION PAGE
<!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">
<title>Books4MU</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<!-- font awesome cdn link -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.4/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-
icon.png">
<link rel="icon" type="image/png" sizes="32x32"
href="favicon_io/favicon32x32.png">
<link rel="icon" type="image/png" sizes="16x16"
href="favicon_io/favicon16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
</head>
<body>
<!-- header section starts -->
<header class="header">
<div class="header-1">
<a href="#" class="logo"> <i class="fas fa-book"></i> Books4MU </a>
<form action="" class="search-form">
<input type="search" name="" placeholder="search here..." id="search-box">
<label for="search-box" class="fas fa-search"></label>
</form>
<div class="icons">
<div id="search-btn" class="fas fa-search"></div>
<a href="./cart.html" class="fas fa-shopping-cart"></a>
<div id="login-btn" class="fas fa-user"></div>
</div>
</div>
<div class="header-2">
<nav class="navbar">
<a href="./index.html">home</a>
<a href="#featured">featured</a>
<a href="#">category</a>
<a href="#reviews">reviews</a>
<a href="./feedback.html">feedback</a>
</nav>
</div>
</header>
<!-- header section ends -->
<!-- bottom navbar -->
<nav class="bottom-navbar">
<a href="#home" class="fas fa-home"></a>
<a href="#featured" class="fas fa-list"></a>
<a href="#arrivals" class="fas fa-tags"></a>
<a href="#reviews" class="fas fa-comments"></a>
<a href="#feedback" class="fas fa-feedback"></a>
</nav>
<!-- login form -->
<div class="login-form-container">
<div id="close-login-btn" class="fas fa-times"></div>
<form action="">
<h3>sign in</h3>
<span>username</span>
<input type="email" name="" class="box" placeholder="enter your email"
id="">
<span>password</span>
<input type="password" name="" class="box" placeholder="enter your
password" id="">
<div class="checkbox">
<input type="checkbox" name="" id="remember-me">
<label for="remember-me"> remember me</label>
</div>
<input type="submit" value="sign in" class="btn">
<p>forget password ? <a href="#">click here</a></p>
<p>don't have an account ? <a href="#">create one</a></p>
</form>
</div>
<!-- home section starts -->
<section class="home" id="home">
<div class="row">
<div class="content">
<h3>upto 75% off</h3>
<p>If you’re an Engineering student and need a books, Books4MU has great
deals on a wide range of books. Shop for these books from top authors and avail
hugely discounted prices</p>
<a href="#" class="btn">shop now</a>
</div>
<div class="swiper books-slider”>
<div class="swiper-wrapper">
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-1.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-2.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-3.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-4.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-5.png" alt=""></a>
<a href="#" class="swiper-slide"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-6.png" alt=""></a>
</div>
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website-/main/image/stand.png" class="stand" alt= ""></div>
</div>
</section>
<!-- home section ense -->
<!-- icons section starts -->
<section class="icons-container">
<div class="icons">
<i class="fas fa-shipping-fast"></i>
<div class="content">
<h3>free shipping</h3>
<p>order over $100</p>
</div>
</div>
<div class="icons">
<i class="fas fa-lock"></i>
<div class="content">
<h3>secure payment</h3>
<p>100 secure payment</p>
</div>
</div>
<div class="icons">
<i class="fas fa-redo-alt"></i>
<div class="content">
<h3>easy returns</h3>
<p>10 days returns</p>
</div>
</div>
<div class="icons">
<i class="fas fa-headset"></i>
<div class="content”>
<h3>24/7 support</h3>
<p>call us anytime</p>
</div>
</div>
</section>
<!-- icons section ends -->
<!-- featured section starts -->
<section class="featured" id="featured">
<h1 class="heading"> <span>featured books</span> </h1>
<div class="swiper featured-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<a href="./product.html"> <img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-1.png" alt=""> </a>
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a>
</div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a> </div>
<div class="image">
<a href="./product.html"> <img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-2.png" alt=""> </a>
</div>
<div class="content”>
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>

<div class="image">
<a href="product.html"><img
src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website/main/image/book-3.png" alt=""> </a> </div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icon”>
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-4.png" alt=""></div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a>
</div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a></div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-5.png" alt="">
</div>
<div class="content”>
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-6.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide book”>
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-7.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a></div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a></div>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-8.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-9.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a> </div>
</div>
<div class="swiper-slide box">
<div class="icons">
<a href="#" class="fas fa-search"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-10.png" alt="">
</div>
<div class="content">
<h3>featured books</h3>
<div class="price">$15.99 <span>$20.99</span></div>
<a href="./cart.html" class="btn">add to cart</a></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<!-- featured section ends -->
<!-- newsletter section starts -->
<section class="newsletter">
<form action="">
<h3>subscribe for latest updates</h3>
<input type="email" name="" placeholder="enter your email" id="" class="box">
<input type="submit" value="subscribe" class="btn">
</form>
</section>
<!-- newsletter section ends -->
<!-- category section starts -->
<section class="arrivals" id="arrivals">
<h1 class="heading"> <span>Category</span> </h1>
<div class="swiper arrivals-slider">
<div class="swiper-wrapper">
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-1.png" alt=""></div>
<div class="content">
<h3>Semester 1</h3>
</div>
</a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website-/main/image/book-4.png" alt="">
</div>
<div class="content">
<h3>Semester 2</h3>
</div>
</a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-6.png" alt=””>
</div>
<div class="content">
<h3>Semester 3</h3>
</div> </a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-7.png" alt="">
</div>
<div class="content">
<h3>Semester 4</h3>
</div>
</a>
</div>
</div>
<div class="swiper arrivals-slider">
<div class="swiper-wrapper">
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-8.png" alt=""> </div>
<div class="content">
<h3>Semester 5</h3>
</div> </a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/book-9.png" alt=""></div>
<div class="content">
<h3>Semester 6</h3>
</div> </a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website-/main/image/book-10.png" alt=""> </div>
<div class="content">
<h3>Semester 7</h3>
</div> </a>
<a href="#" class="swiper-slide box">
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-Store-
Website-/main/image/book3.png" alt=""> </div>
<div class="content">
<h3>Semester 8</h3>
</div></a>
</div>
</div>
</section>
<!-- category section ends -->
<!-- deal section starts -->
<section class="deal">
<div class="content">
<h3>deal of the day</h3>
<h1>upto 50% off</h1>
<p>Checkout before this deal expires at midnight.</p>
<a href="#" class="btn">shop now</a>
</div>
<div class="image">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/deal-img.jpg" alt="">
</div>
</section>
<!-- deal section ends -->
<!-- reviews section starts -->
<section class="reviews" id="reviews">
<h1 class="heading"> <span>client's reviews</span> </h1>
<div class="swiper reviews-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box”>
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-1.png" alt="">
<h3>ujjwal </h3>
<p>First of all it customer service is excellent. We get all author book for Mumbai
University. People should try here affordable and best price.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div> <div
class="swiper-
slide box">

<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-2.png" alt="">
<h3>marry </h3>
<p>Best book store almost all books are available for prepartion of exam related or
other books are available on reaonable price also.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-3.png" alt="">
<h3>Raghu </h3>
<p>Customer Service is good. Greetings to customer and making the required Books
available to Customers is very good.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-4.png" alt="">
<h3>Pooja </h3>
<p>This book centre have large amount of a books. The engineering study material all
semester books are available.then the peacefull and nice book centre.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-5.png" alt="">
<h3>Abhinav </h3>
<p>I migrated to the online platform on Just books because I was finding it difficult to
go to their libraries before closing time. </p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="swiper-slide box">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/pic-6.png" alt="">
<h3>Sidddhi </h3>
<p>I love the product because it is very easy to find. The book are in really organized
manner you can easily find the book you want.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<!-- reviews section ends -->
<!-- feedback section starts -->
<section class="blogs" id="blogs">
<h1 class="heading"> <span>feedback</span> </h1>
<section class="newsletter">
<form action="">
<h3>give your feedback here..</h3>
<a href="./feedback.html" class="btn">Feedback</a>
<!-- <a href="./feedback.html"><input type="submit" value="feedback"> -->
</a> </form>
</section>
</section>
<!-- feedback section ends -->
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>our locations</h3>
<a href="#"> <i class="fas fa-map-marker-alt"></i> india </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> USA </a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="./index.html"> <i class="fas fa-arrow-right"></i> home </a>
<a href="#"> <i class="fas fa-arrow-right"></i> featured </a>
<a href="#"> <i class="fas fa-arrow-right"></i> Category </a>
<a href="#"> <i class="fas fa-arrow-right"></i> reviews </a>
<a href="./feedback.html"> <i class="fas fa-arrow-right"></i> feedback </a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="#"> <i class="fas fa-arrow-right"></i> account info </a>
<a href="#"> <i class="fas fa-arrow-right"></i> ordered items </a>
<a href="#"> <i class="fas fa-arrow-right"></i> privacy policy </a>
<a href="#"> <i class="fas fa-arrow-right"></i> payment method </a>
<a href="#"> <i class="fas fa-arrow-right"></i> our serivces </a>
</div>

<div class="box">
<h3>contact info</h3>
<a href="#"> <i class="fas fa-phone"></i> 9167064054 </a>
<a href="#"> <i class="fas fa-phone"></i> 77388 44717 </a>
<a href="#"> <i class="fas fa-envelope"></i>
[email protected] </a>
<a href="#"> <i class="fas fa-envelope"></i>
[email protected] </a>
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
Store-
Website-/main/image/worldmap.png" class="map" alt=""> </div>
</div>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="https://twitter.com/priyankakorde" class="fab fa-twitter"></a>
<a href="https://www.instagram.com/im_priyankak_/" class="fab
fainstagram"></a>
<a href="https://www.linkedin.com/in/priyanka-korde-2029521a1/" class="fab
falinkedin"></a>
<a href="https://www.linkedin.com/in/rohit-m-3494521a2/" class="fab
falinkedin"></a>
</div>
<div class="credit"> created by <span>Priyanka Korde & Rohit Mishra
</span>copyright ©2022 all rights reserved! </div>
</section>
<!-- footer section ends -->
<!-- loader -->
<div class="loader-container">
<img src="https://raw.githubusercontent.com/KordePriyanka/Books4MU-Book-
StoreWebsite-/main/image/loader-img.gif" alt=""></div>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script src="script.js"></script>
</body>
</html>

OUTPUT:
PROGRAM: 12

Develop and demonstrate the usage of inline, internal and


external style sheet using CSS.

INLINE STYLE SHEET USING CSS

OUTPUT:
INTERNAL STYLE SHEET USING CSS

OUTPUT:
EXTERNAL STYLE SHEET USING CSS

OUTPUT:
PROGRAM: 14
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).
OUTPUT:
PROGRAM: 11
Write JavaScript to validate the following fields of the Registration
page.
1. First Name (Name should contains alphabets and the length
should not be less than 6 characters).
2. Password (Password should not be less than 6 characters
length).
3. E-mail Id (should not contain any invalid and must follow the
standard pattern name @domain.com).
4. Mobile Number (Phone number should contain 10 digits only).
5. Last Name and Address (should not be Empty).
OUTPUT:
PROGRAM: 13
Develop and demonstrate JavaScript with POP-UP boxes and functions for the
following problems:
a) Input: Click on Display Date button using onclick ( ) function.
Output: Display date in the textbox.
b) Input: A number n obtained using prompt.
Output: Factorial of n number using alert.

c) Input: A number n obtained using prompt.


Output: A multiplication table of numbers from 1 to 10 of n using alert.
d) Input: A number n obtained using prompt and add another number using
confirm.
Output: Sum of the entire n numbers using alert.

OUTPUT:
OUTPUT:

OUTPUT:
OUTPUT:

You might also like