Annexure – I

Micro-Project Proposal

Pattern Math Tools

1.0 Aims/Benefits of the Micro-Project

The aim of the micro-project is to provide students or participants with a focused, hands-
on learning experience that enhances their understanding of key concepts through
practical application. By engaging in a small-scale, manageable project, individuals can
develop critical thinking, problem-solving, and collaborative skills while working on real-
world issues or tasks.

2.0 Course Outcomes Addressed

1. Create interactive web pages using program flow control Achieved
structure.
2. Implement array and functions in java script. Achieved
3. Create event based web forms using java script. Achieved
4. Use java script for handling cookies. Not Achieved
5, Create interactive web page using regular expression for Not Achieved
validations.
6. Create menu and navigations in web page. Not Achieved

3.0 Project Methodology

1. To discuss this topic with respective subject teacher.
2. Study about the web forms, regular expressions, menus, and their Working.
3. Gathering Information and checking previously made web-forms on internet
4. Develop a Java-Script program using the above material.
5. Testing the performance of program and implementing it.
6. Prepare project report and presentation.
7. Present the micro project and submit the report.

4.0 Action Plan

Planned
Sr. Planned Name of Responsible
Details of activity Finish
No. Start Date Team Member
Date
Information Gathering and Topic 18/7/24 7/8/24 Om Patil
1
Finalization
Preparing Project Proposal and 8/8/24 21/8/24 Om Patil
2
Approval
22/8/24 26/9/24 Om Patil
3 Implementing Project
27/9/24 4/10/24 Om Patil
4 Preparing Project Report
7/10/24 24/10/24 Om Patil
5 Presenting Project
25/10/24 8/11/24 Om Patil
6 Submission of Project and Report

MET’s Institute of Technology, Polytechnic, Nashik 1

5.0 Resource Required

Sr.
Name of Resource/Material Specifications Qty. Remarks
No.
1 Computer System Windows 10, i5 processor 01 -

2 Editor VS Code 01 -

3 Browser Chrome 01 -

Name of Member with Roll No and Enrollment No.

Roll Enrollment Name of Member

No No
73 23611470241 Om Sharad Patil

Approved by

(Prof. S. P. Kholambe)
Name and Signature of Staff

MET’s Institute of Technology, Polytechnic, Nashik 2

 Annexure – II
Micro-Project Report

Pattern Math Tools

1.0 Rationale
The rationale for the micro-project is to provide a focused, hands-on learning experience
that helps bridge the gap between theoretical knowledge and real-world application. By
engaging participants in a small-scale, manageable project, it offers an opportunity to
deepen understanding and enhance skills in critical areas such as problem-solving,
research, and project management. The micro-project encourages independent learning
and creativity, while also promoting collaboration and effective communication.
Additionally, it allows individuals to apply concepts in a practical context, reinforcing their
academic learning and fostering personal growth. This approach not only improves
technical skills but also cultivates essential competencies such as time management,
adaptability, and reflective thinking, all of which are crucial for success in both academic
and professional environments.

2.0 Aims/Benefits of the Micro-Project

The aim of the micro-project is to provide students or participants with a focused, hands-
on learning experience that enhances their understanding of key concepts through
practical application.
3.0 Course Outcomes Addressed
1. Create interactive web pages using program flow control Achieved
structure.
2. Implement array and functions in java script. Achieved
3. Create event based web forms using java script. Achieved
4. Use java script for handling cookies. Not Achieved
5, Create interactive web page using regular expression for Not Achieved
validations.
6. Create menu and navigations in web page. Not Achieved

4.0 Literature Review

What is forms in HTML?

 An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc
 An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc
 The HTML form tag is required when you want to collect information that visitors
provide. For example, you may want to collect specific data from visitors, such as
name, email address, and password. The HTML <form> tag is used to create a form.

MET’s Institute of Technology, Polytechnic, Nashik 3

 What is regular expression in Javascript?

 A regular expression is a sequence of characters that forms a search pattern. When

you search for data in a text, you can use this search pattern to describe what you are
searching for. A regular expression can be a single character, or a more complicated
pattern.
 A regular expression (shortened as regex or regexp; sometimes referred to as rational
expression) is a sequence of characters that specifies a match pattern in text. Usually
such patterns are used by string-searching algorithms for "find" or "find and replace"
operations on strings, or for input validation.
 A regular expression is a sequence of characters that forms a search pattern. The
