How The JavaScript Fundamentals helped me Become a better problem solver and How I built my very first Website.
When I first began at Flatiron school, I really had no clue on the fundamental basics and how it would transform my problem solving skills. JavaScript can first seem overwhelming at first. However, Once I did understand its key concepts, I did find the ability to thing through my problems step by step. Not only did I become more and more proficient and solving codding challenges, but also built my very own first website. For a car Auction where the user can search any of the available cars, look at details of the car and also filter out the cars prices. This project took mostly all the fundaments I learned through out phase-1 at Flatiron school.
In this article, I shall show you how learning the fundamentals of JavaScript helped me on becoming a better problem solver and critical thinker. Also, How I was able to build my very own website using these concepts
My first Event Listener
What I learned throughout phase-1 is how to manipulate the DOM (Document Object Model). My Online Car Auction Website is a simple app that allows the user to search for the available cars, also view its details and filter the cars by price. All these functionalities started with my “DOMContetLoaded“ event listener.
When I use this event listener. My JavaScript code only runs until the page is fully loaded. This event listener calls three critical functions carFetch(), carSubmit(), and filterBtn(). These are the app’s core features
Fetching my data from my db.json file
Then I used the fetch method to get all my data from my db.json file. This method could be very powerful because when I use get all my data I could use it to display on the page.
In the snippet above I used got the values of my data and then used the foreach array iterator and pushed each one of my objects(cars) into my carArray which has a global scope. I can then modify it in every one of my functions without having to fetch my data multiple times.
How I built my search function
First I created a function that uses the “carForm” that is created in my HTML file. Then, Added an Submit event Listener. After that I then created a variable that takes the gets the found car when the user searches in the text box . Take a look at my code snippet below:
Above you can see that I used a .find iterator on the carArray. In the function I then created an if statement so that if the value of the text box (either in lowercase or in uppercase) is equal to the “car.name” value of my data. Then the function returns the found car. Now remember I did set this to a variable. So the next thing is to write another “if” statement that if the it is the found car then the text box will become empty and a car Card (Which Ill explain later)with all the data of the “found car“ displays on the page
Making my Car Card
Making this function was easy and at The time during phase-1 of Flatiron school. Functions like these become very simple over practice. In the code snippet below I created a div called “car Card”. Which i set its inner HTML to have a details of the car and two buttons one shows more information of the car and the other deletes it. Look at the snippet below to see how I used my data to do this.
Learning this skill can be very helpful and also helps you build some pretty amazing applications. It is very important to learn this skill as it is a big part of becomuing a web developer.
How I created my Filter Button function
Building this feature was pretty fun. Before I start explaining my function code, Ill first say that taking time and breaking down your ideas step by step is a very crucial need to have as your journey as a web developer. Also, it then becomes very simple. Taking things slowly and really going deep for ever feature you would like your code to do. Take a look at the code snippet below:
First I created a new button and set it to the variable “filteredBtn“. After that I appended it to my main div “car container“. Then added an event listener to it, so when the button is clicked the I added the .disabled property and set that equal to true. So that for the time being once it is clicked the user can not click it again. Created a variable and called “filteredCars“ which filters all my cars that are less than 90,000 dollars. I used the parseFloat() callback function to turn the string into an integer. Then i grabbed my “filteredCars” and for each of the cars I created an “li“ with the cars information. Append the “li” and “title” to my new div called “filteredDiv“.
Also added a close button so that when the used clicks on it. The div vanishes and will be able to click on the filter button again as the filter button .disabled property will be set to false.
How I’ve become a become a better problem solver
While working through out this phase at Flatiron school. I’ve learned much about organizing things in my head(breaking things down step by step). All these skills are critical to build some power web applications.
Learning the JavaScript fundamentals really helped me not just with code but with my everyday life. I’ve really enjoyed learning and will continue to hone my skills and work my way up to becoming a real deal web dev.