Hello, I will be discussing my first coding project that I like to call, "Dream Garage". To start, it is a simple web application that allows you to add "cars" to your "garage". Hence the name, it is an app for the users to fill their garage with their dream cars.
Dream garage uses a localized API (Application Programming Interface) that I've created with four default vehicles to aggregate into the DOM (Document Object Model). Once loaded, the user can enter the name of any vehicle they wish into the 'Name" form. The user may also enter an image URL(Uniform Resource Locator) into the "Image" form.
Your garage awaits you
Below, my 'fetchCars' function fetches the car data from my local server, then takes the "(res)ponse" and invokes .json() to return an object from the servers response data. It then takes the obj (carsData), iterates each obj within and runs it through my 'renderCarCard' function. Once the 'card' is created, it will prominently display onto the DOM.
The way it works:
Fetch() is an 'asynchronous function'. Keep in mind, most code are 'synchronous'- meaning they are read and executed in order. No matter the length of your code(s), your machine still reads them in an orderly fashion. Contrary to seeing a webpage loading instantaneously, that is not the case. Longer code still, respectively, takes more time to be read and executed.
Being an asynchronous method, Fetch will 'acknowledge' its execution, but will continue to run and execute the rest of the programs code that is written. It is not bound to the order of typical code execution. This way, it returns what is called a 'promise'. If the data that is to be fetched is large (or small), time is not wasted waiting for all of that data to be received, and will continue to execute the rest of the written code.
Fetch is a global method that essentially "fetches" a resource from the network, and returns a "promise" that is fulfilled once the response is available. This method takes at least one parameter, which would be the URL of your 'resource' (an array of objects or only one object) which is where you are making the request to.
The request can be of any type of API that returns data in JSON (JavaScript Object Notation) or XML (eXtensible Markup Language). Once the data has been 'fetched' or 'requested, the method .json() converts the raw data into versatile information that can be used. This data can be used to create, read, update, or delete (colloquially referred to as CRUD)- some of the basic types of requests you can make to the server!
After the data requested has been returned into a usable format, the fetch block of code will invoke my 'renderCarCard' function, that creates a card to display the individual objects in my API.
It was not too difficult to take the parsed carsData and assemble a card. All I had to do was declare a variable with querySelector to my 'car-container' -div. I then declared a few other variables such as 'vehicle'- to contain the text content of cars.name; and 'img' to relate to an image source of cars.imgURL and created their respective elements.
Appending Cars to the DOM
The Event Listener DOMContentLoaded, will load the rest of the webpage before initializing the fetchCars function as the callback. It might sound a bit redundant, but so far the page runs as desired.
A callback function is basically a function defined within a function. Instead of writing the same code over and over again, the best practice is to save that function into a variable, and then invoking it from within another function if needed.
Here, the renderCarCard function will take all of that data, iterate through carsData using the .forEach() method. and creates a card for each object in my returned JSON. To do so, some elements must be selected, created, and then appended to the parent element that is to be displayed onto the DOM.
I took an extra moment to add a delete feature called 'TOW AWAY', which erases your car(s) from the DOM and updates the db.json by sending a delete request from the same button to update the server with the deleted 'car'.
In the form field, the 'submit' event listener will fire once the user enters their car and image of choice and hit the 'Add Car' button.
Both Functions of renderCarCard and createNewCar utilize either a POST or DELETE method to update the servers database file- or db.json. The newCar variable targets the forms inputs and creates a new car object to append to the DOM as well as the database.
Now that the desired functionality has been achieved, I took some time to play with the CSS (Cascading Style Sheets) file.
CSS is a powerful tool to control the way any developer wants their HTMl to be displayed. It is how you would want to design your webpage to appeal to the client. This includes the background, font styles, font sizes, borders of particular elements and so on. The possibilities are virtually endless.
This was a very challenging yet extremely rewarding project to build. Overcoming this hurdle is only the first step to what's to come!
-sources:
developer.mozilla.org
Top comments (0)