📝 Membuat Aplikasi Notepad Sederhana dengan Mode Gelap (HTML, CSS, JavaScript)

📝 Membuat Aplikasi Notepad Sederhana dengan Mode Gelap (HTML, CSS, JavaScript)

Pendahuluan

Ingin membuat aplikasi Notepad versi web dengan tampilan yang keren dan modern? Pada artikel ini, kita akan membangun sebuah aplikasi Notepad sederhana menggunakan HTML, CSS, dan JavaScript, dengan fitur menyimpan teks ke file .txt dan desain dark mode yang nyaman di mata.

🎯 Fitur Utama

  • Teks area untuk menulis catatan
  • Tombol untuk menyimpan teks menjadi file .txt
  • Tampilan gelap (dark mode) yang elegan dan bersih
  • Responsif dan mudah digunakan di berbagai ukuran layar

🔧 Struktur File

Aplikasi ini terdiri dari tiga file utama:

  • index.html — struktur halaman
  • style.css — gaya tampilan dark mode
  • script.js — logika untuk menyimpan file

📄 1. Kode HTML (index.html)

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dark Notepad</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>📝 Dark Notepad</h1>
    <textarea id="textArea" placeholder="Tulis catatanmu di sini..."></textarea>
    <button onclick="saveText()">💾 Simpan sebagai .txt</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

🎨 2. Kode CSS (style.css)

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #121212;
  color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: #1e1e1e;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  width: 90%;
  max-width: 600px;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  height: 300px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  resize: none;
  font-size: 16px;
  background-color: #2c2c2c;
  color: #e0e0e0;

  box-sizing: border-box;
  text-align: center;
  font-family: monospace; /* Supaya teks lebih simetris */
}



button {
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #00c853;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #00b342;
}

⚙️ 3. Kode JavaScript (script.js)

function saveText() {
  const text = document.getElementById('textArea').value;
  const blob = new Blob([text], { type: 'text/plain' });
  const link = document.createElement('a');
  link.download = 'catatan.txt';
  link.href = URL.createObjectURL(blob);
  link.click();
}

💡 Cara Menggunakan

  1. Buat folder baru, lalu simpan ketiga file (index.html, style.css, script.js) di dalamnya.
  1. Buka file index.html menggunakan browser.
  1. Tulis catatan Anda di kolom teks.
  1. Klik tombol "Simpan sebagai .txt" untuk mengunduh isi catatan.

🚀 Penutup

Aplikasi Notepad sederhana ini dapat dijadikan dasar untuk proyek yang lebih besar, seperti editor markdown, pencatatan tugas harian, atau editor catatan untuk siswa. Kamu bisa menambahkan fitur lain seperti:

  • Penyimpanan otomatis (autosave)
  • Hitung jumlah kata
  • Tema gelap & terang

Selamat mencoba dan kembangkan sesuai kreativitasmu!



Komentar

Posting Komentar