Micro-Project Report

On

“Webpage for online Grocery Ordering System using

Javascript”

Submitted in partial fulfilment of the requirements

For the award of the course of Diploma of Engineering
in
Information Technology
By

Sr. No. Names of Group Members Roll No Enrollment No

1 Davhare Priyanka Kailas 22IF308 2010510353

2 Kate Gaurav Suresh 22IF325 2010510373

3 Shitole Tejas Uttam 22IF343 2010510392

4 Jadhav Pranav Appa 22IF364 2110510548

Under the Guidance

of Mr.Y.U.Bodhe
 GOVERNMENT POLYTECHNIC, AWASARI (KH)

DEPARTMENT OF INFORMATION TECHNOLOGY

SEMESTER – 5th (2022-23)

CERTIFICATE

This is to certify that following students of semester 5th of Diploma in Information

Technology of institute: Government Polytechnic Awasari(Kh)(code:1051) has
completed the micro-project satisfactorily in the subject- Client Side Scripting
Language(22519) for the academic year 2022-23 as per prescribed in the
curriculum.

Sr. Names of Group Members Roll No Enrollment No

No.
1 Davhare Priyanka Kailas 22IF308 2010510353

2 Kate Gaurav Suresh 22IF325 2010510373

3 Shitole Tejas Uttam 22IF343 2010510392

4 Jadhav Pranav Appa 22IF364 2110510548

…………… …………….. ……………..

Mr. Y. U. Bodhe Dr. D.N. Rewadkar Dr.D.R.Nandanwar

Guide HOD Principal

Place :Awasari (Kh)

Date : / /2022
 ACKNOWLEDGEMENT

With the successful completion of our micro-project, it becomes part of our duty
to express gratitude to all those who made this work possible. We are thankful to
the Maharashtra State Board of Technical Education for giving us such type of
creative curriculum of diploma in Information Technology Engineering.
Also thanks to the institution for giving an opportunity to associate with an
esteemed personality like Dr.D.R.Nandanwar. who has been a great source of
inspiration and guidance and also for providing us infrastructural facilities to work
in, without which this work would not have been possible.
We are wholeheartedly thankful to Dr.D.N.Rewadkar, Head of Information
Technology Department for giving us freedom, inspiration, and encouragement to
carry out this project.
We express our sincere gratitude to Mr.Y.U.Bodhe our Professor and Project
Guide,Information Technology Departmentfor his simulating guidance, continuous
encouragement, and supervision throughout the present work.
 Annexure – I

Part – A Micro-Project Proposal

“Webpage For Online Grocery Ordering System Using JavaScript”

1.Aim/Benefits:
Aim: Webpage For Online Grocery Ordering System Using JavaScript

Benefits:

 Groceries from the comfort of your own home.

 Less time wasted walking up and down aisles.
 Keep track of how much you’re spending.
 You Can Provide Fresh Groceries to Your Consumers.
 You can Get the Payments Online.
 Improved Marketing Opportunities.

2.Course Outcomes Addressed:

a) Create interactive web pages using program flow control structure.

b) Create event based web forms using Java script.
c) Implement Arrays and functions in Java script.

3.Proposed Methodology:

First of all we have to select a topic which is Webpage for Online Grocery
ordering system using JavaScript. The teacher assigned one set of Micro
Project and ask the student to create a report of Survey on Webpage For Online
Grocery Ordering system using JavaScript. We collected information about the
topic using sources such internet and books then we asked the subject teacher
about Different Online Shopping websites which we have a micro project and
then we type the required part-A and done proper page set up and submitted to
subject teacher.
The implementation of the collected information in program had
implanted.After the setup of part- A we prepare a document of Webpage For
Online Grocery Ordering System Using JavaScript. After finishing all the
typing we arrange all the data in proper arrangement. We selected proper
margin font, lay out, A4 size etc. at last we got the printouts of the micro-
project and submitted to subject teacher
4. Action Plan:

Sr.No Details of activity Planned Planned Name of

starts finish responsibl e
date date Team
members
1 Collection of information 22/08/2022 18/09/2022 Gayrav Kate

2 Analysis of information 19/09/2022 16/10/2022 Priyanka Davhare

3 Representation of information 17/10/2022 21/11/2022 Pranav Jadhav

4 Preparation of report 22/11/2022 12/12/2022 Tejas Shitole

5 Completion of assigned task 13/12/2022 24/12/2022 All Team

Member

5. Resources Required:

Sr. Name of Specifications Qty Remarks

No. Resource/material
1. Computer system 2 GB ram I5 core 1

2. MS word - - -

