210304
12881 ワード
😂To.Do.完了リスト
apiを利用して天気情報をリアルタイムで受信する作業がやっと完了しました.頭の中ではゼロから始められないが、jsの使い方に慣れている.最初から完成したコードを参考にせず、ToDoを実施するか、Pacamスターバックスのホームページのクローンコードを行うかを考えます.
✔api fetchコード
<script>
const tem = document.querySelector(".js-tem");
const weather = document.querySelector(".js-weather");
//API에서 받아온 Key
const API_KEY = "880e7431987ae4b28d156d09f1896c04";
const COORDS = "coords";
function getWeather(lat, lng) {
fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
)
.then(function (response) {
return response.json();
})
.then(function (json) {
console.log(json);
const temperature = json.main.temp;
const place = json.name;
tem.innerText = `${temperature}°C`;
weather.innerText = `${place}`;
});
}
function saveCoords(coordsObj) {
localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}
function handleGeoSucces(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude: latitude,
longitude: longitude,
};
saveCoords(coordsObj);
getWeather(latitude, longitude);
}
function handleGeoError() {
console.log("Cant access geo location");
}
function askForCoords() {
navigator.geolocation.getCurrentPosition(handleGeoSucces, handleGeoError);
}
function loadCoords() {
const loadedCoords = localStorage.getItem(COORDS);
if (loadedCoords === null) {
askForCoords();
} else {
// getWeather
const parseCoords = JSON.parse(loadedCoords);
getWeather(parseCoords.latitude, parseCoords.longitude);
}
}
function init() {
loadCoords();
}
init();
</script>
✔pugを使用したページの作成
doctype html
html
head
link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU", crossorigin="anonymous")
title #{pageTitle} | #{siteName}
body
header
include ../partials/header
main
block content
include ../partials/footer
pugは、タグを個別に閉じるのではなく、インデントを使用してhtmlドキュメントを作成します.また、ページにフォームを作成した場合は、別のページに作成したフォームをロードして作成できます.
🙄の意見を打診
今書いた考えですが、講座を聞いているうちにちゃんと勉強したことを整理していなくて、頭で理解しただけで過ぎてしまいました.今は以前ココア毒素をコードした時のように丁寧に整理して勉強します.
Reference
この問題について(210304), 我々は、より多くの情報をここで見つけました https://velog.io/@sdk1926/210304テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol