[Vanilla JS] TODOLIST (1)

29651 ワード
JavaScript vanilla js テキストリンク

反応するといきなりヴァニラJSTODOLISTに…？


理由は...


休みの最後の8月に、私は本当に勉強する考えがありました.だから私は何か足りないところがあると思いました.
私はずっと反応をしていましたが、やるときはいつも「基礎が大切だ」と感じていました.はい.
なぜなら、私は反応器を使ってプロジェクトを行うことに慣れているが、基本的なJSの使用能力が低下しているため、純粋なJSだけを使ってプロジェクトを行う実力がまだ足りないからだ.
また、最近オランウテックの開発が一時阻まれています...ㅠㅠは何もすることがなくて、賢太は一日に50回来ました.

だからね。


バックエンドがCRUDベースの場合、フロントエンドはTODOLISTベースとなります.

TODOLISTの作成を決定しました。



いきなり始まったTodoList制作…


手軽にUIから考える.
PigmaでUIを作ろうと思っていたのですが、どうせ自分で作ったものなので、頭の中では多分UIを編んで開発を始めました.




そして想像通りにだいたいPublishingができました!
  • フォント:Google Fontのいずれかの注目すべきフォント、
  • 色:黒、白、ややグレー+アクセント色
    • これを行うと、すぐにinputを作成し、イベントを処理します.

    inputイベントコード

    <input id="input-box" onkeyup=enter() 
       type="text" placeholder="오늘 할 일을 적어보세요.">
    < index.html >
  • テキストが入力されると、onkeyupイベントが発生します.
    • // input 가져오기
const inputValue = document.querySelector('#input-box');

// 엔터 이벤트가 일어날 때 함수
const enter = () => {
    if (window.event.keyCode == 13 && (inputValue.value)) {
        toDo();
    }
}
    < index.js >

  • Enterキーを押すと、inputに値がある場合、todo()が実行されます(inputに内容がない場合、enterが押されてもtodo関数は実行されません).

  • これによりinput値をjsにインポートしEnterキーを押し、inputに値がある場合はtoDo関数を実行する部分が完了します.

    • ToDo()関数コード

    
<main>
        <input id="input-box" onkeyup=enter() type="text"
               placeholder="당신의 오늘 할 일을 적어보세요.">
        <div id="main-div">
        </div>
    </main>
    < index.html >
    // toDo 리스트를 추가하는 함수 
const toDo = () => {
    // input 에 들어온 text 설정
    let text = inputValue.value;
    // 새로운 tododiv 만들기
    const newTodo = document.createElement("div");
    const newTodoText1 = document.createElement("p");
    const newTodoText2 = document.createElement("p");
    // div 안에 자식 추가
    newTodo.appendChild(newTodoText1);
    newTodo.appendChild(newTodoText2);
    // p 안의 text 설정
    newTodoText1.innerHTML = `${text}`
    // p 안의 del 설정
    newTodoText2.innerHTML = 'X'
    // class 추가
    newTodo.setAttribute("class","todo-box");
    newTodoText2.setAttribute("onclick","del()")
    // mainDiv 안에 넣기 
    mainDiv.appendChild(newTodo);
    // input 값 초기화 
    inputValue.value = '';
}
    < index.js >

  • まず、inputに格納されるtext

  • また、todoを1つ追加するごとにhtmlに新しいtododivが生成されるので、tododivが作成される.
  • tododivは、divのサブ要素として1つのdivおよび2つのpタグを含むので、以下に示す.
    •  const newTodo = document.createElement("div");
 const newTodoText1 = document.createElement("p");
 const newTodoText2 = document.createElement("p");
  • divのサブアイテムは、pラベルの
    • を含む必要があります.
    <div>
  <p></p>
  <p></p>
