How to make an HTML5 Note Taking Program for Beginners

How to make an HTML5 Note Taking Program for Beginners

HTML5 is amazing to me it and I have fun to do coding with JavaScript because it runs on web browser just like that, so we don’t have to install anything, its just running on web browser.

HTML5 is amazing to me it and I have fun to do coding with JavaScript because it runs on web browser just like that, so we don’t have to install anything, its just running on web browser.

In this tutorial I will share with you how to create a web program, this time, a note taking program.

By watching this tutorial you will know how to store note data, how to retrieve it back and how to delete each one of notes we saved.

We don’t use any database to make this note taking program, we only use what so-called Local Storage on web browser, so our notes are saved on web browser.

Check out the video and let me know if you have any issue with this.

Below is the source code of this tutorial:


<!DOCTYPE html>
<html>
    <head>
        <title>LightWeightNoteTaker</title>
        <script
          src="https://code.jquery.com/jquery-3.4.1.min.js"
          integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
          crossorigin="anonymous"></script>
    </head>
    <body>
        <input placeholder="Enter your note" id="note"><br>
        <button onclick="savethenote()">Save</button>

        <div id="mynotes"></div>

        <script>

            var appname = "lightweightnotetaker";
            var notedata = [];

            if(localStorage.getItem(appname) === null){
                savedata();
            }else{
                notedata = JSON.parse(localStorage.getItem(appname));
            }

            function savedata(){
                localStorage.setItem(appname, JSON.stringify(notedata))
            }

            function savethenote(){
                var note = $("#note").val();
                notedata.push(note);
                savedata();
                $("#note").val("");
                listthenotes();
            }

            function listthenotes(){
                $("#mynotes").html("");
                for(var i = 0; i < notedata.length; i++){
                    $("#mynotes").prepend("<p>" + notedata[i] + " | <a href='#' onclick='deletenote("+i+")'>X</a></p>");
                }
            }

            function deletenote(index){
                notedata.splice(index, 1);
                savedata();
                listthenotes();
            }

            listthenotes();

        </script>
    </body>
</html>

html5 html javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Website header text made out entirely of interactive bubble particles? Why not :) In today's HTML5 canvas text animation tutorial we will build it together using nothing but plain HTML, CSS and pure vanilla JavaScript. No frameworks and no libraries. Let's improve our understanding of these 3 fundamental web development technologies and create something cool in the process. HTML5 Canvas Text Animation Tutorial [HTML, CSS, JavaScript]

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

HTML JavaScript - Add Javascript File to HTML

Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc

How to do basic Animations with HTML5 Canvas Element and JavaScript API

In this Canvas crash course, you'll learn how to do basic animations with HTML5 Canvas Element and JavaScript API. We will look at the HTML5 Canvas element and JavaScript API to draw shapes, paths and do some basic animation. <canvas> is an HTML element that allows a user to create graphics using JavaScript. To start a canvas project, we will need an HTML file and a Javascript file. Using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations