Make Your Own ToDo App with JavaScript!

#html #css #javascript #tutorial

Don't forget to Subscribe to my YouTube channel to learn programming fast and free: https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ

Here is the code:


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>