MICRO PROJECT

Academic year

2024-25

Interactive Drawing Canvas

Program: Computer Engineering Program code: CO5I

Course: Client-Side Scripting Language Course code: 22519

 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

Certificate

This is to certify that Mr./Ms. Mr. Rohit Vasiya, Mohit Rohra, Harshit DhirRoll No. 22,23,24 of Fifth

Semester of Diploma in Computer Engineering of Institute, VES POLYTECHNIC (Code: 0004) has

completed the Micro Project satisfactorily in Subject – Client-Side Scripting Language (22519) for

the academic year 2024- 2025 as prescribed in the curriculum.

Place: Chembur, Mumbai Enrollment No: 2200040340,41,42

Date: ……………………… Exam Seat No: ………………………….

Subject Teacher Head of the Department Principal

(Mrs. Shubhangi Chintawar)

 INDEX

Academic year: 2024-25 Name of the faculty: Mrs. Shubhangi Chintawar

Program code: CO5I Course & course code: CSS (22519)

Name of the candidate: Rohit Vasiya, Mohit Rohra, Harshit Dhir

Roll No. 31,32,33 Enrollment No. 2200040340,41,42

Sr.No Page No.

Content

1 Project Proposal

2 Action plan

3 Resource required

4 Introduction

5 Actual Procedure

6 Output

7 Skill developed

8 Evaluation sheet
 Annexure – I

Micro-Project Proposal

Interactive Drawing Canvas

1.0 Aim/Benefits of the Micro-Project

The aim of the Interactive painting application is to provide a platform where users can draw
drawings with different shapes and colors. It allows users to express their creativity and explore
various artistic designs. Users can also download their artwork, making the canvas practical for
saving creations.

2.0 Course Outcomes Addressed

1. Create interactive web pages using program flow control structure []
2. Implement Arrays and functions in JavaScript. []
3. Create event-based web forms using JavaScript. []
4. Use JavaScript for handling cookies. []
5. Create interactive webpage using regular expressions for validations. []
6. Create menus and navigations in web page. []

3.0 Proposed Methodology

1. Introduction: Define the purpose of the interactive painting canvas using JS, highlighting its role in
providing a platform for users to create drawings with various shapes and colors. Users can also
download their creations, making it both a creative and practical tool.
2. Requirements: Identify the features like selecting different shapes, colors, adjusting brush sizes,
clearing the canvas, and downloading the artwork.
3. Design: Create a simple system layout, including user interface wireframes with buttons for control
(Clear Canvas, Download, Shape Selection, Color Picker) and an area for the canvas where users can
draw.
4. Development:
 Implement the drawing functionality using JavaScript and the HTML canvas element.
 Write functions for handling shape selection, color changes, brush size adjustments, and
downloading the canvas content.
5. Testing: Test each algorithm for correctness and gather user feedback to improve the interface and
experience.
6. Documentation: We will write a detailed report explaining the code structure and logic.
4.0 Action Plan
SR. Details of activity Planned Planned Name of Responsible
N0. Start date Finish date Team Members

18/7/24 18/7/24
1 Finalization of project Title and All
Scope
8/8/24 8/8/24
2 Project Definition All
8/8/24 8/8/24
3 Design Procedure (Algorithm) All
22/8/24 22/8/24
4 Design Structure (Flowchart) All
22/8/24 22/8/24
5 Coding and Testing All
5/9/24 5/9/24
6 Output All
5/9/24 5/9/24
7 Report writing All
12/9/24 12/9/24
8 Demonstration of project & final All
submission
5.0 Resources Required

Sr.No. Equipment Name with Broad Specification Remark if any

1 Hardware Computer System: Computer (i3-i5 preferable),

RAM minimum 2 GB and onwards

2 Operating System: Windows 7 or Later Version/LINUX version

5.0 or Later Version

3 Software:

Name of Team Members with Roll Nos.

SR.NO Name of Team Members Roll Nos.

1 Rohit Vasiya 22

2 Mohit Rohra 23

3 Harshit Dhir 24
Mrs. Shubhangi Chintawar
Name and Signature of Course Teacher
 Annexure – II

Micro-Project Report

Interactive Drawing Canvas

1.0 Rationale
The Interactive Drawing Canvas microproject focuses on developing core web development skills,
including JavaScript syntax, DOM manipulation, and event handling. This project emphasizes user
interactivity by allowing users to create drawings with various shapes and colors on a dynamic canvas. It
incorporates functionalities such as shape and color selection, brush size adjustment, and the ability to
download artwork. The project enhances user experience through an intuitive interface and real-time
feedback, providing a creative platform while reinforcing JavaScript's interactive capabilities.

