JavaScript로 나만의 ToDo 앱을 만드세요!

3050 단어 htmlcsstutorialjavascript
빠르고 무료로 프로그래밍을 배우려면 내 YouTube 채널을 구독하는 것을 잊지 마세요.

코드는 다음과 같습니다.



HTML
<!DOCTYPE html>
<html>
<head>
    <title>To Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/007b767ad0.js" crossorigin="anonymous"></script>
<style>
    * {
        margin: 0;
        border: 0;
        font-family: sans-serif;
    }
    h1 {
        margin-top: 10px;
        position: absolute;
        color: blue;
        font-size: 300%;
        width: 100%;
        text-align: center;
    }
    .inp {
        position: absolute;
        top: 13%;
        left: 50%;
        transform: translate(-50%, -13%);
        width: 70%;
        align-items: center;
    }
    input {
        border: none;
        border: 2px solid blue;
        padding: 10px;
        border-radius: 20px 0px 0px 20px;
        outline: none;
        border-right: none;
        color: grey;
        font-size: 20px;
        width: 70%;
    }
    button {
        background: none;
        border: none;
        width: 15%;
        height: 20%;
        border: 2px solid blue;
        border-radius: 0px 20px 20px 0px;
        outline: none;
        padding: 10px;
        font-size: 20px;
        color: blue;
        z-index: 9999px;
        cursor: pointer;
        transition: 0.5s;

    }
    button:hover {
        background: blue;
        color: white;
        transition: 0.5s ease-in-out;
    }
    .to-dos {
        position: absolute;
        top: 26%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: grey;
        font-size: 30px;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>iDo List</h1>
<div class="inp">
<input id="inputField" type="text" placeholder="I want to do..."><button id="addToDo"><i class="fas fa-plus"></i></button>
</div>
<div class="to-dos" id="toDoContainer">

</div>

<script>
    let addToDoButton = document.getElementById('addToDo');
    let toDoContainer = document.getElementById('toDoContainer');
    let inputField = document.getElementById('inputField');

    addToDoButton.addEventListener('click', function(){
        var paragraph = document.createElement('p');
        paragraph.classList.add('paragraph-styling');
        paragraph.innerText = inputField.value;
        toDoContainer.appendChild(paragraph);
        inputField.value = '';
        paragraph.addEventListener('click', function() {
            paragraph.style.textDecoration = 'line-through';
        })
        paragraph.addEventListener('dblclick', function() {
            toDoContainer.removeChild(paragraph);
        })
    })
</script>
</body>
</html>
CSS3 변환 및 애니메이션
Tomcat 과 Weblogic 설정 JNDI

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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