Inspiration
On a technical level, I wanted to create something that allowed me to practice my HTML/CSS skills, so I decided to make a web-based project. As far as the impact of the project, I wanted it to cover a range of topics, from assisting animals and their owners, to improving the environment of animals, to contributing to the well-being of animals. After long deliberation, I decided I wanted to make a dog breed compatibility quiz for potential dog owners, with the goal of supporting their breed-selection process and enhancing the match-making within the dog adoption space. Throughout my life I've seen many people select their dog based solely on aesthetics or an instant emotional connection, when in reality there should be so much more that goes into picking a breed, as the dynamics should be mutually beneficial. Dog breeds vary greatly from their temperament, to their activity needs, to their trainability, and so much more. Carefully choosing a breed that is compatible with your lifestyle, expectations, and preferences will make both your life and your dog's life significantly better.
What it does
My project provides the potential dog owner with an aesthetic web-page that displays a seven question quiz. This quiz has relevant questions that one should ponder while considering what dog breed to get. Once the quiz is submitted, the page automatically scrolls down to show the top three closest dog breed matches based on the summation of the quiz responses. These results include an image and brief description of all three breed suggestions. This project is not an educational tool where you can find detailed information about each breed, as it's purpose is to provide three educated, personalized breed suggestions that you can independently research further.
How I built it
I started by creating my project folder and opening my files in VSCode. Before implementing any Javascript, I laid the UI foundations with HTML and CSS. I put a lot of thought into the color palette, as I wanted it to seem fitting for a dog-themed quiz. I decided that the primary colors blue, red, and yellow were fitting choices. While I've used HTML and CSS many times, I am still a beginner and had never built a major project like this with Javascript before, so ChatGPT was a major resource for me when I needed help or had technical questions. ChatGPT helped guide me through integrating Javascript to make my website functional, from processing the quiz results to creating an automatic scroll to display the results. This project was an amazing learning experience for me, as it pushed me to try something new and challenging. It also gave me practical experience with Javascript so I could see how it interacts with HTML and CSS. I also used ChatGPT for the brief dog descriptions and helping me categorize each breed, as I knew that was a simple way to save me from spending a ton of time on non-coding related tasks for the project. After creating the bulk of my HTML/CSS/JS files I fine tuned the kinks and put the finishing touches on the aesthetics. Once I was content with my project, I used Git to push it to Github.
Challenges I ran into
Having an Intuitive Flow When testing my website, I noticed that when I hit the "Submit" button after the quiz it would look like nothing happened. I knew three breed suggestions popped up under the quiz so I knew to scroll down, but it wouldn't be intuitive for anyone else to know or do that. They would probably think the quiz didn't work or the screen froze, as nothing would indicate that they need to scroll down to see the results. To fix this, I implemented an auto-scroll feature with Javascript. Again, this was an amazing learning opportunity for me, as Javascript is completely new to me and ChatGPT was an amazing resource for this. At this point, the intuitive flow issue was solved, but the solution simultaneously created another problem, which is discussed below.
Preventing The Background Image Automatically Resizing After Auto-Scroll For the background of my website, I have a blue background color with low opacity overlaying an image of a bunch of dog bones. I noticed when testing the website that when I hit the "Submit" button and the page auto-scrolled, the background image got significantly larger. This was a cosmetic issue, but I felt that it diminished from the clean, professional look I was striving for. To solve this issue, I made the background image fixed. This was a pretty simple fix.
Accomplishments that I'm proud of
Going into this Hackathon, I wanted to gain practical exposure to Javascript and actually incorporate it into my project, despite never using it in a major project before. With the help of ChatGPT I was able to successfully make this happen all while seeing how the language works in practice. I love project-based learning, which is exactly what I got. I am also proud of my CSS styling, as I was very meticulous and intentional with it. It also took a long time to integrate photos of the breeds into my project, so I'm proud of completing that redundant task.
What I learned
I learned that background images will resize with an auto-scroll unless you specify that they don't. I also learned that Javascript is really the backbone of a functional website, and it's not as scary as it looks.
What's next for Dog Breed Compatibility Quiz
I would say that while I am very happy with my project and it feels complete, there are definitely features that could be added to it in the future. While I didn't intend for it to be an educational resource with details about each dog breed, I think that could be a neat feature to add to the three breed suggestions so users have a little bit more context as to why those specific breeds were suggested for them.
Log in or sign up for Devpost to join the conversation.