ເພີ່ມຄວາມມີຊີວິດຊີວາໃຫ້ເວັບໄຊ: ສ້າງລະບົບ 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 ຂັ້ນຕອນງ່າຍໆ:
- ເລືອກ (Select) ປຸ່ມ ແລະ Body ມາໄວ້ໃນຕົວປ່ຽນ.
- ດັກຈັບ (Listen) ວ່າຕອນໃດປຸ່ມຈະຖືກຄລິກ (Click event).
- ເມື່ອຖືກຄລິກ, ໃຫ້ສະລັບ (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 ແລະ ການໂຕ້ຕອບກັບຜູ້ໃຊ້.
