let count = 0;
let clicks = [];
let currentAlign = ‘center’;

const counterElement = document.getElementById(‘counter’);
const minusButton = document.getElementById(‘minus’);
const plusButton = document.getElementById(‘plus’);
const resetButton = document.getElementById(‘reset’);
const clicksListContainer = document.getElementById(‘lastClick’);
const clicksListElement = clicksListContainer.querySelector(‘ul’);
const projectionElement = document.getElementById(‘projection’);
const modeToggle = document.getElementById(‘mode-toggle’);
const alignToggle = document.getElementById(‘align-toggle’);
const readyString = ‘Ready when you are!’;

document.body.classList.add(align-${currentAlign});
console.log(Initial body classes: ${document.body.classList});
console.log(Initial currentAlign: ${currentAlign});

function saveState() {
const state = {
count: count,
clicks: clicks,
currentAlign: currentAlign
};
localStorage.setItem(‘appState’, JSON.stringify(state));
}

function loadState() {
const state = JSON.parse(localStorage.getItem(‘appState’));
console.log(‘Loaded state:’, state);
if (state) {
count = state.count;
clicks = state.clicks.map(click => new Date(click).getTime());
currentAlign = state.currentAlign || ‘center’;
updateCounter();
updateClicksList();
updateProjection();
document.body.classList.remove(‘align-left’, ‘align-center’, ‘align-right’);
document.body.classList.add(align-${currentAlign});
alignToggle.innerHTML = <i class="fas fa-align-${currentAlign}"></i>;
console.log(Alignment set to: ${currentAlign});
console.log(Body classes after load: ${document.body.classList});
}
}

function clearState() {
localStorage.removeItem(‘appState’);
count = 0;
clicks = [];
currentAlign = ‘center’;
updateCounter();
clicksListElement.innerHTML = ”;
projectionElement.textContent = readyString;
document.body.classList.remove(‘align-left’, ‘align-center’, ‘align-right’);
document.body.classList.add(‘align-center’);
alignToggle.innerHTML = ”;
console.log(‘State cleared’);
saveState();
}

function updateCounter() {
counterElement.textContent = count;
}

function updateClicksList() {
clicksListElement.innerHTML = ”;
clicks.forEach(click => {
const li = document.createElement(‘li’);
li.textContent = new Date(click).toLocaleTimeString();
clicksListElement.appendChild(li);
});
clicksListContainer.scrollTop = clicksListContainer.scrollHeight;
}

function updateProjection() {
if (clicks.length < 1) {
projectionElement.textContent = readyString;
return;
} else if (clicks.length < 2) {
projectionElement.textContent = ‘Not enough data for projection’;
return;
}

let totalTime = 0;
let lastClickTime = clicks[0];
let gapFound = false;

for (let i = 1; i < clicks.length; i++) {
    const currentClickTime = clicks[i];
    const timeDifference = (currentClickTime - lastClickTime) / 1000 / 60; // minutes

    if (timeDifference > 30) {
        gapFound = true;
        break;
    }

    totalTime += timeDifference;
    lastClickTime = currentClickTime;
}

totalTime = totalTime / 60; // convert to hours
const clicksPerHour = clicks.length / totalTime;
const projectedClicks = Math.round(clicksPerHour * (gapFound ? 8 : 7));

projectionElement.textContent = `Projected chats today: ${projectedClicks}`;

}

function resetCounter() {
if (confirm(‘Are you sure you want to reset? This will clear all data.’)) {
clearState();
}
}

function toggleMode() {
document.body.classList.toggle(‘light-mode’);
document.body.classList.toggle(‘dark-mode’);

if (document.body.classList.contains('light-mode')) {
    modeToggle.innerHTML = '<i class="fas fa-moon"></i>';
} else {
    modeToggle.innerHTML = '<i class="fas fa-sun"></i>';
}

}

