diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f673a71
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e69de29..6c3f03b 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ 8.4 Nights Weather App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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..7b78411
--- /dev/null
+++ b/main.js
@@ -0,0 +1,308 @@
+const url = "http://wttr.in";
+const urlFormat = "?format=j1";
+
+
+
+let data;
+const form = document.querySelector('form'); // <= selecting form
+const ul = document.querySelector("ul");
+const currentWeather = document.querySelector("#currentWeather");
+const previousSearch = document.querySelector("section p");//no previous searches
+
+//temperature widget =>
+Widget(data);
+
+
+form.addEventListener('submit', (event) => {
+ event.preventDefault();
+ const location = document.querySelector('#location');
+ let input = location.value;
+ userInput(input);
+ previousSearch.remove();
+ });
+
+
+function userInput (input) {
+ fetch(`${url}/${input}${urlFormat}`)
+ .then((response) => response.json())
+ .then((json) => {
+ data = json;
+
+ findWeatherInfo(data,input);
+ previousHistory(data,input);
+
+ })
+ .catch((err) => {
+ console.log(err);
+ })
+ form.reset();
+}
+
+
+function findWeatherInfo(data,input) {
+currentWeather.innerHTML = "";
+
+const img = document.createElement("img");
+
+if (data.weather[0].hourly[0].chanceofsunshine >= 50) {
+
+ img.src = "./assets/icons8-summer.gif";
+ img.alt = "sun";
+ currentWeather.append(img);
+
+} else if (data.weather[0].hourly[0].chanceofrain >= 50) {
+
+ img.src = "./assets/icons8-torrential-rain.gif";
+ img.alt = "rain";
+ currentWeather.append(img);
+} else if (data.weather[0].hourly[0].chanceofsnow >= 50) {
+
+ img.src = "./assets/icons8-light-snow.gif";
+ img.alt = "snow"
+ currentWeather.append(img);
+}
+
+if (input === data.nearest_area[0].areaName[0].value){
+
+const h2 = document.createElement("h2");
+h2.textContent = data.nearest_area[0].areaName[0].value;
+currentWeather.append(h2);
+
+
+const area = document.createElement("p");
+area.innerHTML = ` Area: ${data.nearest_area[0].areaName[0].value}`;
+currentWeather.append(area);
+
+} else {
+
+
+const h2 = document.createElement("h2");
+h2.textContent = input;
+currentWeather.append(h2);
+
+
+const area = document.createElement("p");
+area.innerHTML = ` Nearest Area: ${data.nearest_area[0].areaName[0].value}`;
+currentWeather.append(area);
+}
+const region = document.createElement("p");
+region.innerHTML = ` Region: ${data.nearest_area[0].region[0].value}`;
+currentWeather.append(region);
+
+const country = document.createElement("p");
+country.innerHTML = ` Country: ${data.nearest_area[0].country[0].value}`;
+currentWeather.append(country);
+
+const currently = document.createElement("p");
+currently.innerHTML = ` Currently: Feels Like ${data.current_condition[0].FeelsLikeF}°F`;
+currentWeather.append(currently);
+
+
+const sunshine = document.createElement("p");
+sunshine.innerHTML = ` Chance of Sunshine: ${data.weather[0].hourly[0].chanceofsunshine}`;
+currentWeather.append(sunshine);
+
+const rain = document.createElement("p");
+rain.innerHTML = ` Chance of Rain: ${data.weather[0].hourly[0].chanceofrain}`;
+currentWeather.append(rain);
+
+const snow = document.createElement("p");
+snow.innerHTML = ` Chance of Snow: ${data.weather[0].hourly[0].chanceofsnow}`;
+currentWeather.append(snow);
+
+const futureWeather = document.querySelectorAll(".futureWeather");
+
+const weather1 = futureWeather[0];
+const weather2 = futureWeather[1];
+const weather3 = futureWeather[2];
+
+weather1.innerHTML = "";
+weather1.style = "3px dotted rgb(0, 0, 0)";
+
+const today = document.createElement("h2");
+today.textContent = "Today";
+weather1.append(today);
+
+const avgTemp = document.createElement("p");
+avgTemp.innerHTML = ` Average Temperature: ${data.weather[0].avgtempF}°F`;
+weather1.append(avgTemp);
+
+const maxTemp = document.createElement("p");
+maxTemp.innerHTML = ` Max Temperature: ${data.weather[0].maxtempF}°F`;
+weather1.append(maxTemp);
+
+const minTemp = document.createElement("p");
+minTemp.innerHTML = ` Min Temperature: ${data.weather[0].mintempF}°F`;
+weather1.append(minTemp);
+
+
+
+weather2.innerHTML = "";
+weather2.style = "3px dotted rgb(0, 0, 0)";
+
+
+const tomorrowWeather = document.createElement("h2");
+tomorrowWeather.textContent = "Tomorrow";
+weather2.append(tomorrowWeather);
+
+const tomorrowAvgTemp = document.createElement("p");
+tomorrowAvgTemp.innerHTML = ` Average Temperature: ${data.weather[1].avgtempF}°F`;
+weather2.append(tomorrowAvgTemp);
+
+const tomorrowMaxTemp = document.createElement("p");
+tomorrowMaxTemp.innerHTML = ` Max Temperature: ${data.weather[1].maxtempF}°F`;
+weather2.append(tomorrowMaxTemp);
+
+const tomorrowMinTemp = document.createElement("p");
+tomorrowMinTemp.innerHTML = ` Min Temperature: ${data.weather[1].mintempF}°F`;
+weather2.append(tomorrowMinTemp);
+
+
+weather3.innerHTML = "";
+weather3.style = "3px dotted rgb(0, 0, 0)";
+
+const dayAfterTomorrow = document.createElement("h2");
+dayAfterTomorrow.textContent = "Day After Tomorrow";
+weather3.append(dayAfterTomorrow);
+
+const dayAfterTomorrowAvgTemp = document.createElement("p");
+dayAfterTomorrowAvgTemp.innerHTML = ` Average Temperature: ${data.weather[2].avgtempF}°F`;
+weather3.append(dayAfterTomorrowAvgTemp);
+
+const dayAfterTomorrowMaxTemp = document.createElement("p");
+dayAfterTomorrowMaxTemp.innerHTML = ` Max Temperature: ${data.weather[2].maxtempF}°F`;
+weather3.append(dayAfterTomorrowMaxTemp);
+
+const dayAfterTomorrowMinTemp = document.createElement("p");
+dayAfterTomorrowMinTemp.innerHTML = ` Min Temperature: ${data.weather[2].mintempF}°F`;
+weather3.append(dayAfterTomorrowMinTemp);
+}
+
+// use span, look back**
+
+function previousHistory (data,input){
+ const span = document.createElement("span");
+ const li = document.createElement("li");
+ const a = document.createElement("a");
+
+a.textContent = `${data.nearest_area[0].areaName[0].value}`;
+a.setAttribute ("href", "#");
+//console.log(data.nearest_area[0].areaName[0].value)
+li.textContent = ` - ${data.current_condition[0].FeelsLikeF}°F`;
+
+ ul.append(li);
+ li.prepend(a);
+
+
+
+a.addEventListener("click", (event) => {
+ findWeatherInfo(data,input);
+})
+
+}
+
+
+function Widget(data) {
+ const Widget = document.querySelector("#Widget");
+
+ //seperate form ***
+
+ const formForWidget = document.createElement("form");
+ Widget.append(formForWidget);
+
+
+ const label = document.createElement("label");
+ label.textContent = "convert the temperature:";
+ formForWidget.append(label);
+
+ //seperate input ***
+
+ const input = document.createElement('input');
+ input.type = "number";
+ input.id = "temp-to-convert";
+ formForWidget.append(input);
+
+
+ //button for celsius radio ***
+
+ const celsiusRadiobutton = document.createElement("input");
+ celsiusRadiobutton.type = 'radio';
+ celsiusRadiobutton.id = "to-c";
+ celsiusRadiobutton.name = "convert-temp";
+ celsiusRadiobutton.value = "c";
+ formForWidget.append(celsiusRadiobutton);
+
+ //label for celsius ***
+
+ const celsiusLabel = document.createElement("label");
+ celsiusLabel.textContent = "to celsius";
+ celsiusLabel.setAttribute('for', "to-c");
+ formForWidget.append(celsiusLabel);
+
+
+ const br = document.createElement('br');
+ formForWidget.append(br);
+
+ // button for farenheit ***
+
+ const fahrenheitRadiobutton = document.createElement("input");
+ fahrenheitRadiobutton.type = 'radio';
+ fahrenheitRadiobutton.id = "to-f";
+ fahrenheitRadiobutton.name = "convert-temp";
+ fahrenheitRadiobutton.value = "f";
+ formForWidget.append(fahrenheitRadiobutton);
+
+ // label for farenheit ***
+
+ const fahrenheitLabel = document.createElement("label");
+ fahrenheitLabel.textContent = "to fahrenheit";
+ fahrenheitLabel.setAttribute('for', "to-f");
+ formForWidget.append(fahrenheitLabel);
+
+ //submit button widget ***
+ const inputForWidget = document.createElement("input");
+ inputForWidget.type = "submit";
+ formForWidget.append(inputForWidget);
+
+ // result
+ const h4 = document.createElement("h4");
+ h4.textContent = "0.00";
+ formForWidget.append(h4);
+
+
+ // adds click event to converion***
+
+ formForWidget.addEventListener('submit', (event) => {
+ event.preventDefault();
+
+ const temperature = document.querySelector("#temp-to-convert").value;
+ const celsiusOutput = document.querySelector('input[name="convert-temp"]:checked');
+ calculatedTemp(temperature, celsiusOutput);
+ formForWidget.reset();
+
+ });
+
+
+}
+
+function calculatedTemp(temperature,celsiusOutput) {
+ let convertedTemp = 0;
+ let h4temp = document.querySelector('h4');
+
+ if (celsiusOutput === null && temperature === "") {
+ h4temp.textContent = "Please provide temp and conversion";
+ } else if (temperature === "") {
+ h4temp.textContent = "Empty Temperature";
+
+ } else if (celsiusOutput === null) {
+ h4temp.textContent = "Empty Radio";
+
+ } else if (celsiusOutput.value === "c") {
+ convertedTemp = (temperature - 32) * (5/9);
+ h4temp.textContent = convertedTemp.toFixed(2);
+
+ } else if (celsiusOutput.value === "f") {
+ convertedTemp = (temperature* 1.8) + 32;
+ h4temp.textContent = convertedTemp.toFixed(2);
+ }
+}
diff --git a/readme.md b/readme.md
index eb83082..37dd762 100644
--- a/readme.md
+++ b/readme.md
@@ -69,13 +69,16 @@ In particular, make sure the following is true:
- [ ] There is a header that includes
- [ ] The application's title
- [ ] a search form with a label, text input, and submit input
+
- [ ] `aside` (will contain a temperature conversion widget), starts empty
- [ ] The `main `section of the page contains placeholder text and contain the following elements:
+
- [ ] `article` - this will contain the current weather (starts empty)
- [ ] `aside` - this will contain 3 `article` elements that will have upcoming weather (starts empty)
- [ ] `aside` (will contain weather history)
- [ ] `section`
- [ ] `h4` with the text `Previous Searches`
+
- [ ] The sidebar includes an empty `ul` and a message inside a `p` element that lets the user know no searches have been made yet
- [ ] CSS Grid should be used to structure the page
@@ -83,10 +86,9 @@ In particular, make sure the following is true:
After searching, your page should look similar to the screenshot below.
-
+
In particular, make sure to include the following:
-
- [ ] The main section of the page should be filled in with relevant information received from the API. (More detailed information below.)
- [ ] Three sections below the main section should show information for the next few days.
- [ ] CSS Grid should be used throughout to structure the page.
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..bc193bd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,105 @@
+header {
+ opacity: 80%;
+ width: 80%;
+ padding: 12px 0px;
+ border: 3px dotted rgb(6, 6, 6);
+ margin-left: auto;
+ margin-right: auto;
+ background-color: cyan;
+ text-align: center;
+ color: white;
+ display: block;
+ font-family: sans-serif;
+}
+
+main {
+ opacity: 90%;
+ display: grid;
+ grid-template-columns: repeat(7, 8fr);
+ grid-template-rows: 1fr 1fr;
+}
+
+#infoBoxes {
+ opacity: 90%;
+ display: grid;
+ grid-column: 3/6;
+}
+
+#previousSearch {
+ opacity: 90%;
+text-align: left;
+background-color: cyan;
+}
+
+#currentWeather {
+ opacity: 90%;
+ display: grid;
+ grid-row: 1/2;
+ padding-left: 30px;
+ text-align: center;
+ border: 3px dotted rgb(0, 0, 0);
+ margin: 10px;
+ background-color:cyan ;
+ height: auto;
+
+}
+
+.futureWeather {
+ display:grid;
+ grid-column: repeat(7,1fr);
+ text-align: center;
+ background-color: cyan;
+}
+
+#history {
+ display: grid;
+ grid-column: 1;
+ text-align: center;
+ padding-left: 30px;
+ background-color: cyan;
+}
+
+ul {
+ text-align: left;
+ background-color: cyan;
+}
+
+#upcoming {
+
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ height:auto;
+ background-color: cyan;
+}
+
+.days {
+ opacity: 80%;
+ display:grid;
+ grid-template-columns:1fr 1fr 1.50fr;
+ text-align: center;
+}
+
+img {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+#Widget {
+ opacity: 80%;
+ width: 80%;
+ padding: 15px 0px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 12px;
+ display: grid;
+ grid-column: 2/3;
+ background-color: cyan;
+ border: 3px dotted rgb(0, 0, 0);
+ color: black;
+ padding: 10px;
+}
+
+body {
+ background-image: url('data:image/jpeg;base64,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');
+ }
+