ເພີ່ມຄວາມມີຊີວິດຊີວາໃຫ້ເວັບໄຊ: ສ້າງລະບົບ Dark Mode ງ່າຍໆ ດ້ວຍ HTML, CSS ແລະ JavaScript

ບົດນໍາ

ໃນບົດຄວາມກ່ອນໜ້ານີ້ ເຮົາໄດ້ຮຽນຮູ້ວິທີການຈັດ Layout ງາມໆດ້ວຍ CSS ກັນໄປແລ້ວ. ແຕ່ຖ້າສັງເກດເບິ່ງ ເວັບໄຊທີ່ມີພຽງແຕ່ HTML ແລະ CSS ຈະເປັນພຽງເວັບໄຊທີ່ຕາຍຕົວ (Static) ຄື: ເບິ່ງໄດ້, ອ່ານໄດ້, ແຕ່ເມື່ອເຮົາຄລິກປຸ່ມ ຫຼື ຢາກໃຫ້ມັນມີການຕອບສະໜອງ ມັນຈະບໍ່ສາມາດເຮັດໄດ້. ນັ້ນກໍເພາະວ່າເຮົາຍັງຂາດຊິ້ນສ່ວນທີ່ສໍາຄັນທີ່ສຸດໄປ ນັ້ນກໍຄື JavaScript.

ໃນບົດຄວາມນີ້, ເຮົາຈະມາເບິ່ງວິທີການເອົາ HTML, CSS ແລະ JavaScript ມາປະກອບເຂົ້າກັນ ເພື່ອສ້າງເວັບໄຊທີ່ສາມາດໂຕ້ຕອບກັບຜູ້ໃຊ້ໄດ້. ໂດຍເຮົາຈະມາກະທໍາຜ່ານໂປຣເຈັກນ້ອຍໆທີ່ກໍາລັງເປັນທີ່ນິຍົມ ນັ້ນກໍຄື ການສ້າງປຸ່ມເປີດ-ປິດ Dark Mode (ໂໝດກາງຄືນ) ນັ້ນເອງ!

ພາລະໜ້າທີ່ຂອງແຕ່ລະພາສາ (The Holy Trinity)

ກ່ອນຈະໄປຂຽນ Code, ເຮົາມາທໍາຄວາມເຂົ້າໃຈໜ້າທີ່ຂອງ 3 ທະຫານເສືອນີ້ກ່ອນ ໂດຍປຽບທຽບກັບຮ່າງກາຍຂອງຄົນເຮົາ:

• HTML (ຮ່າງກາຍ/ໂຄງກະດູກ): ເຮັດໜ້າທີ່ສ້າງໂຄງສ້າງ ວ່າເວັບໄຊຂອງເຮົາຈະມີຫຍັງແດ່ ເຊັ່ນ: ມີຫົວຂໍ້, ມີຮູບພາບ, ມີປຸ່ມ.
• CSS (ຜິວໜັງ/ເສື້ອຜ້າ): ເຮັດໜ້າທີ່ຕົກແຕ່ງໂຄງສ້າງເຫຼົ່ານັ້ນໃຫ້ງາມຂຶ້ນ ເຊັ່ນ: ປ່ຽນສີຕົວໜັງສື, ຈັດ Layout, ກໍານົດຂະໜາດ.
• JavaScript (ສະໝອງ/ລະບົບປະສາດ): ເຮັດໜ້າທີ່ສັ່ງການ ແລະ ສ້າງການໂຕ້ຕອບ (Interactivity) ເຊັ່ນ: ເມື່ອຄລິກປຸ່ມນີ້ແລ້ວ ໃຫ້ປ່ຽນສີພື້ນຫຼັງ.

ເມື່ອເຂົ້າໃຈແລ້ວ ເຮົາມາເລີ່ມສ້າງໂປຣເຈັກ Dark Mode ກັນເລີຍ!

ຂັ້ນຕອນທີ 1: ສ້າງໂຄງສ້າງດ້ວຍ HTML

ເລີ່ມຕົ້ນດ້ວຍການສ້າງໄຟລ໌ index.html ຂຶ້ນມາ. ເຮົາຈະສ້າງໂຄງສ້າງງ່າຍໆ ປະກອບມີ ຫົວຂໍ້, ຂໍ້ຄວາມ ແລະ ປຸ່ມໜຶ່ງປຸ່ມສໍາລັບກົດປ່ຽນໂໝດ.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dark Mode Project</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="light-mode">
  <div class="container">
    <h1>ຍິນດີຕ້ອນຮັບສູ່ LaoCourse</h1>
    <p>ນີ້ຄືຕົວຢ່າງການເຮັດວຽກຮ່ວມກັນຂອງ HTML, CSS ແລະ JavaScript.</p>
    
    <!-- ປຸ່ມສໍາລັບກົດປ່ຽນໂໝດ -->
    <button id="toggle-btn">ປ່ຽນເປັນ Dark Mode</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

ຂໍ້ສັງເກດ: ເຮົາໄດ້ໃສ່ id="toggle-btn" ໄວ້ທີ່ປຸ່ມ ເພື່ອໃຫ້ JavaScript ສາມາດຊອກຫາປຸ່ມນີ້ເຫັນໄດ້ງ່າຍ, ແລະ ໃສ່ class="light-mode" ໄວ້ທີ່ body ເພື່ອເປັນຄ່າເລີ່ມຕົ້ນ.

ຂັ້ນຕອນທີ 2: ຕົກແຕ່ງ ແລະ ກຽມສີດ້ວຍ CSS

ຕໍ່ມາສ້າງໄຟລ໌ style.css. ເຕັກນິກໃນການເຮັດ Dark Mode ທີ່ດີທີ່ສຸດຄືການໃຊ້ CSS Variables (ຕົວປ່ຽນໃນ CSS). ເຮົາຈະກໍານົດສີສໍາລັບ 2 ໂໝດໄວ້ລ່ວງໜ້າ.

/* 1. ກໍານົດຕົວປ່ຽນສີ ສໍາລັບ Light Mode (ຄ່າເລີ່ມຕົ້ນ) */
.light-mode {
  --bg-color: #ffffff;
  --text-color: #333333;
  --button-bg: #007bff;
  --button-text: #ffffff;
}

/* 2. ກໍານົດຕົວປ່ຽນສີ ສໍາລັບ Dark Mode */
.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #f4f4f4;
  --button-bg: #ffc107;
  --button-text: #1a1a1a;
}

/* 3. ນໍາຕົວປ່ຽນມາໃຊ້ງານກັບ Element ຕ່າງໆ */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease; /* ເພີ່ມເອັບເຟັກໃຫ້ການປ່ຽນສີສະມູດຂຶ້ນ */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  opacity: 0.8;
}

ຂັ້ນຕອນທີ 3: ເພີ່ມການໂຕ້ຕອບດ້ວຍ JavaScript

ຕອນນີ້ເວັບເຮົາງາມແລ້ວ ແຕ່ກົດປຸ່ມຍັງບໍ່ໄດ້. ໃຫ້ສ້າງໄຟລ໌ script.js ແລ້ວຂຽນ Code ເພື່ອສັ່ງໃຫ້ປຸ່ມເຮັດວຽກ.

ຫຼັກການເຮັດວຽກຂອງ JavaScript ໃນໂປຣເຈັກນີ້ມີ 3 ຂັ້ນຕອນງ່າຍໆ:

1. ເລືອກ (Select) ປຸ່ມ ແລະ Body ມາໄວ້ໃນຕົວປ່ຽນ.
2. ດັກຈັບ (Listen) ວ່າຕອນໃດປຸ່ມຈະຖືກຄລິກ (Click event).
3. ເມື່ອຖືກຄລິກ, ໃຫ້ສະລັບ (Toggle) class ລະຫວ່າງ light-mode ກັບ dark-mode ຢູ່ເທິງ Body.

// 1. ອ້າງອີງເຖິງ Element ໃນ HTML
const toggleBtn = document.getElementById('toggle-btn');
const body = document.body;

// 2. ເພີ່ມ Event Listener ເພື່ອລໍຖ້າການຄລິກ
toggleBtn.addEventListener('click', function() {
  
  // 3. ເຮັດການສະລັບ (Toggle) class 'dark-mode'
  body.classList.toggle('dark-mode');
  
  // (ທາງເລືອກເສີມ) ປ່ຽນຂໍ້ຄວາມເທິງປຸ່ມຕາມໂໝດປັດຈຸບັນ
  if (body.classList.contains('dark-mode')) {
    toggleBtn.textContent = 'ປ່ຽນເປັນ Light Mode';
  } else {
    toggleBtn.textContent = 'ປ່ຽນເປັນ Dark Mode';
  }
  
});

ພຽງເທົ່ານີ້! ເມື່ອທ່ານລອງກົດປຸ່ມ, JavaScript ຈະໄປເພີ່ມ class dark-mode ໃສ່ໃນ body. ເຊິ່ງຈະເຮັດໃຫ້ CSS ດຶງເອົາສີຂອງ Dark mode ທີ່ເຮົາຕັ້ງໄວ້ (ພື້ນດໍາ, ໂຕໜັງສືຂາວ) ມາສະແດງຜົນທັນທີ.

ສະຫຼຸບ

ການສ້າງເວັບໄຊໜຶ່ງເວັບແມ່ນເກີດຈາກການເຮັດວຽກຮ່ວມກັນຢ່າງເປັນລະບົບຂອງ 3 ເທັກໂນໂລຢີຫຼັກຄື: HTML ໃຊ້ສ້າງໂຄງສ້າງ, CSS ໃຊ້ຕົກແຕ່ງຄວາມງາມ, ແລະ JavaScript ໃຊ້ເພື່ອຄວບຄຸມ Logic ແລະ ການໂຕ້ຕອບກັບຜູ້ໃຊ້.