A

PROJECT REPORT ON

Online Laptop Shopping Website using CSS

In Partial fulfillment of Diploma in Computer Engineering
( V th Semester)

In the subject of :
Client side Scripting

Submitted by :
Falguni Timande
Shivam Denge
Tejas Ghengare
Ayush Chaudhari

Submitted To

Maharashtra State Board of Technical Education, Mumbai (M.S.)

Under the guidance of
MR.M.P.GANORKAR
(Lecturer in Computer Engineering)

Department of Computer Engineering

Government Polytechnic Arvi,

Dist. –Wardha (2022-2023)

 Government Polytechnic, Arvi

DEPARTMENT OF COMPUTER ENGINEERING

This is to certify that students whose names mentioned below of

Fifth Semester Diploma in Computer Engineering has satisfactorily
completed the MICRO PROJECT entitled,

Online Laptop Shopping Website using CSS

In Client Side Scripting (CSS) for the academic year 2022-2023 as prescribed
in MSBTE curriculum.

Name Enrollment No. Exam Seat No.

Falguni Devidas Timande 2001320119
Shivam Sunilrao Denge 2001320115
Tejas Ramesh Ghengare 2001320127
Ayush Sanjayrao Chaudhari 2001320116

Subject Teacher Head Of Department Principal

Place:-
Arvi
Date:-
 DECLARATION
We undersigned hereby declare that the micro project report entitled “Online Laptop
Shopping website using CSS” Contents is the outcome of our own literature survey. We
further declare that contents of this report are properly cited and well acknowledged. This
present report is not submitted to any other examination of this or any other institute for
the award of any diploma.

(Signature)

Place: Arvi

Date:

Government polytechnic Arvi

.
 PART A-PROJECT PROPOSAL

ONLINE LAPTOP SHOPPING WEBSITE USING CSS

 Brief introduction :

Nowadays most of the purchasing of the items that are needed for the daily basis, can be got through
the online mode. There are many shopping websites like Amazon, Flipkart, snap deal, Shop Clues and many
more. People without wasting much energy in going to the shops to buy the shopping items that are required
can purchase it through the shopping websites. The Online Shopping System is the application that allows
the users to shop online without going to the shops to buy them. This will help in saving the energy, fuel,
time needed to do the shopping by going to the shops.

 Aim Of The Micro-Project :

This Micro-Project aims to:

• Online laptop shopping website using css.
• To get familiar with JavaScript.
• To get the information about functions use in JavaScript.
• To develop skills in analyzing the usability of a website.

 Intended Course Outcomes :

• Create interactive web pages using program flow control structure.

• Create event based web forms using Javascript.
• Create interactive web page using regular expressions for validations.
• Create Menus and Navigations in web pages.
• Implement Arrays and functions in JavaScript.

 Literature Review :

Nowadays most of the purchasing of the items that are needed for the daily basis, can be got through the
online mode. There are many shopping websites like Amazon, Flipkart, snap deal, Shop Clues and many more. People
without wasting much energy in going to the shops to buy the shopping items that are required can purchase it through
the shopping websites. The Online Shopping System is the application that allows the users to shop online without
going to the shops to buy them. This will help in saving the energy, fuel, time needed to do the shopping by going to
the shops.
Online shopping is a form of electronic commerce which allows consumers to directly buy goods or services
from a seller over the Internet using a web browser. Consumers find a product of interest by visiting the website of the
retailer directly or by searching among alternative vendors using a shopping search engine, which displays the same
product's availability and pricing at different e-retailers.
Online stores usually enable shoppers to use "search" features to find specific models, brands or items. Online
customers must have access to the Internet and a valid method of payment in order to complete a transaction, such as a
credit card, an Interactenabled debit card, or a service such as PayPal
 Proposed Methodology :
• Understand the topic to given us.
• Discuss about the topic with group members.
• Divided the topic throughout each member of group.
• Collected information from members and verify from our mentor.

 Resources Required :