</div>
  • 以上の構造でなければならないので、appendChildをdivのサブアイテムとして2つのpタグを追加します.
    • // div 안에 자식 추가
    newTodo.appendChild(newTodoText1);
    newTodo.appendChild(newTodoText2);

  • InnerHTMLを使用して、タグに入れるフォントを決定します.
  • setAttributeを使用して、タグにクラスとイベントを設定します.

  • 最後に、htmlで作成したdivをサブエレメントとしてmainDivコンテナに入れ、入力値を初期化します.
    •  // p 안의 text 설정
    newTodoText1.innerHTML = `${text}`
    // p 안의 del 설정
    newTodoText2.innerHTML = 'X'
    // class 추가
    newTodo.setAttribute("class","todo-box");
    newTodoText2.setAttribute("onclick","del()")
    // mainDiv 안에 넣기 
    mainDiv.appendChild(newTodo);
    // input 값 초기화 
    inputValue.value = '';

    Del()関数コード

    const del = () => {
    // todo 의 부모를 찾아서 todo 를 삭제 
    mainDiv.removeChild(event.target.parentNode);
    // 요게 todo 하나 
    console.log(event.target.parentNode);
}
    < index.js >
  • event.targetは、イベントが発生した要素を返します.したがって、event.targetは、Xフォントのpタグを返す.

  • 私たちがしたいのはX字で対応するtododivブロックを削除するので、X字の両親を見つけることができます.
  • tododivを含むmainDivを選択した後、mainDivの子供(tododivら)の中でdelイベントを検索して削除する.

    • + CSS

    /* --- 글씨체 import ---  */
/* font-family: 'Montserrat', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap');

/* --- 기본 글씨체 설정 ---  */
html {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 15px;
    overflow: hidden;
}

/* --- body height 설정 --- 
body {
} */

#header-div {
    top:0;
    font-weight: 300;
    font-size: 4rem;
    height: 10vh;
    text-align: center;
    padding: 3% 0;
}

#main-div {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 60vh;
    width: 720px;
    margin: 0 auto;
}

#main-div::-webkit-scrollbar{
    width: 5px;
}

#main-div::-webkit-scrollbar-thumb{
    height: 5%;
    background-color: rgba(104, 207, 211, 0);
    border-radius: 10px;
}

#main-div::-webkit-scrollbar-track{
    background-color: rgba(206, 206, 206, 0);
}

#footer-div {
    /* background-color: rgb(214, 214, 214); */
    width: 100%;
    position: absolute;
    bottom: 0;
}

#input-box {
    font-size: 1.8rem;
    font-weight: 100;
    display: block;
    margin: 0 auto;
    width: 680px;
    height: 50px;
    border: none;
    padding: 10px;
    border-bottom: 1px solid rgba(104, 207, 211, 0.8);
    margin-bottom: 30px;
}
#input-box:focus {
    /* transition: .3s; */
    /* height: 50px; */
    outline: none;
}


.todo-box {
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: 100;
    min-height: 80px;
    /* height: 80px; */
    margin: 5px 0;
    padding: 5px 30px;
    border-radius: 10px;
    border: 1px solid rgba(206, 206, 206, 0.3);
    background-color: rgba(228, 228, 228, 0.2);
}

.todo-box p:nth-child(2) {
    font-size: 2rem;
    font-weight: 500;
    color: rgba(206, 206, 206, 0.3);
}

.todo-box p:nth-child(2):hover {
    color: rgb(248, 114, 114);
    transition: .3s;
    cursor: pointer;
}

.todo-text{
    padding-right: 10px;
}
    ＜詳細コードはGITHUBで…＞
    ✔GITHUB

    だから。



    これで終わりです.
    Inputにやるべきことを書き、enterを打つと下に追加され、各ボックスのxキーを押すと対応するボックスが削除されます.
    また、todoの生成時間も表示されます.このセクションでは、リフレッシュ時にtodolistが失われないように、次のリリースでtodolistをlocalStorageに保存します.

    に感銘を与える


    本当に久しぶりにヴァニラJSで何をしていたのか、最初はあまり気分が悪くて、これなのかあれなのか、自信がありませんでした.でもやってるうちにだんだん面白くなってきました..^^がんばって完成させよう
    01-6. GRADYアルゴリズムの復習
    Ubuntuがsudo apt-get installインストールプロセスを実行中にエラーが発生しました