3. Reference book- Author- McPeak, Jeremy and 1 -

Beginning JavaScript Wilton, Paul Wily India

4. Printer HP inkjet 1
6. Names of Team Members with Roll Nos.:

Sr. Names of Group Members Roll No Enrollment No

No.
1 Davhare Priyanka Kailas 22IF308 2010510353

2 Kate Gaurav Suresh 22IF325 2010510373

3 Shitole Tejas Uttam 22IF343 2010510392

4 Jadhav Pranav Appa 22IF364 2110510548

.
**********
 Annexure – II
Part – B
Micro-Project Report
“Webpage For Online Grocery Ordering System Using JavaScript”

1.0/Rationale:

We build this simple webpage for grocery ordering system,This is web-

based application that provides an online platform for the Grocery Store/Shop's
customers or possible customers to order their desired product. The main
purpose of this simple project is to let the customers buy their groceries
without going to the shop or store. The system will list all products with
available stocks and the customer can save their desired product to their
shopping cart and checkout when they are done. The system is easy to use and
has a simple user-interface

2.0 /Aims/Benefits:

 Aims: Webpage For Online Grocery Ordering System Using JavaScript

 Benefits:

a) Groceries from the comfort of your own home.

b) Less time wasted walking up and down aisles.
c) Keep track of how much you’re spending.
d) You Can Provide Fresh Groceries to Your Consumers.
e) You can Get the Payments Online.
f) Improved Marketing Opportunities.

3.0 /Course Outcomes Addressed:

a) Create interactive web pages using program flow control structure.
b) Create event based web forms using Java script.
c) Implement Array and functions in Java script.
4.0/Literature Review:

Book Name Author Name Publication Name

JavaScript Keogh, Jim McGraw-Hill, 2015, New Delhi
Demystified ISBN:0-07-
060347-2
Beginning Wilton, paul Wily India, New Delhi, 2015,
JavaScript ISBN:0-
7645-5587-1
JavaScript in Moncur, Michael Techmedia, New Delhi, 2015,
24 hours ISBN:978-0- 672-33608-9
(SAMS teach
yourself)

5.0 /Actual Methodology Followed:

 The topic of micro-project on “Webpage For Online Grocery Ordering

System Using JavaScript” was decided under the guidance of Mr. Y. U.
Bodhe.
 The researched-on needs of program and information related to the
micro- project was done by using internet and books.
 The reference from other professional software’s used in different
programming which are available on internet are also used.
 The working, structure and user-friendly interface were designed.
 After the research of one week. The implementation of the collected
information in program had implanted.
 The creating of program for grocery ordering system using JavaScript
is done.
 After testing, the finalization of the project and the report on Build a
Online Grocery Ordering System Using JavaScript
6.0/Actual Resources Used:

Sr. Name Of Specifications Qty Remarks

No. Resources

1 Computer Windows 11 OS i5 1 -
system processor
2 Operating Windows 10 pro 1 -
system
3 Printer HP inkjet 1 -

4 Software Notepad, Microsoft 1 -

word 2019
5 Browser Firefox 1 -

7.0 /Learning outcome:

 How to create interactive web pages using JavaScript.

 How to implement function.
 How to do event handling and as well as to use regular expressions.
 To develop event-based web forms using JavaScript.

8.0 /Applications of this Micro-Project:

.
 It’s used in organization
 It’s used in marketplace etc.
 you can list down the things to be done
 you can easy Order your grocery
 9.0/Source code:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Micro-Project</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/5.15.3/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header section starts -->
<header>
<div class="header-1">
<a href="#" class="logo">Groco The Grocery Store</a>
</div>
<div class="header-2">
<div id="menu-bar"></div>
<nav class="navbar">
<a href="#home">home</a>
<a href="#category">category</a>
<a href="#product">product</a>
<a <button onclick="s11()"class="btn">Cart</button></a>
</nav>

</div>
</header>
<!-- header section ends -->
<!-- home section starts -->
<section class="home" id="home">
<div class="image">
<img src="images/home5.jpg" alt="">
</div>
<div class="content">
<span>fresh and organic</span>
<h3>your daily need products</h3>
</div>
</section>
<!-- home section ends -->
<!-- banner section starts -->
<section class="banner-container">
<div class="banner">
<img src="images/banner-1.jpg" alt="">
<div class="content">
<h3>special offer</h3>
<p>upto 45% off</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="banner">
<img src="images/banner-2.jpg" alt="">
<div class="content">
<h3>limited offer</h3>
<p>upto 50% off</p>
<a href="#" class="btn">check out</a>