S.No. Name of Resources/material Specifications Qty Remarks

1 Computer/laptop Core i5 -3750 3.20 1 ----

GHz 8 GB Ram 64-
bit operating system
2 Software Microsoft word --- ----

 Action Plan :

S. Details of activity Planned Planned Name of

No. Start date Finish date Responsible
Team
Members
1 To discuss and getting the topic of Micro All
project

2 To start planning on our Topic of Micro All

project.

3 To collect Information about our Topic. All

4 To start with gathering information about All

online laptop shopping.

5 To discuss about the online laptop All

shopping website.

6 To start with creating the main copy of All

our Micro project.
7 To present soft copy of our Micro All
project. to the guide Via G-Mail.

8 To show the hard copy of our Micro All

project to our guide.
 Name of Responsible Team Members :

Enrollment No. Name Of Members Signatures

2001320119 Falguni Devidas Timande

2001320115 Shivam Sunilrao Denge

2001320127 Tejas Ramesh Ghengare

2001320116 Ayush Sanjayrao Chaudhari

**************
 PART B – MICRO-PROJECT REPORT

ONLINE LAPTOP SHOPPING WEBSITE USING CSS

 Rationale :

Nowadays most of the purchasing of the items that are needed for the daily basis, can be got through
the online mode. There are many shopping websites like Amazon, Flipkart, snap deal, Shop Clues and many
more. People without wasting much energy in going to the shops to buy the shopping items that are required
can purchase it through the shopping websites. The Online Shopping System is the application that allows
the users to shop online without going to the shops to buy them. This will help in saving the energy, fuel,
time needed to do the shopping by going to the shops.
 Course Outcomes Addressed :

• Create interactive web pages using program flow control structure.

• Create event based web forms using Javascript.
• Create interactive web page using regular expressions for validations.
• Create Menus and Navigations in web pages.
• Implement Arrays and functions in JavaScript.

 Literature Review :

Online shopping is a form of electronic commerce which allows consumers to directly buy goods or
services from a seller over the Internet using a web browser. Consumers find a product of interest by visiting
the website of the retailer directly or by searching among alternative vendors using a shopping search
engine, which displays the same product's availability and pricing at different e-retailers.
Online stores usually enable shoppers to use "search" features to find specific models, brands or items.
Online customers must have access to the Internet and a valid method of payment in order to complete a
transaction, such as a credit card, an Interact-enabled debit card, or a service such as PayPal.

Product Selection:

Consumers find a product of interest by visiting the website of the retailer directly or by searching
among alternative vendors using a shopping search engine. Once a particular product has been found on the
website of the seller, most online retailers use shopping cart software to allow the consumer to accumulate
multiple items and to adjust quantities, like filling a physical shopping cart or basket in a conventional store.
A "checkout" process follows (continuing the physical-store analogy) in which payment and delivery
information is collected, if necessary. Some stores allow consumers to sign up for a permanent online
account so that some or all of this information only needs to be entered once. The consumer often receives
an e-mail confirmation once the transaction is complete. Less sophisticated stores may rely on consumers to
phone or e- mail their orders.
 Design:

Customers are attracted to online shopping not only because of high levels of convenience, but also
because of broader selections, competitive pricing, and greater access to information. Business organizations
seek to offer online shopping not only because it is of much lower cost compared to bricks and mortar stores,
but also because it offers access to a worldwide market, increases customer value, and builds sustainable
capabilities. Customers are attracted to online shopping not only because of high levels of convenience, but
also because of broader selections, competitive pricing, and greater access to information. Business
organizations seek to offer online shopping not only because it is of much lower cost compared to bricks and
mortar stores, but also because it offers access to a worldwide market, increases customer value, and builds
sustainable capabilities.
Customers are attracted to online shopping not only because of high levels of convenience, but also
because of broader selections, competitive pricing, and greater access to information. Business organizations
seek to offer online shopping not only because it is of much lower cost compared to bricks and mortar stores,
but also because it offers access to a worldwide market, increases customer value, and builds sustainable
capabilities.