2.0 Aim/Benefits of the Micro-Project

The aim of the Interactive Painting Canvas using JS is to provide users with an engaging platform
where they can create drawings with different shapes and colors. Users can freely express their
creativity and customize their artwork. Additionally, the ability to download the canvas artwork
makes the project practical and functional. The project offers a hands-on experience that enhances
understanding of JavaScript-based interactivity and user-centric design.

3.0 Course Outcomes Addressed

1. Create interactive web pages using program flow control structure []
2. Implement Arrays and functions in JavaScript. []
3. Create event-based web forms using JavaScript. []
4. Use JavaScript for handling cookies. []
5. Create interactive webpage using regular expressions for validations. []
6. Create menus and navigations in web page. []
4.0 Literature Review

Introduction
As the use of interactive web applications continues to rise, tools that foster creativity and artistic
expression have become increasingly valuable. The "Interactive Painting Canvas using JS" project aims to
provide users with an engaging platform for drawing using various shapes and colors. This report focuses
on the key concepts and techniques utilized in its development, such as DOM manipulation, canvas drawing
techniques, user interaction, and feedback, along with the application of the HTML5 canvas element.

1. DOM Manipulation
 document.querySelector():
Explanation: This method selects DOM elements based on specified selectors, facilitating access to various
buttons and the canvas for interaction and manipulation.
 element.style:
Explanation: This property is used to dynamically change the styles of elements, such as updating the
background color of the color picker to reflect the selected color, enhancing the user interface.
2. Canvas Drawing Techniques
 CanvasRenderingContext2D Methods:
Methods like fillRect(), strokeRect(), beginPath(), arc(), and stroke() are used for drawing various
shapes on the canvas. These methods control how shapes are rendered, whether filled or outlined.
 ctx.getImageData(),ctx.putImageData():
These methods capture the current state of the canvas, allowing for the implementation of features
like erasing and restoring the canvas to previous states, which enhances the drawing experience.
3. User Interaction and Feedback
 Interactive Tool Selection:
Explanation: The project allows users to select different drawing tools (brush, eraser, shapes) and
colors through intuitive button interfaces. This enhances user engagement and personalization in
the drawing process.
 Slider for Brush Size:
Explanation: The slider enables users to adjust the brush size dynamically, providing a more
customized drawing experience. The real-time adjustment helps users see the effects immediately.

4. Saving and Clearing Functionality

 Canvas.clearRect():
Explanation: This method clears the entire canvas, allowing users to start fresh. It is integral for
providing a clean slate without needing to reload the page.
 Canvas.toDataURL():
Explanation: This method converts the canvas content into a downloadable image format,
facilitating easy saving of user artwork, which adds practical value to the application.
5.0 Actual Procedure Followed.

Design Procedure:

Step1. Initialize page elements and variables, including the canvas, tool buttons, color selectors,
and default settings for drawing tools and colors.
Step2. Set the canvas dimensions based on the viewport size to ensure it fits well within the UI.
Step3. Create a function to set the canvas background to white, ensuring that the background is
consistent when saving images
Step4. Implement a function to handle the start of the drawing process, capturing the initial
mouse position and preparing the canvas for drawing.
Step5. Create functions for drawing different shapes (rectangle, circle, triangle) based on the
current tool selected.
Step6. Implement the drawing functionality to update the canvas in real-time as the mouse moves
while holding down the mouse button.
Step7. Create an event listener for the tool buttons that allows users to select different drawing
tools and updates the active tool visually.
Step8. Create an event listener for the size slider to adjust the brush size dynamically based on
user input.
Step9. Implement an event listener for color buttons to change the selected color for drawing,
reflecting the change in the UI.
Step10. Set up an event listener for the color picker to allow users to choose a custom color and update
the UI accordingly.
Step11. Create an event listener for the clear canvas button that clears the entire canvas and resets
the background color.
Step12. Implement the save functionality by creating a link element that allows users to
download their artwork as an image file.
Step13. Add an event listener for the mouseup event to finalize the drawing process and stop
updating the canvas.
Design Structure:
 Sorting.js

Coding: let isSorting = false;