</div>
</div>
</section>
<!-- banner section ends -->
<!-- category section starts -->
<section class="category" id="category">
<h1 class="heading">shop by <span>category</span></h1>
<div class="box-container">
<div class="box">
<h3>vegetables</h3>
<p>upto 50% off</p>
<img src="images/category-1.jpg" alt="">
<a href="#" class="btn">shop now</a>
</div>
<div class="box">
<h3>juice</h3>
<p>upto 44% off</p>
<img src="images/juice.jpg" alt="">
<a href="#" class="btn">shop now</a>
</div>
<div class="box">
<h3>meat</h3>
<p>upto 35% off</p>
<img src="images/meat.jpg" alt="">
<a href="#" class="btn">shop now</a>
</div>
<div class="box">
<h3>fruits</h3>
<p>upto 12% off</p>
<img src="images/fruits.jpg" alt="">
<a href="#" class="btn">shop now</a>
</div>

</div>
</section>
<!-- category section ends -->
<!-- product section starts -->
<section class="product" id="product">
<h1 class="heading">latest <span>products</span></h1>
<div class="box-container">
<div class="box">
<span class="discount">-33%</span>
<img src="images/banana.jpg" alt="">
<h3 id="banana_n">organic banana</h3>
<div class="price">₹<b id="banana_p">40</b> <span> ₹55 </span> </div>
<div class="quantity">
<span>quantity : </span>
<input type="number" id="banana_q" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<button onclick="show('banana_q','banana_n','banana_p')" class="btn">Buy</button>
<label class="container1">
<b><input type="Checkbox" id="ch1" value="organic Banana"class="checkbox"><h7 class="ch88">Add To
Cart</h7></b></label>

</div>
<div class="box">
<span class="discount">-45%</span>
<img src="images/tomato.jpg" alt="">
<h3 id=tomato_n>organic tomato</h3>
<div class="price">₹<b id="tomato_p">28</b> <span> ₹35 </span> </div>
<div class="quantity">
<span>quantity : </span>
<input type="number" id="tomato_q" min="1" max="1000" value="1">
<span> /kg </span>
</div>

<button onclick="show('tomato_q','tomato_n','tomato_p')" class="btn">Buy</button>

<label class="container1">
<b><input type="Checkbox" id="ch2" value="organic Tomato"class="checkbox"><h7 class="ch88">Add To
Cart</h7></b>
</div>

<div class="box">
<span class="discount">-52%</span>
<img src="images/orange.jpg" alt="">
<h3 id=orange_n>organic orange</h3>
<div class="price">₹<b id="orange_p">73</b> <span> ₹80 </span> </div>
<div class="quantity">
<span>quantity : </span>
<input id="orange_q" type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<button onclick="show('orange_q','orange_n','orange_p')"class="btn">Buy</button>
<label class="container1">
<input type="Checkbox" id="ch3" value="organic Orange"class="checkbox"><h7 class="ch88">Add To
Cart</h7>

</div>
<div class="box">
<span class="discount">-13%</span>
<img src="images/milk.jpg" alt="">
<h3 id=milk_n>natural milk</h3>
<div class="price">₹<b id="milk_p">45</b> <span> ₹60 </span> </div>
<div class="quantity">
<span>quantity : </span>
<input id="milk_q" type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<button onclick="show('milk_q','milk_n','milk_p')" class="btn">Buy</button>
<label class="container1">
<input type="Checkbox" id="ch4" value=" Natural Milk"class="checkbox"><h7 class="ch88">Add To Cart</h7>
</div>
<div class="box">
<span class="discount">-20%</span>
<img src="images/grapes.jpg" alt="">
<h3 id=grapes_n>organic grapes</h3>
<div class="price">₹<b id="grapes_p">115</b> <span> ₹120 </span> </div>
<div class="quantity">
<span>quantity : </span>

<input id="grapes_q" type="number" min="1" max="1000" value="1">

