Custom Category: Bootstrap

“Weather App” is a project I created as an exercise in becoming more experienced with javascript. This project expanded on my previous experience using API’s with Book Search App. In this project I used two new API’s in conjunction with each other. First the geolocation web api, which is used to get the user’s current location and return a latitude and longitude. That latitude and longitude is then passed into the second API I used, open weather api.

First things first, check to see if the browser allows or supports geolocation, if not display an error message. If so, set the position of the user and pass the latitude and longitude into the getWeather function.

Next, in the getWeather function I fetch the weather based on the latitude and longitude of the user and assign values to the data returned. In this example the console.log(data); is still in the function. It’s not needed but it helps me keep track of the data while troubleshooting.

Lastly, was the displayWeather function. All of the values that where assigned previously assigned are now being assigned to there innerHTML locations. Also in this function the temperature values are converted from celsius to fahrenheit, where they will be displayed on the front end. This HTML uses the Bootstrap framework.

There is a lot more code that went into this. I focused on the javascript here but you can view all of the code from this project at the github button at the top of the page.

“Book Search App” is a web application I built using Bootstrap and the Googlebooks api. The purpose of this project was to fetch an api and create something from the data.

I decided to use the bootstrap framework due to the enormous amount of functionality already built in. I didn’t want to recreate the wheel and style everything myself. Bootstrap was the perfect ‘out-of-the-box’ solution.

This app was built using vanilla ES6. The amount of things that can be done using ES6 is robust, such as the .map() and fetch() functions.

After I created a query based on the user’s input, I used .slice to limit the results to 10. Then passed those results into a .map function to create a new list based off the query.

Finally, I output the results of each of the 10 queries using innerHTML and the Bootstrap framework syntax. Bootstrap has a lot of great functionality built into it and I did not want to get too deep into the styling aspect of this application, so I used existing bootstrap components such as btn, btn-primary, and data-toggle=”collapse” for an accordion menu.

Of course there is a lot more that went into the development of this project, but shown above are just a few key elements I wanted to show.