index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <title>To Do</title>
    <style>
        body{margin:0;padding:0;box-sizing: border-box;background-color: black;}
        #todo{margin:auto 25%;border:2px solid #58a6ff;border-radius:15px;padding:5px;font-size:20px;font-family: 'Courier New', Courier, monospace;}
        #todo input[type="text"]{margin:2% 2% 2% 2%;width:90%;line-height: 30px;background-color: #58a6ff;color:white;}
        button{width:50%;margin:auto 25%;border:none;background-color: #58a6ff;color:black;cursor:pointer;font-size:25px;}
        button:hover{border-radius:15px;color:white;background-color:#58a6ff;}
        #todo li{margin-left:20px;padding:10px;width:75%;text-transform:uppercase;border:2px solid whitesmoke;border-radius:15px;background-color: #58a6ff;color:white;font-size:20px;font-weight: bold;}
        li:hover{cursor:pointer;opacity: 0.8;}
        .done{background-color: #58a6ff;text-decoration: line-through;}
        @media screen and (max-width:650px){
            #todo{
                margin:auto;
                border:none;
            }
        }
        
    </style>
</head>
<body>
    <div id="todo">
        <input type="text" onfocus="clearThis(this)" id="newtodo" placeholder="Enter things you would like to complete today">
        <button @click="addtodo">Create Todo</button><br>
        <h3 v-if="availabletodo">Upcoming tasks...</h3>
        <ul>
            <li v-for="todo in todos" onclick="done(this)">{{ todo }}</li>
        </ul>
    </div>
    <script src="mytodo.js"></script>
</body>
</html>