To make this application, the first thing I did was create the time slot container, rows, and columns. Next I apply styling and gave each column classes and ID's when needed. My next step was to create the color's depending on the time of day. I used a for loop and created if and else if statements that will check to see if i if less than, more than, or equal to i. The i value will be equal to the time of day. I added the syling by the addClass method connected to my CSS. Next, I made the save button functional. On click, the parent attribute of id will record which time slot you are typing in. Using sibling I was able to assign a value to text area and finally I set each of these into Local Storage.
This application will be used to support you during your work day with daily tasks. Each day, the calendar will refresh. The calendar is color coordinated to help you know where you are in the day.
https://github.com/paytoncali/day-planner.git; https://paytoncali.github.io/day-planner/;