JSDR213 · carolinamolk · Apr 6, 2023 · Apr 6, 2023 · Apr 6, 2023 · Apr 6, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -36,12 +36,6 @@ and populate with as much data as you would like, based off of the API's respons
 Remember, we'll need to add our Axios and JS files in the head of our HTML before we can do anything
 
 ```html
-<head>
-   ...
-    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-    <script defer src="script.js"></script>
-</head>
-
 ```
 
 Now we can get working on our JS, which may look something like this 

diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+
+
+<head>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="script.js"></script>
+    <link rel="stylesheet" href="style.css"/>
+ </head>
+
+ <body>
+    <div></div>
+
+    <header>
+        <h1>check the weather</h1>
+
+        <input id="textInput" type="text" placeholder="enter city" />
+        <button id="submitButton"> Submit </button>
+        <div class="toggle-container">
+            <div class="toggle" onclick="toggle()">
+                <div class="circle"></div>
+            </div>
+            <span class="text">°F</span>
+        </div>
+    </header>
+    <div class = "weather-container">
+        <h1 id="cityName"> </h1>
+        <p id="countryName"></p>
+        <p id="temp"> </p>
+
+    </div>
+
+
+</body>
+
diff --git a/script.js b/script.js
@@ -0,0 +1,51 @@
+const apiKey = "288ddf51280c492b9cd221023230504"
+const button = document.querySelector("#submitButton")
+const input = document.querySelector("#textInput")
+let cityName = document.querySelector("#cityName")
+let countryName = document.querySelector("#countryName")
+let cityTemp = document.querySelector("#temp")
+
+let convertToC = false
+
+const toggle = () => {
+    let toggle = document.querySelector('.toggle')
+    let text = document.querySelector('.text')
+    convertToC = !convertToC
+    if (convertToC) {
+        toggle.classList.add('active')
+        text.innerHTML = '°C'
+        button.click()
+    } else {
+        toggle.classList.remove('active')
+        text.innerHTML = '°F'
+        button.click()
+    }
+}
+
+button.addEventListener('click', async () => {
+    let city = input.value.toLowerCase();
+    let response = await axios.get(`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}&aqi=no`)
+    let temp = response.data.current.temp_f
+    let tempC = response.data.current.temp_c
+    let feelsLike = response.data.current.feelslike_f
+    let feelsLikeC = response.data.current.feelslike_c
+    let condition = response.data.current.condition.text
+    let country = response.data.location.country
+
+    cityName.innerText = `${city.toUpperCase()}`
+    countryName.innerText = `(${country})`
+
+    if (convertToC == true){
+        cityTemp.innerText = `${condition} \n\n ${tempC} °C \n\n Feels like: ${feelsLikeC} °C`
+        }
+    else {
+        cityTemp.innerText = `${condition} \n\n ${temp} °F \n\n Feels like: ${feelsLike} °F`
+    }
+})
+
+
+document.querySelector('#textInput').addEventListener('keydown', function (e) {
+    if (e.key === 'Enter') {
+        button.click()
+    }
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,81 @@
+body{
+    padding: 50px 0 0 0;
+    text-align: center;
+    background-image: url("https://images.unsplash.com/photo-1504253163759-c23fccaebb55?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+input{
+    padding: 5px;
+    text-align: center;
+    margin: 20 auto
+}
+
+button{
+    padding: 5px;
+    background-color: bd959f
+}
+p {
+    font-size: 18px;
+}
+
+.weather-container {
+    background-color: f1f4f9;
+    border: 5px;
+    margin: 60 auto;
+    padding: 20px;
+    width: 50%;
+}
+
+.toggle-container {
+    position: absolute;
+    align-items: center;
+    width:100%;
+}
+
+.text {
+    font-size: 18px;
+    color: #494949;
+}
+
+.toggle {
+    position: relative;
+    width: 40px;
+    height: 20px;
+    border: 2px solid #494949;
+    border-radius: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: .3s;
+    margin: 0 auto
+
+}
+
+.circle {
+    position: absolute;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 20px;
+    background-color: #494949;
+    transition: .3s;
+}
+
+.active {
+    border-color: blue;
+}
+
+.active + .text {
+    color: blue;
+}
+
+.active .circle {
+    left: 100%;
+    transform: translateX(-100%);
+    transition: .3s;
+    background-color: 494949;
+}