Work Day Scheduler

Day planner is a very simple day planner that highlights the current hour and give the full date and time. Moment.js and jQuery were used.

Work-Day-Scheduler

This repository (Work-Day-Scheduler) is an educational homework assignment from the CARL-OTT-FSF-PT-02-20121-U-C course. It was designed to help students become more familiar with jQuery, moment.js and using containers, rows, and columns. We were tasked with finishing the code for a day planner, where each hour can save and store data to the local storage.
The moment.js was used to display the date and time on the planner right up to the very second.

Link to the Deployed Website Deployed Website

Screenshot Screenshot Screenshot

What I learnt

This assignment was not supposed to be as hard as the assessment quiz, however it did prove to be difficult in its own way. The hardest part for me was the html. I spent many hours looking over the bootstrap requirements for the html. I read over the course assigned reading and it just was not sinking in for some reason. I decided to start the html and for some reason didn’t pay attention to the css. I had to go back and change the css selectors, so they matched the html. I did this will all of them and once I was finished my calendar did not look quite right. Everything was in the right place and the spacing was fine in the containers. However, there was space or padding between each time-block that made it look just slightly different than the example provided. I was going to leave and have one of the ta’s help decipher my errors, but I just was not happy cause I had changed all the selectors and it had become to confusing. I started all over again and created a new div and copied/pasted the new ones and found I still had an issue. Even though I had fixed the issue with to much space between the time-blocks. I had created a new one where the description area or the textarea was maybe 50px long. I decided to ask one of the ta’s for assistance as I knew I was missing in the html but I couldn’t put my finger on it. Turns out, I was missing the spacing for the columns and rows. This was easily fixed, and I later corrected them all to reflect the changes. I went over the bootstrap layout and utilities section again and have a better understanding for column spacing and responsive design. The activities in the course were way to fast for me and I did not understand them properly after I went back and taught them to myself. There is just so much information to absorb in this course and what we did in 10 minutes as an activity could have been an hour-long lecture. I have become more comfortable with the functions in the JavaScript. However, I still need guidance with the formation of the functions. Being that I was not able to meet up with tutor to help guide me in the right direction and I did not want to waste hours trying to figure it out on my own. I decided to search the internet for direction and found help on GitHub. This saved me time I did not have because the last assignment left me behind on my readings and activities and it showed in this assignment when I had hard time with spacing the bootstrap columns. I had a hard time figuring out the past, present, and future background colors. I knew it would come down to an if statement, but I did not know how to get the information in the html. I had to refer to previous student’s code to try and decipher how to do that. They all used the same method and looked it up and its the iteration form for jQuery. It makes iteration so much faster by just using the word each after the desired target class. Then I needed to know how to reach each of those id’s and get a value. Here is where the confusion comes for me. The literature states that the parseInt function parses a string argument and returns an integer of the specified radix. If it is not a string, then it converts to one using to String. I get what this says on paper, however all it did was iterate through the 24-hour clock id’s one after the other. I guess because this is already a number which is already a value it just returns the number. I may have answered my own question.

Contributors

Looked at different code from GitHub repositories and stack overflow.
received some help from my TA Aiden to get the html working properly