Diskuze: Jak na Add to favorites tlačítko

Jakub Drobil

Člen

Jakub Drobil:5.1.2021 12:35

Snažím se vytvořit velmi jednoduchou appku, která ukáže počasí pomocí geolokace nebo přes vyhledání určitého města pomocí OpenWeatherMap API. Přemýšlel jsem jak to vyřešit a jediné, co mě napadá je vytvořit pole, do kterého se budou vkládat města, která uživatel favorituje. Celé tohle pole bude uloženo v localStorage a po načtení stránky se uživateli zobrazí veškerá města, která favoritoval. Absolutně netuším, jestli je tohle správný způsob jak tuhle situaci řešit nebo ne, takže každá rada určitě dobrá.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Jakub Drobil">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Simple weather app that can show the weather at your location using geolocation api and weather at city you type in using openweathermap api">
    <title>Weather App JavaScript</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <header>
        <h1>How is the weather?</h1>
        <div class="input">
            <input type="text" class="search-box" id="search-box" placeholder="  Search for a city..." autofocus/>
        </div>
        <div class="search">
            <button class="search-button" id="search-button" >Search</button>
        </div>
    </header>
    <main>
        <div class="container">
            <div class="app-title">
                <p>Current weather:</p>
            </div>
            <div class="weather-container">
                <div class="temperature-value">
                    <p>- °<span>C</span></p>
                </div>
                <div class="temperature-description">
                    <p>- </p>
                </div>
                <div class="location">
                    <p>-</p>
                </div>
                <div class="notification"> </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="actionButtons">
            <button class="addFavorites" id="addf">Add to favorites</button>
            <button class="removeFavorites" id="removef">Remove from favorites</button>
        </div>
    </footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>

JavaScript:

const tempElement = document.querySelector(".temperature-value p");
const descElement = document.querySelector(".temperature-description p");
const locationElement = document.querySelector(".location p");
const notificationElement = document.querySelector(".notification");

//geo search
const weather = {};

weather.temperature = {
    unit : "celsius"
}

const KELVIN = 273;
const key = "c511aac12cb25d43c14348495fe2e15d";

if('geolocation' in navigator){
    navigator.geolocation.getCurrentPosition(setPosition, showError);
}else{
    notificationElement.style.display = "block";
    notificationElement.innerHTML = "<p>Browser doesn't support geolocation</p>";
}

function setPosition(position){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;

    getWeather(latitude, longitude);
}

function showError(error){
    notificationElement.style.display = "block";
    notificationElement.innerHTML = `<p> ${error.message} </p>`;
}

function getWeather(latitude, longitude){
    let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;

    fetch(api)
        .then(function(response){
            let data = response.json();
            return data;
        })
        .then(function(data){
            weather.temperature.value = Math.floor(data.main.temp - KELVIN);
            weather.description = data.weather[0].description;
            weather.city = data.name;
            weather.country = data.sys.country;
        })
        .then(function(){
            displayWeather();
        });
}

function displayWeather(){
    tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
    descElement.innerText = weather.description;
    locationElement.innerText = `${weather.city}, ${weather.country}`;
}

//city search
const searchbox = document.querySelector('.search-box');
document.getElementById("search-button").onclick = function () {setQuery()}

function setQuery() {
    getResults(searchbox.value);
}

