Hi,I recently created my first JS app for my flatiron Phase 1 project.
I am not sure if it was due to my nervousness but this was a tough one for me. I just started school again after recently losing my hear so this was a new battle all together. Dealing with adjusting to the new way of life and continuing old goals was tough. BUT enough about me lets discuss the project.
The idea I had steamed from a random memory that popped up in my head. When I was younger I remember my friends and I spent more time trying to decide which character to use in SmashBros then the actual time playing. This project was meant to alleviate that issue by taking the guessing out of it.
I wanted the menu to look familiar to the menu of the SmashBros selection page. I started with the HTML file and styling with the CSS. During my time at Flatiron I learned about styling libraries. I used materlizecss.com to created the menu that I had in mind. I was able to create a dark and light background effect for the project phase. This was a cool addition and seems to be standard in all apps now.
With the style set I moved on to the database and created a db.json file that would be in place as my server. I created the object ‘fighters’ with information about 19 random characters, this includes the “id”, “name”, and the link to fetch the “image”. This was ran with “json-server — watch db.json.
With the styling and database created it was time to make the page functional. Setting up the DomContentLoaded function was first. When the page is loaded I set up an alert with the phrase “Choose ypur fighter!” Once the alert is accepted the fighters would show up on the screen. You would then have the option to select a random fighter with the random button or reset the whole selection with the rest button. The premise is as you play multiple games the app would allow you and your playmates to select a radom player until all are selected so that no player is chosen twice and it levels out the playing field while removing the burden of choosing.
At the end when you have selected all of the characters you are prompt as such and instructed to reset the page and start from the beginning again.
The one of the main issues I had was with the snippet below{
“id”: 7,
“name”: “Arya Stark”,
“image”: “https://cdn.multiversus.com/roster/arya-t.webp"
}
— — — — — — -
function addFightersToArray() {
fetch(“http://localhost:3000/fighters")
.then(response => response.json())
.then(data => data.forEach(fighter => fighterArray.push(fighter.name)))
Only pushing fighter.name to the array resulted in me having to write an additional function to identify the card the information was present in. Many of the fighter names contained spaces, so when I tried assigning them as the IDs of their corresponding cards they could not be found using interpolation.
To correct the issue I created a new function called showFighters this helped identify the card the information was presented on.
function showFighters(fighter) {
let fighterContainer = document.getElementById(“character-select”);
const div = document.createElement(“div”);
div.classList.add(“card”);
const h2 = document.createElement(“h2”);
h2.textContent = fighter.name;
h2.id = fighter.name;
const img = document.createElement(“img”)
img.src = fighter.image;
div.append(h2, img);
fighterContainer.append(div);
};
- Coding is problem solving. Having a routine on breaking down and analyzing the problem before writing any code is conducive to success.
- Syntax was my number one issue when getting tripped out. Did you close the parenthesis? Did you omit a comma? While VSS holds your hand as much as possible these are still very easy mistakes to make.
- Be very mindful of the scope of your variable/constants/functions. While it is best practice to make these as globally scoped as possible, there are going to some exceptions to this. In particular, if your page doesn’t function until DOM content is loaded. The asynchronous nature of this EventListener means they variables need to be accessed after your script fully loads.
- Any instance of code used multiple times over the course of your script should be converted into a helper function of some sort. This will allow you to both streamline the code and for it to be cleaner and more easily readable.
- Define variables/constants/function with names that pertain to their data or functionality. This too will present a more understandable code for your own troubleshooting or for others who are dissecting your code.
