This code implements a simple note-taking application with a front-end...

August 8, 2025 at 09:21 PM

const notesContainer = document.querySelector(".notesContainer");
const makeNoteButton = document.querySelector(".makeNote");
const toggleDarkModeButton = document.querySelector(".switchMode");
const modal = document.querySelector(".modal");
const cancelButton = document.querySelector(".cancel");
const createNoteButton = document.querySelector(".create-note");
const contentModal = document.querySelector(".input-content");
const titleModal = document.querySelector(".input-title");
const saveButton = document.querySelector(".save-btn");
const modalState = document.querySelector(".modalState");
let cardCurrentlyEdited = null;
createNoteButton.addEventListener("click", () => {
  cardCurrentlyEdited = null;
  if (titleModal.value === "" && contentModal.value === "") {
    return;
  }
  modalState.textContent = "Create new note";
  const noteCard = document.createElement("div");
  noteCard.className = "card";
  const cardTitle = document.createElement("div");
  cardTitle.className = "title";
  const cardContent = document.createElement("div");
  cardContent.className = "content";
  const editButton = document.createElement("button");
  editButton.className = "edit-btn";
  const deleteButton = document.createElement("button");
  deleteButton.className = "delete-btn";
  editButton.textContent = "Edit";
  deleteButton.textContent = "Delete";
  const noteButtonsContainer = document.createElement("div");
  noteButtonsContainer.className = "noteButtonDiv";
  noteButtonsContainer.appendChild(editButton);
  noteButtonsContainer.appendChild(deleteButton);
  cardContent.textContent = contentModal.value;
  cardTitle.textContent = titleModal.value;
  noteCard.appendChild(noteButtonsContainer);
  if (contentModal.value.trim().length === 0) {
    contentModal.style.border = "4px solid red";
    return;
  }
  if (titleModal.value.trim().length === 0) {
    cardTitle.textContent = "No Title Name";
    cardTitle.style.color = 'gray'
  }
  contentModal.style.border = "none";

  deleteButton.addEventListener("click", () => {
    cardCurrentlyEdited = null
    noteCard.remove();
  });
  noteCard.appendChild(cardTitle);
  noteCard.appendChild(cardContent);
  notesContainer.appendChild(noteCard);
  updateTheme();
  editButton.addEventListener("click", () => {
    modalState.textContent = "Edit note...";
    modal.style.display = "flex";
    createNoteButton.style.display = "none";
    saveButton.style.display = "inline-block";
    contentModal.value = cardContent.textContent;
    titleModal.value = cardTitle.textContent;
    if (cardTitle.textContent === "No Title Name") {
      titleModal.value = "";
    }
    cardCurrentlyEdited = { cardTitle, cardContent };
  });

  modal.style.display = "none";
  contentModal.value = "";
  titleModal.value = "";
});
saveButton.addEventListener("click", (e) => {
    if (contentModal.value.trim() === "") {
    contentModal.style.border = "4px solid red";
    return;
  } else if (contentModal.value.trim() !== "") {
    contentModal.style.border = "none";
  }
  if (cardCurrentlyEdited) {
    if (titleModal.value.trim() === "") {
      cardCurrentlyEdited.cardTitle.textContent = "No Title Name";
      cardCurrentlyEdited.cardTitle.style.color = 'gray'
    } else {
      cardCurrentlyEdited.cardTitle.textContent = titleModal.value;
    }
    cardCurrentlyEdited.cardContent.textContent = contentModal.value;
  }
  createNoteButton.style.display = "inline-block";
  saveButton.style.display = "none";
  modal.style.display = "none";
  cardCurrentlyEdited = null;
});
makeNoteButton.addEventListener("click", () => {
  modalState.textContent = "Create new note";
  modal.style.display = "flex";
  saveButton.style.display = "none";
  createNoteButton.style.display = "inline-block";
  contentModal.value = "";
  titleModal.value = "";
});
cancelButton.addEventListener("click", () => {
  modal.style.display = "none";
  contentModal.style.border = "none";
});

let initialColorState = false; // true for dark - false intially for light mode
toggleDarkModeButton.addEventListener("click", () => {
  initialColorState = !initialColorState;
  updateTheme();
});
function updateTheme() {
  let allCards = document.querySelectorAll(".card");
  if (initialColorState === true) {
    toggleDarkModeButton.textContent = 'Light Mode'
    modal.style.backgroundColor = "#181818ff";
    modal.style.color = 'white'
    document.body.style.backgroundColor = "#4d4d4dff";
    if (allCards.length > 0) {
      allCards.forEach((card) => {
        card.style.backgroundColor = "#181818ff";
        card.style.color = "white";
      });
    }
  } else if (initialColorState === false) {
        toggleDarkModeButton.textContent = 'Dark Mode'
    document.body.style.backgroundColor = "rgb(222, 222, 222)";
    modal.style.backgroundColor = "#c1c1c1ff";
    modal.style.color = 'black'
    if (allCards.length > 0) {
      allCards.forEach((card) => {
        card.style.backgroundColor = "#ffffffff";
        card.style.color = "black";
      });
    }
  }
}
updateTheme()

This code implements a simple note-taking application with a front-end interface for creating, editing, deleting notes, and toggling between light and dark themes. Here’s what it does:

Key Components:

HTML Elements Selection:
- Various DOM elements (notesContainer, makeNoteButton, toggleDarkModeButton, modal, etc.) are selected using querySelector to manipulate their behavior or appearance.
Note Creation:
- Clicking the Create Note button creates a new note with a title and content based on user input.
- The note is displayed as a card inside the notesContainer.
- If the content input is empty, a red border is added as a validation visual cue.
- A default title "No Title Name" is used if the title is left empty.
Editing a Note:
- Each note has two buttons: Edit and Delete.
- Clicking Edit opens the modal with the current title and content prefilled, allowing the user to modify the note.
- Clicking Save updates the note with the new values.
Deleting a Note:
- Clicking the Delete button removes the note from the notesContainer.
Modal Display and Reset:
- The modal (.modal) is used for creating and editing notes.
- The inputs are reset when the modal is shown or closed, ensuring no residual data from previous actions.
- Clicking the Cancel button hides the modal and resets the input state.
Dark Mode Toggle:
- The Switch Mode button toggles between light and dark mode.
- The background and text colors of the body, modal, and all notes are updated dynamically.
- A helper function updateTheme is used to apply the styles based on the current theme state (initialColorState).
Event Listeners:
- Various user actions (e.g., creating notes, toggling theme, editing or deleting a note, saving changes) are handled via addEventListener for buttons or input elements.

High-Level Functionality:

Create Notes: Users can create note cards with optional titles and required content.
Edit Notes: Existing notes can be modified by opening them in a modal and saving changes.
Delete Notes: Users can delete individual notes.
Dark Mode Toggle: Users can switch between light and dark UI themes.

Summary of Key Behaviors:

If required fields (content) are empty during creation or editing, the app provides validation feedback via red input borders.
A modal interface is used for user interactions like creating and editing notes.
The app maintains a dark mode that alters the styling of multiple components dynamically.
The updateTheme function ensures color consistency when switching between light and dark modes across the entire app.

This code demonstrates how to manage dynamic UI behavior with vanilla JavaScript, emphasizing event handling, DOM manipulation, and state management.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr

This code implements a simple **note-taking application** with a front-end...

Key Components:

High-Level Functionality:

Summary of Key Behaviors:

This code implements a simple note-taking application with a front-end...