TodoList를 만들어 프런트 엔드의 기초를 배우자.

이번에는 HTML, CSS, Java Script의 기본을 누를 수 있습니다.
먼저 HTML, CSS를 사용하여 웹 브라우저에서 TodoList를 만듭니다.
Chrome에서 깨끗하게 표시 할 수 있음을 표시하십시오.
모두 복사해도 완성되지 않으므로, 과제를 스스로 조사해 완성합시다.
※디자인이나 색상, 각 항목의 명칭은 변경 가능. 좋아하는 디자인으로 해주세요.

완성 이미지

디렉토리 구성

강사가 준비한 리포지토리를 복제하고 리포지토리를 VSCode로 표시합니다.
폴더 구분은 특별히 하지 않고, 이하의 파일 3개를 작성해 주세요.

┬ index.html
├ style.css
└ app.js

1.HTML

우선은 html만으로 타이틀, 입력 부분, 표(Table), 버튼의 표시를 배웁시다.

도전
· <h1></h1> 를 사용하여 제목을 작성한다. (예정표, TodoList, 뭐든지 좋습니다)
· <table></table> 및 <tr><th><td> 태그를 사용하여 테이블 만들기
· <input>를 사용하고 각 항목에 맞는 type=""・ <button> 에서 등록・삭제
・일시 ・기간은 시간까지 입력할 것

포인트
・심플하게 하자!
・들여쓰기를 깨끗하게 하자!
・분으로 그림이나 그림을 그리고 테이블의 이미지를 잡아도 OK! 책을 의식하지 않아도 튼튼합니다!

2.CSS

html이 끝나면 다음은 css를 구현합니다.
같은 폴더에 style.css라는 파일을 만듭니다.
html에서 css 파일을 로드합니다.
<link rel="stylesheet" href="style.css">
책이나 분으로 작도한 것을 의식하면서 조정해 갑시다.

도전
・버튼에 커서를 놓았을 때에 라벨을 바꾼다
・예정의 테이블은 화면 중앙에
· 테이블 데이터의 텍스트 위치
· 금액 표는 오른쪽 정렬
・체크 박스, ID, 시간표시 ・버튼은 중앙 정렬
・그 외는 왼쪽 정렬
・등록 버튼과 삭제 버튼은 명확하게 알 수 있도록 배치를 놓는다

포인트
・라트를 엉망으로 만들지 않는다!
· 통감을 낸다!
· 쓸데없는 설명은 쓰지 않는다!

3.Java Script

CSS의 작성이 끝나면, 다음은 javascript로 등록·삭제의 처리를 구현해 갑니다.
같은 폴더에 app.js라는 파일을 만듭니다.
html 안의 끝에서 파일을 읽습니다.
<script src='app.js'></script>
도전
・등록할 내용을 입력하고, 입력한 내용을 등록 버튼을 클릭하여 테이블에 표시
・「예정」을 입력하지 않고 등록 버튼을 클릭했을 경우에 「예정을 입력해 주세요」라고 하는 경보를 발행
・일시 등 입력하지 않은 경우, 공문자를 테이블에 출력한다(항목에 행을 포함하는 경우는 0엔으로 표시시킨다)
・일시의 표식은 YYYY-MM-DD HH:mm:ss 또는 YYYY/MM/DD HH:mm:ss 의 형태로 한다
· 전체 삭제를 클릭했을 때 등록된 모든 일정 삭제
・선택 삭제를 클릭했을 때에 체크를 한 예정 모두를 삭제

포인트
· 복사하지 마십시오.
· 과제를 위에서부터 순서대로 구현합니다.
· 하나의 처리를 구현하고 내용을 이해합니다.
"이 처리는 무슨 의미?"라고 질문받아도 대답할 수 있도록 이해해 둡시다.

처리 흐름

/* 1. use strict が何かを調べよう */
`use strict`;

{
/* 2.⼊⼒したTodoタスクの⼀覧を保持する配列を定義する */
let todolists = []

/*
3.HTMLのID値を使って以下のDOM要素を取得する
 →⼊⼒ボックス、登録ボタン、各削除ボタン、Todoリストを⼀覧表⽰するtable
*/
 const todo = document.getElementById('todo') // 予定
 const memo = document.getElementById('memo') // めも
 const addButton = document.getElementById('addButton') // 登録ボタン
　　const tableBody = document.getElementById('todo-body') // 表

/* 4.「登録」ボタンがクリックされたときの処理 */
 addButton.addEventListener('click', () => { 
  // クリックされた時のそれぞれのvalueを、todoListの中⾝に⼊れ込む
  const todoList = {
    todo: todo.value,
    memo: memo.value,
   }
  // todoListがtrueの場合の処理
  if (todoList) {
     todolists.push(todoList) // 最初に定義した配列todolistsの末尾に、上記で⽣成したtodoListの配列を追加していく
     todo.value = '' // ⼊⼒されたテキストを空にする
     memo.value = ''
     showTodos() // showTodosという関数を呼び出す
   }
  })

/* 5.「todolists」の中⾝を⼀覧表⽰するための関数を⽤意する（まずはチェックボックスなしで考えよう！）*/
  const showTodos = () => {
    tableBody.textContent = '' 

    // 値を１つずつ取り出し、繰り返し処理を実⾏
    todolists.forEach((todolist, number) => { 

      // tbody要素に追加するためのtr要素を作成し、⼦要素としてtrを追加
      const tableRecord = document.createElement('tr')
      tableBody.appendChild(tableRecord) // tr要素に追加するためのtd要素をそれぞれ作成する
      const tableId = document.createElement('td')
      const tableTodo = document.createElement('td')
      const tableMemo = document.createElement('td')
      const tableAction = document.createElement('td') 

      // td要素の中⾝のテキストを表⽰するため、オブジェクトの要素から取得する
      tableId.textContent = number + 1  // 配列のindexは0から始まるが、1個めの予定、2個めの予定…と予定表では1から表⽰させる
      tableTodo.textContent = todolist.todo
      tableMemo.textContent = todolist.memo 

      // td要素をtr要素の⼦要素として追加する
      tableRecord.appendChild(tableId)
      tableRecord.appendChild(tableTodo)
      tableRecord.appendChild(tableMemo)
      tableRecord.appendChild(tableAction) 

      // ボタン⽣成関数をtd要素の⼦要素として呼び出す
      tableAction.appendChild(createDeleteButton(tableRecord))
     })
    }

/* 6.「削除機能」を管理するボタンを⽣成する関数 */
  const createDeleteButton = (tableRecord) => {
    const index = tableRecord.rowIndex-1
    const deleteButton = document.createElement('button')
    deleteButton.textContent = '削除'
    deleteButton.addEventListener('click', () => {
      todolists.splice(index, 1)
      showTodos()
    })
    return deleteButton
   }
  }

/*
7.addButtonがクリックされたときの処理の中に、予定が⼊⼒されていなかったらアラートを出⼒しよう！
    どこに処理を置くか、考えてみましょう。
*/
  if (todo.value !== '') {
   alert('予定を⼊⼒してください')
  }

/*
8.「3.HTMLのID値を使って以下のDOM要素を取得する」の項⽬を増やしてみよう！
  上記の処理では「予定」「メモ」「登録ボタン」のDOM要素の取得のみでした。
  予定やメモの他に任意で作られたinput要素を取得していきましょう。

  ヒント：
   4.「登録」ボタンがクリックされたときの処理 で実装している todoList や todoListがtrueの場合の処理 にも⼿を加えます。
   5.「todolists」の中⾝を⼀覧表⽰するための関数 の中の以下の部分でも同様に、追加で取得したDOM要素を記述していきます。
    // tr要素に追加するためのtd要素をそれぞれ作成する
    // td要素の中⾝のテキストを表⽰するため、オブジェクトの要素から取得する
    // td要素をtr要素の⼦要素として追加する

9.⽇時の表⽰は `YYYY-MM-DD HH:mm:ss` または `YYYY/MM/DD HH:mm:ss` の形にする

10.⽇時など、⼊⼒していない場合に空⽂字を出⼒する（項⽬にお⾦を含める場合は0円と表⽰させる）

11.全削除ボタンを実装してみよう

12.テーブルを作成するときに、テーブル左端にチェックボックスを作成してみよう

13.チェックボックスがチェックされているものだけを、「⼀括削除」ボタンで削除する機能を実装してみよう
*/

참고로 해 보면 좋다 헌헌 모아 두었습니다.
.getElementById():
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 자 / 도 cs / 우에 b / 아피 / 도쿠 멘 t / 게테 멘 t 비 d

.push():
htps : //에서 ゔぇぺぺr. 모잖아. 오 rg / 자 / 도 cs / 우 b

.appendChild():
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / ap / / / ぺん d chi ld