main.js

function $(query) {
    return document.querySelector(query)
}

//Mapping time to text
var currentTod = $('#current-time');
var docTitle = $('title');
var date = new Date();
var hour = date.getHours();
var humanTime;
if (hour > 20 || hour <= 6) humanTime = "night";
else if (hour > 17) humanTime = "evening";
else if (hour > 12) humanTime = "afternoon";
else if (hour > 6) humanTime = "morning";
currentTod.innerHTML = humanTime;
//docTitle.innerHTML = 'New tab: Good ' + humanTime +'!';
// Current Time
var time = $('#time')
function addZero(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }

function setTime() {
    var d = new Date();
    var h = d.getHours();
    var amPm = 'AM'
    if (h == 0) h = 12;
    if (h >= 12) amPm = "PM"
    if (h > 12) h -= 12;
    var m = addZero(d.getMinutes());
    var s = addZero(d.getSeconds());
    time.innerHTML = h + ":" + m  + ' ' + amPm;
}
setTime();
var currentTime = setInterval(setTime, 1000)
// Unsplash Fun Times
var background = $('body');
var imageCred = $('#unsplash-author')
function getBg() {
    fetch(`https://source.unsplash.com/1600x900/?${humanTime}`)
    .then((response) => {
        background.style.backgroundImage = `linear-gradient(90deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%),url('${response.url}')`;
        imageCred.href = response.url;
    })
}
getBg();
//saving name to local storage
var name = $('#name');
name.addEventListener('input', setName)
function setName(e) {
    let userName = e.target.textContent
    localStorage.setItem('name', userName)
}
var lsName = localStorage.getItem('name')
if (lsName) name.innerHTML = lsName;

// Radio Button
var page;
var tod = $('#tod');
var todSection = $('#tod-section')
var prod = $('#prod')
var prodSection = $('#productivity')
var notes = $('#notes')
var notesSection = $('#notes-section')
//var twentyFive = $('#twenty-five');
//var fiftyTwo = $('#fifty-two')
tod.addEventListener('click', switchTabs)
//prod.addEventListener('click', switchTabs)
notes.addEventListener('click', switchTabs)
//twentyFive.addEventListener('click', switchTabs)
//fiftyTwo.addEventListener('click', switchTabs)
if (localStorage.getItem('activeTab') == null) localStorage.setItem('activeTab', 'tod')
$(`#${localStorage.getItem('activeTab')}`).classList.add('active')
$(`#${localStorage.getItem('activeTab')}-section`).classList.remove('hidden')
function switchTabs(e) {
    let id = e.srcElement.id
    if (id == 'tod') {
        tod.classList.add('active')
        todSection.classList.remove('hidden')
        //prod.classList.remove('active')
        //prodSection.classList.add('hidden')
        notes.classList.remove('active')
        notesSection.classList.add('hidden')
        localStorage.setItem('activeTab', 'tod')
    } 
    // else if (id == 'prod') {
    //     prod.classList.add('active')
    //     prodSection.classList.remove('hidden')
    //     tod.classList.remove('active')
    //     todSection.classList.add('hidden')
    //     notes.classList.remove('active')
    //     notesSection.classList.add('hidden')
    // } 
    else if (id == "notes") {
        tod.classList.remove('active')
        todSection.classList.add('hidden')
        notes.classList.add('active')
        notesSection.classList.remove('hidden')
        localStorage.setItem('activeTab', 'notes')
    } 
    
}

// Productivity timer
// var timer = $('#timer')
// var timerRunning = localStorage.getItem('timerRunning');
// console.log(timerRunning);
// var workPeriod = localStorage.getItem('workPeriod');
// var breakPeriod = localStorage.getItem('breakPeriod')
// var timerInterval;
// function startTimer(work, rest) {
//     console.log('run');
//     startButton.disabled = true;
//     startButton.classList.add('hidden');
//     cancelButton.classList.remove('hidden');
//     if (localStorage.timerRunning == true) {
//         setInterval(function() {
//             var timeRemaining = localStorage.getItem('endTime') - new Date();
//             console.log(timeRemaining);
//             console.log(localStorage.endTime)
//             console.log('first');
            
//             if (timeRemaining >= 0) {
//                 console.log('herefirst');
                
//                 timer.innerText = Math.floor(timeRemaining / 60000) + ':' + ((timeRemaining % 60000) / 1000).toFixed(0);
//             } else {
//                 clearInterval();
//             }
//         }, 1000)
//     } else {
//         localStorage.setItem('timerRunning', true);
//         let endTime = +new Date() + (work*60000);
//         console.log(endTime);
//         console.log('second');
//         localStorage.setItem('workPeriod', work)
//         localStorage.setItem('breakPeriod', rest)
//         localStorage.setItem('endTime', endTime)
//         timerInterval = setInterval(function() {
//             var timeRemaining = localStorage.getItem('endTime') - new Date();
//             console.log(timeRemaining);
            
//             if (timeRemaining >= 0) {
//                 console.log('here');
//                 timer.innerText = Math.floor(timeRemaining / 60000) + ':' + ((timeRemaining % 60000) / 1000).toFixed(0);
//             } else {
//                 clearInterval(timerInterval);
//             }
//         }, 1000)
//     }
// }
// function checkTimer() {
//     if (localStorage.timerRunning == true) startTimer(workPeriod, breakPeriod);
// }
// function cancelTimer() {
//     localStorage.clear('endTime')
//     localStorage.timerRunning = false;
//     clearInterval(timerInterval);
//     startButton.classList.remove('hidden');
//     startButton.disabled = false;
//     cancelButton.classList.add('hidden');
// }
// var startButton = $('#start')
// var cancelButton = $('#cancel')
// startButton.addEventListener('click', function() {startTimer(52,17)})
// cancelButton.addEventListener('click', cancelTimer)
// checkTimer();

// Notepad
var notepad = $('textarea')
notepad.addEventListener('input', saveNotes)
var lsNotes = localStorage.getItem('notes')
if (lsNotes) notepad.innerHTML = lsNotes;
function saveNotes(e) {
    console.log(e);
    localStorage.setItem('notes', e.target.value);
    
}