JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8"/>
        <title>CC</title>
        <link href="style.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    </head>
    <body>
        <div>
            
        </div>
        <section id = "tdZone">
            <div id = 'out'>
            </div>
            <input type = 'text' placeholder = 'What are you going to do today?' autocomplete = 'off' id = 'tdIn'>
        </section>
    </body>
    <script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
    <script src = 'tdApp.js' ></script>
</html>

JavaScript

tdList = [];
document.getElementById('tdIn').onkeydown = function(e){
    if (e.keyCode != 13){
        return;
    }else{
        var temp = {};
        temp.task = document.getElementById('tdIn').value;
        temp.check = false;
        var l = tdList.length;
        tdList[l] = temp;
        console.log(tdList);
        show()
        document.getElementById('tdIn').value = '';
    }
    function show(){
        var out = '';
        for(var key in tdList){
            out += tdList[key].task;
        }
        $('#out').append('<li>');
        $().text(out);
        
    }
}