Click here for free DL of the app version that can save data.

No:796

182

←

Prev Next

→

Dont make a game, just make a list of things to do..ALL
Developer User3136｜Date and time 23/6/17 18:20:08
Build time 42.621 sec｜Game capacity 3.853KB｜

Script

やることリスト

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>やることリスト</title>
  <style>
    /* スタイル */
    body {
      font-family: sans-serif;
    }

input[type=text] {
      padding: 10px;
      border-radius: 5px;
      border: none;
      font-size: 1rem;
      margin-top: 20px;
      margin-bottom: 10px;
      width: 90%;
    }

.add-btn {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
    }

.add-btn:hover {
      background-color: #3E8E41;
    }

.todo-item {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #f2f2f2;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.todo-item input[type=checkbox] {
      margin-right: 10px;
    }

.todo-item .delete-btn {
      background-color: #f44336;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 0.8rem;
      cursor: pointer;
    }

.todo-item .delete-btn:hover {
      background-color: #da190b;
    }
  </style>
</head>

<body>
  <h1>やることリスト</h1>

// やることリストを描画する関数
    function renderTodoList() {
      const todoList = document.getElementById('todo-list');
      todoList.innerHTML = '';

todos.forEach((todo) => {
        const todoItem = document.createElement('div');
        todoItem.classList.add('todo-item');

// チェックボックスを作成
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = false;

// チェックボックスの状態が変わった時の処理を追加
        checkbox.addEventListener('change', function() {
          if (this.checked) {
            todoItem.classList.add('done');
          } else {
            todoItem.classList.remove('done');
          }
        });

// テキストを作成
        const text = document.createElement('span');
        text.textContent = todo.text;

// 削除ボタンを作成
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '削除';
        deleteBtn.classList.add('delete-btn');

// 削除ボタンをクリックした時の処理を追加
        deleteBtn.addEventListener('click', function() {
          todos = todos.filter((t) => t.id !== todo.id);
          renderTodoList();
        });

// 要素をtodoItemに追加
        todoItem.appendChild(checkbox);
        todoItem.appendChild(text);
        todoItem.appendChild(deleteBtn);

// todoListにtodoItemを追加
        todoList.appendChild(todoItem);
      });
    }

// やることを追加する関数
    function addTodo() {
      const todoInput = document.getElementById('todo-input');
      const text = todoInput.value;

if (text) {
        const id = Math.max(...todos.map((t) => t.id)) + 1;
        todos.push({
          id,
          text
        });
        todoInput.value = '';
        renderTodoList();
      } else {
        alert('やることを入力してください');
      }
    }

renderTodoList();
  </script>

</body>

</html>