Devlog of pet calendar website

March 06th, 2023

Devlog #1: Planning and creation of basic site

Purpose of the website: Allow clients to see scheduled appointments so there is no confusion, also a place to digitally save the schedule instead of on the physical calendar where things can be covered up.

Overall plan:

1. Embed google calendar onto website so clients can see availability.
2. Google Calendar events controlled by parents on their own account with only events created for the appointments are set to public.
3. Photo gallery of pets.
4. Navbar to have calendar, photos, and about page linked.

Basic site built with two tutorials, a photo gallery page tutorial and a navbar tutorial.

Changes made include embeding the Google Calendar at the top of the site, editing the navbar javascript theme button to work for the entire site, and changing the borders of the photo containers to match better with the navbar.

March 07th, 2023

Devlog #2: Half deployment and some editing

Pushed site code to Github and deployed it using Github Pages at this link here. Will connect it to its own domain name in the future after site is complete. Then created new branch to work on editing the navbar tabs, linking them to their respective pages, and changing the svg icons. Next steps will be editing the Google Calendar style and adding the correct pet photos.

March 08th, 2023

Devlog #3: Separate tabs and new to do list

Finished separating out navbar tabs to calendar, photo gallery, and about pages. Also updated readme. While going through the site thought of some improvements to code base and quality of life for site users. Also began to use different branches when making any changes as the site is currently deployed using Github Pages.

Todo (in no particular order):

1. Change SVG icons.
2. Themify button should not move position back to top of page.
3. Navbar code shouldn’t need to be copied and pasted on every page, can probably condense somehow.
4. Google Calendar embed needs to be stylized.
5. Photo gallery needs to be updated.
6. Change Google Calendar embed to use mom or dads public Google Calendar.
7. Update about page.
8. Buy domain name and connect it to Github Pages.

March 09th, 2023

Devlog #4: Stylized Google Calendar and updated about page

Stylized Google Calendar using the Styled Calendar webapp, which allowed CSS customization to make the calendar fit the website theme better. The about page was also updated to include links to the source code on Github and to this blog on how the site was created.

Updated Todo (in no particular order):

1. Change SVG icons.
2. Themify button should not move position back to top of page or just delete it.
3. Navbar code shouldn’t need to be copied and pasted on every page, can probably condense somehow.
4. Photo gallery needs to be updated.
5. Change Google Calendar embed to use mom or dads public Google Calendar.
6. Buy domain name and connect it to Github Pages.

March 10th, 2023

Devlog #5: Fixed mobile margin errors

All pages had margin errors that were not addressed in the previous push, as I forgot the margin changes I had made for desktop should not be used for mobile. Fix was made by changing the margins to better fitting values when the screen size is detected to be below 600px max width. The Google calendar was also being squished too much on mobile due to changing the width parameter from 100% to 50%. After testing I landed on a width of 65%, where the mobile events calendar would not be squished and awful looking while the desktop calendar does not look so weirdly wide.

No updates to todo list.

March 20th, 2023

Devlog #6: Updated svg icons

Watched quick videos on how svg icons worked, which was really interesting, here’s a video on how it works. Then found the correct calendar, photo, and about icons I needed for the website and updated them while keeping the same fill color when the icons are highlighted. Google embed calendar has been updated and connected to parents Google Calendar, so the only things left to do is update the photo gallery, get a domain name and connect it and the website should be all good to go.

Updated Todo (in no particular order):

1. Themify button should not move position back to top of page or just delete it.
2. Navbar code shouldn’t need to be copied and pasted on every page, can probably condense somehow.
3. Photo gallery needs to be updated.
4. Buy domain name and connect it to Github Pages.

March 23rd, 2023

Devlog #7: Updated photos and domain name

Updated photos to pictures of pets and also bought the domain name of syossetpetsitters.com, connected it to Github Pages by following this StackOverflow article. Was a little worried the subdomain of the github repository would cause problems but looks like Github fixed that a while back. It was pretty simple, just had to create the DNS entries on namecheap dashboard, add the domain name to the Github Pages settings, and now let it propagate and check if it completely worked in a couple of hours.

Updated Todo (in no particular order):

1. Themify button should not move position back to top of page or just delete it.
2. Navbar code shouldn’t need to be copied and pasted on every page, can probably condense somehow.