search pattern can be used for text search and text to replace operations. A regular
expression can be a single character or a more complicated pattern. Regular
expressions can be used to perform all types of text search and text replacement
operations.

What is Menu?

 In JavaScript, menus typically refer to user interface elements that provide a list of
options for the user to choose from. These menus can come in various forms, such as
dropdown menus, context menus, and navigation menus. JavaScript is commonly used
to create and manipulate menus in web applications.

What is Functions in javascript?

 A function in JavaScript is similar to a procedure—a set of statements that performs

a task or calculates a value, but for a procedure to qualify as a function, it should
take some input and return an output where there is some obvious relationship
between the input and the output.
 A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses (). Function names can contain letters, digits, underscores,
and dollar signs (same rules as variables). The parentheses may include parameter
names separated by commas: (parameter1, parameter2, ...)

Advantages of Javascript:

 Regardless of where you host JavaScript, it always gets executed on the

client environment to save lots of bandwidth and make the execution
process fast.
 In JavaScript, XMLHttpRequest is an important object that was designed by Microsoft.
The object calls made by XMLHttpRequest as an asynchronous HTTP request to the
server to transfer the data to both sides without reloading the page

MET’s Institute of Technology, Polytechnic, Nashik 4

  The biggest advantage of JavaScript having the ability to support all modern browsers
and produce an equivalent result.
 Global companies support community development by creating projects that are
important. An example is Google (created the Angular framework) or Facebook
(created the React.js framework).
 JavaScript is employed everywhere on the web.
 JavaScript plays nicely with other languages and may be utilized in an enormous sort
of applications.
 There are many open-source projects that provide useful help for developers to
add JavaScript.
 There are many available courses within the field of JavaScript, because of which you’ll
quickly and simply expand your knowledge of this programming language.
 It is not difficult to start working in JavaScript. For this reason, many of us prefer to
start our adventure in the IT sector by learning this language.
 It gives the power to make rich interfaces.
 There are some ways to use JavaScript through Node.js servers. It is possible to develop
a whole JavaScript app from front to back using only JavaScript

5.0 Actual Methodology Followed

Planned
Sr. Planned Name of Responsible
Details of activity Finish
No. Start Date Team Member
Date
Information Gathering and Topic 18/7/24 7/8/24 Om Patil
1
Finalization
Preparing Project Proposal and 8/8/24 21/8/24 Om Patil
2
Approval
22/8/24 26/9/24 Om Patil
3 Implementing Project
27/9/24 4/10/24 Om Patil
4 Preparing Project Report

5 Presenting Project 7/10/24 24/10/24 Om Patil

25/10/24 8/11/24 Om Patil

6 Submission of Project and Report

6.0 Actual Resources Used

Sr.
Name of Resource/Material Specifications Qty. Remarks
No.
1 Computer System Windows 10, i5 processor 01 -

2 Editor VS Code 01 -

3 Browser Chrome 01 -

MET’s Institute of Technology, Polytechnic, Nashik 5

7.0 Output of the Micro-Project
The output of the micro-project on Pattern Math Tools will include a comprehensive analysis of
mathematical patterns through the use of sequences, geometric transformations, and algebraic
functions. It will also showcase practical applications, such as pattern recognition in real-world
problems or data sets.

8.0 Skill Developed/Learning outcomes of this Micro-Project

1) I learnt how to create interactive webpage.
2) I understood how to use functions in javascript.
3) I got to know about how to generate events in web form..
4) I learnt how to validate form using regular expression in javascript.

9.0 Application of this Micro-Project

1) Education
2) Data Science and Analysis
3) Engineering and Design
4) Cryptography and Security
5) Data Entry Support
6) Computer Science
7) Art and Architecture

MET’s Institute of Technology, Polytechnic, Nashik 6

 Annexure - IV
Micro-Project Evaluation Sheet
Name of Student: Om Sharad Patil EnrollmentNo: 23611470241
Name of Programme: Computer Engineering Semester: Fifth
Course Title: Client Side Scripting Code: 22519
Title of the Micro-Project: Pattern Math Tools
Course Outcomes Achieved:-
1. Create interactive web pages using program flow control structure. Achieved
2. Implement array and functions in java script. Achieved
3. Create event based web forms using java script. Achieved
4. Use java script for handling cookies. Not Achieved
5, Create interactive web page using regular expression for validations. Not Achieved
6. Create menu and navigations in web page. Not Achieved

Sr. Characteristics to be Poor Average Good Excellent Sub-

