Connecting the Dots
When first approaching my first JavaScript project I felt uneasy, especially when I was asked to also create a back-end from what I learned in ruby to create a website where I can access objects from the back-end while only using buttons on the front-end. Seems like a lot, which it was for someone who is approaching this for the first time. I had the feeling of “what to do first…” when you have an empty text editor in front of you with such a task. This Is how I approached my project. Here we go!
So first thing that has to be done is creating the back end which can be a little daunting but thankfully there is a way past this feeling with ruby on rails! So theres a way to quickly build up the back-end by generating a scaffold! What generating a scaffold does is create a complete controller filled with the Restful routes, from index, show, to patch and delete. So that was a huge plus to get out of the way, of course I had to make sure I named it correctly so this was my result post scaffold generating.
One might notice something different thats not Included when scaffold is generated which is serialized data. This is something I made on the side so only certain information is passed through, just like the name Is only displayed for the user. I also made sure I used render json so it could be passed into the front end. After this, I routed the routes and made sure everything checked up and the fun part began, using the front-end which was unique and challenging.
So normally what gets done is first creating an html file and a javascript one as well, separated from the back end files and filing them accordingly in folders being called front-end and back-end or whatever is seen fit. So what I approached first is creating a simple HTML page and making sure the back-end ran properly before doing anything more. So after creating a skeleton for on HTML for my JavaScript, I then start creating divs within the HTML and naming them numerous things to call upon while in JavaScript. This is very important for using “getelementbyid” and “queryselector” in order to connect JavaScript and HTML. First thing I did was create a class and put a constructor within it that adds the values given by the user, the constructor takes in the arguments that was created within the background and within the constructor we have it set to “this” which takes the input and have it set to equal the name or age.
I then set a global const that grabbed the id of one of my divs called pokemon-form and had it set to pokemonMaker which is shown here:
We then take this and add an event listener that has it set to a response of submit and have a function within it as well. Within the function we have an argument set to “e” being the event. Within the function I now have multiple local variables set to all of the attributes that are in a pokemon and have it set to a query selector to grab each individual one for later use in the fetch method. We now have fetch to the location of where all the pokemon are and then stringify the pokemon with each individual variable that was previously set before. I then set then with a function of the response to return the response with json, then we once again use then to create another function this time creating a variable that grabs a div in the HTML that is empty that were going to use to put all of the pokemon we’ve created within it. we make sure that all of the pokemon are created with a p tag in HTML using create element.
The result:
This was one small part of my project which had me very proud to accomplish! Theres more bells and whistles but this would be 20 minutes longer if I were to type it all out, so thats it for now!
Thanks for reading this along the way, it might be confusing but I’m trying my best to word everything in English from code and this is one of many ways this helps me feel more confident in presenting my work to people so I recommend everyone trying to start a blog explaining their code. It really helps understanding it better and being able to explain it more easily! Thank you for your time! Till next time!