CSS Report PDF

Online Laptop Shopping Website
Annexure -II
Micro-Project Report
1.0. 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.
2.0 Aims/Benefits of the Micro-Project

a) To get familiar with JavaScript.
b) To get the information about functions use in JavaScript.
c) To develop skills in analyzing the usability of a website.
3.0 Course Outcomes Achieved

a) Create interactive web pages using program flow control structure.
b) Implement Arrays and functions in JavaScript.
c) Create interactive web pages using regular expression for validation.
4.0 Actual Methodology Followed:

4.1. Brief Information about Micro-project / Brief Description
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.
Department of Computer Engineering Page 1

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.

4.2 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(){

4.3. 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.
4.3.1 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/font-
awesome/4.7.0/css/font-awesome.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;;
}
.login {
font-size:30px;

font-weight:bolder;
}
input {
transition:0.3s;
width: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="font-
size: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-sign-in-

alt"></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
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-attachment: fixed;
}
.content{
background: white;
}
button {
width:150px;
height:50px;
background-color:red;
border-right:;
border-left:;
border-top:;
padding:8px;
margin:10px;
border-color:red;
font-size:20px;
outline:none;
transition:0.3s;
font-weight:bold;
color:white;
}
button:hover {
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">
</p>
</br></br>
<p align="center">
</p>
</br></br>
<p align="center">
<button onclick="amd()">AMD</button>
</p>

function i3() {
window.open("i3.html");
}
function i5() {
}
function i7() {
}
function amd() {
alert("Currently Unavaliable!");
}
</script>
</body>
</html>
Home Page:
<html>
<head>
<title>Home Page</title>
<style>
body{
background-image:url(home.jpg);
background-attachment: fixed;
}
.content{
background: white;
}
button {
width:150px;
height:50px;

border-right:;
border-left:;
border-top:;
padding:8px;
margin:10px;
border-color:red;
font-size:20px;
outline:none;
transition:0.3s;
font-weight:bold;
color:white;
}
button:hover {
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>
function gomenu() {
window.open("Menu.html");
}
</script>
</body>
</html>
i3 Page:
<html>
<head>
<title>i3 Laptops</title>
<style>
button {

border-right:;
border-left:;
border-top:;
padding:8px;
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>
<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>
Cache = 6 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>

<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>
Cache = 4 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<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>
Cache = 4 MB </br>


Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<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>
Cache = 4 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<hr></hr>
<p align="left">
<button onclick="gomenu()" background-color:orange >Back</button>
</p>

<script language="javascript">
function gohome() {
}
function gobuy() {
window.open("Buy.html");
}
function gomenu() {
}
</script>
</body>
</html>
i5 Page:
<html>
<head>
<style>
button {
border-right:;
border-left:;
border-top:;
padding:8px;
margin:10px;
border-color:red;
outline:none;
transition:0.3s;
font-weight:bold;
color:white;
}

</style>
</head>
<body >
<p align="right">
</p>
<hr ></hr>
<hr></hr>
<p align="Center">
</p>
<p align="left">
Color = Black </br>
Cache = 4 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>

<p align="Center">
<b>HP 15s</br>Price : 49,000/-</b>
</p>
<p align="left">
Series = 15s </br>
Color = Black </br>
Cache = 6 MB </br>
Retail </br>
</p>
<p align="Center">
</p
<hr></hr>
<p align="Center">
</p>
<p align="left">
Cache = 4 MB </br>


Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<p align="Center">
</p>
<p align="left">
Cache = 4 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<p align="Center">
</p>

<p align="left">
Color = Black </br>
Cache = 4 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<hr></hr>
<p align="left">
</p>
function gohome() {
}
function gobuy() {
}
function gomenu() {

}
</script>
</body>
</html>
i7 Page:
<html>
<head>
<style>
button {
border-right:;
border-left:;
border-top:;
padding:8px;
margin:10px;
border-color:red;
outline:none;
transition:0.3s;
font-weight:bold;
color:white;
}
</style>
</head>
<body >
<p align="right">
</p>
<hr ></hr>

<hr></hr>
<p align="Center">
</p>
<p align="left">
Color = Black </br>
Cache = 4 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<p align="Center">
<b>HP 15s</br>Price : 59,000/-</b>
</p>
<p align="left">
Series = 15s </br>
Color = Black </br>

Cache = 6 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<p align="Center">
</p>
<p align="left">
Cache = 4 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<p align="Center">


</p>
<p align="left">
Cache = 4 MB </br>
Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<p align="Center">
</p>
<p align="left">
Color = Black </br>
Cache = 4 MB </br>

Retail </br>
</p>
<p align="Center">
</p>
<hr></hr>
<hr></hr>
<p align="left">
</p>
function gohome() {
function gobuy() {
}
function gomenu() {
}
</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/font-

awesome/4.7.0/css/font-awesome.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-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;
margin:10px;
border-color:black;
font-size:15px;
outline:none;
transition:0.3s;
font-weight:bold;
color:white;
}
button:hover {
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-sign-in-
alt"></i></button></br></br>
<b>Your Order will recive in max. 10 Days</b>
</form>

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!");
}
}
</script>
</body>
</html>
4.4 Result & Analysis

Hence, we had successfully developed an Online Laptosssp Shopping Website using
JavaScript.
5.0 Actual Resources Used
Name of Resource
S. No. Specifications Qty. Remarks
/Material
Intel i5 3.6 GHZ
1 Computer System 1
RAM 8.00 GB
2 Operating System Windows 10 1
3 Text editor Notepad 1
Mozilla Firefox, Google
4 Browser 1
chrome
5 Printer HP Laser jet 1

6.0 Output of Micro-Projects







7.0 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
8.0 Applications of Micro-Project

• For saving time, money and efforts.
• Availability of online shop 365 x 24 x 7.
• Less compulsive shopping.
Ms. Dhumal K. R.
(Subject Teacher)
************************

CSS Report PDF

Uploaded by

Copyright:

Available Formats

CSS Report PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Report PDF

Uploaded by

Copyright:

Available Formats

Online Laptop Shopping Website

2.0 Aims/Benefits of the Micro-Project

3.0 Course Outcomes Achieved

4.0 Actual Methodology Followed:

Department of Computer Engineering Page 1

Online shopping is a form of electronic commerce which allows consumers to directly

Department of Computer Engineering Page 2

• Information and reviews

• Price and selection

• Lack of full cost disclosure

Department of Computer Engineering Page 3

4.2 Data Collected

Department of Computer Engineering Page 4

4.3. Design / Actual Procedure Followed

4.3.1 Implementing Coding

Department of Computer Engineering Page 5

Department of Computer Engineering Page 6

Department of Computer Engineering Page 7

<button onclick="IdPass(this.form)">Login<i class="fas fa-sign-in-

Department of Computer Engineering Page 8

Department of Computer Engineering Page 9

Department of Computer Engineering Page 10

Department of Computer Engineering Page 11

Department of Computer Engineering Page 12

Department of Computer Engineering Page 13

Department of Computer Engineering Page 14

RAM and HDD = 8GB(DDR4) and 1TB </br>

Department of Computer Engineering Page 15

Department of Computer Engineering Page 16

Graphic Processor = Intel Integrated UHD </br>

Department of Computer Engineering Page 17

Department of Computer Engineering Page 18

Department of Computer Engineering Page 19

Department of Computer Engineering Page 20

Graphic Processor = Intel Integrated UHD </br>

Department of Computer Engineering Page 21

Department of Computer Engineering Page 22

Department of Computer Engineering Page 23

Department of Computer Engineering Page 24

Department of Computer Engineering Page 25

<b>Lenovo Ideapad</br>Price : 55,000/-</b>

Department of Computer Engineering Page 26

Department of Computer Engineering Page 27

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

Department of Computer Engineering Page 28

Department of Computer Engineering Page 29

<b>Mobile No. : </b>

<script language = "javascript">

Department of Computer Engineering Page 30

alert("Failed!\n\nPlease fullfill all information");

4.4 Result & Analysis

5.0 Actual Resources Used

Department of Computer Engineering Page 31

6.0 Output of Micro-Projects

Department of Computer Engineering Page 32

Department of Computer Engineering Page 33

Department of Computer Engineering Page 34

Department of Computer Engineering Page 35