Advantages:

Convenience
Online stores are usually available 24 hours a day, and many consumers in Western countries have Internet
access both at work and at home. Other establishments such as Internet cafes, community centres and
schools provide internet access as well.

Information and reviews

Online stores must describe products for sale with text, photos, and multimedia files, whereas in a physical
retail store, the actual product and the manufacturer's packaging will be available for direct inspection
(which might involve a test drive, fitting, or other experimentation)

.Price and selection

One advantage of shopping online is being able to quickly seek out deals for items or services provided by
many different vendors (though some local search engines do exist to help consumers locate products for
sale in nearby stores). Search engines, online price comparison services and discovery shopping engines can
be used to look up sellers of a particular product or service. Shipping costs (if applicable) reduce the price
advantage of online merchandise, though depending on the jurisdiction, a lack of sales tax may compensate
for this.

Disadvantages Fraud and security concerns

Given the lack of ability to inspect merchandise before purchase, consumers are at higher risk of fraud than
face-to-face transactions. Lack of full cost disclosure. The lack of full cost disclosure may also be
problematic. While it may be easy to compare the base price of an item online, it may not be easy to see the
total co
Privacy
Privacy of personal information is a significant issue for some consumers. Many consumers wish to avoid
spam and telemarketing which could result from supplying contact information to an online merchant.

Data Collected
We had collected all basic information about Online Laptop Shopping Website which is used to develop an
Online Laptop Shopping Website in JavaScript.
We had collected information about various conditional statements for taking input like:

1. ‘If Else’.
Syntax: if (Condition)
{
Body of if;
}
Else
{
Body of else;
}
2. We had collected information about Button which is used to redirect on next page:
Syntax: <Button onclick=" "> Button Name </button>
3. We had collected information about hyper link which is used to redirect on next page or show alert box:
Syntax: <p onclick="a()">link</p>
4.We had collected information about alert box :
Syntax: alert(“ … ”);
5.We had collected information about confirmation box :
Syntax: window.Confirm("…..");
6.We had collected information about function:
Syntax: Funtion function_name(){
}

Design / Actual Procedure Followed Procedure

1. First, we had searched the information about Online Laptop Shopping Website using JavaScript.
2. We had collected the information about the Online Laptop Shopping as well as deep knowledge
about various methods used while developing a website in JavaScript.
3. Then we arrange all the information related to topic in proper format.
4. Then finally we had implemented program using various functions in JavaScript.
Implementing Coding
Login Page:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link
href="https://fonts.googleapis.com/css?family=Oswald|Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/fontawesome.min.css">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'>
<style> body { text-align:center; background-
image:url(login.png);
background-size: cover;
background-attachment: fixed;;
}
. { font-size:30px;
font-weight:bolder;
} input { transition:0.3s; width: login
250px; height:20px; background:none;
border-right:none; border-left:none;
border-top:none; padding:8px;
margin:10px; border-color:black; font-
size:15px; outline:none;
font-weight:bold;
}
button { width:100px; height:px;
background-color:black;
opacity:0.5; border-right:; border-left:; border-
top:; padding:8px; font-family:Raleway;
margin:10px; border-color:black; font-size:15px;
outline:none; transition:0.3s; font-weight:bold;
color:white;
}
button:hover { background-color:green; border-color:green;
border-style:solid;
opacity:0.5;
}
.g:hover { border-color:green;
width:270px;
}
.me { width:20px; padding:0px; margin-
left:-145px;
font-weight:bolder;
} p { color:black;
font-weight:bold;
}
</style>
</head>
<body>
<form>
 <p class="login"><b>USER LOGIN</b></br></br><i class="fas fa-user-circle"