function getResults (cityName) {
    let api = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&units=metric&APPID=${key}`

    fetch(api)
        .then(function(response){
            let data = response.json();
            return data;
        })
        .then(function(data){
            weather.temperature.value = Math.floor(data.main.temp);
            weather.description = data.weather[0].description;
            weather.city = data.name;
            weather.country = data.sys.country;
        })
        .then(function(){
            displayResults();
        });
}

function displayResults () {
    tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
    descElement.innerText = weather.description;
    locationElement.innerText = `${weather.city}, ${weather.country}`;
}

Zkusil jsem: Bohužel, jsem nováčkem do programování, takže teprve snažím přijít na způsob, jak k tomuto problému přistupovat.

Chci docílit: Chtěl bych přidat funkčnost tlačítka, které dává uživateli možnost, přidat si město po jeho vyhledání do listu oblíbených.

Odpovědět

5.1.2021 12:35

Peter Mlich

Člen

Peter Mlich:5.1.2021 13:37

Pokud ma mit neco uzivatel ulozene, musis to ulozit server.
Jestli to spravne chapu, ty tam zadne uzivatele neresis. Jenom pouzivas SELECT z nejake jine sluzby.
V tom pripade je tu moznost pouzit javascriptove cookies nebo dataStorage.
google = js cookies example
https://www.guru99.com/…e-guide.html

// SET (INSERT)
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC; path=/ "
// GET (SELECT)
var x =  document.cookie
// DELETE
document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

google = js dataStorage example
https://developer.mozilla.org/…side_storage
https://stackoverflow.com/…ions/4695652#…

// SET (INSERT)
localStorage.setItem('name','Chris');
// GET (SELECT)
var myName = localStorage.getItem('name');
// DELETE
localStorage.removeItem('name')

Prevod pole do stringu se da resit pres JSON, stringify.
Pro cookies je limit velikosti (Browsers limit cookies to 4 kB). Cookies maji cas expirace a lze je v prohlizeci smazat. Takze pro trvalejsi ulozeni je lepsi pouzit databazi na serveru.
Cookies vyzaduji spravny zapis dat (cookievalue). Kdyz se tam objevi nezadouci znak, ktery nemas osetreny, treba strednik, tak se cookie neulozi nebo ne spravne.
google = js cookies escape value

window.escape.
window.unescape
// zapis pomoci jquery
$.cookie('key', value, { expires: 365 });

Editováno 5.1.2021 13:38

Nahoru Odpovědět

5.1.2021 13:37

Jakub Drobil

Člen

Jakub Drobil:5.1.2021 14:36

Plánuji to dělat přes localStorage, jenže mám problém s tím, že nevím, co bych tam měl vložit jako parametr(cityName?, search-box.value?), protože když pak budu chtít ukázat všechna uložená města, tak pokud tomu rozumím dobře budu nucen opět volat API s parametrem, který dostanu z local storage a k tomu tam bude potřeba vytvořit cyklus, který projede celý localStorage a vloží postupně všechny uložená města do API, a ty se pak vytisknou

Nahoru Odpovědět

5.1.2021 14:36

Peter Mlich

Člen

Peter Mlich:6.1.2021 22:04

Cookies funguje tak, ze, ulozi data pro url stranky. Nespis i localStorage (LS). Pokud pouzivaji stejny pc 2 uzivatele, budou mit 1 ulozena data. To je takova nevyhoda.
U cookies ukladas jmeno a hodnotu. Tam je limit delky. U LS nee.
Hodnota se prevadi na string. U LS nevim, asi taky.
Takze, kdyz mas pole, treba pole s mesty, tak to prevadis na string pomoci JSON, kdyz ukladas. Kdyz ctes, tak prevadis zpet string na pole.
...Ja obvykle ukladam data uzivatele do databaze na server. Tam je moznost rozlisit uzivatele podle loginu. U C/LS to jde taky, ale ty se pouzivaji, kdyz nepotrebujes uzivatele prihlasovat. Podle mne bys mel, ale mozna nepotrebujes. To neumim posoudit.

S tim cyklem to nechapu. Pole se da cislovat, ulozit mesto jako cislo+text, treba. Cyklus je treba pak na vypsani.

var pole = {};
pole[7] = 'Aljaska';
pole[3] = 'Usa';
for (i in pole) {alert(pole[i]);}
pole[3] = null;
if (typeof pole[3]!=='undefined' && pole[3]!=null) alert('existuje');

Editováno 6.1.2021 22:05

Nahoru Odpovědět

6.1.2021 22:04