「兔了个兔」创意投稿大赛——新春计划单

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

放假了放假了，可算能回家了。到家之后也不能疯玩，也要学习，当然效率不会太高，所以，我要用新春计划单来约束自己，合理利用假期时间。

先放一下效果图吧

附上码上掘金的源码

思路

首先得把计划单盒子给放到中间，之后就在盒子里布局了，一个兔子，一个头部，一个input，还有一个列表，这里就一列下来就ok。之后就是重要的js，首先获取一下input里的内容，然后不为空的时候在把他放到创建的li里面追加到ul里，同时设置一个自定义的属性并传个唯一值，这样就是添加。删除的时候获取li的自定义属性值，动态删除。

话不多说，开始实现。

HTML

突然想到昨天说的语义化了，所以，下面要好好实践一下。

<section class="container">
  <div class="heading">
    <img class="heading_img" style="transform: translate(145%,-98%);" src="./rabbit.png">
    <h1 class="heading_title">NewYear To-Do List</h1>
  </div>
  <form class="form">
    <div>
      <label class="form_label" for="todo">~ Today I want to do ~</label>
      <input class="form_input"
           type="text" 
           id="todo" 
           name="to-do"
           size="30"
           required>
      <button class="button"><span>Submit</span></button>
    </div>
  </form>
  <div>
    <ul class="toDoList"></ul>
  </div>
</section>

CSS

挑点重要的样式一说，这个实现了头部title的多边形的效果，靠边框圆角。

.heading_title {
    transform: rotate(2deg);
    padding: 0.2rem 1.2rem;
    border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
    background-color: rgb(182, 234, 255);
    font-size: 1.5rem;
}

JS

重要的来了，今天还在这个地方踩了个坑。正常实现是没有什么难度的

    const form = document.querySelector(".form")
    const input = form.querySelector(".form_input")
    const ul = document.querySelector(".toDoList")
    form.addEventListener('submit', e => {
      e.preventDefault()
      let toDoItem = input.value
      addItemToDOM(itemId , toDoItem)
      input.value = ''
    })
    function addItemToDOM(itemId, toDoItem) {   
      const li = document.createElement('li')
      li.innerText = toDoItem
      ul.appendChild(li)
    }
    function removeItemFromDOM(n) {
      var li = document.querySelector('li')
      ul.removeChild(li[n]);
    }

然而，当删除的时候总是删除不了想要删除的那一个，也就是说，无法精确获得到点击的那个元素，所以我想到了自定义属性，并给每个li动态创建的时候加上这个自定义属性并传递一个唯一值，时间就是个不错的选择。于是乎，精确删除就做到了，功能实现完成。

最后，背景换上自己喜欢的图片就好了。新春计划单到此完成。

大家在假期放松的同时不要忘记学习哦，用这个新春计划单打卡就是一个不错的方式。

我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。 兔了个兔（六） - 码上掘金 (juejin.cn)

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！