KODING CATATAN MURID

<style>

  body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background-color: #f0f4f8;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    margin: 0;

  }

  .notebook-container {

    background-color: #ffffff;

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

    width: 100%;

    max-width: 800px;

    text-align: center;

  }

  h1 {

    color: #2c3e50;

    margin-bottom: 20px;

  }

  .controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

  }

  .controls select {

    padding: 8px 12px;

    border-radius: 6px;

    border: 1px solid #bdc3c7;

    font-size: 1em;

  }

  .week-view {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-around;

    gap: 15px;

  }

  .day-card {

    background-color: #ecf0f1;

    padding: 15px;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);

    width: calc(14.28% - 15px);

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    text-align: left;

    min-width: 100px;

    position: relative;

  }

  .day-header {

    font-weight: bold;

    color: #34495e;

    margin-bottom: 10px;

  }

  .day-card textarea {

    width: 100%;

    height: 100px;

    border: 1px solid #ccc;

    border-radius: 4px;

    padding: 8px;

    font-size: 0.9em;

    resize: vertical;

    box-sizing: border-box;

  }

  .day-card .save-btn, .day-card .delete-btn {

    margin-top: 10px;

    padding: 6px 12px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 0.9em;

  }

  .day-card .save-btn {

    background-color: #2ecc71;

    color: white;

  }

  .day-card .delete-btn {

    background-color: #e74c3c;

    color: white;

  }

  @media (max-width: 768px) {

    .day-card {

      width: calc(33.33% - 15px);

    }

  }

  @media (max-width: 480px) {

    .day-card {

      width: 100%;

    }

  }

</style>

<div class="notebook-container">

  <h1>Buku Catatan Murid</h1>

  <div class="controls">

    <select id="month-select"></select>

    <select id="year-select"></select>

  </div>

  <div class="week-view" id="notebook-grid">

    </div>

</div>

<script>

  const notebookGrid = document.getElementById('notebook-grid');

  const monthSelect = document.getElementById('month-select');

  const yearSelect = document.getElementById('year-select');

  const months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

  const days = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];

  const currentYear = new Date().getFullYear();

  const currentMonth = new Date().getMonth();

  function initControls() {

    for (let i = 2025; i <= 2030; i++) {

      const option = document.createElement('option');

      option.value = i;

      option.text = i;

      yearSelect.appendChild(option);

    }

    yearSelect.value = 2025;

    months.forEach((month, index) => {

      const option = document.createElement('option');

      option.value = index;

      option.text = month;

      monthSelect.appendChild(option);

    });

    monthSelect.value = currentMonth;

  }

  function renderNotebook() {

    notebookGrid.innerHTML = '';

    const selectedYear = parseInt(yearSelect.value);

    const selectedMonth = parseInt(monthSelect.value);

    const firstDay = new Date(selectedYear, selectedMonth, 1);

    const lastDay = new Date(selectedYear, selectedMonth + 1, 0);

    let weekCounter = 0;

    let dayCardContainer = document.createElement('div');

    dayCardContainer.classList.add('week-container');

    for (let i = 1; i <= lastDay.getDate(); i++) {

      const date = new Date(selectedYear, selectedMonth, i);

      const dayName = days[date.getDay()];

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

      dayCard.classList.add('day-card');

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

      header.classList.add('day-header');

      header.innerHTML = `${dayName}<br>${date.getDate()} ${months[selectedMonth]} ${selectedYear}`;

      dayCard.appendChild(header);

      const textarea = document.createElement('textarea');

      textarea.id = `note-${selectedYear}-${selectedMonth}-${i}`;

      textarea.placeholder = 'Tulis kegiatan di sini...';

      dayCard.appendChild(textarea);

      const saveBtn = document.createElement('button');

      saveBtn.classList.add('save-btn');

      saveBtn.textContent = 'Simpan';

      saveBtn.onclick = () => saveNote(textarea.id, textarea.value);

      dayCard.appendChild(saveBtn);

      const deleteBtn = document.createElement('button');

      deleteBtn.classList.add('delete-btn');

      deleteBtn.textContent = 'Hapus';

      deleteBtn.onclick = () => deleteNote(textarea.id);

      dayCard.appendChild(deleteBtn);

      loadNote(textarea.id, textarea);

      notebookGrid.appendChild(dayCard);

    }

  }

  function saveNote(id, note) {

    localStorage.setItem(id, note);

    alert('Catatan berhasil disimpan!');

  }

  function loadNote(id, textarea) {

    const savedNote = localStorage.getItem(id);

    if (savedNote) {

      textarea.value = savedNote;

    }

  }

  function deleteNote(id) {

    if (confirm('Apakah Anda yakin ingin menghapus catatan ini?')) {

      localStorage.removeItem(id);

      document.getElementById(id).value = '';

      alert('Catatan berhasil dihapus!');

    }

  }

  monthSelect.addEventListener('change', renderNotebook);

  yearSelect.addEventListener('change', renderNotebook);

  initControls();

  renderNotebook();

</script>