Reminders，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            <!DOCTYPE html>
<html lang="en-US">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reminders App - Manage Your Tasks</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./index.js"></script>
  </head>
  <body>
    <div class="main">
      <h1>Reminders App - Manage Your Tasks</h1>
      <input type="text" placeholder="Add a new task" class="input">
      <button class="add-task-btn">Add Task</button>
      <ul class="abc">
        
      </ul>
    </div>
  </body>
</html>

编辑器加载中

style.css

            
                1
2
3
4
5
6

            
            h1{
      font-family: Verdana, Geneva, Tahoma,"Microsoft yahei", "simhei";
}
h1{
  color:#333;text-align:center;
}

编辑器加载中

index.js

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            const input = document.querySelector(".input");
const abc = document.querySelector(".abc");

function abcd(){
  const a = document.createElement("li");
}

input.addEventListener("keyup",function(e){
  if (e.key === "Enter"){
    console.log(input.value);
  }
});

编辑器加载中

预览

控制台