/* PROGRAM: Schedule Planner ================================== */ window.addEventListener('DOMContentLoaded', () => { /* Global Variables & Constants ================================== */ const body = document.querySelector('body'), header = document.querySelector('header'), menuIcon = document.querySelector('#menu-icon'), dimmed = document.createElement('div'), tabIcons = document.querySelectorAll('.tab__link'), sidebarList = document.querySelector('#sidebar').querySelectorAll('li'), greeting = document.querySelector('#greeting'), scheduleSection = document.querySelector('#schedule'), planSchedulePage = document.querySelector('#plan-schedule-page'), addEventBtn = document.querySelectorAll('#add-event-btn'), changeTheme = document.querySelector('#change-theme'); /* Inheritance: Custom methods ================================== */ Array.prototype.remove = function (item) { const array = this; const index = array.indexOf(item); if (index > - 1 ) { array.splice(index, 1 ); } } /* Array.prototype.sortNum = function() { return this.sort(function (a, b) { return a - b ; }); } */ /* Loader Class ================================== */ class Loader { static loadPage(page, time) { time = time || 1000; document.querySelector(page).style.display = 'none'; const loader = document.createElement('div'); loader.className = 'preloader'; loader.innerHTML = '

'; body.appendChild(loader); loader.style.display = 'block'; setTimeout(() => { body.removeChild(loader); document.querySelector(page).style.display = 'grid'; document.querySelector(page).className = 'page'; }, time); } } Loader.loadPage('#page', 60); /* UI Class ================================== */ class UI { static displaySchedule() { /* Add schedule to the UI */ schedule.getAll().forEach((sch) => UI.addToSchedule(sch) ); } static addToSchedule(itemObj) { /* Create cards for each schedule */ const card = document.createElement('div'), dateTime = itemObj.date, timeStart = itemObj.timeStart, timeEnd = itemObj.timeEnd, event = itemObj.event; /* Split `date` string */ let dateSplit = dateTime.split('-'); let [year, month, date] = [dateSplit[0], dateSplit[1] - 1, dateSplit[2] ]; let d = new Date(year, month, date); let day, mo; switch(d.getDay()) { case 0: day = 'Sun'; break; case 1: day = 'Mon'; break; case 2: day = 'Tue'; break; case 3: day = 'Wed'; break; case 4: day = 'Thu'; break; case 5: day = 'Fri'; break; case 6: day = 'Sat'; break; } switch(d.getMonth()) { case 0: mo = 'Jan'; break; case 1: mo = 'Feb'; break; case 2: mo = 'Mar'; break; case 3: mo = 'Apr'; break; case 4: mo = 'May'; break; case 5: mo = 'Jun'; break; case 6: mo = 'Jul'; break; case 7: mo = 'Aug'; break; case 8: mo = 'Sept'; break; case 9: mo = 'Oct'; break; case 10: mo = 'Nov'; break; case 11: mo = 'Dec'; break; } let eventDate = `${day} ${mo} ${date}, ${year}`; card.className = 'card'; card.innerHTML = '

' + event + '

'; /* Give the cards unique data- attributes for other purposes */ card.setAttribute('data-date', date); card.setAttribute('data-time-start', timeStart); card.setAttribute('data-time-end', timeEnd); card.setAttribute('data-event', event); /* Add to schedule page */ scheduleSection.appendChild(card); /* Give schedule card headers random colors */ let col = new Color(); document.querySelectorAll('.card__header').forEach((e) => { let randCol = col.randomizePalette3(); e.style.backgroundColor = randCol; e.parentElement.style.setProperty('border', `1px solid ${randCol}`); }); } static removeFromSchedule(event) { scheduleSection.removeChild(event); } static editSchedule(e) { let event = e.target.parentElement.parentElement.getAttribute('data-event'), date = e.target.parentElement.parentElement.getAttribute('data-date'), timeStart = e.target.parentElement.parentElement.getAttribute('data-time-start'), timeEnd = e.target.parentElement.parentElement.getAttribute('data-time-end'); UI.switchTab('today-tab'); UI.showSavedData(event, date, timeStart, timeEnd); } static collectData() { let title = document.querySelector('#event-title').value, date = document.querySelector('#event-date').value, timeStart = document.querySelector('#event-time-start').value, timeEnd = document.querySelector('#event-time-end').value; let itemObj = { 'date': date, 'timeStart': timeStart, 'timeEnd' : timeEnd, 'event': title }; /* If the input fields are not empty, add event to schedule */ if ((title !== '') && (date !== '') && (timeStart !== '') && (timeEnd !== '')) { schedule.addItem(itemObj); } else if (title === '' || title.length === 0) { alert('Please give your event a title'); } else if (date === '' || date.length === 0) { alert('Please choose a date for your event'); } else { alert('Please choose when the event will begin and end') } } static showSavedData(event, dateTime, timeStart, timeEnd) { UI.showPlanSchedulePage(); document.querySelector('#event-title').value = event; document.querySelector('#event-date').value = dateTime; document.querySelector('#event-time-start').value = timeStart; document.querySelector('#event-time-end').value = timeEnd; } static clearFields() { document.querySelector('#event-title').value = ''; document.querySelector('#event-date').value = ''; document.querySelector('#event-time-start').value = ''; document.querySelector('#event-time-end').value = ''; } static showPlanSchedulePage() { /* Open `today tab` */ UI.switchTab('today-tab'); document.querySelector('#greeting').style.display = 'none'; document.querySelector('.info').style.display = 'none'; planSchedulePage.style.display = 'flex'; planSchedulePage.style.animation = 'slide-down 1s linear'; planSchedulePage.style.transform = 'translateY(0vw)'; document.querySelector('#today-tab-content').appendChild(planSchedulePage); } static closePlanSchedulePage() { planSchedulePage.style.animation = 'slide-up 1s linear'; planSchedulePage.style.transform = 'translateY(-200vw)'; /* Clear input fields */ UI.clearFields(); /* Show contents in `today tab` and hide `schedule page` */ document.querySelector('#greeting').style.display = 'block'; document.querySelector('.info').style.display = 'block'; planSchedulePage.style.display = 'none'; /* Go to schedule page */ UI.switchTab('all-schedules-tab'); } static toggleSidebar(e) { const sidebar = document.querySelector('#sidebar'); /* Append a dimmed background to the body */ dimmed.className = 'dimmed'; body.appendChild(dimmed); e.target.classList.toggle('menu-icon--active'); if(e.target.classList.contains('menu-icon--active')) { sidebar.style.animation = 'slide-right 1s linear'; sidebar.style.transform = 'translateX(0vw)'; dimmed.style.display = 'block'; dimmed.style.animation = 'fade-in 0.8s linear'; } else { sidebar.style.animation = 'slide-left 1s linear'; sidebar.style.transform = 'translateX(-100vw)'; dimmed.style.animation = 'fade-out 0.8s linear'; setTimeout(() => { dimmed.style.display = 'none'; }, 800); } } static switchTab(tabName) { /* Get all elements with class="tab__link" and remove the class="active" */ const tabLinks = document.querySelectorAll('.tab__link'); tabLinks.forEach((e) => e.className.replace(' active', '')); /* If `today-tab` is not opened, * Hide `add event btn` (+) */ (tabName !== 'today-tab') ? addEventBtn[0].style.display = 'none' : addEventBtn[0].style.display = 'block' /* Show the current tab */ UI.showCurrentTab(tabName); } static showCurrentTab(tabName) { /* Get all elements with class="tab__content" and hide them */ document.querySelectorAll('.tab__content').forEach((e) => e.style.display = 'none'); /* Show the current tab */ tabName += '-content'; document.getElementById(tabName).style.display = 'block'; } static notify(message) { const div = document.createElement('div'); div.textContent = message; div.className = 'notify'; div.style.animation = 'fade-in 1.5s linear'; document.querySelector('body').appendChild(div); setTimeout (() => { div.style.animation = 'fade-out 2s ease'; setTimeout (() => {div.style.display = 'none'}, 2000 ); }, 1500); } static displayGreetings() { // Instantiate Date let d = new Date(); let hour = d.getHours(); let date = d.getDate(); let month = d.getMonth(); // Alert greetings based on the date if (month == 12 && date == 25) { // Dec. 25 greeting.textContent = 'Merry Christmas'; } else if (month == 0 && date == 1) { // Jan. 1 greeting.textContent = 'Happy New Year!'; } else { /* Display normal greetings based on the hour of the day */ if (hour < 12) { greeting.textContent = 'Good morning'; } else if (hour < 18) { greeting.textContent = 'Good day'; } else if (hour < 20) { greeting.textContent = 'Good evening'; } else if (hour < 24) { greeting.textContent = 'Sweet dreams'; } } } } /* Color Class ================================== */ class Color { constructor(palette1, palette2, palette3) { /* Firstly, I will group the colorPalettes and join them as one for code reuse in future */ this.palette1 = palette1 = ['#0275d8', '#5cb85c', '#5bc0de', '#f0ad4e', '#d9534f', '#292b2c']; this.palette2 = palette2 = ['#f14423', '#8f2bff', '#014af7', '#0fb957']; this.palette3 = palette3 = ['#00b894', '#00cec9', '#0984e3', '#6c5ce7', '#fdcb6e', '#e17055', '#d63031', '#e84393']; this.randomize = () => { const colorPalette = [...palette1, ...palette2, ...palette3]; const randNum = Math.floor( Math.random() * colorPalette.length ); return colorPalette[randNum]; } this.randomizePalette3 = () => { const randNum = Math.floor( Math.random() * (palette3.length + 1) ); return palette3[randNum]; } } } /* Schedule Class ================================== */ class Schedule { constructor(items, addItem, removeItem, getAll, sortEvents) { this.items = [ { date: '2020-01-15', timeStart: '11:00', timeEnd: '15:30', event: 'Go to the National Museum' }, { date: '2020-01-16', timeStart: '10:00', timeEnd: '14:30', event: 'Go out with the kids' }, { date: '2020-02-31', timeStart: '12:00', timeEnd: '03:30', event: 'Write a memo to Sergey Brin' }, { date: '2020-03-02', timeStart: '12:00', timeEnd: '03:30', event: 'Meet with Mark Zuckerberg' }, { date: '2020-03-15', timeStart: '12:00', timeEnd: '03:30', event: 'Travel to Australia' }, { date: '2020-04-26', timeStart: '12:00', timeEnd: '03:30', event: 'Visit Bill Gates' }, { date: '2020-05-27', timeStart: '12:00', timeEnd: '03:30', event: 'Send donations to the orphanages' }, { date: '2020-06-08', timeStart: '12:00', timeEnd: '03:30', event: 'Go for shopping' }, { date: '2020-07-15', timeStart: '13:15', timeEnd: '18:25', event: 'Get the business files from John' }, { date: '2020-12-26', timeStart: '07:00', timeEnd: '11:30', event: 'Visit Larry Page' }, { date: '2020-01-01', timeStart: '07:00', timeEnd: '11:30', event: 'Visit Larry Page' } ]; this.addItem = (itemObj) => { this.items.push(itemObj); UI.closePlanSchedulePage(); /* Add schedule to UI */ UI.addToSchedule(itemObj); /* Send Notification */ UI.notify('Event added to your schedule'); /* Go back to schedules */ //UI.switchTab('all-schedule-tab'); } this.removeItem = (e) => { let event = e.target.parentElement.parentElement, items = this.getAll(); /* Check if the data-attributes of the event matches the properties of any saved event * If yes, remove event after confirmation */ items.forEach((item) => { if ((event.getAttribute('data-event') === item.event) || (event.getAttribute('data-date') === item.date) || (event.getAttribute('data-time-start') === item.timeStart) || (event.getAttribute('data-time-end') === item.timeEnd)) { let confirmed = confirm('Are you sure you want to remove this event from your schedule?'); if (confirmed) { items.remove(item); /* Remove event from UI */ UI.removeFromSchedule(event); /* Send Notification */ UI.notify('Event removed from your schedule'); } } }); } this.getAll = () => { return this.items; } } } /* Initialization ================================== */ const schedule = new Schedule(); UI.displaySchedule(); UI.displayGreetings(); UI.showCurrentTab('today-tab'); /* Events ================================== */ /* Toggle sidebar when the `menu icon` is clicked */ menuIcon.addEventListener('click', (e) => UI.toggleSidebar(e)); /* Display random colors when "change theme" is clicked from the settings */ changeTheme.addEventListener('click', (e) => { /* Create a Color Object */ let col = new Color(); /* Store the random color */ randCol = col.randomize(); /* Set `:root` element's property `--bg` to the value of `randCol` */ document.querySelector(':root').style.setProperty('--bg', randCol); /* [OFF-TOPIC] * This was how I made the backgrounds change when theme is changed. It's really verbose but Thank God I remembered this method "setProperty()" which I used in one of my mini projects, `Analog Clock`. It saved me from using this inefficient method. * I intentionally left it here so that whenever I visit this code, I'll always remember the trick I formulated :) ..... The trick .... // Change "header" background header.style.backgroundColor = randCol; // Change "tab icons" color tabIcons.forEach((e) => e.style.color = randCol); // Change "greetings" border color greeting.style.borderBottomColor = randCol; // Change backgrounds of lists in sidebar sidebarList.forEach((e) => { e.addEventListener('mouseenter', () => e.style.backgroundColor = randCol); e.addEventListener('click', () => e.style.backgroundColor = randCol); e.addEventListener('mouseleave', () => e.style.backgroundColor = 'transparent'); }); Too Long :) If I had known earlier, I'd have just used one line of code: `document.querySelector(':root').style.setProperty('--bg', randCol);` Simple. */ }); /* Create a dropdown list */ const dropdownList = document.querySelector('#dropdown-list'); const dropdownListContent = document.querySelector('#dropdown-list-content'); const caret = dropdownList.querySelector('#caret'); dropdownList.addEventListener('click', () => { dropdownList.classList.toggle('dropdown--active'); if(dropdownList.classList.contains('dropdown--active')) { dropdownListContent.style.display = 'block'; dropdownListContent.style.animation = 'fade-in 1s linear'; setTimeout(() => { caret.className = 'caret--inverse'; }, 800); } else { dropdownListContent.style.animation = 'fade-out 0.8s linear'; setTimeout(() => { caret.className = 'caret'; dropdownListContent.style.display = 'none'; }, 800); } }); /* Switch tabs */ document.querySelectorAll('.tab__link').forEach((e) => e.addEventListener('click', () => UI.switchTab(e.getAttribute('id')) )); /* Remove schedule when `delete button` is clicked */ document.querySelectorAll('#delete').forEach((e) => { e.addEventListener('click', (e) => schedule.removeItem(e)); }); /* Edit schedule when `edit button` is clicked */ document.querySelectorAll('#edit').forEach((e) => { e.addEventListener('click', (e) => UI.editSchedule(e)); }); /* Show `Plan Schedule Page` when `add event button` is clicked */ addEventBtn.forEach((e) => e.addEventListener('click', UI.showPlanSchedulePage) ); /* Close `Plan Schedule Page` when `close button` is clicked */ document.querySelector('#close-btn').addEventListener('click', UI.closePlanSchedulePage); /* Save Schedule when `save button` is clicked */ document.querySelector('#save-schedule-btn').addEventListener('click', UI.collectData); /* Open schedule when `Schedule` is clicked from the sidebar */ document.querySelector('#open-schedule').addEventListener('click', () => { UI.switchTab('all-schedules-tab'); }); });

📆📝Schedule Planner