WEEK 1 I ended up changing my concept a bit to popular dogs that one would find on Facebook or in memes nowadays. My audience will be teens and adults who are often on the internet and may or may not know about the significance of dogs on the internet.
I created an index page and a lingo page. There will be three pages in total: home page, browse page and terminology page. So far the index page has the text and two buttons. The lingo page has text and a table. I was working on a navbar for the second page so that people can navigate to the other pages.
I didn't get to finish the home page as planned because I had a few issues stylizing the navbar to make it stay put and be responsive, and I haven't finished editing all the dog photos and soundclips. I'll keep playing around with the navbar because I've made a reponsive one before which I might look back on. I'll also look up any fixes to why the positioning is weird.
WEEK2 I fixed the navbar and now it should be fully responsive. I added the browse page but haven't added much. I'm in the process of trying to find good full body photos for all the dogs to be featured. I added the keyboard to the main page. I'm haven't made it responsive and am trying to learn flexbox to make it work when resized.
WEEK 3 I made the dog keyboard scale in size when window is shrunk. I had been struggling with it for a while, but flexbox made it so easy (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Added barks from clips made in Audacity sampled from Gabe the Dog. I added a few examples to fit under some of the doggo lingo terms that toggle slide up and down when clicked.
Added dogs and information to the browse page. Took a while because I was still deciding the most effective way to show information without it being tiny. Ended up making a div box slide up when a dog is clicked to reveal more information. Added CSS and jquery to make it pretty (you can tell I love jquery, slideToggle, and CSS fades). Made page responsive and used flexbox to make dogs responsive.
Added category filters to show certain dogs when certain options are selected. Took a long time because I couldn't couldn't find a source that was clean and worked efficiently with my code until I found a helpful stackflow response from Rusty Jeans (bless stackflow https://stackoverflow.com/questions/15397721/call-a-function-when-a-particular-select-option-is-chosen).
TROUBLES & PLANS: I had used filler images for the dogs and it worked like a charm. However, adding in actual photos did not work as planned, so I will probably find and edit new images soon. Making the keyboard for mobile was becoming a struggle, so I will probably switch the images to horizontal ones in the future.
FINAL SUMMARY The dog keyboard will appear sideways for mobile users. Browse dog images have been added in. Overall, I thought this project was fun (because dogs are great), and I definitely learned a lot (I can sorta build a web app from scratch!). This project made me realize how great libraries are; I fell in love with the ease of JQuery and Flexbox and will probably experiment with CSS Grid in the future on my free time. I hope to come back and hopefully add a little bit more to this app too because there were a lot of things I would like to add if I had the chance.