Javascript学習2、3週間

15475 ワード
JavaScript ドゥドゥリスター テキストリンク
これは2、3週間以内に制定された2つのリストです.
JAvascriptは勉強して間もないですが、本当に難しいです.またhtmlも久しぶりに使われているので、紛らわしいところもたくさんあります.
html、cssは何度もやったことがあるので、あまり混同するところはありませんが、jsは勉強中なので、あまり知識がないので、いろいろな参考資料を使っています.

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="todoo.css">
    <title>ToDoList</title>
</head>
<body>
    <div class="mainTitle">❗️ To do list ❗️</div>

    <div class="main">
        <form class="js-toDoForm" action="todoo.html" method="post">
            <div class="clock">
            </div>
            <input type="text" name="todo" placeholder="할 일이 뭘까">
            <button type="submit"><b>추가</b></button>
        </form>
        <div class="list">
            <ul class="js-toDoList"></ul>
        </div>
    </div>
    <script type="text/JavaScript" src="todo.js"></script>
</body>
</html>

[ css ]

@font-face {
    font-family: 'IM_Hyemin-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/IM_Hyemin-Bold.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}   

body {
    font-family: 'IM_Hyemin-Bold';
    margin: 0;
    padding: 0;
    background-color:
} 

.main {
    font-family: 'IM_Hyemin-Bold';
}

.mainTitle {
    font-family: 'IM_Hyemin-Bold';
    font-size: 50px;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.clock {
    display: flex;
    justify-content: center;
    font-size: 25px;
}

input {
    font-family: 'IM_Hyemin-Bold';
    margin-top: 80px;
    margin-left: 415px;
    width: 600px;
    height: 50px;
    border: rgb(53, 40, 40) solid 2px;
    border-radius: 10px;
    font-size: 20px;
    padding-left:10px;
}

button {
    padding: 13px;
    font-family: 'IM_Hyemin-Bold';
    font-size: 20px;
    border: rgb(53, 40, 40) solid 2px;
    border-radius: 10px;
    cursor: pointer;
}

.list {
    margin-left: 465px;
    background-color: rgb(138, 138, 138);
    margin-top: 20px;
    width: 600px;
    padding: 10px 40px 10px 0px;
    box-shadow: 3px 3px 3px 3px #e4e4e4;
    border: rgb(53, 40, 40) solid 2px;
    border-radius: 10px;
}
  
.delete {
    right: 37%;
    font-size: 20px;
    background-color: #bff1f3;
    border:rgb(53, 40, 40), solid, 2px;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    color: black;
    cursor: pointer;
}
  
ul {
    list-style: none;
}

li {
    border-bottom: 1px solid #e4e4e4;
    font-size: 20px;
}

.js-toDoForm {
    margin-top: 50px;
    margin-left: 50px;
}

.js-toDoList {
    margin-left: 50px;
    color: white;
    font-size: 26px;
}

[ js ]

// todo.js

const todoList = document.getElementsByClassName('toDolist');

const timer = () => {
    const clock = document.querySelector('.clock');
    const today = new Date();
    let h = today.getHours();
    if (h == 0) {
        h = 12;
    }
    (h > 12) ? h = 'PM ' + (h-12) : h = 'AM ' + h;
    clock.innerHTML = 
        `${addZero(h)} : ${addZero(today.getMinutes())} : 
        ${addZero(today.getSeconds())}`;
}
 
const toDoForm = document.querySelector(".js-toDoForm");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector(".js-toDoList");
 
const TODOS_Ls = "toDos"; // TODOS_Ls는 로컬스토리지에 toDoList 변수명을 저장한 상수
let toDos = []; // toDos는 할일을 저장한 배열
 
function deleteToDo(event) {
  const btn = event.target; // btn에 현재 event를 실행시킨 타켓(버튼)을 대입
  const li = btn.parentNode; // li에 btn의 부모 태그(li)를 대입 
  toDoList.removeChild(li); // toDo6ist태그의 자식에 있는 li(btn.parentNode)를 제거
  // filter를 사용해서 return 결과가 true인 것들만 추출됨
  const cleanToDos = toDos.filter(function (toDo) { 
    return toDo.id !== parseInt(li.id);
  });
  toDos = cleanToDos; // 추출된 내용을 toDos에 넣음
  saveToDos(); // localStorage에 저장
}
 
function saveToDos() {
  localStorage.setItem(TODOS_Ls, JSON.stringify(toDos)); // localStorage에 리스트 저장
}
 
function paintToDo(text) {
  const li = document.createElement("li"); // li 태그 생성
  const delBtn = document.createElement("button"); // button 태그 생성
  const span = document.createElement("span"); // span 태그 생성
  const newId = toDos.length + 1; 
  delBtn.innerText = "X";
  delBtn.addEventListener("click", deleteToDo); // delBtn에 클릭이벤트에 deleteToDo함수 연결
  span.innerText = text; // span태그에 input창에 입력한 값 삽입
  li.appendChild(span); // li의 자식에 span 연결
  li.appendChild(delBtn); // li의 자식에 delBtn 연결
  li.id = newId; 
  toDoList.appendChild(li); // toDoList의 자식에 li 연결
  const toDoObj = {
    text,
    id: newId,
  };
  toDos.push(toDoObj); // toDos에 toDoList 삽입
  saveToDos(); // localStorage에 저장하는 함수
}
 
function handleSubmit(event) {
  event.preventDefault(); // 이벤트가 작동하지 못하게 함
  const currentValue = toDoInput.value; // currentValue에 input창에 입력한 값 대입
  paintToDo(currentValue); // 리스트 추가하는 함수
  toDoInput.value = ""; // input창 초기화
}
 
function loadToDos() {
  const loadedToDos = localStorage.getItem(TODOS_Ls);
  // localStorage에 TODOS_Ls가 있는지 확인
  if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos); // loadedToDos를 json객체로 변경
    parsedToDos.forEach(function (toDo) { // 객체 내용 한개씩 파라미터로 넣어서 함수 실행
      paintToDo(toDo.text); // 리스트 추가하는 함수
    });
  }
}
 
function init() {
  loadToDos();
  // toDoForm에서 submit에 handleSubmit 이벤트를 연결
  toDoForm.addEventListener("submit", handleSubmit);
}
 
init();
jsは上記のように、難しすぎて、ほとんど参考資料を使っています.
参考資料
.
.
.
まずはTodulistの最初の画面

最善を尽くしてきれいにする.
2つのリストを書いたら、このように現れます.

これで、サービス紹介が終わりました.
Todulistタスクの条件は次のとおりです.
  • todoが生成すると生成時間
    • が表示される.
  • enterで
    • を作成
  • inputがNULLの場合、
    • は作成できません.
  • 削除ボタンを押すと、対応するtodo
    • が削除されます.
  • スクロールバーは常に下方
    • に固定する.
    でも、

    -todoの作成時の作成時間を表示します


    -スクロールバーを常に下に固定


    この二つでは足りない.

    💥 問題シュート💥

    [21/07/19]企業探索説明モダリ工場
    レベル1[JavaScript]文字列基本