Department of Information Technology

PART – A (About 2-3 Pages)

Title of Micro Project: Scribble hub

Brief Introduction: Color Picker: JavaScript can be used to create an

interactive color picker that allows users to select their desired colors. When a
color is selected, JavaScript can update the current drawing tool's color to
reflect the user's choice.
Drawing Modes: The three buttons (Rainbow mode, Eraser mode, Clear mode)
can be implemented using JavaScript event handling. When the user clicks on
these buttons, JavaScript can switch between different drawing modes:
Rainbow Mode: JavaScript can change the drawing tool to use a gradient of
colors, allowing for rainbow-like strokes.
Eraser Mode: JavaScript can switch to an eraser tool that sets the drawing color
to transparent, effectively erasing the drawn lines.
Clear Mode: Clicking this button can trigger JavaScript to clear the entire
drawing canvas, essentially resetting the drawing.
Drawing Interaction: JavaScript can capture user mouse or touch events and use
these events to draw on the canvas. When a user moves the mouse or finger on
the canvas, JavaScript can track the movement and draw lines or patterns
accordingly.
Canvas Management: JavaScript can manage the drawing canvas, including
resizing it, saving drawings, and providing an undo/redo functionality.
User Interface Interactivity: JavaScript can be used to enhance the user interface
by providing features like zooming in and out, panning, and resizing the
drawing canvas. These interactions can make the drawing experience more
engaging for children.
Undo and Redo: Implementing undo and redo functionality to allow users to
correct mistakes in their drawings can be achieved using JavaScript. It can keep
track of the drawing history and restore previous states.
 Saving and Exporting: JavaScript can help users save their drawings in various
formats or share them with others. It can convert the canvas contents to image
files or generate downloadable links.

Aim of the Micro Project: Aim is to present our Micro-Project in a respectful

manner.

Action Plan:

Sr. Details of Activity Planned start Planned Name of the

No. date finish date responsible team
members
1. Gathering all 23/10/2023 23/10/2023 Sahil Thanawala
information Jarir khan
Suyash mane
2. Developing 24/10/2023 24/10/2023 Sahil Thanawala
Frontend Jarir khan
Suyash mane
3. Developing 25/10/2023 25/10/2023 Sahil Thanawala
Backend Jarir khan
Suyash mane

Resources Required:
Sr. No Name of the Resources/ Material Specifications Qty Remarks

1. Laptop
2. VS Code
3. W3Schools
Part B (Outcomes after Execution and format for Micro-Project Report,
About 6-10 Pages)
For 1st to 4th Semester

Title of Micro Project: : Scribble hub

Brief Description:
HTML Structure: Create a web page with a drawing canvas and buttons for
features like the color picker, Rainbow mode, Eraser mode, and Clear mode.
You can use HTML to structure these elements.

JavaScript for Interactivity:

Color Picker: Implement a color picker using HTML input elements and
JavaScript to capture the selected color.
Drawing Canvas: Use HTML5's <canvas> element to create the drawing area.
JavaScript will handle drawing on the canvas by capturing mouse or touch
events.
Drawing Modes: JavaScript can switch between different drawing modes based
on the button clicks. For Rainbow mode, you can dynamically change colors in
your drawing tool. For Eraser mode, set the drawing color to transparent. Clear
mode can simply clear the canvas.
Drawing Interaction: JavaScript captures mouse or touch events and uses them
to draw on the canvas. It tracks user input to create lines or patterns based on
the chosen drawing mode.
Canvas Management: JavaScript manages the canvas, including resizing,
saving, and providing undo/redo functionality.
User Interface: Implement user interface interactions like zooming, panning,
and resizing the canvas, all controlled by JavaScript.
Undo and Redo: Use JavaScript to manage the drawing history, allowing users
to undo and redo their actions.
Saving and Exporting: JavaScript converts the canvas content to image files or
enables users to save or share their drawings.
Real-time Collaboration (Optional): If you want to support multiple users
drawing together, you'd need to implement real-time collaboration features
using JavaScript and potentially a server-side technology.
Animations (Optional): For added fun, JavaScript can introduce simple
animations to drawings, such as moving objects or changing colors.
CSS for Styling: Apply CSS to style your drawing toy and make it visually
appealing to children.
Event Handling: JavaScript is crucial for handling user interactions, such as
button clicks, mouse or touch events, and keypresses.
Testing and Debugging: Thoroughly test your drawing toy to ensure that it
works as intended, and use JavaScript debugging tools to identify
and fix any issues.

