Skip to content

This is a JavaScript based project, which is basically a To-Do list app. This app can perform adding and modifying to-dos with animation and flash messages for better user experience. All of the functionality of this app is written using JavaScript and jQuery.

Notifications You must be signed in to change notification settings

Shohrab-Hossain/ToDo-List

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

To-Do List - a JavaScript based project

This is a JavaScript based project, which is basically a To-Do list app. This app can perform adding a new to-do and modifying an existing to-do along with animation and flash messages on various events, which gives a better user experience. All of the functionality of this app is written using JavaScript and jQuery.

The features of this app are:

  1. Adding new ToDo
  2. Mark the ToDo that is completed
  3. Edit a ToDo
  4. Delete a ToDo

 

1. Adding new todo

Animate the input field

There is a Plus-Icon in the upper right corner, which is selected by query selector h1 i. By clicking this icon the input field slides down.

$('h1 i').on('click', function(){
    $('#inputContainer').slideToggle(700);
    $(this).fadeOut(500, function(){
        $(this).toggleClass("fas fa-plus-square fas fa-chevron-circle-up");
        $(this).fadeIn(100);
    })
})

This animation will also happen if the To-Do List is empty line is clicked. The query selector for this is #noList.

$('#noList').on('click', function(){
    $('h1 i').click();
})

 

reading text from input feild

There is a unordered list with id #ulTodo. To add a new To-Do the function addNewTodo() is called, which created a new li is add it to the unordered list. The li is created and append to the unordered list using this block of code:

var inp = "<li>"                                 +
              "<input type='checkbox'>"          +
              "<span></span>"                    +
              "<input type='text'>"              +
              "<button>Cancel</button>"          +
              "<i class='fas fa-trash-alt'></i>" +
              "<i class='fas fa-edit'></i>"      +
           "</li>";

$('#ulTodo').append(inp);
$('#ulTodo li:last-child span').text( $('#inputContainer input').val() );

 

Hiding empty list message

After adding new todo, the message for empty list is made disappeared by calling checkEmptyTodo() function.

function checkEmptyTodo (noTodo = true){
    if(noTodo){
        $('#noList').fadeIn(700, function(){
            $('#noList').css({display: 'inline-block'});
        })
    }
    else {
        $('#noList').fadeOut(700, function(){
            $('#noList').css({display: 'none'});
        })
    }
}

 

2. Marking a ToDo as completed

When the checkbox is pressed, the ToDo is marked as completed.

$('#ulTodo').on('click', "li input[type='checkbox']", function(){
    $(this).siblings("span").toggleClass('completedTodo');
})

The css class completedTodo contains some effects.

 

3. Edit a ToDo

Display an editable text field prefilled with the ToDo

Let's display an editable text filled input[type='text'], which will be prefilled with the existing todo.

$('#ulTodo').on('click', 'li i:nth-last-child(1)', function(event){
    isEditOn = true;
    $(this).siblings("button").css({display: 'inline-block', width: '21%', opacity: '1.0'});
    $(this).siblings("input[type='text']").css({display: 'inline-block', width: '79%', opacity: '1.0'}).focus().val($(this).siblings("span").text());
    $(this).siblings("input[type='checkbox']").remove();
    $(this).siblings("span").css({display: 'none'});
    $(this).siblings("i").remove();
    _this = $(this).siblings("button");  // _this stores the selection for latter use on body click
    $(this).remove();  // this statement should be here, donot move up. Otherwise it will be deleted and selection will not work properly
    event.stopPropagation();  // this will stop Event Bubling
})

 

Read edit data and update the todo

A new li is created using the text from input[type='text'], and then append to the ul at the same position where the li previously was.

$('#ulTodo').on('click', 'li button', function(event){
    isEditOn = false;
    var inp = "<input type='checkbox'>";
    $(this).parent().prepend(inp);
    $(this).siblings("span").css({display: 'inline-block'});
    var inp = "<i class='fas fa-trash-alt'></i>" +
              "<i class='fas fa-edit'></i>";
    $(this).parent().append(inp);
    $(this).siblings("input[type='text']").css({display: 'none', width: '0', opacity: '0'});
    $(this).css({display: 'none', width: '0', opacity: '0'});
    $(this).siblings("span").text($(this).siblings("input[type='text']").val()).removeClass('completedTodo');
    event.stopPropagation();  // this will stop Event Bubling
})

 

4. Delete a ToDo

This will remove the li from the unordered list and refresh the list.

$('#ulTodo').on('click', 'li i:nth-last-child(2)', function(){
    $(this).parent().fadeOut(700, function(){
        $(this).remove();
        addScrollBar();
        checkEmptyTodo($('#ulTodo li').length == 0);
    })
})

 

Some functionality

doneMessage()

This function will display flash message on different events.

function doneMessage(msg, _callback){  // this function shows a slide up message when a new todo is added
    $('body').toggleClass('ji');
    $('#message p').text(msg);
    $('#message p').addClass('doneMessage').slideToggle(700, function(){
        $(this).delay(800).slideToggle(700, function(){
            $(this).removeClass('doneMessage').text('');
            $('body').toggleClass('ji');
            if(_callback != undefined){
                _callback();
            }
        })
    })
} 

 

addScrollBar()

This function will display a scrollbar when the ul has more than 5 list item.

function addScrollBar(){
    if( $('#ulTodo li').length >= 6 ){
        $('#ulTodo').addClass('scrolBar');
    }
    else{
        $('#ulTodo').removeClass('scrolBar');
    }
}

 


 

View the project Live

To-Do list app

 

About

This is a JavaScript based project, which is basically a To-Do list app. This app can perform adding and modifying to-dos with animation and flash messages for better user experience. All of the functionality of this app is written using JavaScript and jQuery.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published