This semester I was able to greatly expand my JavaScript skills and I gained some knowledge of vue.js as well. The projects and assignments challenged my skills and pushed me to learn a lot more. Here are some projects I’m particularly proud of.
Jukebox Jamboree
The jukebox tested my JavaScript skills a lot. At first, I thought about trying to make a JSON feed to pull from, but I realized it would be a lot easier to just create arrays since the project is much more modest in size. I created three arrays for each person with the song file, the name of the song and an image of the song. I wanted it to be a personal playlist for each person.
The function I created was easier than I expected it to be, but I made good use of arguments so I could coordinate the correct array with the corresponding button. I also added a bit of css animation on the image of the album so that it spins when you hover over it with your mouse. I was happy with how the project turned out, and I had fun styling it to look like a music player.
Cat Components
The Cat Components assignment taught me a lot more about vue.js, including how to create props. I really enjoyed working with vue and I hope to be able to expand on it more in the future and continue improving. I have a full explanation of my understanding of the project on the website for it, but essentially we created a prop so we could target different breeds and present them on the website. I also pulled other components from the API we were sourcing data from, and created a slideshow of the different cat photos for the corresponding breed. Finally, I tied some of the numerical descriptions of the cats from the API, like their child friendliness level, to a css class that looked like bar graphs to compare them.
Here’s a glimpse at some of the JavaScript used to pull in the API data and create the props.
Restaurant roundup
For my final project, I wanted to work on creating my own JSON feed after working with others for the semester. My professor helped me get set up by providing me with some files to set up a submission form for reviews, a connection.php file and a receiver.php file that I believe moves the data from the submission form into my server data. This project required a lot of trial and error, and there were multiple times I had to scale back my original idea to make it a bit more achievable.
I created 5 data tables/JSON feeds. Breakfast, dinner, lunch and other held data I entered manually of the different restaurant names, descriptions, genre, prices and an image. The students table receives data submitted from the review page and repopulates it on the main page under the reviews heading.
After I figured out how I wanted to set up the website, I realized I could use one function for each of the meal categories and just alter them slightly.
This was the function I used for each dining category. At first, I thought I might be able to use vue.js for this project, but I quickly realized I wasn’t confident enough yet to build the whole project around that. I ran into a few problems where my other json feeds weren’t showing up, which just required me to change the permissions on the server side.
For the review section, I reused this form my professor sent me and repurposed it. On the right is the code I used on the main HTML page to get the submitted reviews to populate on the home page.
Overall, I’m very happy with this project and with how the CSS styling turned out. It was definitely challenging, but I was able to create essentially what I had in my head.