diff --git a/index.html b/index.html
index e69de29..bffd945 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+ Choose a location to view the weather
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..9f581e0
--- /dev/null
+++ b/main.js
@@ -0,0 +1,135 @@
+let myWeather = null;
+const strong = document.querySelectorAll("strong");
+const article = document.querySelectorAll("article");
+const main = document.querySelector("main");
+
+document.querySelector("form").addEventListener("submit", (event) => {
+ event.preventDefault();
+ console.log(
+ `https://wttr.in/${event.target.location.value}?format=j1`,
+ "HELLO FROM THE OTHER SIDE"
+ );
+ fetch(`https://wttr.in/${event.target.location.value}?format=j1`)
+ .then((result) => {
+ console.log("Fetch was successful");
+ return result.json();
+ })
+ .then((weather) => {
+ previousSearch(event.target.location.value, weather);
+
+ document.querySelector("input").value = "";
+
+ weatherDisplay(weather)
+ console.log(weather)
+ });
+});
+
+function weatherDisplay(weather) {
+ const mainArticle = document.getElementById("main_article");
+ mainArticle.remove();
+ const newArticle = document.createElement("article");
+ newArticle.setAttribute("id", "main_article");
+ main.prepend(newArticle);
+ const h2 = document.createElement("h2");
+ h2.textContent = weather.nearest_area[0].areaName[0].value;
+ const p1 = document.createElement("p");
+ const p2 = document.createElement("p");
+ const p3 = document.createElement("p");
+ const p4 = document.createElement("p");
+ const p5 = document.createElement("p");
+ const p6 = document.createElement("p");
+ const p7 = document.createElement("p");
+
+ p1.innerHTML = `Area: ${weather.nearest_area[0].areaName[0].value}`;
+ p2.innerHTML = `Region: ${weather.nearest_area[0].region[0].value}`;
+ p3.innerHTML = `Country: ${weather.nearest_area[0].country[0].value}`;
+ p4.innerHTML = `Currently: Feels like ${weather.current_condition[0].FeelsLikeF}°F`;
+ p5.innerHTML = `Chance of Sunshine: ${weather.weather[0].hourly[0].chanceofsunshine}%`;
+ p6.innerHTML = `Chance of Rain: ${weather.weather[0].hourly[0].chanceofrain}%`;
+ p7.innerHTML = `Chance of Snow: ${weather.weather[0].hourly[0].chanceofsnow}%`;
+
+ newArticle.append(h2, p1, p2, p3, p4, p5, p6, p7);
+
+
+ let today = document.querySelector(".today");
+ let tomorrow = document.querySelector(".tomorrow");
+ let day = document.querySelector(".day_after_tomorrow");
+
+ today.innerHTML = `Today
`;
+ let pToday = document.createElement("p");
+
+ pToday.innerHTML = `Average Temperature: ${weather.weather[0].avgtempF} ℉
+
+Max Temperature: ${weather.weather[0].maxtempF} ℉
+
+Min Temperature: ${weather.weather[0].mintempF} ℉`;
+ today.append(pToday);
+
+ tomorrow.innerHTML = `Tomorrow
`;
+ let pTom = document.createElement("p");
+ pTom.innerHTML = `Average Tempature: ${weather.weather[1].avgtempF} ℉
+
+Max Temperature: ${weather.weather[1].maxtempF} ℉
+
+Min Temperature: ${weather.weather[1].mintempF} ℉`;
+ tomorrow.append(pTom);
+
+ day.innerHTML = `Day After Tomorrow
`;
+ let dayAfter = document.createElement("p");
+ dayAfter.innerHTML = `Average Tempature: ${weather.weather[2].avgtempF} ℉
+
+Max Temperature: ${weather.weather[2].maxtempF} ℉
+
+Min Temperature: ${weather.weather[2].mintempF} ℉`;
+ day.append(dayAfter);
+
+ let image = document.createElement("img")
+
+ if (weather.weather[0].hourly[0].chanceofsunshine >= 50){
+ image.setAttribute("src", "./assets/icons8-summer.gif")
+ image.setAttribute("alt", "sun");
+
+ }else if(weather.weather[0].hourly[0].chanceofsnow >= 50){
+ image.setAttribute("src", "./assets/icons8-light-snow.gif")
+ image.setAttribute("alt", "snow");
+ }else if(weather.weather[0].hourly[0].chanceofrain >= 50){
+ image.setAttribute("src", "./assets/icons8-torrential-rain.gif")
+ image.setAttribute("alt", "rain");
+ }
+ newArticle.prepend(image)
+}
+function previousSearch(location, data) {
+ const ul = document.querySelector("ul");
+ const li = document.createElement("li");
+if(document.getElementById(`previous_searches`))document.getElementById(`previous_searches`).remove();
+
+ li.innerHTML = `${location} - ${data.current_condition[0].FeelsLikeF}°F`;
+
+ ul.append(li);
+ const a = document.getElementById(`${location}`);
+ a.addEventListener("click", () => {
+ weatherDisplay(data)
+ li.remove()
+ ul.append(li)
+
+
+
+
+ });
+}
+
+//Can't have 2 event listener in one code block.
+const conversion = document.querySelector("#conversionForm");
+conversion.addEventListener("submit", (event) => {
+ event.preventDefault();
+ let conversion = event.target.convert.value;
+ let toC = document.querySelector("#to-c");
+ let toF = document.querySelector("#to-f");
+ if (toC.checked) {
+ conversion = (conversion - 32) * (5 / 9);
+ document.querySelector("#result").innerHTML = `${conversion.toFixed(2)}°C`;
+ } else {
+ conversion = conversion * (9 / 5) + 32;
+ document.querySelector("#result").innerHTML = `${conversion.toFixed(2)}°F`;
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4fa074a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,44 @@
+.header {
+ background-color: teal;
+ grid-area: header;
+ text-align: center;
+}
+
+.main {
+ background-color: orange;
+ text-align: center;
+ grid-area: main;
+}
+
+.previous {
+ background-color: gold;
+ display: grid;
+ grid-area: previous;
+ text-decoration: underline;
+}
+
+.temp-conversion {
+ background-color: gold;
+ display: grid;
+ grid-area: aside;
+}
+.forecast {
+ background-color: skyblue;
+ display: grid;
+ grid-template-columns: "auto auto auto";
+ grid-template-rows: "auto auto auto";
+ grid-template-areas: "header header header";
+
+}
+body {
+ background-color: beige;
+ display: grid;
+ text-align: center;
+ grid-template-columns: "auto auto auto";
+ grid-template-rows: "auto auto auto";
+ grid-template-areas: "header header header" "aside main previous";
+}
+/* . notation is for class, # is for id */
+.none {
+display: none;
+}
\ No newline at end of file