Skip to main content

Archive

Show more

To Do List With Checkbox Pure Css | HTML And CSS

pure-css-to-do-list-with-checkbox

To Do List With Checkbox using html and Css only

The "To Do List" is the familiar project for every starter. Developers usually use JavaScript to create this project because JavaScript is very powerful and easily change HTML and CSS. But when we design this project through CSS then this becomes extra complicated for beginner and advance level developer. Because it needs advance css.

In this article we will design "to do list" without javascript. However we are not adding dynamic feature to create task and delete task but still this is interactive and have animations. In this animation Indirectly we are playing with input type "checkbox". This is sound interesting. You can check article on pill style radio button where we change the radio button style and convert them into pills.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>To Do List With Checkbox Pure Css | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>

<ul class="list">
  <h2>Today's tasks :</h2>
  <li class="list-item">
    <input type="checkbox" class="hidden-box" id="first">
    <label for="first" class="check-label">
      <span class="check-label-text">One Blog Post</span>
      <span class="check-label-box"></span>
    </label>
  </li>
  <li class="list-item">
    <input type="checkbox" class="hidden-box" id="second">
    <label for="second" class="check-label">
      <span class="check-label-text">One Youtube Video</span>
      <span class="check-label-box"></span>
    </label>
  </li>
  <li class="list-item">
    <input type="checkbox" class="hidden-box" id="third">
    <label for="third" class="check-label">
      <span class="check-label-text">One Youtube Shorts</span>
      <span class="check-label-box"></span>
    </label>
  </li>
</ul>

</body>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@500;600;700');

*{
  box-sizing: border-box;
}

body{
  margin: 0px;
  padding: 0px;
  font-family: "Mulish", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: coral;
}

.list{
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
  width: 500px;
  max-width: 98%;
  border-radius: 4px;
  background: #A14EBF;
  list-style: none;
  overflow: hidden;
  color: black !important;
}

.list h2{
  margin: 25px 20px;
  color: white;
  font-size: 18px;
  font-weight: 700;
}

.list .list-item{
  margin: 0px;
  padding: 0px;
  position: relative;
  background: #F6F6F6;
  border-bottom: 1px solid #ECF0F1;
}

.list .list-item:last-child{
  border: 0px;
}

.check-label{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.check-label-box{
  display: flex;
  align-self: center;
  position: relative;
  height: 20px;
  width: 20px;
  margin: 0px 20px;
  cursor: pointer;
  border: 2px solid black;
}

.check-label-text{
  display: flex;
  align-self: center;
  position: relative;
  cursor: pointer;
  padding: 24px;
  font-weight: 600;
}

.hidden-box{
  opacity: 0px;
  position: absolute;
  appearance: none;
}

.check-label-text:after{
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 8%;
  background: black;
  transform: translateY(-50%);
  transition: width 100ms ease-in-out;
}

.hidden-box:checked + .check-label{
  background: #F1F1F1;
}


.hidden-box:checked + .check-label .check-label-box{
  background: #FFF;
}

.hidden-box:checked + .check-label .check-label-box:after{
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 4px;
  width: 6px;
  height: 12px;
  border: solid black;
  border-width: 0px 2px 2px 0px;
  transform: rotate(45deg);
}

.hidden-box:checked + .check-label .check-label-text:after{
  width: 100%;
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment