Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add files via upload #6

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add files via upload #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions hw-04-weather-api-app/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@


# Build a Weather App

Here's an exciting challenge: You'll be building a small weather app, using your newfound skills with APIs!

***

## Instructions

#### Get a free API Key for the OpenWeather API

For this lab you'll be using the Open Weather Data API. In order to use it, please follow these steps:

1. Sign up for a free [Open Weather Map](https://home.openweathermap.org/users/sign_up) account!

2. Once you've signed up, you're given an [API key](https://home.openweathermap.org/api_keys). Copy that API key and keep track of it somewhere!

3. Go to [OpenWeatherMap](http://openweathermap.org/api) and scroll down, you'll see a section that says "API Documentation."

4. Open Insomnia to check out the data you're working with and to verify that your api key works. Make a GET request to the following URL in Insomnia, adding your API key to the end.

5. Read the follow part of the OpenWeather docs to learn how your API requests should be structured (**Important!**): [https://openweathermap.org/appid#use](https://openweathermap.org/appid#use)

#### ⚡️ Plan your implementation approach using pseudocode
If you find the assignment too challenging to complete, you can bet the first place to check is your pseudocode!

---

### Requirements

#### Requirement #1: Your application's UI should contain the following:
- [ ] An **input field** for a user to enter a city name **(U.S. cities only)**
- [ ] A **submit button**
- [ ] A placeholder element (such as a `<div>`) used to display the current temperature

### Requirement #2: Core Functionality
- [ ] When the submit button is clicked:
- [ ] A **GET** request should be made to OpenWeather API (base url: `https://api.openweathermap.org/data/2.5/weather`) to fetch the current weather for the city name entered by the user
- [ ] The following data should be rendered to the page:
- [ ] City name
- [ ] Current temperature (displayed in Fahrenheit)
- [ ] Weather description
- [ ] Min temp
- [ ] Max temp
- [ ] The text for the displayed Current Temperature should turn blue if the current temperature is under 40 degrees, and red if the current temperature is above 85 degrees.

### Bonus Requirement (Optional): Bonus functionality - add Zip Code support

- [ ] Update your application logic to support users being able to enter either a city name **or a zip code** into the text field

- [ ] If users enter in a zip code, the app should make an API request to the OpenWeather API and fetch the current weather associated with the zip code

- [ ] The data displayed in the UI should be the same as specified in **Requirement #2**

- [ ] After making the changes, the application should support the ability to search for the current weather for **either** a city name (U.S. cities only) **OR** a zip code

**Tip**: Read the documentation to determine how your API request should be structured in order to fetch the current weather associated with a zip code

---

### Tips

* Work smarter not harder, reference past work to get started (see the Giphy API code along from lesson 08)

* Read the "current weather" portion of the Open Weather API documentation (found here: [https://openweathermap.org/current](https://openweathermap.org/current)) to determine how you should structure your API request to fetch the current weather.

The documentation also contains code examples that helps you figure out how to use the API
16 changes: 16 additions & 0 deletions hw-04-weather-api-app/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
input{
margin: 10px 0px;
padding: 5px;
}
#forecast{
display: none;/*This div should not appear until the weather is returned.*/
}
#forecast div{
width: 25vw;
border: 8px solid blue;
margin: 0 auto;
background: black;
}
img{
width:100%;
}
32 changes: 32 additions & 0 deletions hw-04-weather-api-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashbk32 nice updates to the html

<meta charset="utf-8">
<title>Weather APP</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div class="weathercontainer">
<div id="weatherdescription">
<h1 id='cityheader'></h1>
<div id ='weathermin'>
<div id ='temperature'></div>
<div id ='weatherdescription'></div>
<div><img id="documentIconImg"></div>
</div>
</div>
<div class= "searchContainer"
<form id="search">
<input type="text" name="inputBox" placeholder="City Name or Zip">
<button>Search City</button>
</div>
</form>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
75 changes: 75 additions & 0 deletions hw-04-weather-api-app/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@

/*
Add a input box to enter city name apply a submit button on the page when user inputs city make sure a function calls openweather api.

when city is entered display results should include city name, current temp, weather description, min temp,max temp.

Once city is picked results should display but also change when adding an if statement to check if the weather is either above 85 degree or below 40.*/
$(function () {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashbk32 be careful re: indentation. It appears to be off throughout the code here in app.js. This makes it very difficult to scan and troubleshoot.

$('#search').click(() => {
event.preventDefault()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashbk32 this should be inside of an event handler such as a .submit() see the solution for the way it should be structured: https://github.com/jsd20191008/weather-api-app-solution/blob/master/js/main-async-await.js#L2

//console.log('button works')
const city = $('#city-type').val()

})
function seachCity(searchterm) {

// note added async to function

async function getWeather (searchTerm) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashbk32 looks like you're attempting to declare this function inside of the searchCity() function. You generally want to avoid that because it complicates how the functions will get called.

try {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashbk32 nice job here, it looks like the body of your Async / Await function is structured correctly. However, due to the comment above, getting this code to run will be difficult.

const url = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk'
const apiKey = 'f674d7dcd4f4a4860d1b6eede3761c6c'

// open openWeather api
const response = await axios({
url: url,
type: 'GET'
})

console.log(responseWeather)

// pass array as function
displayResults(responseWeather.data)

} catch(error) {
alert('error try another city')
}
}

function displayMessage(data) {
$('#cityName').text(data.name)
$('#currentTemp').text(`Outside ${city.main.temp}°F`)
$('#weatherDesc').text(`Conditions: ${data.weather[0].description}`)
$('#minTemp').text(`min temp ${data.main.temp_min}°F`)
$('#maxTemp').text(`max temp ${data.main.temo_max}°F`)
}

//adding jquery to update the UI
$('#city').val('')
$('#cityName').text('city name')
$('#temp').text('cityTemp')
$('#description').text('cityDescription')
$('#temp_Min').text('cityTempMin')
$('#temp_Max').text('cityTempMax')
}
})

// make API request using #.ajax()
// $.ajax({
// url: 'url',
// type: 'GET',
// data: { q: searchTerm}
//
// })
// .done((response) => {
// console.log(response)
// // get response from successful API call and
// // pass response data to the updateUi() function
// displayResults(response)
// })
// .fail((error) => {
// console.log(error)
// alert('an error occurred')
// })
// }
Binary file added hw-04-weather-api-app/weather.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.