Shri.

Shamrao Patil (Yadravkar) Education & Charitable Trust’s

SHARAD INSTITUTE OF TECHNOLOGY

POLYTECHNIC, YADRAV-ICHALKARANJI.

DEPARTMENT OF
ARTIFICIAL INTELLIGENCE(AI)
AND
MACHINE LEARNING(ML)

MICRO PROJECT REPORT

ON

“Client Side Scripting Language”

For
Academic Year
2024-2025
 A
Project report on

“Webpage: For Creating Sticky Notes”

Submitted in partial fulfillment of the requirement for the

“DIPLOMA in Third Year”

In

Artificial Intelligence (AI) and Machine Learning(ML)

To

M.S.B.T.E. MUMBAI

By

Name of candidates Roll no.

1.Abha Abhijeet Phatak. 34019

UDER THE GUIDANCE OF

Mr. A. F. Shinde
 S.I.T Polytechnic, Yadrav (Ichalkaranji) [2024-25]

Shri. Shamrao Patil (Yadravkar) Educational & Charitable Trust’s

SHARAD INSTITUTE OF TECHNOLOGY

POLYTECHNIC, YADRAV(ICHALKARANJI)

CERTIFICATE
This is to certify that,
Name of candidates Roll No

1.Abha abhijeet phatak. 34019

I have successfully completed the Project work entitled “Webpage: For Creating
Sticky Notes” under Mr. A. F. Shinde supervision in the partial fulfillment of the requirement
for the Diploma in Artificial Intelligence (AI) & Machine Learning, and the report
submitted to M.S.B.T.E. MUMBAI. For academic year 2024-2025.

Date:

Place: S.I.T. POLYTECHNIC, YADRAV.

Project Guide HOD AI&ML Principal

Mr. A. F. Shinde Mrs. A. B. Bedkyale Mr. B. S. Tashildar

 ACKNOWLEDGEMENT

It is my great pleasure to present the honor and sincere gratitude to my guide Mr. A. F.
Shinde. Sharad Institute of Technology polytechnic, Yadrav helped in joining the hands in
developing each and every step of this project and for valuable guidance and constant
encouragement during completion of project work.

It was my privilage and pleasure to work under her valuable guidance. I am indeed
gratefully to her for providing me helpful suggestions. Due to her constant encouragement and
inspiration, I could complete my project work.

I am very thankful to principal, Sharad institute of technology, polytechnical, Yadrav. My

grateful thanks to Mrs. A.B. Bedkyale (HOD AI&ML), for their valuable guidance, support and
constant encouragement.

I express thanks to my family and friends for their support and encouragement at every stage of
successful completion of this project work.

My sincere thanks to all those who have directly or indirectly helped me to carry out this work.

Name of Candidate Roll No. Enrollment No.

1.Abha Abhijeet Phatak. 34019 2209680010
 Webpage: For Creating Sticky Notes Academic Year 2024-25

Micro Project Report

Create Report on Webpage: For Creating Sticky Notes

1.0 Rationale:

" Webpage: For Creating Sticky Notes " project is a practical and educational way to learn
JavaScript, improve web development skills, and create a real-world, user-friendly web
application. This project can enhance your knowledge of HTML, CSS, local storage, and user
interaction while adding to your portfolio.

2.0 Course outcomes Addressed:

a. develop interactive web applications using client-side scripting languages such as

JavaScript.

b. learn to efficiently process and manipulate data provided by users to generate meaningful
results and Creativity and Innovation.

3.0 Literature Review:

A literature review for a "Webpage: For Creating Sticky Notes" reveals the importance
of user interaction design, web technologies, mobile compatibility, data security, and collaborative
features. Understanding these aspects is essential for creating an effective digital sticky notes
application. The popularity of the sticky note as a design material has led to many attempts at transferring
sticky-note qualities into a digital context, fueled in part by the increased amount of online collaboration
arising during the COVID-19 pandemic. Popular, online, sticky-note collaborative systems (e.g., Miro;
Mural) and experimental research platforms such as Cards and Boards (Dalsgaard et al., 2020), aim to
capitalize on many of the affordances found in physical sticky notes, often preserving

Sharad Institute of Technology Polytechnic ,Yadrav 1|Page

 Webpage: For Creating Sticky Notes Academic Year 2024-25

4.0 Actual Methodology Followed:

1) I prepared a micro-project for this subject.

2) Then searched Project Topics. I searched the 4 titles and shown the titles to my project guide.
3) Then Discussed and selected one of them named as “Webpage: For Creating Sticky Notes”
4) After that I searched the information about my Project title.
5) I shown it to my project Guide. Then I read it and studied it.
6) After that I start to find the information. In that, I had some questions regarding to my project
7) Then I will solved the questions and shown to my guide.
8) Then I obtained softcopy of my Project. I collected some formats to done better performance.
9) I prepared the Project Dairy, having division of 16 hours of working. I completed my Project
Report and showed to my Respected Guide.
10) At the end, I submitted both project and project report along with the Dairy.

5.0 Resources Used:

Sr. Name Of Resource Specification Qty Remark

No
1. Computer System with broad Processor- 1 -
Specification. Intel(R)core I5
RAM-8GB,
System Type-64bit
2. Browser Google chrome 1 -

Sharad Institute of Technology Polytechnic ,Yadrav 2|Page

 Webpage: For Creating Sticky Notes Academic Year 2024-25

6.0 Micro-Project:

Webpage:For Creating Sticky Notes

1. INTRODUCTION
A "Sticky Notes Project" is an interactive web application that allows users to create, organize, and manage
digital sticky notes. This review explores the existing literature related to similar projects, user interaction
design, and technologies commonly used in such applications. Several digital sticky notes projects have
been developed to facilitate digital note-taking. Examples include Evernote, Google Keep, and Microsoft
Sticky Notes. These applications have demonstrated the value of digital sticky notes in enhancing
productivity, organization, and accessibility across devices.Sticky Notes Projects have applications in
various domains, including education and productivity. Researchers have explored their use in classroom
settings for collaborative note-taking and task management.

2. CODE FOR WEBSITE

• Source.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<button class="btn-add">Add Note</button>
</div>

<script src="script.js"></script>
</body>
</html>

• style.css
@import
url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;

body{
background-color: #e74c3c;
}

#container{ display:
grid;
grid-template-columns: repeat(auto-fill,200px);
gap:24px;
padding:24px;
}

