How To Create Sticky Notes App in HTML CSS & JavaScript | Mini Text Editor in JavaScript
How To Build a Sticky Notes App Using HTML CSS and JavaScript | Note App or Website | Mini Text Editor Sticky Note App using JavaScript. #Week2 #52Weeks52ProjectsInJavaScript
JavaScript Mini Project: Advanced Sticky Note include Mini Text Editor #stickynote #beginner #advanced #SharathchandarK #coding #software #notes #note #sticky #stickynote #stickynotes #javascriptproject #javascript #javascripttutorial #javascriptprojects #javascript_projects
Welcome to our JavaScript Sticky Note App with Mini Text Editor Coding Tutorials. In this video, we'll walk you through a step-by-step guide to building a fully functional and dynamic digital sticky note application with mini text editor from scratch using HTML CSS and of course JavaScript.
You'll learn how to implement essential sticky note that you can use to organize your thoughts. This will have functionalities like reading data from local storage, adding notes, editing existing notes, auto-updating, and removing virtual sticky notes on the screen.
Throughout this video, we'll cover key concepts such as DOM manipulation, event handling, and local storage integration, enabling you to building a fun and practical digital version of those classic sticky notes with mini text editor we all love.
By the end of this video, you'll have a powerful Mini Text Editor Note App. This mini-note app can change the selected text to capitalize, bold, italic, underline, and line-through effortlessly through the browser.
Let's get started on creating your own JavaScript-mini text editor note app now! HAPPY CODING!
TABLE OF CONTENT
00:00 DEMO
01:50 Creating Project Files
02:31 Creating HTML Boilerplate
02:51 Adding HTML & CSS
13:45 Adding JavaScript Declarations
14:41 Adding Create Note Function
17:20 Adding Get Selected Text Function
18:27 Adding Get Selected Style Function
22:58 Adding Delete Note Function
25:08 Implementing local-storage for CRUD Operations
26:11 Adding Save Event Function using Ctrl + s
34:19 Implementing Read Data Function with Style from local-storage
37:37 Fixing Styling Bug on Note View
41:41 Manual Testing
----------------------------------------
Recommended Playlists:
----------------------------------------
JavaScript Projects For Beginners To Advance: • JavaScript Projects For Beginners To ...
Animating Access with HTML, CSS, & JS: • Animating Access with HTML, CSS, & JS
JavaScript API Projects: • JavaScript API Projects
Responsive Personal Portfolio Website: • Responsive Personal Portfolio Website
-------------------------------------------------------------------------------------
Recommended Videos: JavaScript Project for Clocks
-------------------------------------------------------------------------------------
1. Create a Dynamic Countdown Timer using HTML CSS & JavaScript : • Building a Dynamic Countdown Timer us...
2. Crafting a Digital Clock with Alarm Feature using HTML CSS & JavaScript: • Crafting a Digital Clock with Alarm F...
3. Create A Simple Analog Clock with JavaScript, HTML & CSS : • Create A Simple Analog Clock with Jav...
4. Create a Stopwatch with Laps using HTML, CSS, and JavaScript : • Create a Stopwatch with Laps using HT...
Thank you for watching and don't forget to like, comment, Share, subscribe, and hit the notification bell to stay updated with our latest tutorials.
Have a Feedback, Question or Project idea? Let me know about it in the comment box down below.
If you learn something from this video then Please subscribe and Follow me:
► Subscribe : / @sharathchandark
► Instagram : / sharathchandark
► Twitter : / sharathchandark
All Copyrights and All Code in the Video is my own - by #SharathchandarK
#Sharath #Sarath #sarath #sarathchandar #sharathchandar #codewithsharath #codewithSHA