Skip to content

Commit

Permalink
Merge pull request #356 from iAGorynT/iAGorynT-Code-Snippet-Changes
Browse files Browse the repository at this point in the history 
Update DOW_LightDarkToggle.html
  • Loading branch information
@iAGorynT
iAGorynT authored Aug 26, 2024
2 parents b662213 + fd2d975 commit 36cb5c5
Showing 1 changed file with 59 additions and 50 deletions.
109 changes: 59 additions & 50 deletions Html/DOW_LightDarkToggle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@

/* Base styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transition: background-color 0.3s, color 0.3s;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
padding: 20px;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
transition: background-color 0.3s, color 0.3s;
}

/* Main container styles */
Expand Down Expand Up @@ -103,7 +104,7 @@
--secondary-color: #333333;
}

/* Toggle Slider Styles */
/* Toggle Switch Styles */
.switch {
position: relative;
display: inline-block;
Expand Down Expand Up @@ -162,7 +163,7 @@
<!-- Light/Dark mode toggle switch -->
<div class="mode-switch">
<label class="switch">
<input type="checkbox" id="modeToggle" tabindex="5" onchange="toggleMode()">
<input type="checkbox" id="modeToggle" tabindex="5">
<span class="slider"></span>
</label>
</div>
Expand All @@ -171,72 +172,76 @@ <h2>Date Generator</h2>

<!-- Input form for date generation -->
<label for="month">Month:</label>
<select id="month" tabindex="1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="month" tabindex="1"></select>

<label for="year">Year (YYYY):</label>
<input type="number" id="year" required tabindex="2">

<label for="dayOfWeek">Day of Week:</label>
<select id="dayOfWeek" tabindex="3">
<option value="0">Sunday</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>

<button onclick="generateDates()" tabindex="4">Generate Dates</button>
<select id="dayOfWeek" tabindex="3"></select>

<button id="generateButton" tabindex="4">Generate Dates</button>

<!-- Output area for generated dates -->
<div id="output"></div>
</div>

<script>
// Function to toggle between light and dark mode
// DOM element selections
const modeToggle = document.getElementById('modeToggle');
const monthSelect = document.getElementById('month');
const dayOfWeekSelect = document.getElementById('dayOfWeek');
const yearInput = document.getElementById('year');
const generateButton = document.getElementById('generateButton');
const output = document.getElementById('output');

// Arrays for populating select elements
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

/**
* Populates a select element with options
* @param {HTMLSelectElement} select - The select element to populate
* @param {string[]} options - Array of option texts
*/
function populateSelect(select, options) {
options.forEach((option, index) => {
const el = document.createElement('option');
el.textContent = option;
el.value = index;
select.appendChild(el);
});
}

// Populate month and day of week selects
populateSelect(monthSelect, months);
populateSelect(dayOfWeekSelect, days);

/**
* Toggles between light and dark mode
*/
function toggleMode() {
document.body.classList.toggle('dark-mode');
}

// Function to check system default mode and set the toggle switch accordingly
/**
* Checks system preference for dark mode and sets initial state
*/
function checkSystemMode() {
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
const toggle = document.getElementById('modeToggle');

if (prefersDarkScheme) {
document.body.classList.add('dark-mode');
toggle.checked = true;
} else {
document.body.classList.remove('dark-mode');
toggle.checked = false;
}
document.body.classList.toggle('dark-mode', prefersDarkScheme);
modeToggle.checked = prefersDarkScheme;
}

// Call the function on page load
window.onload = checkSystemMode;

// Function to generate dates based on user input
/**
* Generates dates based on user input and displays them
*/
function generateDates() {
// Get user input
const month = parseInt(document.getElementById('month').value);
const year = parseInt(document.getElementById('year').value);
const dayOfWeek = parseInt(document.getElementById('dayOfWeek').value);
const month = parseInt(monthSelect.value) + 1; // +1 because month select uses 0-based index
const year = parseInt(yearInput.value);
const dayOfWeek = parseInt(dayOfWeekSelect.value);

// Validate input
// Input validation
if (isNaN(month) || isNaN(year)) {
alert('Please enter a valid month and year.');
return;
Expand All @@ -253,7 +258,6 @@ <h2>Date Generator</h2>
}
}

const output = document.getElementById('output');
output.innerHTML = '';

if (dates.length === 0) {
Expand All @@ -277,6 +281,11 @@ <h2>Date Generator</h2>
});
}
}

// Event listeners
modeToggle.addEventListener('change', toggleMode);
generateButton.addEventListener('click', generateDates);
window.addEventListener('load', checkSystemMode);
</script>
</body>
</html>

0 comments on commit 36cb5c5

Please sign in to comment.