Aim of Micro Project: Aim is to present our Micro-Project in a respectful

manner.

Actual Resources Used:

Sr. Name of the resource/ Specifications Qty Remarks
No material
1. Internet
2. From Notes
3. Vs code
4. W3school
 Action Plan:
Sr. Details of Activity Planned start Planned Name of the
No. date finish date responsible team
members
1. Gathering all 2310/2023 23/10/2023 Sahil Thanawala
information Jarir khan
Suyash mane
2. Developing 2410/2023 24/10/2023 Sahil Thanawala
Frontend Jarir khan
Suyash mane
3. Developing 25/10/2023 25/10/2023 Sahil Thanawala
Backend Jarir khan
Suyash mane

Outputs of the Micro Project:

ScreenShots:
 Skill Developed/Learning out of this Micro Project:
Department of Information Technology
Name of Student: Sahil Thanawala Enrollment No: 21202C0008
Name of Programme: Semester: III
Course Title: CSS Code: 22519
Title of the Micro Project: SCRIBBLE HUB
Course Outcomes Achieved:

Process Product Assessment

Assessment
Part- A project Project Part-B Individual Total marks
proposal (marks 2) Methodology Project Report/ Presentation/ 10
(Mark-2) Working Model Viva
(Marks-2) (Marks-4)

Note: Every course teacher is expected to assign marks for group evolution
in first 3 columns
and individual in 4th columns for each group of students as per rubrics.

Comments/Suggestions about team work/leadership/inter-personal

communication (if any)
------------------------------------------------------------------------------------------------
----------------------------
Any other Comments:
------------------------------------------------------------------------------------------------
----------------------------

Name and Designation of Faculty Members

Signature:
 Department of Information Technology

Name of Student: Jarir khan Enrollment No: 21202C0018

Name of Programme: Semester: V
Course Title: CSS Code: 22519
Title of the Micro Project: SCRIBBLE HUB
Course Outcomes Achieved:

Process Product Assessment

Assessment
Part- A project Project Part-B Individual Total marks
proposal (marks 2) Methodology Project Report/ Presentation/ 10
(Mark-2) Working Model Viva
(Marks-2) (Marks-4)

Note: Every course teacher is expected to assign marks for group evolution
in first 3 columns
and individual in 4th columns for each group of students as per rubrics.

Comments/Suggestions about team work/leadership/inter-personal

communication (if any)
------------------------------------------------------------------------------------------------
----------------------------
Any other Comments:
------------------------------------------------------------------------------------------------
----------------------------

Name and Designation of Faculty Members

Signature:
 Department of Information Technology

Name of Student: Suyash mane Enrollment No: 21202C0021

Name of Programme: Semester: III
Course Title: CSS Code: 22519
Title of the Micro Project: SCRIBBLE HUB
Course Outcomes Achieved:

Process Product Assessment

Assessment
Part- A project Project Part-B Individual Total marks
proposal (marks 2) Methodology Project Report/ Presentation/ 10
(Mark-2) Working Model Viva
(Marks-2) (Marks-4)

Note: Every course teacher is expected to assign marks for group evolution
in first 3 columns
and individual in 4th columns for each group of students as per rubrics.
Comments/Suggestions about team work/leadership/inter-personal
communication (if any)
------------------------------------------------------------------------------------------------
----------------------------
Any other Comments:
------------------------------------------------------------------------------------------------
----------------------------

Name and Designation of Faculty Members

Signature: