Flatiron Phase 1 Project
For my Phase 1 Project I used a Forza API. The purpose of this API was to show random pictures that players took of their favorite cars. Whether that be a Lamborghini, BMW, Nissan Skyline, Toyota Supra or Porsche GT3 RS. The reason I chose this API was because not only do I enjoy video gaming, I enjoy cars.
This project put my Javascript skills to the test. While it required some HTML, CSS and Javascript, I created most elements in Javascript. To get this Forza API to work we needed a function that fetched the data using fetch() and .then() . Fetch() uses the url of the api and .then() returns a Promise. It takes up to two arguments, callback functions for the success and failure cases of the Promise. The HTML code was pretty basic, I set up the body with div tags. The <div>tag also known as the Division Tag, is used to divide content like <img> tag, <h2> tag, <script> tag to link the Javascript file and a <footer>.
<div id="car-header"><div style="text-align: center"><img class="img-class" src="https://fontmeme.com/permalink/211222/82eab680a87bc0cc319aca1bbefee534.png"alt="car-header"/></div></div><h2 style="text-align: center">Welcome to the Forza Car Gallery!</h2><br /><div id="car-div"></div><div class="comment"></div><script type="text/javascript" src="javascript/index.js"></script></body><footer style="text-align: center; padding: 10px; margin-top: 7px">© copyright 2021 by Jeremiah Merced</footer></html>
Inside of <div id=”car-div”></div> and <div class=”comment”></div> is where I created the main elements to my project and appended . I created these elements by setting a variable using const. Const means that the identifier cannot be reassigned. I could have used let which means it can be reassigned but in this instance I don’t see myself having to reassign the variables.
Creating my variables and setting them using document.createElement(‘ ’) , allows us to create the HTML elements we want. To show these elements on the DOM we used append(). Append is used to insert content to any already existing elements, for example, an HTML String, DOM element, text node, or event listeners. Above shows the blueprint but doesn’t show the functionality of these created elements. Reason being is because these buttons and the form submit need event listeners. Event listeners allow for interactivity. Speaking of event listeners one of the most important ones we used is ‘DOMContentLoaded’ . The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed.
As stated above, functionality plays a big part when creating a web page. The functionality in this case are the like and dislike buttons and form with a submit event. To add an event listener all we need is the variable name with .addEventListener() and inside takes two parameters. One parameter being the event whether that be 'click’ or 'submit' and the other being the function we want to call when the event occurs.
Not knowing where I wanted to go with my career I chose something that I feel I can relate to, understand and enjoy. This API allowed me to create interactivity for players to Like, Dislike, and add comments to their favorite posts. This also gives players the opportunity to get feedback on their pictures and it gives them something to be proud of.
