How to Create Note Taking Website JavaScript. JavaScript Note Taking Website Project with Source Code .HTML,Css,Javascript Tutorial.

on

This is a tutorial about how you can create a Webapp in Javascipt which is capable of taking notes and then show it to the user.You can use this as your project. This also helps you to make your Javascript concepts strong.This web application allows you to create, edit, and manage your notes online. You can use it to store your personal or professional notes, organize them by categories. 

This is built with HTML, CSS, and JavaScript, using the following features and technologies:

  • Local Storage: NoteJS uses the browser’s local storage to save and retrieve your notes. This means that your notes are stored on your device and not on any server. You can also export and import your notes as JSON files.
  • Markdown: NoteJS supports markdown syntax for formatting your notes. You can use headings, lists, links, images, code blocks, and more to make your notes more readable and expressive.
  • Marked: NoteJS uses the marked library to parse and render your markdown notes. Marked is a fast and lightweight markdown parser and compiler that follows the CommonMark specification.
  • Font Awesome: NoteJS uses the font awesome icons to add some style and functionality to the user interface. You can use icons to create new notes, edit or delete existing notes, toggle between dark and light modes, and more.

This is a simple and elegant note taking web application type project that you can use as your project. 


Code For this Project:- 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Note Taking Website Example Project</title>
  <style>

/* Set the font family and margin for the body */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

/* Center the heading */
h1 {
  text-align: center;
}

/* Style the container div */
#container {
  display: flex;
  justify-content: space-around;
}

/* Style the input area div */
#input-area {
  width: 40%;
}

/* Style the input and textarea elements */
#input-area input, #input-area textarea {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Style the save button */
#input-area button {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  background-color: #00a2ff;
  color: white;
  border: none;
  border-radius: 5px;
}

/* Style the notes area div */
#notes-area {
  width: 40%;
}

/* Style the note div */
.note {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

/* Style the note title and content elements */
.note h3, .note p {
  margin: 5px;
}

  </style>
</head>

<body>
  <h1>Note Taking Website Example Project</h1>
  <div id="container">
    <div id="input-area">
      <input type="text" id="title" placeholder="Enter note title">
      <textarea id="content" placeholder="Enter note content"></textarea>
      <button id="save">Save Note</button>
    </div>
    <div id="notes-area">
      <!-- Notes will be displayed here -->
    </div>
  </div>


  <script>
   const title = document.getElementById("title");
const content = document.getElementById("content");
const save = document.getElementById("save");
const notesArea = document.getElementById("notes-area");

// Initialize an array to store the notes
let notes = [];

// Check if there are any notes in the local storage
if (localStorage.getItem("notes")) {
  // Parse the JSON string into an array
  notes = JSON.parse(localStorage.getItem("notes"));
}

// Define a function to display the notes on the screen
function displayNotes() {
  // Clear the notes area
  notesArea.innerHTML = "";
  
   // Loop through the notes array
   notes.forEach(function(note, index) {
     // Create a div element for each note
     let noteDiv = document.createElement("div");
     // Add a class name to the div element
     noteDiv.className = "note";
     // Set the inner HTML of the div element with the note title and content
     noteDiv.innerHTML = `
       <h3>${note.title}</h3>
       <p>${note.content}</p>
       <button onclick="deleteNote(${index})">Delete</button>
     `;
     // Append the div element to the notes area
     notesArea.appendChild(noteDiv);
   });
}

// Display the notes on the screen when the page loads
displayNotes();

// Add an event listener to the save button
save.addEventListener("click", function() {
   // Get the value of the title and content inputs
   let noteTitle = title.value;
   let noteContent = content.value;

   // Check if both inputs are not empty
   if (noteTitle && noteContent) {
     // Create an object to store the note data
     let note = {
       title: noteTitle,
       content: noteContent
     };
     
     // Push the note object into the array
     notes.push(note);

     // Update the local storage with the new array
     localStorage.setItem("notes", JSON.stringify(notes));

     // Clear the input values
     title.value = "";
     content.value = "";

     // Display the notes on the screen
     displayNotes();
   }
});

// Define a function to delete a note from the array and local storage
function deleteNote(index) {
   // Remove the note from the array at the given index
   notes.splice(index,1);

   // Update the local storage with the new array
   localStorage.setItem("notes", JSON.stringify(notes));

   // Display the notes on the screen
   displayNotes();
}
  </script>

</body>
</html>
Simply Save this code as html  file and you are ready to go.

Hope You Like This project.

Comments

Post a Comment