let time = 100;
Index.html let bars = [];
<!DOCTYPE html> function generateBars(noBar = 30) {
<html lang="en"> document.getElementById("bar").innerHTML = '';
<head> bars = [];
<link rel="stylesheet" href="css/sorting.css"> for (let i = 0; i < noBar; i++) {
<link rel="stylesheet" href="css/info.css"> bars.push(Math.floor(Math.random() * 400) + 1);
<title>Sorting Visualizer</title> }
</head> renderBars();
<body> }
<h1>Sorting Visualizer By Group 11</h1> function renderBars() {
<div style="text-align: center;"> const divs = document.querySelector('#bar');
<button id="newarr" style="color:linear- divs.innerHTML = '';
gradient(145deg, #4CAF50, for (let x = 0; x < bars.length; x++) {
#388E3C);"><b>Generate New Array</b></button> const temp = document.createElement("div");
</div> temp.classList.add('sort', 'baritem');
<div id="slider-container"> temp.style.height = bars[x] + "px";
<div id="size-box">
<span style="font-size: large; color: rgb(255, const valueDisplay = document.createElement("span");
255, 255);">Size:</span> valueDisplay.textContent = bars[x];
<input id="sizer" type="range" min="2" valueDisplay.classList.add('bar-value');
max="40" step="1" value="35">
</div> temp.appendChild(valueDisplay);
<div id="speed-box"> divs.appendChild(temp);
<span style="font-size: large; color: rgb(255, let arrsizer = document.querySelector('#sizer');
255, 255);">Speed:</span> arrsizer.addEventListener('input', function() {
<input type="range" id="speed" min="0" generateBars(parseInt(arrsizer.value));
max="500" value="100" /> });
</div> generateBars();
</div> let sortspeed = document.querySelector('#speed');
<div style="text-align: center;"> sortspeed.addEventListener('input', function() {
<button id="bubble"><b>Bubble time = 500 - parseInt(sortspeed.value);
Sort</b></button> });
<button id="selection"><b>Selection document.getElementById("newarr").addEventListener("click", function() {
Sort</b></button> generateBars(arrsizer.value);
<button id="insertion"><b>Insertion enableSortingBtn();
Sort</b></button> enableSizeSlider();
<button id="merge"><b>Merge });
Sort</b></button> function swap(ele1, ele2) {
<button id="quick"><b>Quick let temp = ele1.style.height;
Sort</b></button> ele1.style.height = ele2.style.height;
</div> ele2.style.height = temp;
}
<div id="bar"></div> function delay(milisec) {
return new Promise(resolve => {
<div style="text-align: center;"> setTimeout(() => { resolve(''); }, milisec);
<button id="stop-sorting"><b>Stop });
Sorting</b></button> }
</div> function disableSortingBtn() {
document.querySelectorAll(".sort-button").forEach(btn => btn.disabled =
<div id="info-section"> true);
<div id="code-box"></div> }
<div id="image-box"></div> function enableSortingBtn() {
</div> document.querySelectorAll(".sort-button").forEach(btn => btn.disabled =
false);
<script src="scripts/sorting.js"></script> }
<script src="scripts/bubble.js"></script> function disableSizeSlider() {
<script src="scripts/selection.js"></script> document.getElementById("sizer").disabled = true;
<script src="scripts/insertion.js"></script> }
<script src="scripts/merge.js"></script>
<script src="scripts/quick.js"></script> function enableSizeSlider() {
</body> document.getElementById("sizer").disabled = false;
</html> }
 Selection.js
