To-Do Tasks made with pure CSS
icon-search
To-Do Tasks made with pure CSS

To-Do Tasks made with pure CSS

To-Do Tasks made with pure CSS

This is simple to do task build with pure CSS we build it without using JavaScript or jQuery.

Now you can add simple an element to your website where you can record all the upcoming events and list them in a div.

So below is the code provided you can simply make it.


Welcome programmers today we are going to build To Do Tasks. As you know the HTML markup is mandatory for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>To-Do Tasks</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="frame">
<div class="center">
<section class="todo-cmp">
<header class="todo-cmp__header">
<h2>Friday</h2>
<p>March 4, 2016</p>
</header>
<ul class="todo-cmp__list">
<li>
<label for="todo-01">
<input id="todo-01" type="checkbox">
<span>Open template</span>
</label>
</li>
<li>
<label for="todo-02">
<input id="todo-02" type="checkbox">
<span>Build a to-do list</span>
</label>
</li>
<li>
<label for="todo-03">
<input id="todo-03" type="checkbox">
<span>Write something</span>
</label>
</li>
<li>
<label for="todo-04">
<input id="todo-04" type="checkbox">
<span>Complete the task</span>
</label>
</li>
</ul>
</section>
</div>
</div>
<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script>
<script
Src="js/index.js"></script>
</body>
</html>


Here we are we have completed our HTML markup I always try to minify the code but sometimes it goes very much lengthy for that please provide a project file which you can download easily without copying all the code.


Without CSS our this script (To Do Tasks) will never look magnificent. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As css/style.css :

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*
  http://colorzilla.com/gradient-editor */
  background: #fda231;
  background: linear-gradient(45deg, #fda231 0%, #fbb731 60%, #fdca31 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fda231", endColorstr="#fdca31",GradientType=1 );
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.todo-cmp {
  background: #ffffff;
  color: #497081;
  padding: 10px 30px;
  border-radius: 5px;
  box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.15);
  width: 180px;
}
.todo-cmp__header {
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.todo-cmp__header h2 {
  font-weight: 600;
  font-size: 1.2rem;
  margin: 4px auto;
  padding: 0;
}
.todo-cmp__header p {
  padding: 0 0 5px;
  margin: 4px auto;
  font-size: 0.8rem;
}
.todo-cmp__list {
  list-style: none;
  padding: 0;
}
.todo-cmp__list li {
  padding: 10px 0 15px;
  margin: 0;
  text-align: left;
  width: 100%;
}
.todo-cmp__list li label {
  cursor: pointer;
  font-size: 0.82rem;
  width: 100%;
  display: block;
}
.todo-cmp__list li label input {
  float: right;
  opacity: 0;
}
.todo-cmp__list li label span {
  position: relative;
  display: block;
  transition: all 550ms ease-in-out;
}
.todo-cmp__list li label input + span::after {
  content: "";
  display: block;
  border: 1px solid #497081;
  border-radius: 13px;
  height: 13px;
  width: 13px;
  position: absolute;
  right: 0;
  top: 1px;
  z-index: 10;
  transition: all 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* https://matthewlein.com/tools/ceaser */
}
.todo-cmp__list li label input + span::before {
  content: "✔";
  display: block;
  font-size: 22px;
  height: 13px;
  width: 13px;
  position: absolute;
  right: -2px;
  top: -8px;
  z-index: 10;
  opacity: 0;
}
.todo-cmp__list li label input:checked + span {
  color: #ccc;
  transition: all 550ms ease-in-out;
}
.todo-cmp__list li label input:checked + span::after {
  opacity: 0;
  height: 17px;
  width: 17px;
  top: -2px;
  right: -2px;
}
.todo-cmp__list li label input:checked + span::before {
  opacity: 1;
  transition: all 550ms ease-in-out;
}


Here we are we have completed our CSS style code and in CSS we are going to use fontawesome CSS library to import icons of stars so if you are offline then you will not see the stars.




Outcome :

So here we are, We have done and our project To Do Tasks is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • To Do Tasks
    • css
      • style.css
    • js
    • index.html


Download Project (To Do Tasks) File :

File Size 4.28 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


Our today's post ends here and I think you might like my this post and if you did make sure to subscribe to the newsletters of this website for more this kind of posts.



Thank you !

Disqus Codes

No comments

Notifications

Disqus Logo