From ee44169a1ad12a44fb8852d98dbb36e05f6d4a8d Mon Sep 17 00:00:00 2001 From: Jeremy Taubman <56704648+taubman33@users.noreply.github.com> Date: Wed, 3 May 2023 12:08:31 -0400 Subject: [PATCH 1/3] Update README.md --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 196b62f..3f1c078 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# JSDR 213 - April 5, 2023 +# SEIR 0508 ### Open Weather API @@ -65,4 +65,3 @@ Will ...q=sanfrancisco... in the url work? Once you have your data logged, add in some style through a CSS file. It looks like our Weather has an icon as well, can we have that image rendered on screen? -This lab/HW will be due 4/12/23 at the beginning of class From 4d02df56d37f328fe67a0c21483ccf1e14d9b2d5 Mon Sep 17 00:00:00 2001 From: Jeremy Taubman <56704648+taubman33@users.noreply.github.com> Date: Wed, 17 May 2023 11:58:30 -0400 Subject: [PATCH 2/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3f1c078..38832f0 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Lets look at the documentation for the API together. Once you get a key, enter i `http://api.weatherapi.com/v1/current.json?key=${key}&q=${city}&aqi=no` ``` -We're going to use the app Insomnia (or Postman, if you are already familar with that) to test our cities, and our key. We can see how single worded cities like London, Paris, or Boston will work. How can we make a call for a city like New York, Los Angeles, or Rio de Janero? Let's plug a few of these different cities into the app to see what the call looks like, and to see what kind of data we are working with. +We're going to use the ThunderClient extension to test our cities, and our key. We can see how single worded cities like London, Paris, or Boston will work. How can we make a call for a city like New York, Los Angeles, or Rio de Janero? Let's plug a few of these different cities into the app to see what the call looks like, and to see what kind of data we are working with. From 50ad0d3264da041273c03a79afd5822773c497df Mon Sep 17 00:00:00 2001 From: Jenny Nguyen Date: Tue, 23 May 2023 06:19:06 -0700 Subject: [PATCH 3/3] Co-authored-by: Kevin Li --- .vscode/settings.json | 3 ++ index.html | 27 +++++++++++++++++ script.js | 70 +++++++++++++++++++++++++++++++++++++++++++ style.css | 19 ++++++++++++ 4 files changed, 119 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..798053c --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + weather API + + + + + +
+
+ + + +

+

+ + + +
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..1e7ef5e --- /dev/null +++ b/script.js @@ -0,0 +1,70 @@ +// declare api key to a variable named apiKey +const apiKey= "a3bb8b354bf24255bf1180932231705" + +// declare variables for the input bar, search button, and the elements that will hold weather text and picture +const inputBar = document.querySelector('#inputBar') +const button = document.querySelector("#searchButton") +const weatherText = document.querySelector("#weather-text") +const weatherPicture = document.querySelector("#weather-picture") +const weatherTemp = document.querySelector("#weather-temp") + +// add an event listener for the button element, that when you click it, +// it will grab the value of the inputBar (the text in the search bar) +// and then send a request to the weather API with our apiKey and value inserted as object literals +// the response from the api server is then stored in a variable declared as 'response' +button.addEventListener('click', async () => { + console.log('button click is working') + + let value = inputBar.value + console.log(value) + + const response = await axios.get(`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${value}`) + console.log(response) + let weatherResult = response.data.current.condition.text + + // Access the innerText property of the H2 element #weather-text, and replace it with the weatherResult + weatherText.innerText = weatherResult + + // Declare a variable pictureResult that accesses the icon property from the API response (that holds a link to an image) + let pictureResult = response.data.current.condition.icon + weatherPicture.src = pictureResult + + let tempResult = response.data.current.temp_f + weatherTemp.innerText = tempResult +}) + +// Object literals +// how to insert a variable into a string +// use backticks for the string and then ${variableNameHere} to insert variable + + + + + + + + + +//old code +// // const city; +// axios.get(' http://api.weatherapi.com/v1').then((response)=>{ +// console.log(response.data) +// }) + +// // const getTemp = async () => { +// // const locaTemp= await axios.get(`http://api.openweathermap.org/data/2.5/weather`) +// // console.log(locaTemp.data) + +// // } +// // getTemp() + + +// button.addEventListener('click', async()=> { +// console.log('button click is working') +// const textInput= document.querySelector('#inputBar').value +// let response = await axios.get(`http://api.openweathermap.org/data/2.5/weather${textInput}`) +// console.log(response) +// // let tempPic = response. +// picture.src = tempPic +// }) + diff --git a/style.css b/style.css new file mode 100644 index 0000000..bc5d48d --- /dev/null +++ b/style.css @@ -0,0 +1,19 @@ +body{ + /* margin: 0; + padding: 0; */ + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + flex-direction: column; + text-align: center; +} +body { + background-image: url('https://t4.ftcdn.net/jpg/04/61/23/23/360_F_461232389_XCYvca9n9P437nm3FrCsEIapG4SrhufP.jpg'); + background-repeat: no-repeat; + background-position: center center; + +} +/* h2, h3, img{ + border: 5px solid rgb(5, 20, 159); +} */ \ No newline at end of file