Hello! My name is Jeremy Kunins and I'm currently enrolled in the Flex Software Engineering Program at Flatiron School Coding Bootcamp. Throughout these past few months enrolled in the school I have learned extensively about JavaScript, HTML & CSS. The fast-paced environment coupled with the intensive information was exciting to be a part of. Each and every assignment led me to yearn for more code and understanding just what everything is about. I am truly excited to be a part of this journey.
The Flatiron School assigns the students 5 phases throughout their time here. Each phase covers a specific language which provides the students various documents, labs and step-by-step guides that aid the student in understanding and conceptualizing how everything fits together. At the end of each phase the student must create their own project in utilizing what they have learned throughout the phase and put their critical thinking caps on. This allows the student to showcase what they have learned and gives them the creative freedom to explore new avenues.
For this particular project, we had to use vanilla JavaScript to create our own interactive webpage. The project must contain a REST API, an array iterator and 3 event listeners. Being an avid fan of both history and geography, I chose to make my webpage into a little historical information page. I decided to create my own "countries" API with 6 properties for each ID. Each country had a "name", "img", "map", "motto", "capital" and "fact" property which was stored in the db.json file.
To load up the db.json file the user must first start up the server and globally install the JSON server package into their terminal using the code: "npm install -g json-server". From there, the user must go inside their specified IDE terminal (for myself, I use Visual Studio Code) and run the command "$ json-server --watch db.json". This command allows access to the newly created db.json file and provides the programmer both the local host and subsequent resources that coincide with the file. Here, the local host was "http://localhost:3000" with "/countries" as its resource.
The HTML file was a delight to figure out how to set every thing up. Numerous hours were put into studying and understanding how to design the file to my liking. I first used the Emmet Abbreviation to provide the basis of the file and then got to work. Inside the body, header and various divs were created that allowed me to place certain images and forms to where I wanted onto the DOM. Using live-server, my webpage, although bare and poor looking, was created. I then created and linked both a CSS and JavaScript file using a link and script tag respectively. Flatiron School does not get too much into CSS unfortunately, so various articles and videos had to read and watched in order to make the webpage look enticing.
Moving on to the index.js file, I immediately understood that we needed to somehow access all of the newly created information once the DOM loaded. I added an event listener to the document, and upon the DOM loading I wrote in a fetch GET request which took in a function called "renderCountries". This function contained the .forEach method which cycled through all of the countries that are inside the db.json file. The .forEach method took in another function called "renderCountry" which in turn allowed me to post an image of the country's flag at the top of the webpage. I added another event listener which allows the user to "click" on the flag which then shows the details of each country.
The function "renderCountry" allowed the properties contained in the db.json file to be shown on the page.
Following the information section, I created a form that allows the user to submit a new country alongside all of its information. I created a new function called "createNewCountry" which takes in a fetch POST request. The function contained an "event" as its argument and I wrote in a "e.preventDefault()" which prevents the DOM from being refreshed every time the form is submitted. I then stored the values of each information tidbit into new variables. For example, the "countryName" variable was used to store "e.target.name.value". Inside the body of the POST request, the new variables were taken in which then were added to the db.json file. At the top of the code, on line 8, an event listener was used to submit the form onto the DOM and a new flag was added to the list alongside all of the information.
I am extremely thankful towards the Flatiron School for providing me with all of the useful labs and resources in order to get to this stage in my new coding career. I look forward to what the rest of the course looks like and am excited to see what is in store for not only in my journey throughout the bootcamp but also in my newly-founded passion!
Top comments (0)