diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..bd1630b
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 196b62f..709d193 100644
--- 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
-
- ...
-
-
-
-
```
Now we can get working on our JS, which may look something like this
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4ab734d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8bbc84b
--- /dev/null
+++ 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
new file mode 100644
index 0000000..957bab1
--- /dev/null
+++ 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;
+}
\ No newline at end of file