Mode:
Duration:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
document.addEventListener('DOMContentLoaded', () => {
const counterEl = document.getElementById('counter') as HTMLElement;
const incrementBtn = document.getElementById('increment') as HTMLButtonElement;
const decrementBtn = document.getElementById('decrement') as HTMLButtonElement;
const resetBtn = document.getElementById('reset') as HTMLButtonElement;
const toggleThemeBtn = document.getElementById('toggleTheme') as HTMLButtonElement;
const appEl = document.getElementById('app') as HTMLElement;
let count: number = parseInt(localStorage.getItem('count') || '0', 10);
let isDark: boolean = localStorage.getItem('isDark') === 'true';
const updateUI = (): void => {
counterEl.textContent = `Counter: ${count}`;
appEl.className = isDark ? 'dark-theme' : 'light-theme';
toggleThemeBtn.textContent = `Switch to ${isDark ? 'Light' : 'Dark'} Theme`;
};
incrementBtn.addEventListener('click', () => { count++; saveAndUpdate(); });
decrementBtn.addEventListener('click', () => { count--; saveAndUpdate(); });
resetBtn.addEventListener('click', () => { count = 0; saveAndUpdate(); });
toggleThemeBtn.addEventListener('click', () => { isDark = !isDark; saveAndUpdate(); });
function saveAndUpdate(): void {
localStorage.setItem('count', count.toString());
localStorage.setItem('isDark', isDark.toString());
updateUI();
}
updateUI();
});Coding works best on desktop or with an external keyboard.