dylynniscoding

[dylynniscoding]

I Made a Spell Search for DnD 5e

The time has come. The first big project for class. It was daunting. It seemed so far out of my abilities I thought to myself "What am I going to do? How can I do this? Am I even capable?" The project criteria were to create an app using HTML, CSS, and JS that accesses data from a public API while running on a single page and has three distinct event listeners. Racking my brain for some kind of project I could make, I scoured a list of APIs that I could potentially use hoping the idea would come to me. Scrolling through the enormous list I started to lose a little hope. How could I even get this to work anyway? None of these are jumping out at me as my idea of exciting or fun. Until I found an API that was simply a list of all the spells in Dungeons and Dragons 5th Edition. Being the nerd that I am, an idea sprang forth in my mind like a star bursting into existence. "What if I made an app that searches the spells?" Brilliant. Not original but hey that's not the point. It was *my* brilliance. After coming up with the idea it was time to start plotting out the basic ideas for the app. What would it fundamentally do? Now I'm pretty practical and methodical when it comes to coding. So I did the first thing I thought would make sense, write comments for every single thing the app is supposed to do! Things like "// Fetch data from API", " // Convert data to JSON", "// Store the results in spellArray" You get the idea. I even broke up the sections of the functionality with comments you'll see below like "//spell search" And to clarify I will be primarily talking about the javascript here as it is the main focus of this phase of the class.

After this, it was only a matter of writing the code for each bit of comment that made everything work. This is a gross oversimplification of course as it was about 95% of the task. But I digress.

And it worked! Against my own initial anxieties and doubts, I had a working searchable spell list! You can bet I was very ecstatic about this development. But of course, that was only one of the three event listeners I needed to satisfy the criteria. So I thought, "Okay so what can I do now?" and then it hit me again, another star created in the universe of my brain. Why not add a random spell button? Random things are fun and I could use a keyboard press event listener! So I did just that.

And again, another working piece of code. "Maybe I can do this after all.", I thought to myself. Two out of three down. The last one I will admit I got the idea from the instructions for adding a light and dark mode.

Okay done. It worked too. Only it wasn't exactly obvious that the light/dark mode button could be clicked. So I added a pointer.

And with that, I had four. But I wasn't satisfied there. I noticed something in my code. I had a redundancy for the API call. It was unnecessarily calling the API every time the spell was searched even if it was searched previously. So for example, if you searched "Fireball" you would get the results for Fireball from the API in a div. But if you were to search Fireball a second time, it would call the API again despite already having the data. I didn't like this. It's not like it was slow by any means but it would be just a little bit *faster* and more *streamlined*. Plus it cleaned the code up a bit. So I began by making a place for the spells to go locally:

Then, I had it check if the spell details had the spell or not, if not, it would make a call to the API:

If it did, then it would pull from the locally stored spell details instead.

And in order for this all to work I needed to create a function that searched for the spells.

Finally, I had it. The fastest (I think) possible DnD spell searcher I could make. And I thought back to how I felt before when I thought I couldn't do this and I was pretty happy about it.

You can see the finished product here and of course the GitHub link here.

[dylynniscoding]

Welcome.

Hello and welcome to my coding blog. I'll be here talking about my process through a coding boot camp and all the projects and things I make along the way! As of writing this, I'm pretty new to all this so it will be mostly me posting my very new experiences and findings. Disclosure that this is a requirement for the class but I thought doing it on Tumblr might help connect me to others who are in the field either learning or well-established. Either way, I'm excited to start and if you found this, I hope you enjoy it.