AnimalZ

Inspiration

The inspiration for AnimalZ came from a desire to create an engaging and educational tool that makes learning about animals fun and interactive. Using colorful flashcards with emojis and fun facts, we wanted to capture the curiosity of learners of all ages while maintaining a playful, cute aesthetic that makes the learning experience enjoyable.

What it does

AnimalZ is an interactive web application that features 24 adorable animals with educational flashcards. Users can click cards to flip them and discover fun facts about each animal. The app includes a powerful search feature, multiple filtering options (alphabetical, by category: mammals, birds, aquatic, reptiles), and a smart chatbot buddy that answers questions about all the animals. The chatbot can handle complex queries like "Which is the fastest animal?" or "Show me all aquatic animals."

How we built it

AnimalZ was built using HTML, CSS, and JavaScript! The flashcards use CSS 3D transforms for smooth flip animations. The filtering system dynamically renders cards based on user selections. The chatbot uses intelligent pattern matching and regex to understand and respond to a wide variety of user queries. All animals are stored in a structured data array with properties for name, emoji, fun fact, and category.

Challenges I ran into

Building a chatbot intelligent enough to understand varied user queries and intent was pretty hard at first.

What I learned

Both egex pattern matching for natural language processing in a simple chatbot and how to structure data and filter it dynamically based on multiple criteria.

What's next for AnimalZ

Implement sound effects and animal noises when flipping cards, add difficulty levels with quiz mode where users answer questions about animals, and create user profiles to track which animals they've learned about.

Built With

• css
• html
• javascript
• python