<span> /kg </span>
</div>
<button onclick="show('grapes_q','grapes_n','grapes_p')" class="btn">Buy</button>
<label class="container1">
<input type="Checkbox" id="ch5" value="organic Grapes"class="checkbox"><h7 class="ch88">Add To
Cart</h7>
</div>
<div class="box">
<span class="discount">-29%</span>
<img src="images/almonds.jpg" alt="">
<h3 id=almonts_n>natural almonds</h3>
<div class="price">₹<b id="almonts_p">270</b> <span> ₹300 </span> </div>
<div class="quantity">
<span>quantity : </span>
<input id="almonts_q" type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<button onclick="show('almonts_q','almonts_n','almonts_p')" class="btn">Buy</button>
<label class="container1">
<input type="Checkbox" id="ch6" value="Natural Almonds"class="checkbox"><h7 class="ch88">Add To
Cart</h7>
</div>
<div class="box">
<span class="discount">-55%</span>
<img src="images/apple.jpg" alt="">
<h3 id=apple_n>organic apple</h3>
<div class="price">₹<b id="apple_p">465</b> <span> ₹500 </span> </div>
<div class="quantity">
<span>quantity : </span>
<input id="apple_q" type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<button onclick="show('apple_q','apple_n','apple_p')" class="btn">Buy</button>
<label class="container1">
<input type="Checkbox" id="ch7" value="organic Apple"class="checkbox"><h7 class="ch88">Add To Cart</h7>
</div>
<div class="box">
<span class="discount">-30%</span>
<img src="images/butter.jpg" alt="">

<h3 id=butter_n>natural butter</h3>

<div class="price">₹<b id="butter_p">335</b> <span> ₹400 </span> </div>
<div class="quantity">
<span>quantity : </span>
<input id="butter_q" type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<button onclick="show('butter_q','butter_n','butter_p')"class="btn">Buy</button>
<label class="container1">
<input type="Checkbox" id="ch8"Name="c" value="Natural Butter" class="checkbox"><h7 class="ch88">Add To
Cart</h7>
</div>
<div class="box">
<span class="discount">-40%</span>
<img src="images/carrot.jpg" alt="">
<h3 id=carrot_n>organic carrot</h3>
<div class="price">₹<b id="carrot_p">45</b> <span> ₹50 </span> </div>
<div class="quantity">
<span>quantity : </span>
<input id="carrot_q" type="number" min="1" max="1000" value="1">
<span> /kg </span>
</div>
<button onclick="show('carrot_q','carrot_n','carrot_p')"class="btn">Buy</button>
<label class="container1">
<input type="Checkbox" id="ch9" name="c" value="organic Carrot" class="checkbox"><h7 class="ch88">Add
To Cart</h7>
</div>
</div>
</section>

<section class="footer">
<h1 class="credit"> created by <span> Group No. 2 </span> | Guided by Yogesh Bodhe Sir!
</h1>

</section>
<!-- footer section ends -->
<script language="javascript" type="text/javascript">
function s11()
{ let b=new Array();
// price
b[1]=document.getElementById("carrot_p");
b[2]=document.getElementById("butter_p");
b[3]=document.getElementById("apple_p");
b[4]=document.getElementById("almonts_p");
b[5]=document.getElementById("grapes_p");
b[6]=document.getElementById("milk_p");
b[7]=document.getElementById("orange_p");
b[8]=document.getElementById("tomato_p");
b[9]=document.getElementById("banana_p");
 // quantity
let c=new Array();
c[1]=document.getElementById("carrot_q");
c[2]=document.getElementById("butter_q");
c[3]=document.getElementById("apple_q");
c[4]=document.getElementById("almonts_q");
c[5]=document.getElementById("grapes_q");
c[6]=document.getElementById("milk_q");
c[7]=document.getElementById("orange_q");
c[8]=document.getElementById("tomato_q");
c[9]=document.getElementById("banana_q");
var totalprice=0;
var mystring=new String("Cart Added product=");
let a=new Array();
//name
a[1]=document.getElementById("ch9");
a[2]=document.getElementById("ch8");
a[3]=document.getElementById("ch7");
a[4]=document.getElementById("ch6");
a[5]=document.getElementById("ch5");
a[6]=document.getElementById("ch4");
a[7]=document.getElementById("ch3");
a[8]=document.getElementById("ch2");
a[9]=document.getElementById("ch1");
for(let i=1;i<10;i++)
{
if(a[i].checked)
{
let d=b[i].innerHTML;
var e=c[i].value;
let f=d*e;
totalprice=totalprice+f;

mystring=mystring+" ."+a[i].value+" , Quantity= "+e+", price= "+f+" ;";

}
}
alert(mystring+" Total price ="+totalprice);
}
function show(Q,N,P) {
var q = document.getElementById(Q).value;
var n = document.getElementById(N).innerHTML;
var p = document.getElementById(P).innerHTML;
alert("Your order has been successfully received of "+q+" Kgs of "+n+ " Your total "+q*p);
}
</script>
<!-- custom js file link -->

</body>
</html>

Output:
10.0 Conclusion:

In this micro-project we have learnt about javascript,Css and its simplicity,ease to

make web frontend.This project made a place in my very starting interest of the
website development.Our project is only a humble venire to satisfy the needs to manage
their project work.

**********