Ich bin gerade ein Script am Schreiben, bin da seit Freitag daran am Basteln, und wollte jetzt fragen, warum ich es nicht im Forum sowie in einer eigenen Seite zum Laufen bringe. Da es ja geheißen hat, ich müsste, die "Tags" ändern, das tat ich dann auch, ich habe im Script " form " benutzt.
Ich weiß jetzt nicht, ob dieser "Tag" hier im Forum benutzt wird. Ich habe den " Tag " in HTML, CSS und in javascript benutzt.
Ich bin mit dem Desing sehr zufrieden, mit der App finde das hellblaue leuchten sehr beruhigend. Was ich auch nicht verstehe, in eigener seite geht die Suche nicht von der App, im Forum in der Kopfzeile geht dieses. Das verstehe ich nicht.
<!--Starten der Wetter-Benutzeroberfläche--> <section id="weather-content"> <div id="weather-results"> <!--Inhalte werden hinzugefügt, wenn Sie das Wetter einer Stadt anfordern--> </div> </section>
<script src='script.js'></script> </body>
<script id="rendered-js"> let numberOfCards = 0; const apiKey = 'eb380ce293c80acb396c9d71258f3d32'; const form = document.querySelector('form'); const weatherDisplay = document.querySelector('#weather-results'); var formInput = document.querySelector('#city-input'); var inputVal; var result;
//Funktion zum Löschen der verschiedenen Karten anhand der ID function deleteCard(n) { document.getElementById(n).remove(); numberOfCards--; }
//Sammeln Sie beim Absenden des Formulars die Eingaben des Benutzers und verhindern Sie, dass die Seite neu geladen wird form.addEventListener('submit', e => { e.preventDefault(); inputVal = formInput.value.toString(); if (numberOfCards > 0) { let alreadySearched = document.getElementsByClassName('city'); for (let i = 0; i < alreadySearched.length; i++) {if (window.CP.shouldStopExecution(0)) break; let element = alreadySearched[i].innerText.toString(); console.log(element); if (element.indexOf(inputVal) !== -1) { let alreadySearchedCards = document.getElementsByClassName('weather-card'); alreadySearchedCards[i].remove(); } }window.CP.exitedLoop(0); } useWeather(); }); async function fetchWeather(key, city) { let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}&units=metric`); let data = response.json(); return data; }
async function useWeather() { try { result = await fetchWeather(apiKey, inputVal); addCard(); } catch (error) { alert('Please enter a valid city 😓'); form.reset(); formInput.focus(); } }
function addCard() { numberOfCards++; var { name, main, sys, wind, weather } = result;
Interessante Effekte! Es ist auch möglich sich mehrere Städte auf ein Schlag anzeigen zu lassen! Leider ist die Wetter-App nur bedingt in Deutsch einsetzbar. Der Ort wird auch nicht gespeichert und müsste immer wieder neu eingeben werden....
Was ich in der CSS festgestellt habe:
In der CSS ist "HTML" eingetragen, hier wird wieder das gesamte Forum beeinflusst, mit Schriftgröße und Hintergrundfarbe! Wenn man die Wetter-App im Forum einsetzen will, kann der HTML-Eintrag komplett wegfallen, weil der Hintergrund von den Forum-Einstellungen bestimmt wird!
"form" würde sich auch auf das ganze Forum auswirken und würde die DropDown-Menüs und viele "input-Einträge" verändern! Abhilfe schafft die voranstehende ID mit einzubauen (#form form)!
Die Wetteranzeige konnte man im Forum nicht sehen, weil sie sich im Hintergrund versteckt hat! Durch "z-index" kann man sie hier nach vorne bringen oder mit "position:relative"! Habe noch einige CSS-Einträge angepasst!
Was ich unter HTML Code festgestellt habe:
Der Eintrag "body" in Zeile 1+27 kann wegfallen, weil der Eintrag eh im "Body" steht
Der Eintrag in Zeile 26+107 kann wegfallen, wird wohl nur in "Codepen" genutzt
Weil ein Key-Code genutzt wird ist das Script in Zeile 104 für die Wettermehrfachanzeige notwendig!
<!--Starten der Wetter-Benutzeroberfläche--> <section id="weather-content"> <div id="weather-results"> <!--Inhalte werden hinzugefügt, wenn Sie das Wetter einer Stadt anfordern--> </div> </section>
<script id="rendered-js"> let numberOfCards = 0; const apiKey = 'eb380ce293c80acb396c9d71258f3d32'; const form = document.querySelector('form'); const weatherDisplay = document.querySelector('#weather-results'); var formInput = document.querySelector('#city-input'); var inputVal; var result;
//Funktion zum Löschen der verschiedenen Karten anhand der ID function deleteCard(n) { document.getElementById(n).remove(); numberOfCards--; }
//Sammeln Sie beim Absenden des Formulars die Eingaben des Benutzers und verhindern Sie, dass die Seite neu geladen wird form.addEventListener('submit', e => { e.preventDefault(); inputVal = formInput.value.toString(); if (numberOfCards > 0) { let alreadySearched = document.getElementsByClassName('city'); for (let i = 0; i < alreadySearched.length; i++) {if (window.CP.shouldStopExecution(0)) break; let element = alreadySearched[i].innerText.toString(); console.log(element); if (element.indexOf(inputVal) !== -1) { let alreadySearchedCards = document.getElementsByClassName('weather-card'); alreadySearchedCards[i].remove(); } }window.CP.exitedLoop(0); } useWeather(); }); async function fetchWeather(key, city) { let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}&units=metric`); let data = response.json(); return data; }
async function useWeather() { try { result = await fetchWeather(apiKey, inputVal); addCard(); } catch (error) { alert('Please enter a valid city 😓'); form.reset(); formInput.focus(); } }
function addCard() { numberOfCards++; var { name, main, sys, wind, weather } = result;
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps
»
Fragen zur Wetter App
Foren Spende
Direkt zu PayPal
Thema drucken
24.07.2022 16:06 (zuletzt bearbeitet: 02.02.2023 07:16)
Antworten
