Phase-1 experience
My phase-1 experience at Flatiron has been very challenging. We went over a lot of technical terms in phase-1 which i know I can carry over to Phase-2. The beginning of Phase 1 had some lessons we already covered in Phase 2. So, the beginning was a quick refresher from phase 0. After a couple of refresher sections, we started learning new stuff. One topic we learned about was called.
Above is a short concept of scope. It’s important to understand scope because it gives you a clear understanding of why some variables or functions are not always accessible. For example, walkie-talkies have multiple channels. You can only hear people talking on the same channel as you. The same goes for functions and variables if they are on the same scope communication between them can happen. There are three levels of scope in JavaScript. The first scope is the global scope. Every variable and function that`s not declared in a function or block is global. The second is function scope. Variables declared on a global scope can be declared on a function scope but function scope variables can’t be defined in a global scope. The last one is block scope. The block scope is variables that have been declared with “const” or “let”.
A fetch request retrieves data from an API. In my project, I had to use a public API to make a website. For me to get the data from the API above I sent a fetch request to the address. After I got a response back from the API I used JSON so the data I got is stringified as developers would say. JSON turns the data into a readable foam JavaScript can understand. The code above is an example of how to call a fetch request. With the data we have now, we can do a lot of different things. For my project, I had to loop through the data and pull out the information I needed.
In the example above I used map() to loop through my data and return information I need for another part of my code. I originally had a .forEach() running in my code but I changed it to a map. The reason I changed it to a map is because .forEach() can`t return a new array based on the giving array. Map was a better choice for my project since I had to make a new array for my input event listener. With the.map() I returned the titles and elements to an empty array.
There are a lot of different types of event listeners for example mouse click, key pressed, and form submission. Before you call the event listener you have to grab the HTML element you want to interact with. In the example above I grabbed the .search class using the query selector. The .search class is only assigned to an input element on the HTML page. When you call an event listener you have to assign two things to it. The first is assigning the type of event listener. The example above input is the type of event listener assigned to the function. The second thing is a callback function for the event trigger when the event happens. These are the few concepts I learned in phase 1 at Flatiron School.
The three pillars combine recognizing events, manipulating DOM, and communicating with the server to make web programming. The first pillar is to recognize events. The web page recognizes an event triggered on the website by the user. Then the event will manipulate the DOM displaying an updated screen. Lastly, the JavaScript code communicates with the server and tells them to update the server with the new information. The Phase 1 project is a perfect example of how I used all the skills I learned in Phase 1 to make a working website.
Get Illya Lane Jr.’s stories in your inbox
Join Medium for free to get updates from this writer.
Some of the code I shared above is from my project. I used all the topics I talked about to build a working website. By understanding the scope I was able to avoid problems with using certain variables. I fetch data from an open API called Jikan. I looped through the data from the API by using the forEach() and map() methods. Before I could loop the data I had to use JSON to turn the data into a readable format for JavaScript to understand. My project used four different event listeners. I used a mouse click, Input, mouse over, and mouse off event listeners. Tying the concept I learned together I was able to make my first website.
