原生js实现待办事项代码-html代码-BFW代码库

原生js实现待办事项代码

代码语言：html

所属分类：其他

代码描述：原生js实现待办事项代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            *{
  margin:0;
  padding:0;
  font-family:'popins', sans serif;
  box-sizing: border-box;
}
.container{
  width:100%;
  min-height: 100vh;
  background:linear-gradient(135deg,#666669,#195765);
  padding:10px;
}
.to-do-app{
  width:100%;
  max-width: 540px;
  background: #fff;
  margin:100px auto 20px;
  padding:40px 30px 70px;
  border-radius:10px;
}
.to-do-app h2{
  color:#002765;
  display:flex;
  align-items:center;
 margin-bottom:20px;
}
.to-do-app h2 img{
  width:30px;
  margin-left:10px;
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#edeef0;
  border-radius:30px;
  padding-left: 20px;
  margin-bottom:25px;
  
}

input{
  flex:1; 
  border:none; 
  outline:none;
  background:transparent;
  padding:10px;
  font-weight: 14px;
}

button{
  border:none;
  outline:none;
  padding:16px 50px;
  background:#ff5945;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  border-radius:40px;
}
ul li{
  list-style:none;
  font-size:17px;
  padding: 12px 8px 12px 50px;
  position:relative;
  
}
ul li::before{
  content:'';
  position:absolute;
  height:28px;
  width:28px;
  border-radius:50%;
  background-image:url(//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png);
  background-size:cover;
  background-position:center;
  top:8px;
  left:8px;
 
}
ul li.checked{
  color:#555;
  text-decoration:line-through;
}
ul li.checked::before {
background-image:url(//repo.bfw.wiki/bfwrepo/image/5f6c563ecf13b.png);
}

ul li span{
  position:absolute;
  right:0;
  width:40px;
 height:40px;
  font-size:22px;
  color:#555;
  line-height:40px;
  text-align:center;
}

ul li span:hover{
  background:#edeef0;
  border-radius:50%;
}
        </style>

    </head>
    <body>
        <!-- partial:index.partial.html -->
    .........完整代码请登录后点击上方下载按钮下载查看