I want to add a feature to my current search bar where if I click, I am able to see a drop down of all the previous inputs. And if I were to click on this previous input, it will run my code again. I am a current boot camp student and I just need guidance into how to make this work. If someone to just point me in the right direction, or explain some sample functions that would be really helpful. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./assets/style.css" />
<title>Weather Dashboard</title>
</head>
<body onl oad="load()">
<div >
<div >
<div >
<div >
<nav >
<div id="cityName">City Name</div>
<form >
<input
type="search"
id="userInput"
placeholder="search for a city"
aria-label="Search"
/>
</form>
<div id="date">Date</div>
</nav>
<div >
<div id="temperature">15°</div>
<div >
<p id="time">11:00</p>
<h2 id="today"><b>Saturday</b></h2>
<p id="conditions">Cloudy</p>
</div>
</div>
<div >
<div ><hr /></div>
<div >
<div id="condition1">Condition</div>
<div ><img id="conditionIcon1" /></div>
</div>
<div >
<div id="condition2">Condition</div>
<div ><img id="conditionIcon2" /></div>
</div>
<div >
<div id="condition3">Condition</div>
<div ><img id="conditionIcon3" /></div>
</div>
<div >
<div id="condition4">Condition</div>
<div ><img id="conditionIcon4" /></div>
</div>
<div >
<div id="condition5">Condition</div>
<div ><img id="conditionIcon5" /></div>
</div>
<div ><hr /></div>
</div>
<div >
<div ><hr /></div>
<div >
<div id="date1">Sun</div>
<div id="date1Temp"><b>0°</b></div>
</div>
<div >
<div id="date2">Mon</div>
<div id="date2Temp"><b>0°</b></div>
</div>
<div >
<div id="date3">Tue</div>
<div id="date3Temp"><b>0°</b></div>
</div>
<div >
<div id="date4">Wed</div>
<div id="date4Temp"><b>0°</b></div>
</div>
<div >
<div id="date5">Thu</div>
<div id="date5Temp"><b>0°</b></div>
</div>
<div ><hr /></div>
</div>
<div >
<div ><hr /></div>
<div >
<div >Humidity</div>
<div id="humidity1"><b>0°</b></div>
</div>
<div >
<div >Humidity</div>
<div id="humidity2"><b>0°</b></div>
</div>
<div >
<div >Humidity</div>
<div id="humidity3"><b>0°</b></div>
</div>
<div >
<div >Humidity</div>
<div id="humidity4"><b>0°</b></div>
</div>
<div >
<div >Humidity</div>
<div id="humidity5"><b>0°</b></div>
</div>
<div ><hr /></div>
</div>
<div >
<div ><hr /></div>
<div >
<div >Wind Speed</div>
<div id="windSpeed1"><b>0°</b></div>
</div>
<div >
<div >Wind Speed</div>
<div id="windSpeed2"><b>0°</b></div>
</div>
<div >
<div >Wind Speed</div>
<div id="windSpeed3"><b>0°</b></div>
</div>
<div >
<div >Wind Speed</div>
<div id="windSpeed4"><b>0°</b></div>
</div>
<div >
<div >Wind Speed</div>
<div id="windSpeed5"><b>0°</b></div>
</div>
<div ><hr /></div>
</div>
</div>
<div >
<div id="right-header">Today's Statistics</div>
<div >
<div >Temp High:<b id="tempHigh">0°</b></div>
<div >Temp Low:<b id="tempLow">0°</b></div>
<div >Feels Like:<b id="feelslike">0°</b></div>
<div >Wind Speed:<b id="windspeed">0°</b></div>
<div >Humidity:<b id="humidity">0°</b></div>
<div >Pressure:<b id="pressure">0°</b></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>
dayjs().format();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="./assets/script.js"></script>
</body>
</html>
const date = document.querySelector("#date");
const time = document.querySelector("#time");
const dayOfWeek = document.querySelector("#today");
const input = document.querySelector("#userInput");
date.innerText = moment().format("MMMM Do YYYY");
time.innerText = moment().format("h:mm A");
dayOfWeek.innerText = moment().format("dddd");
// applies elements on page load with current position
function load() {
navigator.geolocation.getCurrentPosition((position) => {
let lat = position.coords.latitude;
let long = position.coords.longitude;
let fiveDayURL = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${long}&appid=b169b31281ffa2a2b70b9e8ac22c3e88&units=imperial`;
fetch(fiveDayURL)
.then((res) => {
return res.json();
})
.then((data) => {
fiveDayWeather(data);
console.log(data);
localStorage.setItem("response", JSON.stringify(data.city.name));
loadUrl();
});
});
}
function loadUrl() {
let cityName = JSON.parse(localStorage.getItem("response"));
let requestURL = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=b169b31281ffa2a2b70b9e8ac22c3e88&units=imperial`;
fetch(requestURL)
.then((res) => {
return res.json();
})
.then((data) => {
// console.log(data);
displayWeather(data);
})
.catch(() => {
alert("Unable to connect to OpenWeather");
});
}
// uses user input as parameter to getApi()
input.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
e.preventDefault();
// let cityName = document.querySelectro("#userInput").value;
// let li = document.createElement("li")
// li.innerText = cityName;
// document.querySelector('ul');
// ul.appendChild(li);
getApi();
input.value = "";
}
});
// fetches api using the user input
function getApi() {
let cityName = document.querySelector("#userInput").value;
let requestURL = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=b169b31281ffa2a2b70b9e8ac22c3e88&units=imperial`;
fetch(requestURL)
.then((res) => {
return res.json();
})
.then((data) => {
// console.log(data);
displayWeather(data);
})
.catch(() => {
alert("Unable to connect to OpenWeather");
});
}
// uses api data from getApi() and replaces text in html
let displayWeather = function (weatherData) {
document.querySelector("#cityName").innerText = weatherData.name;
document.querySelector("#temperature").innerText =
Math.floor(weatherData.main.temp) "\u00B0";
document.querySelector("#conditions").innerText =
weatherData.weather[0].description;
document.querySelector("#tempHigh").innerText =
weatherData.main.temp_max "\u00B0 F";
document.querySelector("#tempLow").innerText =
weatherData.main.temp_min "\u00B0 F";
document.querySelector("#feelslike").innerText =
weatherData.main.feels_like "\u00B0 F";
document.querySelector("#windspeed").innerText =
weatherData.wind.speed " MPH";
document.querySelector("#humidity").innerText =
weatherData.main.humidity "%";
document.querySelector("#pressure").innerText =
weatherData.main.pressure " hPa";
let fiveDayURL = `https://api.openweathermap.org/data/2.5/forecast?lat=${weatherData.coord.lat}&lon=${weatherData.coord.lon}&appid=b169b31281ffa2a2b70b9e8ac22c3e88&units=imperial`;
fetch(fiveDayURL)
.then((res) => {
return res.json();
})
.then((data) => {
// console.log(data);
fiveDayWeather(data);
})
.catch(() => {
alert("Unable to connect to OpenWeather");
});
};
// obtains lon and lat from previous function then completes new fetch to display 5 day forecast
let fiveDayWeather = function (weatherValue) {
let todaysMonth = dayjs().$M;
for (let i = 1; i < 6; i ) {
document.querySelector("#date" i).innerText = `${todaysMonth}/${
dayjs().$D i
}`;
document.querySelector("#date" i "Temp").innerText =
weatherValue.list[i].main.temp "\u00B0 F";
document.querySelector("#condition" i).innerText =
weatherValue.list[i].weather[0].description;
document.querySelector("#conditionIcon" i).src =
"http://openweathermap.org/img/wn/"
weatherValue.list[i].weather[0].icon
"@2x.png";
document.querySelector("#humidity" i).innerText =
weatherValue.list[i].main.humidity "%";
document.querySelector("#windSpeed" i).innerText =
weatherValue.list[i].wind.speed "MPH";
}
};
CodePudding user response：
You can store and retrieve the search history as an array to the local storage this way:
// our array
var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown",
"Kill Bill", "Death Proof", "Inglourious Basterds"];
// storing our array as a string
localStorage.setItem("quentinTarantino", JSON.stringify(movies));
// retrieving our data and converting it back into an array
var retrievedData = localStorage.getItem("quentinTarantino");
var movies2 = JSON.parse(retrievedData);
//making sure it still is an array
alert(movies2.length);
You retrieve the array from local storage and add it to the dropdown of the search box. When you search another query string, push it to the retrieved array and store it to local storage again. Hope it helps!
CodePudding user response：
Hello I saw the code and I could suggest you few points-
Create an array and store the e.target.value from your #userinput when the enter key is pressed. If you want you can store the data in local storage as well at the later stage.
Then through an event listener in the input box mention the values stored in the array in list form(Probably use simple ul, li format combination and then style it later).
You also need to be able to pick the value of the history inputs which user selects and for that one way is to use event listeners in all the items of the array.
Now just call the api or whatever you want to do with the e.target.value from one of the event listeners.