By Chris Conley
As part of my early experiences in the Flatiron School's coding program, I undertook a project that served as my introduction to the fundamentals of web development—specifically, event listeners, DRY programming, and API/JSON fetching. The project, named "Superhero Showdown", was a web application that allowed users to engage with a short list of superheroes in a simulated battle environment. This endeavor provided a hands-on approach to learning JavaScript, HTML, and CSS. Here, I share the process and insights gained from this project.
Project Overview
The end goal of the Superhero Showdown project was to create an interactive web app where users could select superheroes, view their statistics, and compare them in a very basic way. The project required the integration of front-end development using JavaScript for interactive functionality, HTML for the web page's structure, and CSS for its visual design. I also dipped my toes in backend dev when fetching from the API and interacting with our .json.
Data Management and Dynamic Rendering
The first iteration of the project was going to utilize access to a free API "SuperHeroAPI" for fetching data. After wrestling with fetch and some unforeseen challenges around importing an apikey, I determined that it would simply be more efficient to create a .json from which to fetch our heroes' data.
Interactive Features
Incorporating interactive elements, ie: selecting/creating a hero and applying visual effects(mouseover,mouseout) to meet deliverable requirements, represented a notable learning curve. This part of the project helped me understand the importance of scope when working with iterative programming and event listeners in JavaScript, creating dynamic user experiences.
HTML and CSS: Structure and Design
The project also served as a practical introduction to HTML and CSS, helping me become more comfortable with structuring web content and applying styles.
HTML Structure
I furthered my understanding of organizing a webpage using basic HTML elements. While I had some basic and conceptual knowledge of HTML, I explicitly learned about the challenge of creating vs modifying HTML; learning how to expand my HTML code in tandem with my JS/CSS as needed.
CSS Styling
Applying CSS was the next step. I learned about simple properties, flex, filter, grid, etc. for layout design and eventListener interactions. Major credit for the CSS refactoring goes to my collaborator in this project, Nick Gallegos.
Challenges and Key Learnings
One of the key challenges I faced was managing the state of the application, particularly in resetting selections after each showdown. Furthermore, I faced a handful of fretful refactors and one distressing wipe/fresh start to our project in order to properly implement our core "renderHero" function. While I hesitated in the reconstruction process, there's no doubt that I was able to learn a great deal from my mistakes.
Conclusion
The Superhero Showdown project was a foundational experience in my coding journey, being the first time I was able to create something from nothing. It emphasized the importance of JavaScript in adding interactivity, the role of HTML in content structuring, and the impact of CSS in design. This project was instrumental in building my understanding of web application development from the ground up.
Nick Gallegos SuperHero-Showdown collaborator and aspiring full stack wizard!
Top comments (0)