note book

code includes the necessary HTML structure for the notebook tool, CSS styles to customize the appearance, and JavaScript functionality for adding, editing, and deleting notes. It uses the Bootstrap framework for responsive styling and pre-defined classes for buttons and form elements.

Note: Make sure to save this code with a .html extension and open it in a web browser to see the notebook tool in action.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Notebook Tool</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <style>

    body {

      padding: 20px;

    }

    .note {

      margin-bottom: 20px;

    }

    .note .note-header {

      background-color: #f1f1f1;

      padding: 10px;

      border-radius: 5px 5px 0 0;

    }

    .note .note-content {

      background-color: #ffffff;

      padding: 10px;

      border: 1px solid #e1e1e1;

      border-radius: 0 0 5px 5px;

    }

    .note .note-actions {

      margin-top: 10px;

    }

    .btn-delete {

      color: #fff;

      background-color: #dc3545;

      border-color: #dc3545;

    }

  </style>

</head>

<body>

  <div class="container">

    <h1>Notebook Tool</h1>

    <form id="noteForm">

      <div class="form-group">

        <label for="noteTitle">Note Title:</label>

        <input type="text" class="form-control" id="noteTitle" placeholder="Enter note title" required>

      </div>

      <div class="form-group">

        <label for="noteContent">Note Content:</label>

        <textarea class="form-control" id="noteContent" rows="3" placeholder="Enter note content" required></textarea>

      </div>

      <button type="submit" class="btn btn-primary">Add Note</button>

    </form>

    <div id="noteList"></div>

  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script>

    // Array to store notes

    let notes = [];

    // Function to render notes

    function renderNotes() {

      const noteList = document.getElementById('noteList');

      noteList.innerHTML = '';

      notes.forEach((note, index) => {

        const noteElement = document.createElement('div');

        noteElement.className = 'note';

        const noteHeader = document.createElement('div');

        noteHeader.className = 'note-header';

        noteHeader.innerHTML = `<strong>${note.title}</strong>`;

        noteElement.appendChild(noteHeader);

        const noteContent = document.createElement('div');

        noteContent.className = 'note-content';

        noteContent.textContent = note.content;

        noteElement.appendChild(noteContent);

        const noteActions = document.createElement('div');

        noteActions.className = 'note-actions';

        noteActions.innerHTML = `

          <button class="btn btn-danger btn-delete" onclick="deleteNote(${index})">Delete</button>

          <button class="btn btn-primary" onclick="editNote(${index})">Edit</button>

        `;

        noteElement.appendChild(noteActions);

        noteList.appendChild(noteElement);

      });

    }

    // Function to add a new note

    function addNote() {

      const noteTitleInput = document.getElementById('noteTitle');

      const noteContentInput = document.getElementById('noteContent');

      const title = noteTitleInput.value;

      const content = noteContentInput.value;

      if (title.trim() === '' || content.trim() === '') {

        return;

      }

      const newNote = {

        title,

        content

      };

      notes.push(newNote);

      renderNotes();

      // Clear form inputs

      noteTitleInput.value = '';

      noteContentInput.value = '';

    }

    // Function to delete a note

    function deleteNote(index) {

      notes.splice(index, 1);

      renderNotes();

    }

    // Function to edit a note

    function editNote(index) {

      const note = notes[index];

      const noteTitleInput = document.getElementById('noteTitle');

      const noteContentInput = document.getElementById('noteContent');

      noteTitleInput.value = note.title;

      noteContentInput.value = note.content;

      notes.splice(index, 1);

      renderNotes();

    }

    // Event listener for note submission

    document.getElementById('noteForm').addEventListener('submit', function(event) {

      event.preventDefault();

      addNote();

    });

  </script>

</body>

</html>