M/s VIKASH TECH - We Write Imaginations to Codes..!!

Minimal To-Do List using HTML CSS & jQuery

Hello readers, Today in this blog you’ll learn how to create a Minimal To-Do List using HTML CSS and Javascript.
Todo is a task management app or program to help you to stay organized and managed your day-to-day. You can add things that you have to do in the whole day, after completing those works you can simply remove that item from the list.

As you can see in the image, this one is a minimal To-Do List Design and it is based on jQuery. There are 3 fields in the program. One field for show list, one is input for insert items, and a plus button to add. When you will type somethings and press the add button, then the item will add on the list and visible.And removing any items from the list, you have to hover on that item and there will a trash icon reveal you have to click that to remove. The whole layout has a minimal design.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com


<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>To-Do List | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <div class="center">
      <div class="button">
        <span class="text">To-Do List</span>
        <span class="icon"><i class="fas fa-sort-down"></i></span>
<div class="field">
        <input type="text" required placeholder="Add your new to-do list">
        <span class="add-btn">ADD</span>
<li><span><i class="fa fa-trash"></i></span>Get a new laptop</li>
<li><span><i class="fa fa-trash"></i></span>Go to shopping</li>
<li><span><i class="fa fa-trash"></i></span>Read a newspaper</li>
<li><span><i class="fa fa-trash"></i></span>Go to college</li>
<li><span><i class="fa fa-trash"></i></span>Buy a new phone</li>
<script src="script.js"></script>


@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
  margin: 0;
  padding: 0;
  color: #f2f2f2;
  box-sizing: border-box;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1b1b1b;
  border-radius: 5px;
.center .button{
  width: 350px;
  background: #1b1b1b;
  height: 50px;
  padding: 0 20px;
  border-radius: 5px 5px 0 0;
.button .text{
  font-size: 25px;
  font-weight: 600;
  line-height: 50px;
  letter-spacing: 1px;
  font-family: 'Open Sans',sans-serif;
.button .icon{
  font-size: 30px;
  float: right;
  line-height: 40px;
  cursor: pointer;
.center .field{
  height: 45px;
  width: 350px;
  background: #f2f2f2;
  position: relative;
  display: block;
  display: none;
.field input{
  height: 100%;
  width: 100%;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
  background: none;
  color: #202020;
  border: 2px solid #1b1b1b;
.field .add-btn{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: #1b1b1b;
  font-size: 17px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
  display: none;
input:valid ~ .add-btn{
  display: block;
.center ul{
  list-style: none;
  overflow: hidden;
ul li{
  height: 45px;
  width: 100%;
  line-height: 45px;
  background: #262626;
  font-family: 'Noto Sans',sans-serif;
ul li:nth-child(2n){
  background: #1b1b1b;
ul li:last-child{
  border-radius: 0 0 5px 5px;
ul li:last-child span{
  border-radius: 0 5px 5px 5px;
ul li span{
  margin-right: 20px;
  height: 45px;
  width: 45px;
  margin-left: -45px;
  background: #e74c3c;
  display: inline-block;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  transition: 0.3s ease;
ul li:hover span{
  margin-left: 0px;


        $('ul').append("<li><span><i class='fa fa-trash'></i></span>"+ $('input').val() +"</li>");
      $('ul').on("click", 'span', function(){
Category :


No comments found.

Leave a Reply



Latest Posts

telegram bot

How to send message via Telegram Bot using PHP - Telegram API

Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…

SuiteCRM, an open source tool for startups to use from an early stage.

When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

%d bloggers like this: