DEV Community: B-awhite

JavaScript and its Form

B-awhite — Mon, 24 Oct 2022 17:48:40 +0000

A submission form is a form used to collect a users files and data allowing a website or program to receive a file from a user. When building my JS project using a form was the way I was able to add things to my application.

The form submission event uses the .addEventListener and the submit event. Once the form is grabbed they are both added to it. The next thing to think about is the forms default action to refresh the page when the submission is handled, to remove that behavior so it won't be refreshed the .preventDefault method is then added to the event.

form.addEventListener("submit", addPlace)

My next steps were. to create an element for the input values to be store in and assign it the desired attributes.

function addCreateForm() {
    const formContainer = document.getElementById("form-container");
    const form = document.createElement("form")
    form.innerHTML = `<input id="name-input"

When that's completed that new element was then appended to the form container previously grabbed.

At the time then event listener was added a callback function was as well, this function holds the code for the POST request needed to add our new element/s to the page. This function sends a fetch request to the backend database after setting variables for the targeted element then sends that POST request form the user values inputed in the form.

The new world that is JavaScript has many steps as I've learned but through different event listeners like the submit event for forms, you get a pretty good idea of just how much can de done with all the events available to be used.

Into the JS verse

B-awhite — Mon, 17 Oct 2022 07:22:12 +0000

If you're starting out with Ruby like I did and move on to JavaScript you're warned about how different it's going to be. When beginning this section of the curriculum I got to grasp just how different it really is. Being that my first few projects seemed to be a continuation of what was previously learned, JavaScript was like going into a whole new world.

Been There Done That is an application that acts like a grocery list for all the places a user would want to travel to in the world. All that needs to be done is the user types in the country/state and the city that's wanting to be traveled to. After that the form is submitted with a button to add that location to the list. If that place has been crossed off the list or maybe is just not looking to traveled to anymore there's a delete button provided that will remove it.

Prior to Js, event listeners were just one thing that was unheard of but stuck out to me throughout the material and made a lot of sense upon learning the many ones and ways they're used. The thought of the code listening for certain events to occur in order for an action to be made gave a good idea of all the programs that can be made using them. Of course the ones that immediately come to mind are the click events but the DOMContentLoaded and form events caught my attention. While some events like the click event are pretty straight forward the DOMContentLoaded event is one done behind the scenes to insure that the DOM loads before the entirety of the HTML script is loaded. The form submission event is used when a user submits a form to the server, most likely using a button, making a POST request. With this event extra steps have to be made for it to work. One of those step is when sending a POST request .preventDefault() needs to be added first to the event being passed in to prevent the default submission action of reloading the page.

function addPlace(e) {
    e.preventDefault()
    const locationInput = e.target.children[0]
    const cityInput = e.target.children[1]
    fetch("http://localhost:3000/places", {
        method: "POST",
        headers: {

Those are just a small fraction of the event listeners and the big world that is JavaScript. Even though Js was completely foreign to me the material throughout my learning made it easier to follow along and actually understand how to build a functioning application. There's so much to learn and do in this new language, and I'm looking forward to see just what all can be built.

Entering the world of JavaScript

B-awhite — Thu, 10 Jun 2021 02:46:50 +0000

Truthfully when starting this program this is what I expected all coding to look like. Every step through this journey gets more complex and shows me just how much you can and must do to build a high functioning application. As far as building functionality, JavaScript seems to be in a class of its own. Although this phase of the program made me feel like being back at day one; it really gave me insight on how other apps are made and what it takes to make them great for a user to navigate them.

My JS app is all about the most beautiful beaches in the world. The backend of my project was pretty simple to get done with my prior rails knowledge. Even with the knowledge of being able to use scaffold this time around, it showed me exactly why I wasn't allowed to use it previously. Additionally it sped the process of building my backend up so that I could focus on the frontend JavaScript thoroughly. I created an api with seeded data of just a few of the beaches the world has to offer. This list has the options to add to, delete, and edit. Each beach also has a comment section where people can come together to talk about and share their experiences on said beach.

Each function contained a lot more code than a rails method. Most of them included arrow functions in addition to the backend methods. The logic to show different errors linked back to the method that housed the specific error. It seemed to be almost like everything in the index.html file was like building the layout in rails. In addition the index.js file contained all the views that would have had their own folder. The logic of how to handle each method in each function combined with the event listeners to be able to use them.

All in all with my project build I know that I've only hit the tip of the iceberg and that there's so much more to learn in this new language.

First-Rails-Project

B-awhite — Fri, 15 Jan 2021 20:18:32 +0000

I was warned before starting a rails project for the first time that it would be easier to make knowing the background Sinatra knowledge and having already created a Sinatra application, but not to take all of the built-in code for granted. Being that I have gone through building a Rails application I now know what they meant. I will say that even though there were a lot of similarities between the two and that rails has so many wonderful built-in functions, when build it out from start to finish you quickly see just how much more complex it is. One thing that shows that complexity is how rails has a completely different file for just that routes you’ll need, leaving the controllers as plain ruby classed that holds our actions and turns them into ruby methods instead of having it all displayed in the controller.

Some of the things built in rails that made the process of building my project just a little more awesome were the error messages available through validations in my models, and the rails generators you could type out in the terminal. The validations helped me with not only not having to put the errors in my code but also with my indecisiveness of what I want my error to say. When it comes to the generators, I used the resource option for the most part, it gave me a controller, model, created a migration table, and gave me the basic routes for each command I used.

For each project that I do I feel that much closer to my goal of being able to call myself a master-coder . I can’t wait to take my simple applications and turn them into something big and beautiful I can be really proud of

Sinatra Project

B-awhite — Mon, 23 Nov 2020 05:36:47 +0000

Going through this project was totally different from creating the first CLI project. Although Ruby was still being used there were many more factors that had to present for this application to work. Learning the different components of the app, what each section did, and how everything should flow made bringing those pieces together to function simultaneously that much simpler. Being that most of our methods were built in the gems and macros that wrote some of our code for us I found that when I started off there was somewhat of a relief.
I did my project with the trips I can’t wait to take once traveling is safe again on my mind. Once a user is signed up the can begin to start a list of their dream post pandemic travel places they plan on going to. They then have the options to delete that place maybe if they no longer wish to visit, or edit it if they had a city they’d wish to visit more.
The different HTTP request and what each of the restful routes were to produce seemed to be more of a challenge that I initially thought I could handle. Each time I read through the material or watched a video on how to build a Sinatra app I learned something I hadn’t yet known. Seeing how many things went into it was pretty nerve wracking until my memory of what something was for and why it’s there. When going through it and being able to explain it out loud was when I could finally breathe easy and tell myself I GOT THIS.