style="fontsize:80px;"></i></p></br>
<i class="far fa-user-circle" style="font-size:30px;"></i>
<input type="text" id="uid" class="g" placeholder="Username" name="uid"></br>
<i class="fas fa-lock" style="font-size:30px;"></i>

<input type="password" id="pid" class="g" placeholder="Password" name="pid"></br>

<button onclick="IdPass(this.form)">Login<i class="fas fa-signinalt"></i></button></br></br>
<p onclick="a()">Forgot password</p>
<p onclick="b()">Sign Up</p>
</form>
<script language = "javascript"> function IdPass(form) { if (form.uid.value=="Admin" &&
form.pid.value=="Pass") {
if(window.confirm("Login Successful! \n")){
window.open("Home.html");
} } else{
alert("Incorrect Username or Password");
}
}
</script
<script language = "javascript"> function a() { alert("Your
Password : Pass");
} function b() { alert("Your Username : Admin \nYour Password : Pass");
}
</script>
</body>
</html>

Main Page:

<html>
<head>
<title>Processor Selection</title>
<style> body{ background-image:url(menu.png);
background-size: cover;
background-attachment: fixed;
}
.content{ backgrou
nd: white;
}
button { width:150px; height:50px;
background-color:red; border-right:; border-left:;
border-top:; padding:8px; font-family:Raleway;
margin:10px; border-color:red; font-size:20px;
outline:none; transition:0.3s; font-weight:bold;
color:white;
}
button:hover { background-color:green; border-color:green;
border-style:solid;
opacity:0.5;
}
.g:hover { border-color:green;
width:270px;
}
.me { width:20px; padding:0px; margin-
left:-145px;
font-weight:bolder;
}
marquee{ margin-top:150px; font-size:40px:
}
</style>
</head>
<body>
<h1 align="center"><font size="30" color="blue'' face="Engravers MT">Select any One
Processor</font></h1>
</br></br></br></br>
<p align="center">
<button onclick="i3()">i3</button>
</p>
</br></br>
<p align="center">
<button onclick="i5()">i5</button>
</p>
</br></br>
<p align="center">
<button onclick="i7()">i7</button>
</p>
</br></br>
<p align="center">
<button onclick="amd()">AMD</button>
</p>
<script language = "javascript"> function i3() {
window.open("i3.html");
}
function i5() { window.open("i5.html");
}
function i7() { window.open("i7.html");
}
function amd() {
alert("Currently Unavaliable!");
}
</script>
</body>
</html>

Home Page:
<html> <head>
<title>Home Page</title> <style> body{ background-
image:url(home.jpg); background-size: cover;
background-attachment: fixed;
}
.content{ background: white;
}
button { width:150px; height:50px;
background-color:red; border-right:; border-
left:; border-top:; padding:8px; font-
family:Raleway; margin:10px; border-
color:red; font-size:20px; outline:none;
transition:0.3s; font-weight:bold;
color:white;
}
button:hover { background-color:green; border-color:green;
border-style:solid;
opacity:0.5;
}
.g:hover { border-color:green;
width:270px;
}
.me { width:20px; padding:0px; margin-
left:-145px;
font-weight:bolder;
}
marquee{ margin-top:150px; font-size:40px:
}
</style>
</head>
<body>
<h1 align="center"><font color="sky blue" face="MV Boli" >Online Laptop
Shopping</font ><h1></i>
<h1 align="center"><font color="red" face="Engravers MT">WELCOME TO</h1>
<h1 align="center"><font size="30" color="blue'' face="Engravers MT">INFINITY
LAPTOPS<br>(IL)</font></h1>
<font color="orange">
<address>
Plot no. P/1/2, MIDC, Chikhalthana </br>
Industrial Area,</br>
Aurangabad, Maharashtra 431006 India
</address></br>
<b>Customer Care =</b> +91 9763313909<br></br>
<b>E-mail =</b> [email protected]<br></br>
</font>
<p align="center">
<button onclick="gomenu()">Menu</button>
</p>
<script language = "javascript"> function gomenu() {
window.open("Menu.html");
}
</script>
</body>
</html>

i3 Page:

<html>
<head>
<title>i3 Laptops</title>
<style> button { background-color:red;
border-right:; border-left:; border-top:;
padding:8px; font-family:Raleway;
margin:10px; border-color:red; outline:none;
transition:0.3s; font-weight:bold;
color:white;
}
</style>
</head> <body >
<i><h2 align="center"><font size="15" color="sky blue" face="Bookman Old Style" >i3
Laptops</font ><h2></i>
<p align="right">
<button onclick="gohome()">HOME</button>
</p>
<hr ></hr>
<hr></hr>
<center><img src="i31.jpg"></center>
<p align="Center">
<b>Dell Vostro</br>Price : 37,000/-</b>
</p>
<p align="left">
Model Number = Vostro 3491 </br>
Series = Vostro </br>
Color = Black </br>
Battery Backup = Upto 10 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 1.2 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i32.jpg"></center>
<p align="Center">
<b>HP 15s</br>Price : 39,000/-</b>
</p>
<p align="left">
Model Number = 15q-DS3001TU </br>
Series = 15s </br>
Color = Black </br>
Battery Backup = Upto 12 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 1.6 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 6 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i33.jpg"></center>
<p align="Center">
<b>ASUS Vivobook</br>Price : 31,000/-</b>
</p>
<p align="left">
Model Number = X543UA-DM342T </br>
Series = Vivobook </br>
Color = Star Grey </br>
Battery Backup = Upto 8 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 4GB(DDR4) and 1TB </br>
Clock Speed = 1.4 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i34.jpg"></center>
<p align="Center">
<b>Lenovo Ideapad</br>Price : 35,000/-</b>
</p>
<p align="left">
Model Number = S145-15IIL </br>
Series = Ideapad </br>
Color = Platinum Grey </br>
Battery Backup = Upto 6 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 1.2 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After Remote
Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i35.jpg"></center>
<p align="Center">
<b>Acer Aspire </br>Price : 35,000/-</b>
</p>
<p align="left">
Model Number = A315-56 </br>
Series = Aspire 3 </br>
Color = Black </br>
Battery Backup = Upto 8.5 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 1.2 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<hr></hr>
<p align="left">
<button onclick="gomenu()" background-color:orange >Back</button> </p>
<script language="javascript"> function gohome() {
window.open("Home.html");
}
function gobuy() {
window.open("Buy.html");
}
function gomenu() {
window.open("Menu.html");
}
</script>
</body>
</html>

i5 Page:

<html>
<head>
<title>i5 Laptops</title>
<style> button { background-color:red;
border-right:; border-left:; border-top:;
padding:8px; font-family:Raleway;
margin:10px; border-color:red; outline:none;
transition:0.3s; font-weight:bold;
color:white;
}
</style>
</head> <body >
<i><h2 align="center"><font size="15" color="sky blue" face="Bookman Old Style" >i5
Laptops</font ><h2></i>
<p align="right">
<button onclick="gohome()">HOME</button>
</p>
<hr ></hr>
<hr></hr>
<center><img src="i31.jpg"></center>
<p align="Center">
<b>Dell Vostro</br>Price : 47,000/-</b>
</p>
<p align="left">
Model Number = Vostro 3491 </br>
Series = Vostro </br>
Color = Black </br>
Battery Backup = Upto 10 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 1.8 GHz with Turbo Boost Upto 3.4 GHz </br>
Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button> </p>
<hr></hr>
<center><img src="i32.jpg"></center>
<p align="Center">
<b>HP 15s</br>Price : 49,000/-</b>
</p>
<p align="left">
Model Number = 15q-DS3001TU </br>
Series = 15s </br>
Color = Black </br>
Battery Backup = Upto 12 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 1.8 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 6 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After Remote
Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button> </p
<hr></hr>
<center><img src="i33.jpg"></center>
<p align="Center">
<b>ASUS Vivobook</br>Price : 41,000/-</b>
</p>
<p align="left">
Model Number = X543UA-DM342T </br>
Series = Vivobook </br>
Color = Star Grey </br>
Battery Backup = Upto 8 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 4GB(DDR4) and 1TB </br>
Clock Speed = 1.4 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i34.jpg"></center>
<p align="Center">
<b>Lenovo Ideapad</br>Price : 45,000/-</b>
</p>
<p align="left">
Model Number = S145-15IIL </br>
Series = Ideapad </br>
Color = Platinum Grey </br>
Battery Backup = Upto 6 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 1.6 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i35.jpg"></center>
<p align="Center">
<b>Acer Aspire </br>Price : 45,000/-</b>
</p>
<p align="left">
Model Number = A315-56 </br>
Series = Aspire 3 </br>
Color = Black </br>
Battery Backup = Upto 8.5 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 1.6 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<hr></hr>
<p align="left">
<button onclick="gomenu()" background-color:orange >Back</button> </p>
<script language="javascript"> function gohome() {
window.open("Home.html");
}
function gobuy() {
window.open("Buy.html");
}
function gomenu() {
window.open("Menu.html");
}
</script>
</body>
</html>

i7 Page:

<html>
<head>
<title>i7 Laptops</title>
<style> button { background-color:red;
border-right:; border-left:; border-top:;
padding:8px; font-family:Raleway;
margin:10px; border-color:red; outline:none;
transition:0.3s; font-weight:bold;
color:white;
}
</style>
</head> <body >
<i><h2 align="center"><font size="15" color="sky blue" face="Bookman Old Style" >i7
Laptops</font ><h2></i>
<p align="right">
<button onclick="gohome()">HOME</button>
</p>
<hr ></hr>
<hr></hr>
<center><img src="i31.jpg"></center>
<p align="Center">
<b>Dell Vostro</br>Price : 57,000/-</b>
</p>
<p align="left">
Model Number = Vostro 3491 </br>
Series = Vostro </br>
Color = Black </br>
Battery Backup = Upto 10 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 2.1 GHz with Turbo Boost Upto 3.4 GHz </br>
Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i32.jpg"></center>
<p align="Center">
<b>HP 15s</br>Price : 59,000/-</b>
</p>
<p align="left">
Model Number = 15q-DS3001TU </br>
Series = 15s </br>
Color = Black </br>
Battery Backup = Upto 12 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 2.1 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 6 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i33.jpg"></center>
<p align="Center">
<b>ASUS Vivobook</br>Price : 51,000/-</b>
</p>
<p align="left">
Model Number = X543UA-DM342T </br>
Series = Vivobook </br>
Color = Star Grey </br>
Battery Backup = Upto 8 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 4GB(DDR4) and 1TB </br>
Clock Speed = 1.8 GHz with Turbo Boost Upto 3.4 GHz </br>
Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i34.jpg"></center>
<p align="Center">
<b>Lenovo Ideapad</br>Price : 55,000/-</b>
</p>
<p align="left">
Model Number = S145-15IIL </br>
Series = Ideapad </br>
Color = Platinum Grey </br>
Battery Backup = Upto 6 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 2.1 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After Remote
Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<center><img src="i35.jpg"></center>
<p align="Center">
<b>Acer Aspire </br>Price : 57,000/-</b>
</p>
<p align="left">
Model Number = A315-56 </br>
Series = Aspire 3 </br>
Color = Black </br>
Battery Backup = Upto 8.5 hours </br>
Processor Generation = 10th Gen </br>
RAM and HDD = 8GB(DDR4) and 1TB </br>
Clock Speed = 2.1 GHz with Turbo Boost Upto 3.4 GHz
</br> Cache = 4 MB </br>
Graphic Processor = Intel Integrated UHD </br>
Warranty = 1 Year Limited Hardware Warranty, In Home Service After
Remote Diagnosis - Retail </br>
</p>
<p align="Center">
<button onclick="gobuy()" background-color:orange >BUY NOW</button>
</p>
<hr></hr>
<hr></hr>
<p align="left">
<button onclick="gomenu()" background-color:orange >Back</button> </p>
<script language="javascript"> function gohome() {
window.open("Home.html");

function gobuy() {
window.open("Buy.html");
}
function gomenu() {
window.open("Menu.html");
}
</script>
</body>
</html>

Buy Page:

<!DOCTYPE html>
<html>
<head>
<title>Payment Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link
href="https://fonts.googleapis.com/css?family=Oswald|Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/fontawesome.min.css">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'> <style> body
{
text-align:center; background-image:url(payment.png); background-size: cover;
background-attachment: fixed;;
}
.login { font-size:30px; font-weight:bolder;
} input { transition:0.3s; width:400px;
height:20px; background:none; border-
right:none; border-left:none; border-
top:none; padding:8px; margin:10px;
border-color:black; font-size:15px;
outline:none; font-weight:bold;
}
button { width:100px; height:px; background-
color:black; opacity:0.5; border-right:; border-
left:; border-top:; padding:8px; font-
family:Raleway; margin:10px; border-
color:black; font-size:15px; outline:none;
transition:0.3s; font-weight:bold;
color:white;
}
button:hover { background-color:green; border-color:green; border-style:solid;
opacity:0.5;
}
.g:hover { border-color:green;
width:270px;
}
.me { width:20px; padding:0px; margin-
left:-145px;
font-weight:bolder;
} p { color:black;
font-weight:bold;
}
</style>
</head>
<body>
<form>
<p align="left">
<b>Cash on Delivery(CoD) Only!</b>
</p>
<p class="login"><b>PAYMENT</b></br></br></p></br>
<b>Name : </b>
<input type="text" id="name" placeholder="FirstName MiddleName LastName" name="uid"></br>
<b>Mobile No. : </b>
<input type="text" id="mobno" placeholder="+91 .........." name="mobno"></br> <b>Email : </b>
<input type="Email" id="mail" placeholder="[email protected]" name="mail"></br> <b>Address : </b>
<input type="text" id="add" placeholder="A/p...." name="add"></br>
<button onclick="Conf(this.form)">BUY<i class="fas fa-signinalt"></i></button></br></br>
<b>Your Order will recive in max. 10 Days</b>
</form>
<script language = "javascript"> function Conf(form) { if (form.name.value=="" || form.mobno.value=="" ||
form.add.value=="" || form.mail.value=="") { alert("Failed!\n\nPlease fullfill all information");
}
else{
alert("Thank You \n\n Have a Nice Day!");
window.open("Menu.html");
}
}
</script>
</body>
</html>

 Actucal Methodology Followed

• Understand the topic to given us.

• Discuss about the topic with group members.
• Divided the topic throughout each member of group.
• Collected information from members and verify from our mentor.

 Actual Resources Used

S.No. Name of Resources/material Specifications Qty Remarks

1 Computer/laptop Core i5 -3750 3.20 GHz 1 ----

8 GB Ram 64-bit
operating system
2 Software Microsoft word,Notepad+ --- ----
+,chrome

 Applications of this Micro-Project

• For saving time, money and efforts.
• Availability of online shop 365 x 24 x 7.
• Less compulsive shopping.

 Skill Developed/ Learning outcome of this Micro-Project

• Leadership
• Communication skill
• Planning skill
• Time Management
• Risk Management
• Negotiation skill
• Gain more knowledge about Microprocessor
• Team in work
 Outputs of the Micro-Project:
 Conclusion

Hence, we had successfully developed an Online Laptosssp Shopping Website using JavaScript.

**************