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;
align-items: center;
}
.Heading{
font-size: 20px;
font-family: ‘Open Sans’;
font-weight: 700;
color: #2F3841;
}
.Action{
font-size: 14px;
font-family: ‘Open Sans’;
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;
justify-content: space-between;
align-items: center;
}
.image-box{
width: 15%;
text-align: center;
}
.about{
height: 100%;
}
.title{
padding-top: 5px;
line-height: 10px;
font-size: 32px;
font-family: ‘Open Sans’;
font-weight: 800;
color: #202020;
}
.subtitle{
line-height: 10px;
font-size: 18px;
font-family: ‘Open Sans’;
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;
align-items: center;
}
.btn{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: ‘Open Sans’;
font-weight: 900;
color: #202020;
cursor: pointer;
}
.count{
font-size: 20px;
font-family: ‘Open Sans’;
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-family: ‘Open Sans’;
font-weight: 800;
color: #202020;
}
.save{
padding-top: 5px;
font-size: 14px;
font-family: ‘Open Sans’;
font-weight: 600;
color: #1687d9;
cursor: pointer;
}
.remove{
padding-top: 5px;font-size: 14px;
font-family: ‘Open Sans’;
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;
justify-content: space-between;
}
.Subtotal{
font-size: 22px;
font-family: ‘Open Sans’;
font-weight: 700;
color: #202020;
}
.items{
font-size: 16px;
font-family: ‘Open Sans’;
font-weight: 500;
color: #909090;
line-height: 10px;
}
.total-amount{
font-size: 36px;
font-family: ‘Open Sans’;
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-family: ‘Open Sans’;
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.
