Zenn
👋

簡単なメモ帳アプリ　ソースコード!!

2024/11/12に公開2件
JavaScript
CSS 3
HTML 5
初心者向け
ソースコード
tech

今回はまたまたコードを公開します！！

今日はメモ帳アプリを作りました！！

以下がソースコードです！！

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>memo</title>
  <style>
    .title {
      text-align: center;
      font-size: xxx-large;
      color: black;
    }

    .setumei {
      text-align: center;
    }

    main > h1 {
      text-align: center;
      cursor: pointer;
    }

    .id {
      margin-top: 20px;
      padding-top: 5px;
      border-radius: 10px;
      border: 1px solid black;
      padding-top: 20px;
      padding-bottom: 20px;
    }

  </style>
</head>
<body>
  <h1 class="title">メモ帳アプリ</h1>
  <p class="setumei">最大10こメモを追加できます！！ 白い枠をクリックして内容を追加してください！！</p>

  <main>
    <h1 class="id" onclick="henkou(`1`)"  id="i1"> 1 </h1>
    <h1 class="id" onclick="henkou(`2`)"   id="i2"> 2 </h1>
    <h1 class="id" onclick="henkou(`3`)"   id="i3"> 3 </h1>
    <h1 class="id" onclick="henkou(`4`)"   id="i4"> 4 </h1>
    <h1 class="id" onclick="henkou(`5`)"   id="i5"> 5 </h1>
    <h1 class="id" onclick="henkou(`6`)"   id="i6"> 6 </h1>
    <h1 class="id" onclick="henkou(`7`)"   id="i7"> 7 </h1>
    <h1 class="id" onclick="henkou(`8`)"   id="i8"> 8 </h1>
    <h1 class="id" onclick="henkou(`9`)"   id="i9"> 9 </h1>
    <h1 class="id" onclick="henkou(`10`)"   id="i10"> 10 </h1>
  </main>


  <script>
    function $(nam) {return document.getElementById(nam)}

    function local_set(nam, nam2) {localStorage.setItem(nam, nam2)}

    function local_get(key) { return localStorage.getItem(key) };

    function henkou(int2) {
      memo_text = prompt("memo_text_input")
      let int3 = "i" + int2;
      local_set(int3, memo_text)
      let int4 = $(int3);

      int4.textContent =  memo_text;
    }

    function loading() {
      let sss1 = local_get("i1")
      $("i1").textContent = sss1
      let sss2 = local_get("i2")
      $("i2").textContent = sss2
      let sss3 = local_get("i3")
      $("i3").textContent = sss3
      let sss4 = local_get("i4")
      $("i4").textContent = sss4
      let sss5 = local_get("i5")
      $("i5").textContent = sss5
      let sss6 = local_get("i6")
      $("i6").textContent = sss6
      let sss7 = local_get("i7")
      $("i7").textContent = sss7
      let sss8 = local_get("i8")
      $("i8").textContent = sss8
      let sss9 = local_get("i9")
      $("i9").textContent = sss9
      let sss10 = local_get("i10")
      $("i10").textContent = sss10
    }

    loading()
  </script>
</body>
</html>

何か改良点や不良などがあればコメントしてください！！　バイバイ！

Discussion

nanasinanasi

こんにちは〜、偶然通りかかった趣味コーダーです。
記事のコード、私の手元でも動きました。よくできてると思います。

ところで、少し改良できそうなところを見つけました。
scriptタグ内にあるloading関数、for文（これ）を使ったらすっきりまとめられそうです。
例えばこんな感じにしてみるのはどうでしょうか？

function loading() {
  for (let index = 1; index <= 10; index++) {
    const memo_id = "i" + index;
    const memo_text = local_get(memo_id);
    $(memo_id).textContent = memo_text;
  }
}

お節介でしたらすみません...