dark mode
Dark mode is a display setting for user interfaces, such as a smartphone or laptop.
It
means that, instead of the default dark text showing up against a light
screen (known as ‘light mode’), a light colour text (white or grey) is
presented against a dark or black screen.
Light mode, however, is the default setting for most phones and apps.
Dark mode can also be known as:
- black mode
- dark theme
- night mode
- light-on-dark
The
idea behind dark mode is that it reduces the light emitted by device
screens while maintaining the minimum colour contrast ratios required
for readability.
Both iPhones and Android handsets offer
system-wide dark modes. However, you will still need to set up dark mode
on some individual apps.
Some PC operating systems offer dark mode too, enabling you to set it up on your desktop or laptop.
So, the big question: is it time to go to the dark side?
document.addEventListener("DOMContentLoaded", function () {
/* -------- Date Helpers -------- */
function addDays(date, days) {
const d = new Date(date);
d.setDate(d.getDate() + days);
return d;
}
function isWorkingDay(date) {
const day = date.getDay(); // 0=Sun, 6=Sat
return day !== 0 && day !== 6; // Mon-Fri only
}
function addWorkingDays(startDate, days) {
let current = new Date(startDate);
let remaining = days;
while (remaining > 0) {
current = addDays(current, 1);
if (isWorkingDay(current)) {
remaining--;
}
}
return current;
}
function formatDate(date) {
return date.toISOString().split('T')[0]; // YYYY-MM-DD
}
/* -------- DOM Wiring -------- */
const calcButton = document.getElementById("calcBtn");
const daysInput = document.getElementById("daysInput");
const typeContainer = document.getElementById("typeContainer");
const dayTypeSelect = document.getElementById("dayType");
const resultDiv = document.getElementById("result");
if (!calcButton || !daysInput || !typeContainer || !dayTypeSelect || !resultDiv) {
console.error("Required DOM elements missing");
return;
}
let enteredDays = 0;
calcButton.addEventListener("click", function () {
enteredDays = parseInt(daysInput.value, 10);
if (!Number.isInteger(enteredDays) || enteredDays < 0) {
resultDiv.textContent = "Please enter a valid non-negative integer.";
resultDiv.style.color = "red";
return;
}
typeContainer.style.display = "block";
dayTypeSelect.value = "";
resultDiv.textContent = "";
});
dayTypeSelect.addEventListener("change", function () {
if (enteredDays === 0) return;
const today = new Date();
let resultDate;
if (dayTypeSelect.value === "working") {
resultDate = addWorkingDays(today, enteredDays);
} else {
resultDate = addDays(today, enteredDays);
}
const formatted = formatDate(resultDate);
resultDiv.textContent = `Result date: ${formatted}`;
resultDiv.style.color = "green";
// Reset
enteredDays = 0;
typeContainer.style.display = "none";
dayTypeSelect.value = "";
daysInput.value = "";
});
});