CSS Microproject 2023

Maharashtra State
Board of Technical Education

Certificate of completion
Of Micro-project assessment at the end of the Diploma
programme (By respective Head of the Department and Head
of the institute) This is certify Amaan virani , siddiqua abdul
sattar khatri, Momin Arham Sajid with enrollment no.
2100020169 , 2000020363 ,200003057
has successfully completed CSS (22519) micro-projects as
in the enclosed 'Portfolio' during his/her tenure of
completing the Diploma progra1nme in Information
Technology from M.H. SABOO SIDDIK
POLYTECHNIC Institute with Institute code 002
Signature
Signature
(Head of Department)
(Head of Institute)
ANJUMAN-I-ISLAM’S
M.H. SABOO SIDDIK POLYTECHNIC
8, Saboo Siddik Polytechnic Road, Mumbai-08
CSS(22519)
MICRO- PROJECT
We the students of Third Year / 5 th Semester Information

Technology department would like to present our
MICROPROJECT on Client Side Scripting (22519)
We will be covering the topic “E-Shopping” for the project.

Group Members:
Sr.no Name Roll no

1. Amaan virani 210821
2. Momin Arham sajid 20818
3. Siddiqua Khatri 20815
As a group we learn spirituality, team-spirit and

cooperation among ourselves. We would like to thank our
respected Mrs. Saba Sayyed for her guidance and support for
making our project a successful one.
Resources Required:
E-Shopping Cart
Aim:
Develop e-shopping cart using client slide scripting.

Course Outcomes
1. Create interactive web pages using program flow control

structure.
2. Create event based web forms using java script.
3. Use JavaScript for handling cookies.
4. Create Menus and navigations in web pages.
Proposed Methodology
 First, Search the topic for which you want to make a project, and
then proposed it to the Subject Incharge.
 After finalizing the topic, start gathering the information about

your project.
 Now, it’s time to make a report of your Selected Project.
Rationale
JavaScript is limited featured client slide programming language.
JavaScript runs at
the client end through the user’s browser without sending message
back and forth to
the server. It is widely used by the web developers to do things such as
build
dynamic web pages, respond to events, create interactive forms,
validate data that the
visitor enters into a form, control the browser etc. This course helps
students to
create highly interactive pages using these this features.
Literature
Online shopping or e-shopping is a form of electronic commerce which allows

consumers to directly by goods or services from a seller over the Internet using a
web browser. Alternative names are : e-web-stored, e-shop, e-store, Internet
shop,
web-shop, web-store, online store, online storefront, and virtual store. Mobile
commerce (m-commerce) describes purchasing from an online retailer’s mobile
optimize online site or app.
Actual Methodology Followed
Topic Work Done Data Work Done

By
1 Searching of topic (E-Shopping cart) Amaan
virani
2 Gathering of (Rational,Aim,Application,etc) Arham sajid
Information
3 Execution of 1. Install JDK 1.8 Siddiqua
program 2. Run the program Khatri
4 Report Making Amaan
virani
Source Code
<body>
<div class=”Cart-Container”></div>
</body>
body{
margin: 0;
padding: 0;
background: linear-gradient(to bottom right, #E3F0FF, #FAFCFF);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.Cart-Container{
width: 70%;
height: 85%;
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0px 25px 40px #1687d933;
}
<div class=”Header”>
<h3 class=”Heading”>Shopping Cart</h3>
<h5 class=”Action”>Remove all</h5>
</div>
.Header{
margin: auto;
width: 90%;
height: 15%;
display: flex;
justify-content: space-between;
}
.Heading{
font-size: 20px;
font-family: ‘Open Sans’;
font-weight: 700;
color: #2F3841;
}
.Action{
font-size: 14px;
font-weight: 600;
color: #E44C4C;
cursor: pointer;
border-bottom: 1px solid #E44C4C;
}
<div class=”Cart-Items”><div class=”image-box”>
<img src=”images/apple.png” style={{ height=”120px” }} />
</div>
<div class=”about”>
<h1 class=”title”>Apple Juice</h1>
<h3 class=”subtitle”>250ml</h3>
<img src=”images/veg.png” style={{ height=”30px” }}/>
</div>
<div class=”counter”></div>
<div class=”prices”></div>
</div>
.Cart-Items{
margin: auto;
width: 90%;
height: 30%;
display: flex;
}
.image-box{
width: 15%;
text-align: center;
}
.about{
height: 100%;
}
.title{
padding-top: 5px;
line-height: 10px;
font-size: 32px;
font-weight: 800;
color: #202020;
}
.subtitle{
line-height: 10px;
font-size: 18px;
font-weight: 600;
color: #909090;
}
<div class=”counter”>
<div class=”btn”>+</div>
<div class=”count”>2</div>
<div class=”btn”>-</div>
</div>
.counter{
width: 15%;
display: flex;justify-content: space-between;
}
.btn{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #d9d9d9;
display: flex;
justify-content: center;
font-size: 20px;
font-weight: 900;
color: #202020;
cursor: pointer;
}
.count{
font-size: 20px;
font-weight: 900;
color: #202020;
}
<div class=”prices”>
<div class=”amount”>$2.99</div>
<div class=”save”><u>Save for later</u></div>
<div class=”remove”><u>Remove</u></div>
</div>
.prices{
height: 100%;
text-align: right;
}
.amount{
padding-top: 20px;
font-size: 26px;
font-weight: 800;
color: #202020;
}
.save{
padding-top: 5px;
font-size: 14px;
font-weight: 600;
color: #1687d9;
cursor: pointer;
}
.remove{
padding-top: 5px;font-size: 14px;
font-weight: 600;
color: #E44C4C;
cursor: pointer;
}
<hr>
<div class=”checkout”>
<div class=”total”>
<div>
<div class=”Subtotal”>Sub-Total</div>
<div class=”items”>2 items</div>
</div>
<div class=”total-amount”>$6.18</div>
</div>
<button class=”button”>Checkout</button>
</div>
hr{
width: 66%;
float: right;
margin-right: 5%;
}
.checkout{
float: right;
margin-right: 5%;
width: 28%;
}
.total{
width: 100%;
display: flex;
}
.Subtotal{
font-size: 22px;
font-weight: 700;
color: #202020;
}
.items{
font-size: 16px;
font-weight: 500;
color: #909090;
line-height: 10px;
}
.total-amount{
font-size: 36px;
font-weight: 900;color: #202020;
}
.button{
margin-top: 5px;
width: 100%;
height: 40px;
border: none;
background: linear-gradient(to bottom right, #B8D7FF, #8EB7EB);
border-radius: 20px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: #202020; }
Output
Skill Developed
We have build the program of E-Shopping Cart Using HTML. And we have
successfully
run the program.
Conclusion
We have build the program of E-Shopping Cart Using HTML. And we have
successfully
run the program.

CSS Microproject 2023

Uploaded by

Copyright:

Available Formats

You might also like

CSS Microproject 2023

Uploaded by

Document Information

Original Description:

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 Microproject 2023

Uploaded by

Copyright:

Available Formats

Maharashtra State

Board of Technical Education

We the students of Third Year / 5 th Semester Information

We will be covering the topic “E-Shopping” for the project.

Sr.no Name Roll no

As a group we learn spirituality, team-spirit and

Develop e-shopping cart using client slide scripting.

1. Create interactive web pages using program flow control

 After finalizing the topic, start gathering the information about

Online shopping or e-shopping is a form of electronic commerce which allows

Actual Methodology Followed

Topic Work Done Data Work Done

You might also like