No. assessed (Marks 1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10) Total
(A) Process and Product Assessment (Convert above total marks out of 6 Marks)
1 Relevance to the course
Literature Review/
2
Information Collection
Completion of the Target
3
as per Project Proposal
Analysis of Data and
4
Representation
Quality of
5
Prototype/Model
6 Report Preparation
(B) Individual Presentation/Viva (Convert above total marks out of 4 Marks)
7 Presentation
8 Viva

(A) Process and Product Assessment (B) Individual Presentation/Viva Total Marks
(6 Marks) (4 Marks) (10 Marks)

Comments/Suggestions about team work/leadership/inter-personal communication (if any)

Name and Designation of the Teacher: Prof. S. P. Kholambe

Dated Signature:

MET’s Institute of Technology, Polytechnic, Nashik 7

 Program Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pattern Math Tools</title>
<style>
canvas {
border: 1px solid black;
margin-top: 20px;
}
.container {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
</style>
</head>
<body>

<h1>Pattern Math Tools: Arithmetic and Geometric Sequences</h1>

<div class="container">
<div>
<h2>Arithmetic Sequence</h2>
<canvas id="arithmeticCanvas" width="500" height="300"></canvas>
</div>
<div>
<h2>Geometric Sequence</h2>
<canvas id="geometricCanvas" width="500" height="300"></canvas>
</div>
</div>

<script>
// Function to generate an Arithmetic Sequence
function generateArithmeticSequence(a1, d, n) {
let sequence = [];
for (let i = 0; i < n; i++) {
sequence.push(a1 + (i * d));
}
return sequence;
}

// Function to generate a Geometric Sequence

function generateGeometricSequence(a1, r, n) {
let sequence = [];
for (let i = 0; i < n; i++) {
sequence.push(a1 * Math.pow(r, i));
}
return sequence;

MET’s Institute of Technology, Polytechnic, Nashik 8

}

// Function to plot Arithmetic Sequence

function plotArithmeticSequence() {
const a1 = 2; // First term
const d = 3; // Common difference
const n = 10; // Number of terms
const arithmeticSeq = generateArithmeticSequence(a1, d, n);
const canvas = document.getElementById("arithmeticCanvas");
const ctx = canvas.getContext("2d");

// Clear the canvas

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Set up axis
ctx.beginPath();
ctx.moveTo(40, 250);
ctx.lineTo(480, 250); // x-axis
ctx.moveTo(40, 250);
ctx.lineTo(40, 40); // y-axis
ctx.stroke();

// Plot points for the arithmetic sequence

ctx.fillStyle = "blue";
for (let i = 0; i < arithmeticSeq.length; i++) {
ctx.beginPath();
ctx.arc(50 + i * 40, 250 - arithmeticSeq[i], 5, 0, 2 * Math.PI); // Adjust to fit in canvas
ctx.fill();
}

// Display sequence on the canvas

ctx.font = "16px Arial";
ctx.fillStyle = "black";
ctx.fillText("Arithmetic Sequence", 180, 30);
}

// Function to plot Geometric Sequence

function plotGeometricSequence() {
const a1 = 3; // First term
const r = 2; // Common ratio
const n = 10; // Number of terms
const geometricSeq = generateGeometricSequence(a1, r, n);
const canvas = document.getElementById("geometricCanvas");
const ctx = canvas.getContext("2d");

// Clear the canvas

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Set up axis
ctx.beginPath();

MET’s Institute of Technology, Polytechnic, Nashik 9

 ctx.moveTo(40, 250);
ctx.lineTo(480, 250); // x-axis
ctx.moveTo(40, 250);
ctx.lineTo(40, 40); // y-axis
ctx.stroke();

// Plot points for the geometric sequence

ctx.fillStyle = "red";
for (let i = 0; i < geometricSeq.length; i++) {
ctx.beginPath();
ctx.arc(50 + i * 40, 250 - geometricSeq[i] / 10, 5, 0, 2 * Math.PI); // Scale for visibility
ctx.fill();
}

// Display sequence on the canvas

ctx.font = "16px Arial";
ctx.fillStyle = "black";
ctx.fillText("Geometric Sequence", 180, 30);
}

// Run the plotting functions when the page loads

window.onload = function() {
plotArithmeticSequence();
plotGeometricSequence();
};
</script>

</body>
</htm

MET’s Institute of Technology, Polytechnic, Nashik 10

MET’s Institute of Technology, Polytechnic, Nashik 11
MET’s Institute of Technology, Polytechnic, Nashik 12