async function selection() {
Bubble.js const ele = document.querySelectorAll('.sort');
const codeContent = `<h2> Selection Sort Algorithm
async function bubble() {
</h2><pre><code>void selectionSort(int arr[], int n) {for (int i = 0; i < n
const ele = document.querySelectorAll(".sort"); - 1; i++) {int minIndex = i;for (int j = i + 1; j < n; j++) {if (arr[j] <
document.getElementById('code-box').innerHTML = arr[minIndex]) {minIndex = j;} }swap(arr[i], arr[minIndex]);}}
`<h2>Bubble Sort </code></pre>`;
Algorithm</h2><pre><code>function bubbleSort(arr) document.getElementById('code-box').innerHTML = codeContent;
{for (var i = 0; i < arr.length; i++) {for (var j = 0; j < const imageBox = document.getElementById('image-box');
(arr.length - i - 1); j++) {if (arr[j] > arr[j + 1]) {var temp imageBox.innerHTML = '<img src="sortingimages/selection.png"
= arr[j];arr[j] = arr[j + 1];arr[j + 1] = style="width:100%; height:auto;">';
temp;}}}}</code></pre>`; isSorting = true;
for (let i = 0; i < ele.length; i++) {
const imageBox =
if (!isSorting) {
document.getElementById('image-box'); enableSortingBtn();
imageBox.innerHTML = '<img enableSizeSlider();
src="sortingimages/Bubble.png" style="width:100%; return;
height:auto;">'; }
isSorting = true; let minIndex = i;
for (let i = 0; i < ele.length - 1; i++) { ele[i].style.background = 'red';
for (let j = 0; j < ele.length - i - 1; j++) { for (let j = i + 1; j < ele.length; j++) {
if (!isSorting) { if (!isSorting) {
enableSortingBtn();
enableSortingBtn();
enableSizeSlider();
enableSizeSlider(); return;
return; }
} ele[j].style.background = 'red';
ele[j].style.background = 'red'; await delay(time);
ele[j + 1].style.background = 'red'; if (parseInt(ele[j].style.height) <
const height1 = parseInt(ele[j].style.height); parseInt(ele[minIndex].style.height)) {
const height2 = parseInt(ele[j + 1].style.height); if (minIndex !== i) ele[minIndex].style.background = 'yellow';
if (height1 > height2) { minIndex = j;
} else ele[j].style.background = 'yellow';
await delay(time);
}
swap(ele[j], ele[j + 1]); await delay(time);
const value1 = ele[j].querySelector('.bar- if (minIndex !== i) {
value'); swap(ele[i], ele[minIndex]);
const value2 = ele[j + 1].querySelector('.bar- updateBarValues(ele[i], ele[minIndex]);
value'); }
const tempValue = value1.textContent; ele[minIndex].style.background = 'yellow';
value1.textContent = value2.textContent; ele[i].style.background = 'green';
value2.textContent = tempValue; }
enableSortingBtn();
}
enableSizeSlider();
ele[j].style.background = 'yellow'; }
ele[j + 1].style.background = 'yellow';
} function swap(el1, el2) {
ele[ele.length - i - 1].style.background = 'green'; const tempHeight = el1.style.height;
} el1.style.height = el2.style.height;
ele[0].style.background = 'green'; el2.style.height = tempHeight;
enableSortingBtn(); }
enableSizeSlider();
function updateBarValues(el1, el2) {
}
const tempValue = el1.querySelector('.bar-value').textContent;
el1.querySelector('.bar-value').textContent = el2.querySelector('.bar-
document.getElementById("bubble").addEventListener value').textContent;
("click", async function() { el2.querySelector('.bar-value').textContent = tempValue;
disableSizeSlider(); }
disableSortingBtn();
await bubble(); document.getElementById("selection").addEventListener('click', async
}); function() {
disableSizeSlider();
disableSortingBtn();
await selection();
});
 Quick.js
async function quick() {
Insertion.js const ele = document.querySelectorAll(".sort");
const values = Array.from(ele).map(bar => parseInt(bar.style.height));
async function insertion () { document.getElementById('code-box').innerHTML = `<h2>Quick Sort
const ele = document.querySelectorAll('.sort'); Algorithm</h2><pre><code>void quickSort(int arr[], int low, int high)
const codeContent = `<h2> Insertion Algorithm {if (low < high) {int p = lomutoPartition(arr, low, high);quickSort(arr,
</h2><pre><code>void insertionSort(int arr[], int n){int i, key, low, p - 1);quickSort(arr, p + 1, high);}}int lomutoPartition(int arr[], int
j;for (i = 1; i < n; i++) {key = arr[i];j = i - 1;while (j >= 0 && low, int high) {int i = low - 1;int pivot = arr[high];for (int j = low; j <
arr[j] > key) {arr[j + 1] = arr[j];j = j - 1;}arr[j + 1] = high; j++) {if (arr[j] < pivot) {i++;swap(arr[i], arr[j]);}}swap(arr[i + 1],
key;}}</code></pre>`; arr[high]);return i + 1;}</code></pre>`;
document.getElementById('code-box').innerHTML = const imageBox = document.getElementById('image-box');
imageBox.innerHTML = '<img src="sortingimages/quick.png"
codeContent; style="width:100%; height:auto;">';
const imageBox = document.getElementById('image-box'); isSorting = true;
imageBox.innerHTML = '<img
src="sortingimages/insertion.png" style="width:100%; async function lomuto(ele, l, h) {
height:auto;">'; let i = l - 1;
isSorting = true; ele[h].style.background = 'red';
ele[0].style.background = 'green'; for (let j = l; j <= h - 1; j++) {
for (let i = 1; i < ele.length; i++) { if (!isSorting) return;
ele[j].style.background = 'brown';
if (!isSorting) { await delay(time);
enableSortingBtn(); if (parseInt(ele[j].style.height) < parseInt(ele[h].style.height)) {
enableSizeSlider(); i++;
return; swap(ele[i], ele[j]);
} [values[i], values[j]] = [values[j], values[i]];
ele[i].style.background = 'red'; ele[i].style.height = values[i] + "px";
let keyHeight = ele[i].style.height; ele[j].style.height = values[j] + "px";
let keyValueDisplay = ele[i].querySelector('.bar- ele[i].innerText = values[i];
ele[j].innerText = values[j];
value').textContent;
ele[i].style.background = 'orange';
let j = i - 1; await delay(time);
while (j >= 0 && (parseInt(keyHeight) < }
parseInt(ele[j].style.height))) { ele[j].style.background = 'yellow';
if (!isSorting) { }
enableSortingBtn(); await delay(time);
enableSizeSlider(); swap(ele[i + 1], ele[h]);
return; [values[i + 1], values[h]] = [values[h], values[i + 1]];
ele[i + 1].style.height = values[i + 1] + "px";
}
ele[h].style.height = values[h] + "px";
ele[j + 1].style.height = ele[j].style.height; ele[i + 1].innerText = values[i + 1];
ele[j + 1].querySelector('.bar-value').textContent = ele[h].innerText = values[h];
ele[j].querySelector('.bar-value').textContent; ele[h].style.background = 'yellow';
ele[j].style.background = 'red'; await delay(time);
j--; return i + 1;
await delay(time); }
for (let k = 0; k <= i; k++) {
async function qsort(ele, l, h) {
ele[k].style.background = 'green';
if (!isSorting) return;
} if (l < h) {
} let p = await lomuto(ele, l, h);
ele[j + 1].style.height = keyHeight; await qsort(ele, l, p - 1);
ele[j + 1].querySelector('.bar-value').textContent = await qsort(ele, p + 1, h);
keyValueDisplay; }
ele[i].style.background = 'green'; }
}
document.getElementById('stop-sorting').addEventListener('click', ()
enableSortingBtn();
=> {
enableSizeSlider(); isSorting = false;
} enableSortingBtn();
enableSizeSlider();
document.getElementById('insertion').addEventListener('click', });
async function() {
disableSizeSlider(); await qsort(ele, 0, ele.length - 1);
disableSortingBtn();
if (isSorting) {
await insertion();
for (let i = 0; i < ele.length; i++) {
}); await delay(time);
ele[i].style.background = 'green';
}
}
enableSortingBtn();
enableSizeSlider();
}
 Sorting.css
/* Body styling */ body { background: linear-gradient(135deg,
Merge.js #0d0d0d, #1a1a1a, #001f3f); background-size: cover; /* Ensures
async function merge(ele, low, mid, high) { the image covers the entire area */ background-position: center;
const n1 = mid - low + 1, n2 = high - mid; /* Centers the background image */ font-family: 'Poppins', sans-
let left = new Array(n1), right = new Array(n2); serif; color: #333; margin: 20px; padding: 20px; overflow-x:
for (let i = 0; i < n1; i++) { hidden; } /* Button styling */ button { border: 2px solid #ffffff;
await delay(time); font-size: 17px; border-radius: 16px; cursor: pointer; padding:
ele[low + i].style.background = 'yellow'; 10px 15px; background: linear-gradient(135deg, #d310da 0%,
left[i] = parseInt(ele[low + i].style.height); #0decf0 100%); color: #333; transition: background-color 0.3s
} ease, box-shadow 0.3s ease; } button:hover { background-color:
for (let j = 0; j < n2; j++) { #32CD32; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
await delay(time); animation: pulse 1s infinite; /* Added pulse animation */ } /*
ele[mid + 1 + j].style.background = 'red'; Sorting box styling */ #sorting-container { background: linear-
right[j] = parseInt(ele[mid + 1 + j].style.height); gradient(135deg, #d310da 0%, #0decf0 100%); border: 2px solid
} #00FFFF; border-radius: 20px; padding: 30px; margin: 40px
let i = 0, j = 0, k = low; auto; width: 80%; text-align: center; box-shadow: 0px 6px 12px
while (i < n1 && j < n2) { rgba(0, 0, 0, 0.4); } /* Button styles for sorting algorithms */
await delay(time); #bubble, #selection, #insertion, #merge, #quick { margin-right:
if (left[i] <= right[j]) { 20px; padding: 10px 12px; border: 5px solid #ffffff; /* Border
ele[k].style.height = left[i] + "px"; color */ border-radius: 10px; background: #000000; /* Black
ele[k].style.background = 'lightgreen'; background */ color: #ffffff; /* White text color */ font-weight:
ele[k].querySelector('.bar-value').textContent = left[i]; bold; /* Make the text bold */ font-size: 16px; /* Slightly larger
i++; font size */ text-transform: uppercase; /* Uppercase text for
} else { emphasis */ transition: transform 0.3s ease, box-shadow 0.3s
ele[k].style.height = right[j] + "px"; ease, background-color 0.3s ease, border-color 0.3s ease; box-
ele[k].style.background = 'lightgreen'; shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for
ele[k].querySelector('.bar-value').textContent = right[j]; depth */ } #bubble:hover, #selection:hover, #insertion:hover,
j++; #merge:hover, #quick:hover { transform: scale(1.1); /* Scale up
} on hover */ box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5); /*
k++; Stronger shadow on hover */ background-color: #ffffff; /* White
} background on hover */ color: #000000; /* Black text on hover
while (i < n1) { */ border-color: #ffffff; /* White border on hover */ } /* Styling
await delay(time); for the 'New array' button */ #newarr { border: 5px solid
ele[k].style.height = left[i] + "px"; #32CD32; /* Changed border color to green */ font-size: 17px;
ele[k].style.background = 'lightgreen'; border-radius: 16px; cursor: pointer; padding: 10px 15px;
ele[k].querySelector('.bar-value').textContent = left[i]; background: #000000; /* Changed background to black */ color:
i++; #32CD32; /* Set text color to green */ transition: background-
k++; color 0.3s ease, box-shadow 0.3s ease; margin-right: 20px; /*
} Adds spacing between button and inputs */ } #newarr:hover {
while (j < n2) { color: #FFFFFF; /* Changed text color to white on hover */
await delay(time); background: linear-gradient(145deg, #4CAF50, #388E3C); /*
ele[k].style.height = right[j] + "px"; Changed hover background color to a stylish green */ box-
ele[k].style.background = 'lightgreen'; shadow: 0px 8px 16px rgba(0, 255, 89, 0.5); /* Increased box
ele[k].querySelector('.bar-value').textContent = right[j]; shadow size and opacity */ transform: scale(1.05); /* Added a
j++; subtle scale effect on hover */ } /* Styling for the input range
k++;} sliders (Size and Speed) */ #slider-container { display: flex;
for (let x = low; x <= high; x++) { justify-content: center; gap: 20px; margin: 20px 0; } /* White
await delay(time); box styling for sliders */ #size-box, #speed-box { font-weight:
ele[x].style.background = 'green'; bold; border: 5px solid #ffffff; border-radius: 16px; padding:
} 10px 15px; background: #000000; display: flex; align-items:
} center; transition: background-color 0.3s ease, box-shadow 0.3s
async function mergeSort(ele, l, r) { ease; } /* Slider styling */ input[type="range"] { -webkit-
if (l >= r) return; appearance: none; /* Hides default slider appearance */ width:
const m = l + Math.floor((r - l) / 2); 150px; height: 10px; background: linear-gradient(135deg,
await mergeSort(ele, l, m); #e0e0e0, #ffffff); border-radius: 10px; outline: none; margin-
await mergeSort(ele, m + 1, r); left: 10px; margin-right: 20px; /* Adds spacing between the
await merge(ele, l, m, r); sliders */ transition: transform 0.3s ease, box-shadow 0.3s ease;
} document.getElementById('merge').addEventListener('click', async box-shadow: 0px 8px"range"];
function() { /* Bar styling */ #bar { color: #FF69B4; display: flex; justify-
let ele = document.querySelectorAll('.sort'), l = 0, r = ele.length - 1; content: center; align-items: flex-end; height: 400px; padding:
('image-box'); 20px 30px 0 10px; background-color: #1a1a1a; /* Darker
imageBox.innerHTML = '<img src="sortingimages/merge.png" background for contrast */ border: 5px solid #ffffff; /* Lighter
style="width:100%; height:auto;">'; cyan for a fresher look */ border-radius: 20px; box-shadow: 0px
isSorting = true; 6px 20px rgba(0, 0, 0, 0.3); /* Softer shadow */ }
disableSortingBtn(); .baritem:hover box-shadow: 0px 0px 25px rgba(255, 255, 255,
await mergeSort(ele, l, r); 0.8); /* Brighter hover shadow */ transform: scale(1.05); /*
enableSortingBtn(); Slightly enlarges on hover */
enableSizeSlider();}} }
});
 Info.css
/* Button styling */
/* Styling for the information section */
button {
#info-section {
border: 2px solid #ffffff;
display: flex;
font-size: 17px;
justify-content: space-around;
border-radius: 16px;
margin: 20px auto;
cursor: pointer;
padding: 25px;
padding: 10px 15px;
width: 90%;
background: linear-gradient(135deg, #d310da 0%, #0decf0
background-color: #e9f5ff; /* Light sky blue background */
100%);
border: 1px solid #b3daff; /* Soft blue border */
color: #333;
border-radius: 12px;
transition: background-color 0.3s ease, box-shadow 0.3s
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
ease;}
transition: background-color 0.3s ease, box-shadow 0.3s
.baritem { background: linear-gradient(135deg, #00bcd4,
ease;
#1E90FF); /* Brighter gradient for an attractive look */ border:
flex-wrap: wrap; /* Allow wrapping on smaller screens */
2px solid rgba(255, 255, 255, 0.5); /* Semi-transparent white
}
for a softer edge */ width: 4%; /* Adjusted width for less
broad appearance */ margin: 0 2px; /* Reduced margin for
#info-section:hover {
tighter spacing */ border-radius: 8px; transition: box-shadow
background-color: #d0ebff;
0.3s ease, transform 0.3s ease; /* Added transform for scaling
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
*/ min-height: 30px; /* Set a minimum height for better
}
visibility */ } .baritem:hover { box-shadow: 0px 0px 25px
rgba(255, 255, 255, 0.8); /* Brighter hover shadow */
/* Box for displaying the code */
transform: scale(1.05); /* Slightly enlarges on hover */ } /*
#code-box, #image-box {
Link styling */ a { text-decoration: none; color: #00FFFF;
width: 45%;
transition: color 0.3s ease, box-shadow 0.3s ease; } a:hover {
padding: 20px;
color: #32CD32; text-decoration: underline; box-shadow: 0px
background-color: #f0faff; /* Lighter blue background */
4px 8px rgba(0, 0, 0, 0.3); } /* Button hover animation */
border: 1px solid #7fcaff; /* Brighter blue border */
button:hover { animation: pulse 1s infinite; } @keyframes
border-radius: 8px;
pulse { 0% { transform: scale(1); } 50% { transform:
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
scale(1.05); } 100% { transform: scale(1); } } /* Adjust
transition: transform 0.2s ease, box-shadow 0.2s ease;
margins and padding */ h1 { margin-top: 40px; } #sorting-
margin: 10px 0; /* Space between items */
container, #bar { margin: 40px auto; } h1, #bar { color:
}
#00FFFF; text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
} #bar { font-size: 18px; color: #FF69B4; } button, a { box-
#code-box:hover, #image-box:hover {
shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); } button:hover,
transform: translateY(-5px);
a:hover { box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5); } /*
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
Stop sorting button styling */ # /* Body styling */
}
body {
background: linear-gradient(135deg, #0d0d0d, #1a1a1a,
/* Styling for the code box content */
#001f3f);
#code-box pre {
background-size: cover; /* Ensures the image covers the
background-color: #1e1f29; /* Darker gray background for
entire area */
code */
background-position: center; /* Centers the background
color: #f2f4f7; /* Lighter text for code */
image */
padding: 18px;
font-family: 'Poppins', sans-serif;
border-radius: 6px;
color: #333;
font-family: 'Fira Code', monospace; /* Sleek monospace
margin: 20px;
font */
padding: 20px;
overflow-x: auto;
overflow-x: hidden;
font-size: 0.95rem;
}
}
/* Button styling */
#code-box code {
button {
color: #f78c6c; /* Warm orange for highlighted code */
border: 2px solid #ffffff;
}
font-size: 17px;
border-radius: 16px;
/* Styling for the image */
cursor: pointer;
#image-box img {
padding: 10px 15px;
max-width: 100%;
background: linear-gradient(135deg, #d310da 0%, #0decf0
max-height: 100%; /* Allow height to fit the box */
100%);
width: auto; /* Maintain aspect ratio */
color: #333;
height: auto; /* Maintain aspect ratio */
transition: background-color 0.3s ease, box-shadow 0.3s
border-radius: 8px;
ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
}
button:hover {
6.0 Actual Resources Used

Sr.No. Equipment Name with Broad Specification Remark if any

1 Hardware Computer System: Computer (i3-i5 preferable),

RAM minimum 2 GB and onwards

2 Operating System: Windows 7 or Later Version/LINUX version

5.0 or Later Version

3 Software:

7.0 Outputs of the Micro-Projects

8.0 Skill Developed / learning out of this Micro-Project
The following skills were developed while performing and developing this micro-project:-
1. Designing: Designing of micro project with minimum required resources and at low cost.
2. Teamwork: Learned to work in a team and boost individual confidence.
3. Time Management: Timely completion of micro project as scheduled.
4. Data Analysis: Interpretation of data
5. Problem-solving: Develop good problem-solving habits.
6. Technical writing: Preparing a report of the proposed plan and final report.

9.0 Application of this Micro-Project

1. Creative Learning Tool:: The canvas can be used as an educational tool for teaching
children or beginners how to draw and experiment with shapes and colors. It can be
integrated into learning platforms to make art education more interactive and fun.
2. Digital Sketchpad for Designers: Designers or artists can use the interactive canvas as a
lightweight, browser-based sketchpad for creating quick drafts or concept art without
needing to install heavy software.
3. Interactive Art Platform: The canvas can be used on art or creativity-focused websites,
allowing users to create and share their digital artwork directly online
 Annexure – II

Suggested Rubric for Assessment of Micro-Project

S. Characteristic Poor Average Good Excellent
No. to be assessed ( Marks 1 - 3 ) ( Marks 4 - 5 ) ( Marks 6 - 8 ) ( Marks 9- 10 )

1 Relevance to the Relate to very Related to some Take care of at-least Take care of more
course few LOs LOs one CO than one CO

2 Literature review Not more than At-least 5 At –least 7 relevant About 10 relevant
/information two sources relevant sources, sources, most latest sources, most latest
collection very old at least 2 latest
reference

3 Completion of the Completed less Completed 50 to Completed 60 to Completed more

Target as per than 50% 60% 80% than 80 %
project proposal

4 Analysis of Data Data neither Sufficient and Sufficient and Enough data
and representation organized nor appropriate appropriate enough collected and
presented well enough data data generated sufficient and
generated but which is organized presenting data.
not organized and but not used.
and not
presented well.

5 Quality of Incomplete Just assembled Well assembled and Well assembled

Prototype/Model Programming and some codeis functioning parts. with proper
code not functioning But no creativity in functioning parts..
well. design and use of Creativity in design
graphics function and use of graphics
function

6 Report Preparation Very short, Nearly sufficient Detailed, correct Very detailed,
Details about and correct and clear correct, clear
methods, and details about description of description of
conclusions methods, and methods and methods, and
omitted, some conclusion. but Conclusions. conclusions.
details are clarity is not Sufficient Graphic
wrong there in Description.
presentation.

7 Presentation of Major Includes major Includes major Well organized,

the micro project information is information but information and includes major
not included, not well well organized but information ,well
information is organized and not presented well presented
not well not presented
organized. well

8 Defense Could not reply Replied to Replied properly to Replied most of the
to considerable considerable considerable questions properly
number of number of number of question.
question. questions but not
very properly
 Annexure – IV

Micro Project Evaluation Sheet

Name of Student Rohit Vasiya, Mohit Rohra, Harshit Dhir

Enrollment No: 2200040340-342

Name of Program: Computer Engineering Semester: Fifth

Course Title: Client-Side Scripting Course Code:22519

Title of the Micro-Project: Sorting Algorithm Visualizer

Cos addressed by Micro Project: (Tick appropriate COs)

1. Create interactive web pages using program flow control structure []
2. Implement Arrays and functions in JavaScript. []
3. Create event-based web forms using JavaScript. []
4. Use JavaScript for handling cookies. []
5. Create interactive webpage using regular expressions for validations. []
6. Create menus and navigations in web page. []

Poor Average Good Excellent Sub Total

Sr. Characteristic to be assessed
( Marks (Marks 4-5 ) (Marks 6-8) ( Marks9-10)
No 1-3 )

Process and Product Assessment (Convert Above Total marks out of 6 Marks)

1 Relevance to the course

2 Literature review/
Information Collection

3 Completion of the Target

as per project proposal

4 Analysis of Data and

representation

5 Quality of
Prototype/Model

6 Report Preparation

Individual Presentation / Viva (Convert above total marks out of 4 marks)

7 Presentation

8 Defense/Viva
 Roll No. Process and Product Assessment Individual Presentation / Viva Total Marks
(6 Marks) (4 Marks)
10

22

23

24

Name and designation of the Teacher: Mrs. Shubhangi Chintawar (Lecturer)

Dated Signature: