I am struggling to add API to my weather web app for the location and temperature to show up once a location is searched.
I added the API key to my code but once I search for a location the website cannot pick up a location and doesn't show the temperature for that specific location.
This is my index.html file:
```<!DOCTYPE html>
<html lang="en">
<head></head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dani's Weather Web App</title>
</head>
<body>
<div class="topnav">
<form action="/script.js">
<input type="text" placeholder="Location..." name="location">
<button type="search">Search</button>
</form>
</div>
<main id="card-container">
<div id= "location">
<p>Weather in --------------------</p>
<div id="temperature">
<img id="temperature-icon" src="icons8-cloud-64.png" alt="">
<p><span id="Temperature Value">----------</span><span id="Temperature Unit"> °C </span></p>
</div>
</main>
</div>
<script src="script.js">
</script>
</body>
</html>```
This is my style.css file:
background-color: rgb(209, 171, 228);
padding: 0;
margin: 0;
display: flex;
width: 200vh;
height: 100vh;
justify-content: center;
align-items: center;
align-content: center;
font-family: 'Times New Roman', Times, serif;
font-size: large;
}
#card-container {
background: white;
width: 500px;
max-width: 100px;
background-color: rgb(233, 227, 227);
border-radius: 50px;
padding: 50px;
box-shadow: 100px;
}
#search-button {
display: flex;
position: topcenter;
width: 100px;
border: 10px;
background-color: blueviolet;
border-radius: 10px;
padding: 50px;
color: blueviolet;
animation-fill-mode: both;
transition: none;
cursor: auto;
}
#topnav {
display: flex;
width: 20px;
height: 20px;
justify-content: center;
align-items: center;
align-content: center;
}
#temperature-icon {
align-items: center;
width: 100px;
}```
This is my script.js file:
```const api = "ad8e05407ded209790d711d05cbf353a";
const iconImg = document.getElementById('weather-icon');
const loc = document.querySelector('#location');
const tempC = document.querySelector('.c');
const tempF = document.querySelector('.f');
const desc = document.querySelector('.desc');
const sunriseDOM = document.querySelector('.sunrise');
const sunsetDOM = document.querySelector('.sunset');
window.addEventListener ('load'), () => {
let long;
let lat;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
long = position.coords.longitude;
lat = position.coords.latitude;
const base = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api}&units=metric`;
fetch(base)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
const { temp } = data.main;
const place = data.name;
const { description, icon } = data.weather[0];
const { sunrise, sunset } = data.sys;
const iconUrl = `http://openweathermap.org/img/wn/${icon}#2x.png`;
const fahrenheit = (temp * 9) / 5 + 32;
const sunriseGMT = new Date(sunrise * 1000);
const sunsetGMT = new Date(sunset * 1000);
iconImg.src = iconUrl;
loc.textContent = `${place}`;
desc.textContent = `${description}`;
tempC.textContent = `${temp.toFixed(2)} °C`;
tempF.textContent = `${fahrenheit.toFixed(2)} °F`;
sunriseDOM.textContent = `${sunriseGMT.toLocaleDateString()}, ${sunriseGMT.toLocaleTimeString()}`;
sunsetDOM.textContent = `${sunsetGMT.toLocaleDateString()}, ${sunsetGMT.toLocaleTimeString()}`;
});
});
}
};```
I have made a simple API based project wherein whenever the user enter some number in the input, the div below it with the output becomes visible and when the input field is empty the div gets hidden again as it was in the initial state. The problem is whenever I clear the input field gradually the setup works as expected but if I clear it quickly the div doesn't hide the div at all. Below given is the reference code for the same
let input = document.querySelector("#number-input");
let fact = document.querySelector(".fact-content");
input.addEventListener("input", getFact);
function getFact() {
let number = input.value;
if (number != "") {
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://numbersapi.com/" + number);
xhr.onload = function () {
if (this.status == 200) {
fact.innerText = this.responseText;
fact.style.display = "block";
}
};
xhr.send();
}
else{
fact.innerText = "";
fact.style.display = "none";
}
}
#import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Varela Round', sans-serif;
box-sizing: border-box;
}
body{
background-color: #9AD0EC;
}
main{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container{
width: 40%;
margin: auto;
line-height: 1.6;
background-color: #1572A1;
color: #eee;
padding: 2rem;
min-width: 500px;
border-radius: 5px;
}
.container h1{
font-size: 1.5em;
}
.container h4{
font-size: 1.2rem;
}
input{
padding: 0.5rem;
border-radius: 5px;
border: none;
margin: 10px 0;
width: 50%;
}
.fact-content{
display: none;
}
<!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="style.css" />
<title>Number Fact</title>
</head>
<body>
<main>
<div class="container">
<h1>Get random fact based on numbers</h1>
<h4>Enter a number and get a random fact</h4>
<input
type="number"
id="number-input"
placeholder="Enter a number..."
/>
<p class="fact-content"></p>
</div>
</main>
</body>
</html>
Consider the case when you have two characters in your input. You delete one character, and initiate an AJAX request for the remaining character. Before that AJAX request completes, you delete the remaining character.
When you delete the final character, the event handler clears and hides the element. But then the previous AJAX request completes, and displays the outdated response in the element.
There are two things you can do here:
When the AJAX request completes, check that the input value is still the same as the number variable. If it's not, discard the response to the AJAX request.
Switch to using the fetch API, and use an AbortController instance to abort the in-flight request when the input value changes.
let input = document.querySelector("#number-input");
let fact = document.querySelector(".fact-content");
let abortToken = null;
input.addEventListener("input", getFact);
async function getFact() {
if (abortToken) {
abortToken.abort("Input changed");
abortToken = null;
}
let number = input.value;
if (!number) {
fact.innerText = "";
fact.style.display = "none";
return;
}
const url = `http://numbersapi.com/${number}`;
abortToken = new AbortController();
const { signal } = abortToken;
try {
const response = await fetch(url, { signal });
if (input.value !== number) {
// The input has been modified.
return;
}
if (!response.ok){
const errorMessage = await response.text();
console.error(response.status, response.statusText, errorMessage);
fact.innerText = "# ERROR #";
fact.style.display = "block";
return;
}
const text = await response.text();
fact.innerText = text;
fact.style.display = "block";
} catch {
}
}
#import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Varela Round', sans-serif;
box-sizing: border-box;
}
body{
background-color: #9AD0EC;
}
main{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container{
width: 40%;
margin: auto;
line-height: 1.6;
background-color: #1572A1;
color: #eee;
padding: 2rem;
min-width: 500px;
border-radius: 5px;
}
.container h1{
font-size: 1.5em;
}
.container h4{
font-size: 1.2rem;
}
input{
padding: 0.5rem;
border-radius: 5px;
border: none;
margin: 10px 0;
width: 50%;
}
.fact-content{
display: none;
}
<!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="style.css" />
<title>Number Fact</title>
</head>
<body>
<main>
<div class="container">
<h1>Get random fact based on numbers</h1>
<h4>Enter a number and get a random fact</h4>
<input
type="number"
id="number-input"
placeholder="Enter a number..."
/>
<p class="fact-content"></p>
</div>
</main>
</body>
</html>
Hi I'm making a search filter from the PokeAPI, but I'm getting a TypeError: Cannot read property 'filter' of undefined at HTMLInputElement. I want that when searching for a pokemon that it shows up. I probably do something wrong it could be a great help if some could help me with it. Thank you for your help.
const PokemonContainer = document.getElementById('pokemon__containerID');
const SearchContainer = document.getElementById('search__containerID');
const SearchElement = document.createElement('input');
SearchElement.setAttribute('type', 'text');
SearchElement.setAttribute('name', 'searchBar');
SearchElement.setAttribute('placeholder', 'Search...');
SearchContainer.appendChild(SearchElement);
const PokemonNumber = 151;
const createPokemonCard = (pokemon) => {
const PokemonElement = document.createElement('div');
const PokemonName = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
const PokemonID = pokemon.id;
const PokemonType = pokemon.types[0].type.name;
const PokemonTypeColors = {
fire: '#EE8130',
grass: '#7AC74C',
eletric: '#F7D02C',
water: '#6390F0',
ground: '#E2BF65',
rock: '#B6A136',
fairy: '#D685AD',
poison: '#A33EA1',
bug: '#A6B91A',
dragon: '#6F35FC',
psychic: '#F95587',
flying: '#A98FF3',
fighting: '#C22E28',
normal: '#A8A77A',
ice: '#96D9D6',
ghost: '#735797',
dark: '#705746',
steel: '#B7B7CE',
};
const AddColors = PokemonTypeColors[PokemonType];
PokemonElement.style.backgroundColor = AddColors;
const PokemonInnerHTML = `
<div class="pokemon__imageContainer">
<img src="https://pokeres.bastionbot.org/images/pokemon/${PokemonID}.png" />
</div>
<div class="pokemon__infomationContainer">
<span class="pokemon__id">#${PokemonID.toString().padStart(3, '0')}</span>
<h3 class="pokemon__name">${PokemonName}</h3>
<small class="pokemon__type">Type: <span>${PokemonType}</span></small>
</div>`;
PokemonElement.setAttribute('class', 'pokemon__card');
PokemonElement.innerHTML = PokemonInnerHTML;
PokemonContainer.appendChild(PokemonElement);
};
const getPokemons = async (id) => {
const api_url = `https://pokeapi.co/api/v2/pokemon/${id}`;
const response = await fetch(api_url);
const data = await response.json();
createPokemonCard(data);
createSearchFilter(data);
};
const receivePokemons = async () => {
for (let item = 1; item <= PokemonNumber; item++) {
await getPokemons(item);
}
};
receivePokemons();
const createSearchFilter = (pokemonData) => {
console.log(pokemonData);
SearchElement.addEventListener('keyup', (event) => {
const SearchValue = event.target.value;
const FilteredPokemons = pokemonData.filter((pokemon) => {
return (
pokemon.name.includes(SearchValue) || pokemon.id.includes(SearchValue)
);
});
createPokemonCard(FilteredPokemons);
console.log(FilteredPokemons);
});
};
createSearchFilter();
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #efefbb;
background: -webkit-linear-gradient(to right, #d4d3dd, #efefbb);
background: linear-gradient(to right, #d4d3dd, #efefbb);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Lato';
}
h1 {
letter-spacing: 3px;
}
.pokemon__container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: space-between;
max-width: 100vw;
}
.pokemon__card {
background: #eeeeee;
border-radius: 20px;
padding: 20px 40px;
margin: 10px;
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.6);
}
.pokemon__imageContainer {
margin-top: 20px;
width: 120px;
height: 120px;
}
.pokemon__imageContainer img {
width: 100%;
}
.pokemon__infomationContainer {
margin-top: 20px;
text-align: center;
}
.pokemon__id {
background: #ffffff80;
border-radius: 10px;
font-size: 1rem;
padding: 5px 10px;
}
.pokemon__name {
margin: 15px 0 7px 0;
letter-spacing: 1px;
}
<!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" />
<title>Document</title>
<script src="function.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>PokeDex</h1>
<div class="search__container" id="search__containerID"></div>
<div class="pokemon__container" id="pokemon__containerID"></div>
</body>
</html>
The problem is you're calling createSearchFilter again and again inside getPokemons which is the root of the problem.
What I would suggest is after you get all the date call createSearchFilter once and no need to pass in any data, we will hide/show the DOM elements.
One additional thing that I would suggest is add an id to the pokemon__card and set it equal to the pokemon's name, this will make searching fairly simple.
PokemonElement.setAttribute("id", PokemonName);
Next, inside createSearchFilter function grab all pokemon cards from the DOM and listen for the keyup event. Inside the event listener check if the card's id includes the search term.
If it does, set the display of the card to block.
If it doesn't, set it to none.
const PokemonContainer = document.getElementById("pokemon__containerID");
const SearchContainer = document.getElementById("search__containerID");
const SearchElement = document.createElement("input");
SearchElement.setAttribute("type", "text");
SearchElement.setAttribute("name", "searchBar");
SearchElement.setAttribute("placeholder", "Search...");
SearchContainer.appendChild(SearchElement);
const PokemonNumber = 10;
const createPokemonCard = (pokemon) => {
const PokemonElement = document.createElement("div");
const PokemonName = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
PokemonElement.setAttribute("id", PokemonName);
const PokemonID = pokemon.id;
const PokemonType = pokemon.types[0].type.name;
const PokemonTypeColors = {
fire: "#EE8130",
grass: "#7AC74C",
eletric: "#F7D02C",
water: "#6390F0",
ground: "#E2BF65",
rock: "#B6A136",
fairy: "#D685AD",
poison: "#A33EA1",
bug: "#A6B91A",
dragon: "#6F35FC",
psychic: "#F95587",
flying: "#A98FF3",
fighting: "#C22E28",
normal: "#A8A77A",
ice: "#96D9D6",
ghost: "#735797",
dark: "#705746",
steel: "#B7B7CE",
};
const AddColors = PokemonTypeColors[PokemonType];
PokemonElement.style.backgroundColor = AddColors;
const PokemonInnerHTML = `
<div class="pokemon__imageContainer" id="${PokemonName}">
<img src="https://pokeres.bastionbot.org/images/pokemon/${PokemonID}.png" />
</div>
<div class="pokemon__infomationContainer">
<span class="pokemon__id">#${PokemonID.toString().padStart(3, "0")}</span>
<h3 class="pokemon__name">${PokemonName}</h3>
<small class="pokemon__type">Type: <span>${PokemonType}</span></small>
</div>`;
PokemonElement.setAttribute("class", "pokemon__card");
PokemonElement.innerHTML = PokemonInnerHTML;
PokemonContainer.appendChild(PokemonElement);
};
const getPokemons = async (id) => {
const api_url = `https://pokeapi.co/api/v2/pokemon/${id}`;
const response = await fetch(api_url);
const data = await response.json();
createPokemonCard(data);
};
const receivePokemons = async () => {
for (let item = 1; item <= PokemonNumber; item++) {
await getPokemons(item);
}
createSearchFilter();
};
receivePokemons();
const createSearchFilter = (pokemonData) => {
const cards = document.querySelectorAll(".pokemon__card");
SearchElement.addEventListener("keyup", (event) => {
const val = event.target.value.toLowerCase();
cards.forEach((card) => {
if (card.id.toLowerCase().includes(val)) {
card.style.display = "block";
} else {
card.style.display = "none";
}
});
});
};
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #efefbb;
background: -webkit-linear-gradient(to right, #d4d3dd, #efefbb);
background: linear-gradient(to right, #d4d3dd, #efefbb);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Lato';
}
h1 {
letter-spacing: 3px;
}
.pokemon__container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: space-between;
max-width: 100vw;
}
.pokemon__card {
background: #eeeeee;
border-radius: 20px;
padding: 20px 40px;
margin: 10px;
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.6);
}
.pokemon__imageContainer {
margin-top: 20px;
width: 120px;
height: 120px;
}
.pokemon__imageContainer img {
width: 100%;
}
.pokemon__infomationContainer {
margin-top: 20px;
text-align: center;
}
.pokemon__id {
background: #ffffff80;
border-radius: 10px;
font-size: 1rem;
padding: 5px 10px;
}
.pokemon__name {
margin: 15px 0 7px 0;
letter-spacing: 1px;
}
<!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" />
<title>Document</title>
<script src="function.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>PokeDex</h1>
<div class="search__container" id="search__containerID"></div>
<div class="pokemon__container" id="pokemon__containerID"></div>
</body>
</html>
createSearchFilter() have to take parameter but in your code don't take any param that's why pokemonData is undefined
I am currently making a chrome extension (This is my first chrome extension) that you can take small notes with and want to keep the user input. I am keeping the user input inside of input classes. How would I be able to store the chrome extension state so that when I reopen it, it will stay the same? Here is the code that I have written so far.
//selectors
const addbutton = document.querySelector(".add");
const addlist = document.querySelector(".note-list");
const noteList = document.querySelector(".note-list")
//event listners
addbutton.addEventListener('click', addNote);
//functions
function addNote(event){
//prevent page refresh
event.preventDefault();
//note div
const noteDiv = document.createElement('div');
noteDiv.classList.add('note');
//create li
const newNote = document.createElement('li');
newNote.classList.add('noteitem');
noteDiv.appendChild(newNote);
//create input
const newInput = document.createElement('input');
newInput.classList.add('noteInput')
newNote.appendChild(newInput);
//append to list
noteList.appendChild(noteDiv);
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
height: 500px;
width: 400px;
}
h1{
font-family: "Montserrat", sans-serif;
font-size: 20px;
font-weight: lighter;
padding-top: 10px;
padding-bottom: 10px;
}
main{
text-align: center;
}
.title{
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.685);
}
.mainpage{
padding-top: 20px;
}
.add{
font-family: "Montserrat", sans-serif;
font-size: 25px;
font-weight: 400px;
background-color: #00FF33;
width:40px ;
height: 40px;
border-radius: 10px;
border: none;
transition: ease 0.5s;
}
.add:hover{
background-color: #00c026;
}
.note-container{
display: flex;
justify-content: center;
align-items: center;
}
.note-list{
min-width: 30%;
list-style: none;
}
.note{
margin: 0.5rem;
background: whitesmoke;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
border-radius: 7px;
}
.noteitem{
padding: 0.5rem 2rem;
}
.noteInput{
display: block;
margin-right: auto;
margin-left: auto;
border: none;
background-color: whitesmoke;
font-size: 20px;
max-height: 200px;
}
.note li{
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Note</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div class="title">
<h1>Mini note app</h1>
</div>
<section class="mainpage">
<button class="add">+</button>
<div class="note-container">
<ul class="note-list"></ul>
</div>
</section>
</main>
<script src="/popup.js"></script>
</body>
</html>
Thank you
// uses local storage
chrome.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
// uses synced storage, hits Chrome backend when being set
chrome.storage.sync.set({key: value}, function() {
console.log('Value is set to ' + value);
});
// to retrieve the data, use 'sync' instead of 'local' if using sync
chrome.storage.local.get(['key'], function(result) {
console.log('Value currently is ' + result.key);
});
You'll still need to figure out how you want to organize the note data. For example, you could store all of the notes in an array on the notes key that looks like the following:
{
notes: [
{ id: 1, body: 'First note' },
{ id: 2, body: 'Second note' }
]
}
you have two options :-
you can use localStorage just like in web page for more check here
you can use chrome.storage for more check here
I would like to get whatever user search via input after he will stop typing. Then i would like to pass it to giphy api but there i have a problem with passing variable/result. Here is my code :
const mainInput = document.querySelector(".main-input");
mainInput.addEventListener('keyup', getUserQuery);
function getUserQuery(e) {
let timeout = null;
let userQuery;
clearTimeout(timeout);
timeout = setTimeout(function() {
return userQuery = mainInput.value;
},300)
return userQuery;
}
//function makeUrlForSearch(getUserQuery) {
// let a = getUserQuery();
// console.log(a);
//}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
font-size: 10px;
}
.header {
padding: 1rem;
margin: 1rem auto;
}
.header-title {
font-size: 2rem;
}
.main-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wyszkuj Gipha!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header"><h1 class="header-title">Wyszukaj Gipha!</h1></header>
<main class="main">
<form class="main-form">
<input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input">
</form>
</main>
<script src="main.js"></script>
</body>
</html>
the makerUrlForSearch is not working and i've beend siting on it for a while but its not working.
Can anyone help? So that i would get search made by user after 300ms after he stops typing and then use it in giphy api, but i cannot do it :(
There were a couple issues in the code you provided :
In getUserQuery function, you're returning userQuery before the asynchronous setTimeOut sets its value.
The makeUrlForSearch function is calling getUserQuery but is never called. I switched that and made it so getUserQuery calls the makeUrlForSearch function
In getUserQuery, the timeout declaration would always erase previous timeouts. I moved the let timeout = null instruction outside of your getUserQuery function to make it global so that a getUserQuery call can clear a previous timeout.
const mainInput = document.querySelector(".main-input");
mainInput.addEventListener('keyup', getUserQuery);
let timeout;
function getUserQuery(e) {
clearTimeout(timeout);
timeout = setTimeout(function() {
makeUrlForSearch(mainInput.value);
},300);
}
function makeUrlForSearch(getUserQuery) {
//let a = getUserQuery();
console.log(getUserQuery);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
font-size: 10px;
}
.header {
padding: 1rem;
margin: 1rem auto;
}
.header-title {
font-size: 2rem;
}
.main-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wyszkuj Gipha!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header"><h1 class="header-title">Wyszukaj Gipha!</h1></header>
<main class="main">
<form class="main-form">
<input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input">
</form>
</main>
<script src="main.js"></script>
</body>
</html>
Below you can find a solution to your problem by using debounce function from lodash
I have made changes below. Added a raw debounce function.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
$(document).ready(function(){
function makeUrlForSearch(query) {
let a = query;
console.log(a);
}
function getUserQuery(e) {
makeUrlForSearch(e.target.value);
}
document.querySelector(".main-input").addEventListener('keyup', debounce(getUserQuery, 300));
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
font-size: 10px;
}
.header {
padding: 1rem;
margin: 1rem auto;
}
.header-title {
font-size: 2rem;
}
.main-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wyszkuj Gipha!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header"><h1 class="header-title">Wyszukaj Gipha!</h1></header>
<main class="main">
<form class="main-form">
<input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input">
</form>
</main>
<script src="main.js"></script>
</body>
</html>