Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calendar with Agenda Notes</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .calendar {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
      max-width: 600px;
      margin-bottom: 20px;
    }

    .day {
      padding: 10px;
      border: 1px solid #ccc;
      text-align: center;
      cursor: pointer;
      position: relative;
    }

    .day:hover {
      background-color: #f0f0f0;
    }

    .note-count {
      position: absolute;
      top: 2px;
      right: 2px;
      background-color: #ff9800;
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 50%;
    }

    .note-details {
      display: none;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 10px;
      margin-top: 5px;
    }

    .agenda-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 300px;
      margin-bottom: 20px;
    }

    .agenda-form input,
    .agenda-form textarea,
    .agenda-form button {
      margin-bottom: 10px;
      padding: 8px;
      width: 100%;
    }
  </style>
</head>
<body>

  <h1>Calendar with Agenda Notes</h1>
  <div id="calendar" class="calendar"></div>

  <div class="agenda-form">
    <h2 id="selected-date">Select a date</h2>
    <input type="text" id="note-title" placeholder="Title">
    <textarea id="note-description" rows="4" placeholder="Description"></textarea>
    <button id="add-note">Add Note</button>
  </div>

  <script>
    const daysInMonth = (month, year) => new Date(year, month, 0).getDate();

    const renderCalendar = (month, year) => {
      const calendar = document.getElementById('calendar');
      calendar.innerHTML = '';
      const days = daysInMonth(month, year);

      for (let i = 1; i <= days; i++) {
        const dayElement = document.createElement('div');
        dayElement.className = 'day';
        dayElement.innerText = i;
        dayElement.onclick = () => selectDate(i, month, year);
        calendar.appendChild(dayElement);

        const noteCount = getNotesForDate(`${year}-${month.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`).length;
        if (noteCount > 0) {
          const noteCountElement = document.createElement('span');
          noteCountElement.className = 'note-count';
          noteCountElement.innerText = noteCount;
          dayElement.appendChild(noteCountElement);
        }
      }
    };

    const selectDate = (day, month, year) => {
      const selectedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
      document.getElementById('selected-date').innerText = `Selected date: ${selectedDate}`;

      const notes = getNotesForDate(selectedDate);
      renderNotes(notes);
    };

    const getNotesForDate = (date) => {
      const notes = JSON.parse(localStorage.getItem('notes')) || [];
      return notes.filter(note => note.date === date);
    };

    const renderNotes = (notes) => {
      const noteDetails = document.createElement('div');
      noteDetails.className = 'note-details';
      noteDetails.innerHTML = '<h3>Notes for the day:</h3>';

      if (notes.length === 0) {
        noteDetails.innerHTML += '<p>No notes for this date.</p>';
      } else {
        notes.forEach(note => {
          noteDetails.innerHTML += `
            <p><strong>${note.title}</strong></p>
            <p>${note.description}</p>
            <hr>
          `;
        });
      }

      const agendaForm = document.querySelector('.agenda-form');
      agendaForm.appendChild(noteDetails);
    };

    document.getElementById('add-note').onclick = () => {
      const title = document.getElementById('note-title').value;
      const description = document.getElementById('note-description').value;

      if (!title || !description) {
        alert('Please fill out both title and description.');
        return;
      }

      const selectedDate = document.getElementById('selected-date').innerText.split(': ')[1];
      const note = {
        date: selectedDate,
        title: title,
        description: description,
      };

      addNoteToLocalStorage(note);
      alert('Note added successfully!');
      document.getElementById('note-title').value = '';
      document.getElementById('note-description').value = '';

      const notes = getNotesForDate(selectedDate);
      renderNotes(notes);
    };

    const addNoteToLocalStorage = (note) => {
      let notes = JSON.parse(localStorage.getItem('notes')) || [];
      notes.push(note);
      localStorage.setItem('notes', JSON.stringify(notes));
    };

    const month = new Date().getMonth() + 1;
    const year = new Date().getFullYear();
    renderCalendar(month, year);
  </script>

</body>
</html>
Editor is loading...