.sticky{ height:
200px; padding:
16px; border: none;
outline: none; resize:
none;
border-radius: 5px; font-
size: 18px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.btn-add{ height:
200px; border:
none; outline: none;
color:#fff;
font-size: 20px; background-
color:#2c3e50; cursor: pointer;
}
.btn-add:hover{
background-color: #34495e;
border-radius: 5px;
}
• Script.js

const containerElement=document.getElementById("container");
const btnAdd=document.getElementsByClassName("btn-add")[0];

function getAppStorage(){
return JSON.parse(localStorage.getItem("joes-app") || "[]");
}

getAppStorage().forEach(element => {
const textElement=createTextElement(element.id,element.content);
containerElement.insertBefore(textElement,btnAdd);
});

function createTextElement(id,content){
const textElement=document.createElement('textarea');
textElement.classList.add('sticky');
textElement.value=content; textElement.placeholder='Enter
Your Notes';

textElement.addEventListener("change",()=>{
updateNote(id,textElement.value);
});
textElement.addEventListener("dblclick",()=>{ const
check=confirm("Are You Sure to Delete ?");
if(check){
deleteNotes(id,textElement);
}
});

return textElement;

//Add New Sticky Note function

addSticky(){
const notes=getAppStorage();
const noteObject={
id:Math.floor(Math.random()*100000), content:""
}
const textElement= createTextElement(noteObject.id,noteObject.content);
containerElement.insertBefore(textElement,btnAdd); notes.push(noteObject);
saveNotes(notes);
}

Sharad Institute of Technology Polytechnic ,Yadrav 3|Page

 Webpage: For Creating Sticky Notes Academic Year 2024-25

3. SCREEN SHOT OF OUTPUT

4. OBJECTIVES

The objective of "Webpage: For Creating Sticky Notes" is User interaction design is critical for the
success of a Sticky Notes Project. Prior research highlights the importance of intuitive interfaces, drag-
and-drop functionality, and real-time collaboration features. User-centered design principles are crucial
for ensuring a positive user experience.

5. FUTURE SCOPE

The future scope of a "Sticky Notes Project" includes potential enhancements like AI integration, cloud
synchronization, improved security, cross-platform compatibility, and custom solutions for education and
businesses, ensuring continued relevance and user satisfaction.

Sharad Institute of Technology Polytechnic ,Yadrav 4|Page

 Webpage: For Creating Sticky Notes Academic Year 2024-25

7.0 Skills developed/Learning Outcomes from this Micro-Project:

▪ Client-Side Scripting Proficiency.

▪ User Interface (UI) and User Experience (UX) Design.
▪ Project Management Skills.
▪ Team Work

8.0Benefits of the micro-project:

▪ Enhanced Knowledge
▪ Practical Experience
▪ Optimized Resource Allocation
▪ Research Opportunities

9.0 Area of future improvement:

Future improvements for a "Sticky Notes Project" can be made in user experience, mobile optimization,
AI integration, collaboration, security, customization, integration, accessibility, sustainability, and
globalization. Sticky notes are commonly used for jotting down quick notes, reminders, and to-do lists.
Developing a digital version can be practical and useful in our increasingly digital world. Users can
access their notes from various devices and platforms. The project simulates a real-world application and
can help you understand how JavaScript is used to build interactive and dynamic web applications. It
involves tasks like creating, updating, deleting, and organizing notes – skills that can be applied to
various web development projects.

10. Conclusion:
In conclusion, "Webpage: For Creating Sticky Notes" presents offers a practical and versatile digital
solution for note-taking and organization. Its future scope includes potential advancements in AI
integration, collaboration features, data security, customization, and expanding its global reach.
Continuous improvement in user experience and accessibility will be vital for its success in meeting
evolving user needs.

Sharad Institute of Technology Polytechnic ,Yadrav 6|Page

 Webpage: For Creating Sticky Notes Academic Year 2024-25

11.0 References:
https://www.simplestickynotes.com/download

https://apps.microsoft.com/detail/9nblggh4qghw?hl=en-US&gl=US

Sharad Institute of Technology Polytechnic ,Yadrav 7|Page

Shri Shamrao Patil (Yadravkar) Educational & Charitable Trust’s
SHARAD INSTITUTE OF TECHNOLOGY,
POLYTECHNIC.

DEPARTMENT OF ARTIFICIAL INTELLIGENCE(AI)

AND MACHINE LEARNING(ML)

MICRO PROJECT DIARY

ON
Client Side Scripting Language
F0R
Academic Year-2024-25
 Shri Shamrao Patil (Yadravkar) Educational & Charitable Trust’s

SHARAD INSTITUTE OF TECHNOLOGY,

POLYTECHNIC.

CERTIFICATE
This is to certify that,

Sr. No Name of Student Roll No

1. Ms. Abha Abhijeet Phatak. 34019

Have Successfully completed the project diary.

Date: -

Place: -

Project Guide (HOD AI&ML ) (Principal)

Mr. A. F. Shinde Mrs.A.B.Bedkyale Mr.B.S.Tashildar
 Project Diary
Name of Student : Abha Abhijeet Phatak.

Roll No: 34019

Work Description
Sr. NO. Date Work done Hours Student sign Guide Sign

1. Project guide assign the project topic 30 min

Then select one project topics and

2. find some information 1 hour

3. I will take suggestions from our 30 min

guide for selecting our project

After selection of project topic wise

4. will search the basic information 2hour-30 min
related to it.

Then the collection of information

5. Will be done 1 hour
 Later I will discussed with our
6. guide for suggesting us some more 30 min
information on topic and some
corrections in collected
information

7. If there are some corrections then 1 hour

it will be corrected

After correcting it, I will again 40 min

8. discussed our guide to show the
corrections

Then I will start searching some

9. more information on the topic (for 2 hours
gaining some more knowledge)

I will have a discussed with our

10. guide after searching some 30 min
information

If there are some suggestions then

11. guide will suggest and I will try to 1 hour
make it correct as per the guide's
requirement

12. After making some changes I will 1 hour

again have a visit to our guide
 1 hours 30 min
13. Then i will start implementing it on
the software required i.e. sublime.

14. Then by that time, we will make 40 min

the project report

15. I will have visit to our guide to 40 min

present our project

16. Then i will finally submit our 1 hour

project and project report till this
date

Student Sign Guide sign