We created this application as a "cure to boredom". With technology nowadays it is becoming increasingly hard to grasp people's attention online. Our attention spans are getting shorter and shorter! We created this so users can search multiple animals multiple times and not only learn new things about those animals but see up to 8 silly little GIFs of them when they submit their search!
Nick Burr: " This project taught me a lot about the value of collaboration in front-end development. Working with a team is a whole different game. It is easy to work solo and implement your own ideas. When it comes to communicating thoughts with others, a lot of nuance comes into play. Our group definitely overcame scheduling issues and learned the value of having a good team that checked in with one-another frequently. In addition to teamwork, building our own application taught me a lot about API's and how to interact with them. My Javascript and HTML skills developed a bit more just by the fact that I was using them creatively. Additionally working with others made me see new ways to accomplish things that in ways I had not thought of before.
Sam Evans: "The one thing that sticks out the most is finding the similarities in other people's ideas, and working to implement them in a way that benefits the end goal. Ultimately, what we want is a functional base that's also aesthetically pleasing, and I feel we accomplished that. I've been working at home for over three years now, which has little interaction, so having small meet-ups during the week outside of class was fun, and also challenging as we all have fairly different schedules."
Diego Yavara: " "
P.J. Rasmussen: "This project taught me how to read other people's code a bit better; before this group project I sometimes would even struggle looking back at my own code and reading it if I didn't comment everything's functionality. Working in a group can definitely be challenging, and we all have different schedules outside of class which has been tricky but as soon as we decided on a solid idea and framework I think we really found our groove."
Link to live site & screenshots
Main screen/Home page
After "click me" has been pressed
After typing in an animal- for this example I used "Tiger"
Process Summary
Brainstormed website ideas and came up with a top 4, decided to go with something that would be challenging yet feasible
Created the repo from Nick's github, cloned it down to our individual machines and creating our respective branches
Had to go over the framework of the page a few times before we finally decided on a page layout
Delegated roles for styling and code
Spoke about how we would implement the acceptance criteria of the project into our repo
Started creating github issues for bugs and a "to-do" list, closed issues as they were resolved
Started adding our resources and process to the README and creating a google slides presentation doc
Credits
These were the API's that we used to make this project:
https://api-ninjas.com/api/animals
https://developers.giphy.com/docs/api
This is our google slides presentation document
https://docs.google.com/presentation/d/1IdHWlbsvGyLhjaecZKJzwxCol2qpp4L0OH3IYWnQAjQ/edit?usp=sharing
These are websites that helped each of us contribute to this repo:
https://github.com/public-apis/public-apis
https://bulma.io/documentation/components/modal/#javascript-implementation-example
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
https://www.w3schools.com/css/css_rwd_images.asp
https://codesandbox.io/s/gif-resize-zn6bn?file=/src/index.js:1338-1407
https://bulma.io/documentation/
Trever Oveson (TA) clarified a misunderstanding I had about asynchronous functions and the await method, and explained how they are used to our whole group. -
Jacek Hacking, Trever Oveson & CJ Sanders (TAs) helped out with some styling issues we were having due to a misunderstanding P.J. had with how Bulma containers/tiles worked and resizing the GIFs.