간단한 JavaScript를 사용하여 TO-DO 목록 웹 앱 만들기

5897 단어 htmlcsstutorialjavascript
이 튜토리얼에서는 거의 매일 사용하는 도구를 만드는 방법을 보여 드리겠습니다. TO-DO 목록 작성 웹앱입니다. 하루를 정리하고 계획하는 데 도움이 됩니다. JavaScript를 위한 훌륭한 초보자 프로젝트를 만듭니다.

여기에서 찾을 수 있습니다 Source Code

기본 HTML 설정




<html lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width:device-width, initial-scale:1.0">
    <title>to-do</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>To - Do</h1>

        <div class="col-12">
            <input id="userInput" type="text" placeholder="New item..." maxlength="150">
            <button id="enter"></button>
        </div>


        <div class="listItems col-12">
            <ul class="col-12 offset-0 col-sm-8 offset-sm-2"></ul>
        </div>

    </div>

    <script type="text/javascript" src="external.js"></script>
</body>
</html>


보시다시피 목록 항목이 없는 ul 요소가 있습니다. 버튼을 입력하면 목록 항목이 생성됩니다. JavaScript 코드로 이를 달성할 것입니다.

자바스크립트 로직



1. 먼저 사용할 변수를 설정합니다.

var enterButton = document.getElementById("enter");
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");


2.입력과 li의 길이를 계산하는 함수 만들기

function inputLength(){
    return input.value.length;
} 

function listLength(){
    return item.length;
}


3. 목록 요소를 생성하는 함수 만들기

function createListElement() {
    var li = document.createElement("li"); // creates an element "li"
    li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text
    ul.appendChild(li); //adds li to ul
    input.value = ""; //Reset text input field


    //START STRIKETHROUGH
    // because it's in the function, it only adds it for new items
    function crossOut() {
        li.classList.toggle("done");
    }

    li.addEventListener("click",crossOut);//when the li is clicked is marked done with the crossOut() function
    //END STRIKETHROUGH


    // START ADD DELETE BUTTON
    var dBtn = document.createElement("button");
    dBtn.appendChild(document.createTextNode("X"));
    li.appendChild(dBtn);
    dBtn.addEventListener("click", deleteListItem);//when X is clicked the li is deleted
    // END ADD DELETE BUTTON


    //ADD CLASS DELETE (DISPLAY: NONE)
    function deleteListItem(){
        li.classList.add("delete")//this is a class that makes display: none; of the li 
    }
    //END ADD CLASS DELETE
}


이 함수는 li 요소를 만들어 ul 요소에 추가합니다. 이 기능은 하이라이트 효과도 허용합니다. 그리고 목록 항목을 삭제하는 버튼을 추가합니다.

4.Enter를 클릭하거나 버튼을 클릭했을 때 CreateListItem 함수를 실행할 함수와 이벤트 리스너를 만듭니다.

function addListAfterClick(){
    if (inputLength() > 0) { //makes sure that an empty input field doesn't create a li
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.which ===13) { //this now looks to see if you hit "enter"/"return"
        //the 13 is the enter key's keycode, this could also be display by event.keyCode === 13
        createListElement();
    } 
}


enterButton.addEventListener("click",addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);


CSS로 스타일 지정



다음은 내가 사용한 코드입니다. 중요한 코드가 완료되었으므로 이 부분에서 원하는 모든 작업을 수행할 수 있도록 내 루틴을 더 쉽게 만들기 위해 간단한 살펴보기로 했습니다.

body {
    background: #04A1BF;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}


h1 {
    padding-top: 1rem;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 4rem;
}

#enter {
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
    color: #04A1BF;
    background-color: #025F70;
    transition: all 0.75s ease;
    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75 ease;
    font-weight: normal;
}

#enter:hover{
    background-color: #02798F;
    color: #FFCD5D;
}

ul {
    text-align: left;
    margin-top: 20px;
}


li {
    list-style: none;
    padding: 10px 20px;
    color: #ffffff;
    text-transform: capitalize;
    font-weight: 600;
    border: 2px solid #025f70;
    border-radius: 5px;
    margin-bottom: 10px;
    background: #4EB9CD;
    transition: all 0.75s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5 ease;
}

li:hover {
    background: #76CFE0;
}

li > button {
    font-weight: normal;
    background: none;
    border: none;
    float: right;
    color: #025f70;
    font-weight: 800;
}

input {
    border-radius: 5px;
    min-width: 65%;
    padding: 10px;
    border: none;
}

.done {
    background: #51DF70 !important;
    color: #00891E;
}

.delete {
    display: none;
}


CSS 파일에서 중요한 점은 버튼과 목록 항목의 클래스와 ID입니다. 이 작업을 수행할 때 눈에 띄게 만드십시오.

읽어 주셔서 감사합니다



이것이 누군가에게 도움이 되기를 바랍니다. 귀하가 겪고 있는 문제에 대해 설명을 하지 않은 경우 연락을 드리겠습니다.
다시 감사합니다,
안전 유지,
~요반
다크호스 프로그래머 - objective - C 학습 노트 와 같은 본질 과 SEL 유형
PRISMA

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage