CapyCrew

• 

  sleepy capy

• 

  blue capy in the clouds

Inspiration

Coming into this Hackathon, we wanted to make a website that was both fun and allowed us to expand our knowledge. After exploring various ideas, we stumbled upon a creative project called “Sneeze the Dragon.” Inspired by the playful interactivity, we decided to put our own spin on it– an interactive capybara website!

What it does

CapyCrew is an interactive web experience where users can engage with a digital capybara in a variety of fun ways. By using different key inputs, users can unlock surprises and trigger exciting animations, making every interaction a little adventure.

How we built it

The project was built using HTML, CSS, and JavaScript. We designed the website to be visually engaging and interactive.

Challenges we ran into

While we are familiar with HTML, CSS, and JavaScript, this was our first time building a game. This pushed us to go beyond static websites and dive into creating interactive web elements using Javascript. While we are familiar with the basics of web development, we faced a significant learning curve when it came to making the project interactive. Handling user input, detecting key combinations, and triggering animations presented new challenges that we hadn't encountered before. We struggled a lot with lag for the movement and color-changing functions of our code. When choosing the functions we could add, we were faced with our limitations with our Javascript knowledge. We decided to narrow down the functions to be fun and still functional.

Accomplishments that we're proud of

Despite the challenges, we are thrilled with how CapyCrew turned out. We successfully built an interactive website that engages users through playful animations and surprises. The website is both fun and functional, and we're proud to have added an extra level of interactivity to our web development skills using new javascript tools like "addEventListener”.

What we learned

We gained a deeper understanding of how to build dynamic websites using HTML, CSS, and JavaScript. This project was a great opportunity to dive into more advanced JavaScript concepts like handling key events, animations, and optimizing performance.

What's next for CapyCrew

We're excited to add more interactive features, like additional key combinations and hidden surprises. Our goal is to make the capybara experience even more engaging and enjoyable for users.

Built With

• css
• github
• html5
• javascript
• vercel