JSDR213 · chirashima · Apr 11, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css">
+    <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 Homework</title>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="script.js"></script>
+</head>
+<body>
+    <div><p><b>Instructions: </b>Enter a city's name into the textbox below.
+        <p>You can also enter a State or Country after the city's name if your city shares its name with another.</p>
+        <p>For example, to see the weather in Paris, Texas and not Paris, France, enter <b>"paris texas"</b> or <b>"paris tx"</b> in the search.</p>
+        <p>The search is pretty forgiving, so try multiple things. <b>You can also use airport codes!</b></p>
+    </div>
+    <br>
+    <div>
+    <input id="textInput" type="text" placeholder="enter city here" />
+    <button id="submitButton">Click or Hit Enter</button>
+    </div>
+
+    <div>
+    <h1 id="cityName"> </h1>
+    <h2 id="temp"> </h2>
+    <h2 id="cityTime"> </h2>
+    <h2 id="condition"> </h2>
+    <h2 id="icon"> </h2>
+    </div>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,42 @@
+const apiKey = 'dd026f059d6a4f90af5220509230504'
+const button = document.querySelector('button')
+const input = document.querySelector('input')
+
+const cityName = document.getElementById('cityName')
+const cityTemp = document.getElementById('temp')
+const cityCondition = document.getElementById('condition')
+const cityIcon = document.getElementById('icon')
+const cityTime = document.getElementById('cityTime')
+
+
+// This code will let the user search by hitting the Enter key instead of having to click
+input.addEventListener('keypress', function onEvent(event) {
+    if (event.key === 'Enter') {
+        document.getElementById('submitButton').click()
+    }
+})
+
+// This code controls the API call, which activates on click (or when Enter is pressed)
+button.addEventListener('click', async () => {
+    let cityInput = input.value
+    let response = await axios.get(`http://api.weatherapi.com/v1/current.json?key=${apiKey}%20&q=${cityInput}&aqi=no`)
+    console.log(response)
+    let responseCityName = response.data.location.name
+    let responseRegion = response.data.location.region  //Region for overseas kind of sucks, but is state for US. how to remove for overseas?
+    let responseCountry = response.data.location.country
+
+    let responseCityTemp = response.data.current.temp_c
+    let responseCityTime = response.data.location.localtime
+    let responseCityIcon = response.data.current.condition.icon
+    let responseConditions = response.data.current.condition.text
+
+    if (responseRegion === '') {
+        cityName.innerText = `${responseCityName}, ${responseCountry}`
+    } else {
+        cityName.innerText = `${responseCityName}, ${responseRegion}, ${responseCountry}`
+    }
+    cityTemp.innerHTML = `Current Temperature: ${responseCityTemp}° Celsius`
+    cityTime.innerText = `Local Time: ${responseCityTime}`
+    cityCondition.innerText = `Current Weather Conditions: ${responseConditions}`
+    cityIcon.innerHTML = `<image src=${responseCityIcon}>`    
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,8 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: ghostwhite;
+}
+
+div {
+    text-align: center;
+}