function toggleAlign() {
console.log(‘Toggle align clicked’);
console.log(Current align before change: ${currentAlign});
console.log(Body classes before change: ${document.body.classList});

document.body.classList.remove('align-left', 'align-center', 'align-right');

switch (currentAlign) {
    case 'left':
        currentAlign = 'center';
        break;
    case 'center':
        currentAlign = 'right';
        break;
    case 'right':
        currentAlign = 'left';
        break;
}

console.log(`New align after switch: ${currentAlign}`);

document.body.classList.add(`align-${currentAlign}`);
console.log(`Body classes after add: ${document.body.classList}`);

alignToggle.innerHTML = `<i class="fas fa-align-${currentAlign}"></i>`;
saveState();

}

minusButton.addEventListener(‘click’, () => {
count–;
updateCounter();
saveState();
});

plusButton.addEventListener(‘click’, () => {
count++;
updateCounter();
clicks.push(Date.now());
updateClicksList();
updateProjection();
saveState();
});

resetButton.addEventListener(‘click’, resetCounter);
modeToggle.addEventListener(‘click’, toggleMode);
alignToggle.addEventListener(‘click’, toggleAlign);

document.addEventListener(‘DOMContentLoaded’, function() {
loadState();
updateCounter();
updateProjection();
});

---

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
transition: background-color 0.3s, color 0.3s, justify-content 0.3s;
}

body.light-mode {
background-color: #f0f0f0;
color: #333;
}

body.dark-mode {
background-color: #2c2c2c;
color: #00ffff;
}

body.align-left {
justify-content: flex-start;
}

body.align-center {
justify-content: center;
}

body.align-right {
justify-content: flex-end;
}

body.align-left .container {
margin-right: auto;
}

body.align-center .container {
margin-left: auto;
margin-right: auto;
}

body.align-right .container {
margin-left: auto;
}

.container {
text-align: center;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
transition: background-color 0.3s, box-shadow 0.3s;
}

.light-mode .container {
background-color: white;
}

.dark-mode .container {
background-color: #3a3a3a;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
}

.mode-toggle, .align-toggle {
position: absolute;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
transition: color 0.3s;
}

.mode-toggle {
top: 10px;
right: 10px;
}

.align-toggle {
top: 10px;
left: 10px;
}

.light-mode .mode-toggle,
.light-mode .align-toggle {
color: #333;
}

.dark-mode .mode-toggle,
.dark-mode .align-toggle {
color: #00ffff;
}

h1 {
margin-bottom: 1rem;
}

counter {

font-size: 3rem;
margin-bottom: 1rem;

}

.buttons {
margin-bottom: 1rem;
}

button {
font-size: 1.5rem;
padding: 0.5rem 1rem;
margin: 0 0.5rem;
cursor: pointer;
border: none;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}

.light-mode button {
background-color: #f0f0f0;
color: #333;
}

.dark-mode button {
background-color: #4a4a4a;
color: #00ffff;
}

button:hover {
opacity: 0.8;
}

.clicks-list {
height: 300px;
overflow-y: auto;
text-align: center;
margin-top: 1rem;
padding-bottom: 10px;
border-radius: 5px;
transition: background-color 0.3s, border-color 0.3s;
}

.light-mode .clicks-list {
border: 1px solid #ccc;
background-color: #fff;
}

.dark-mode .clicks-list {
border: 1px solid #00ffff;
background-color: #2c2c2c;
}

.clicks-list h3 {
margin-top: 0;
position: sticky;
top: 0;
padding-bottom: 5px;
margin-bottom: 10px;
transition: background-color 0.3s;
}

.light-mode .clicks-list h3 {
background-color: #fff;
}

.dark-mode .clicks-list h3 {
background-color: #2c2c2c;
}

.clicks-list ul {
padding-right: 100px;
margin: 0;
list-style-type: none;
}

.clicks-list li {
margin-bottom: 5px;
line-height: 1.5;
}

projection {

margin-top: 1rem;

}

/* Scrollbar styling */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
background: #555;
}

.dark-mode ::-webkit-scrollbar-track {
background: #2c2c2c;
}

.dark-mode ::-webkit-scrollbar-thumb {
background: #00ffff;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
background: #00cccc;
}

---