バニラjsでChromeアプリを作成(符号なし)-3

TO-DO-LIST

todo.jsファイルを作成しhtmlからインポート-
フォームを作成してtodoを作成--
その後、todoが表示される空のリストを作成します(JavaScriptファイルに埋め込まれています).
JavaScriptファイルからhtmlのフォームをインポート--
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
実行するタスクリストをリターンとして使用しないでください.--
function handleToDoSubmit(event) { event.preventDefault();}
toDoForm.addEventListener("submit", handleToDoSubmit);
表示されるたびに表示される待機事項をクリアし、入力された待機事項を保存します.--
空の値--toDoInputを入力します.value="";
入力した値を変数として保存します.--const newTodo = toDoInput.value;
入力したことをドキュメントに表現しましょう

やるべきこと

このように説明したいです.対応する関数を作成しましょう.

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

このように入力することができました.
しかし、リフレッシュするとすべて消えてしまいます.これも修正する必要があります.
「保留中の削除」ボタンを作成--
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
機能関数を削除--
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
}
ここでeventはボタンのパラメータであり、イベントターゲットの親要素はボタンが属するliであり、liにはやるべきことが表示されるのでクリアする.

保留中の事項を保存する

リポジトリに保存して、リフレッシュしても消去されないようにしましょう.
保存する配列を作成します.const to dos=[];
配列にやるべきことを保存する--todos.push(newTodo);
ローカルストレージは配列を格納できず、テキストのみを格納できます.
だから必要なのはJSONstringgifyは、中の内容を文字列(string)に変換します.
保存された関数--
function saveToDos(){
localStorage.setItem("todos", JSON.stringify(toDos));
}
保存を実行--saveToDos()
https://mkil.tistory.com/322
JSON.stringfiyが文字列に変換すると、parseは逆の役割を果たします.

保存する待機事項--const savedToDos=localStorageを取得します.getItem(TODOS_KEY);
情報はjson形式なので、parseを使用してコードに書き込みます.--
if (savedToDos !== null) {
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach((item) => console.log("this is the turn of ", item));
}
JavaScriptでは、配列内の各プロジェクト(item)に対して関数を実行できます.
次に、保存するコンテンツを削除するときに、画面からのみ削除するのではなく、リポジトリ自体から削除してみましょう.
配列を不変ではなく可変letに変換します--let toDos=[];
idとテキストを含むオブジェクトを作成--
const newTodoObj = {
text: newTodo,
id: Date.now(),
};
このオブジェクトを使用して転送--
toDos.push(newTodoObj);
paintToDo(newTodoObj);
これでlettoDos=[];配列に入るのは単純な値ではなく、オブジェクトです.
(Date.now()はミリ秒単位のランダム値を与えます.)

リポジトリに行う情報がある場合は、toDos=parsedToDosに転送します.
オブジェクトの2つの値、id、テキストの値を渡します.
li.id = newTodo.id;
span.innerText = newTodo.text;
大事なのは.リポジトリ内の保留中の情報を削除することは、アレイから値を削除することではありません.
新しい配列を生成し、値を除外します.
詳細-
foreachキャラクタに似たフィルタの場合
[1,2,3,4].filter(clean)
フィルタは、配列内のitem、1、2、3、および4ごとにパラメータとしてclean関数を実行します.このときcleanは各項目をパラメータ形式で受信する(clean(1)、clean(2)...)
clean関数は真の値を返さなければなりません.ダミーが発生した場合、この値は配列に含まれません.
3に嘘が出たら.
clean(1) =1
clean(2) =2
clean(3) x
clean(4) =4
clean(3)の値は配列に含まれません.
例)
constarr=[「ピザ」「バナナ」「トマト」]
function clean(food){return food!="バナナ"}
arr.filter(clean)
結果:(2) [『ピザ』『トマト』]
すなわち,フィルタは前述のように関数標準の肥料網を用いる役割を果たしている.
=>を使用して、1行の関数を簡略化します.
次の2つの関数は同じ機能です.
//関数表示
filteredArray = myArray.filter(function(element){
return element > 2;
});
//矢印関数
filteredArray = myArray.filter(element => element > 2);
これで、フィルタを使用して保留中のものを削除するときに、お互いのIDを一致させ、リポジトリから削除するのではなく、新しい配列を作成してそのIDの値を保存できます.--
toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
saveToDos()
これでtodoリストが完成しました

天候コンポーネントの作成

weather.jsファイルを作成します.
関数を使用してユーザーの場所を指定します(場所)--
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
2つのパラメータを受け入れ、データを受け入れ、成功時の関数、失敗時の関数を得る.
まず関数を実行

確認ウィンドウが表示されます
成功した関数--
function onGeoOk(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log("You live in", lat, lng);
}
緯度と経度を変数としてインポートします.
失敗した場合--
function onGeoError() {
alert(「見つからない」);
}
天気情報を取得するサイト
https://openweathermap.org/api
使用--https://namjackson.tistory.com/27
htmlファイルに天気表示ウィンドウを作成する

<div id="weather">
    <span></span>
    <span></span>
  </div>

apiで天気を表す

const weather = document.querySelector("#weather span:first-child");
const city = document.querySelector("#weather span:last-child");
const API_KEY = "241051bf13976dd3ddf8b8d9f247255e";

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      city.innerText = data.name;
      weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
    });
}
function onGeoError() {
  alert("Can't find you. No weather for you.");
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);