Hello! Since this is my first blog I’d like to introduce myself, my name is Brady Dorsey. I am currently attending Flatiron School in the Software Engineering flex program.
In this post I would like to write about my phase-1 bootcamp project. I was given the task to create a single page application, coded in HTML/CSS/Javascript. Json-server must be used to fetch data from a public API and persist the app’s interactivity, three unique event listeners must be used with three unique callback functions, and at least one instance of array iteration using array methods such as map(), forEach(), and filter() must be implemented.
The application I decided to create is a Dungeons and Dragons character creator. The idea came from me browsing through a list of public API’s, and I came across an API for the Dungeons and Dragons 5th Edition handbook.
Link:
https://www.dnd5eapi.co/
This idea felt perfect as I’m an avid RPG gamer and have had some experience playing Dungeons and Dragons with my friends in high school. I always thought that the process of creating a character was very time consuming, and the dungeon master was required throughout the game to keep up with the players stats as they progressed. I figured there could be a way to simplify the process of creating character, giving the user a brief description of the selections they are making while helping the dungeon master manage his party.
Now to the technical stuff, I set up my project files with the following files in place: index.js, index.html, styles.css, and images folder containing an image I used for the background of my app.
My HTML is written up and all the code is contained within 3 different containers:
The ‘header-container’, ‘create-character-container’, and ‘new-character-container’.
Whenever you open the page and the DOM is loaded, by default, the new-character-container is hidden in the CSS and the header-container and create-character-container is displayed.
The page when you first see it:
The header-container obviously is just the header, the create-character-container will have the character cards fetched from db.json, and the create character button is in a fixed position on the page. Whenever the button is clicked, the create-character-container is hidden and the new-character-container is displayed. I also added an event listener on the buttons to make a highlight effect whenever you hover over it.
The code thus far:
The user will now see the character creator,
At the top is where the user inputs his ability rolls. Unfortunately, I did not have time to implement any kind of auto-roll system like I wanted to so the user has to make their own dice rolls for the ability points.
The user may input the name of their character, the starting level, race, class, background, and alignment. Event listeners are added on to the dropdowns of race, class, and alignment.
Whenever the dropdown is changed, json-server fetches data from the API and returns some data giving information on the selections made and appends that information to the bottom of the page.
The race option shows you the speed, languages, and racial ability bonuses which get added on to the final ability score after creating the character. The class, for now, just shows you it’s hit die. And alignment shows you its description.
Once all choices are made the player is ready to hit the create character button.
Each value is assigned to a newCharacter object
Then a POST request is made which is sent to a running server, onto db.json
My fetchCharacterData() function is invoked in order to fetch the updated data within db.json, the user is taken back to the character screen, and the card is successfully added to the list of existing characters.
That is basically it as far as features and basic implementations. I faced many challenges, especially with json server and tweaking the DOM to get it to work the way I wanted it to. As far as accomplishing the criterias I needed to meet for my school, it is a complete project. However, I intend to go back and work on this project some more, like implementing an edit button so each character's stat may be changed at the players will. Also the character creator as a whole is not complete as there is a little bit more to creating a character than the basic information that may be input, such as inventory, starting weapons, a lore description, etc. It is definitely an application I believe is more useful for dungeon masters, to keep track of the party's stats and names.
As a conclusion to this blog I would like to briefly talk about one of the biggest problems I had working this project, the delete buttons.
The issue I had initially was the delete button was unresponsive altogether. And whenever I did get it to work only the first delete button would respond to my hover, but the function could not be invoked. Adding a single button is simple, add 1 button, 1 event listener. But I found whenever multiple of the same button was to be created, an event listener needed to be added for each button. I solved this problem by creating a for loop which would iterate through the array each existing character and add the event listener for the button as it is created
Better solutions may exist, but this is what worked for me.
That is for my blog, this project overall took me about 2 weeks to make. It only consists of a single html file, no page refreshes in between containers. It was a lot of fun to create, I hope to expand on it in the future, there are definitely a lot of improvements that can be made, but it works! Thank you to whomever is reading, I plan to create more blogs in the future either showcasing my future projects or possibly write about some coding topics I’m having trouble with myself. I hope this was somewhat informative and/or entertaining! Happy coding!
Latest comments (0)