JSDR213 · nguyencuc1120 · May 3, 2023 · May 17, 2023 · May 23, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# JSDR 213 - April 5, 2023
+# SEIR 0508
 
 ### Open Weather API
 
@@ -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.
 
 
 
@@ -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 
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>weather API</title>
+    <link rel="stylesheet" href="style.css"/>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="script.js"></script>
+</head>
+<body>
+    <header>
+        <form>
+            <input type="text" placeholder="insert location"  id="inputBar">
+            <input type="button"  value="search weather" id="searchButton">
+
+            <h2 id="weather-text"></h2>
+            <h3 id="weather-temp"></h3>
+            <img id="weather-picture"/>
+
+
+        </form>
+    </header>
+
+</body>
+</html>
diff --git a/script.js 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
@@ -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);
+} */