Refactor date display logic in App.svelte to use reactive variable for improved readability

This commit is contained in:
Aculix Technologies 2025-10-16 17:32:02 +05:30
parent 2697a81f72
commit 056f9fc562

View File

@ -15,6 +15,7 @@
let selectedDate = new Date().toDateString(); let selectedDate = new Date().toDateString();
let draggedItem = null; let draggedItem = null;
let draggedOverIndex = null; let draggedOverIndex = null;
let currentDateDisplay = '';
function addTask() { function addTask() {
if (newTask.trim()) { if (newTask.trim()) {
@ -85,13 +86,16 @@
draggedOverIndex = null; draggedOverIndex = null;
} }
function getCurrentDate() { $: {
return new Date().toLocaleDateString('en-US', { currentDateDisplay = (() => {
const date = new Date(selectedDate);
return date.toLocaleDateString('en-US', {
weekday: 'long', weekday: 'long',
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
day: 'numeric' day: 'numeric'
}); });
})();
} }
function getDateKey(dateString) { function getDateKey(dateString) {
@ -282,7 +286,7 @@
<div class="container"> <div class="container">
<div class="content-header"> <div class="content-header">
<h2 class="section-title">To-dos</h2> <h2 class="section-title">To-dos</h2>
<div class="date-display">{getCurrentDate()}</div> <div class="date-display">{currentDateDisplay}</div>
</div> </div>
<div class="task-input-container"> <div class="task-input-container">