JavaScript Project and Phase 4 with Flatiron School
Wow! I made it through I think one of the tougher phases besides(phase 1). It has been a wild month since last blogging about my experience and education progression in becoming a software engineer. We began the phase learning a new language, adjusting back to more of the beginner’s mindset. I reminisced Phase 1 of the boot camp when I began learning Ruby and how to code with it. I can’t believe I made it all the way here through to learning JavaScript and submitting a MVP(minimum viable product) project.
JavaScript is a really fun language to put to practice, once you’ve learned the fundamentals and its capabilities. Manipulating the DOM and using asynchronous fetch requests were the main focus in our project for this phase. Manipulating databases and front end user interface, you can do many different things and create many different features depending on how you utilize the pillars of I’ve learned a lot, but only scratched the surface on capabilities for what JavaScript can do.
This was a more difficult project for me because I tried to further myself and implement PostgreSQL for my database this time around, and after spending almost a data working out problems I finally got it working and learned some new things along the way to prepare me for using Postgres in the future. I had to make sure to startup the postgresql service prior to booting up the rails server for my API backend…just one of the few problems I had, but that severely hindered the beginning time of my project. I digress…
My JS project is a little posting/commenting app I called Valheim World Share(yes, I know…very creative name). This app I designed revolves around the idea of sharing world info from the Valheim game where everyone gets to create a procedurally generated map based on random seeds and progress through killing boss monsters, etc. etc.
Seeing as my friends and I got heavily invested in the game, playing way too many hours sharing our world’s progression and sharing each others world seed codes to generate the same world ourselves to make our own world of it, I figured it’d be a good idea to stick with.
This project is a Single Page Application that manipulates the DOM and creates new entities through asynchronous fetch requests from the front end(JS) as I stated earlier. You can check out the repos here as well as my project demo video below:
FRONTEND REPO:
https://github.com/wizbeck21/valheim-worldshare-frontend
BACKEND REPO(API):
https://github.com/wizbeck21/valheim-worldshare-backend
PROJECT DEMO:
https://youtu.be/ck2n4_GCJK8
Here are some of the problems I ran into when building out my project and what I had to change to get it working properly:
Event Listeners being destroyed after creating a new entity:
before I knew the solution I coded my project thinking JavaScript would be “smart” enough to keep the Event Listeners every time I created a new entity, however I ,not so quickly, learned it would be the major downfall to my project.
While it is true you are able to add HTML using DOM manipulation by creating a function to return a set of html and add it onto the same html div tag or container for all the entities you want to be in..its highly volatile.
Ex:(some of the code is just expressing what would actually be in place just for this example. This is not my actual code.)
someFunction() {
document.getElementById('something')
document.innerHTML += `<div id="blah1">
<li> stuff </li>
</div>`
}Adding HTML like this does work however I learned from this stack Overflow question after searching for hours why my EventListeners were not working except the very last entity that was created was because of this:
I did not learn until about halfway through building out my project from the comment at the bottom about what is actually happening when you use the innerHTML += in JS. It completely destroys and recreates all content inside the HTML element we were trying to reach in the first place, thus destroying all event listeners that were previously created. After learning this I changed my tune and coded something a little more like this:
renderWorld() {let div = document.createElement("div")div.setAttribute("class", "worlds")let h3 = document.createElement("h3")let imgUrl = document.createElement("img")let h4 = document.createElement("h4")let p = document.createElement("p")let h5 = document.createElement("h5")let button = document.createElement("button")div.id = `world${this.id}`h3.innerText = `${this.name}`imgUrl.src = `${this.image_url}`imgUrl.style = "max-width: 60%;"h4.innerText = `Seed: ${this.seed}`p.innerText = `${this.description}`h5.innerText = `Creator: ${this.creator}`div.append(h3, imgUrl, h4, p, h5, button)
Sorry for the length, but this is what made it possible to keep my Event Listeners ‘listening’ and existing as I created new entities and added them to the dom using append( )…I have a new motto to use when coding JS: “Append is your friend”.
Anyways, this allowed for a much smoother sailing project to go along even though it was much more code. I am definitely not taking the shortcuts until I learn more about JS and what works well and what doesn’t, which I’m sure will come in time with practice and learning. After fixing that major issue I was having a blast setting up fetch( ) with the different HTTP requests I need to create, update, and retrieve entity information and persist it to my backend database to ensure smooth operation of my JS project.
That’s all for now, I am exhausted and going to rest for the few hours I have until I start the next phase. I am very excited to learn about React and hope to further polish my abilities in coding JS as well as learning about React.
