toDO List

In this example below you will see how to do a toDO List with some HTML / CSS and Javascript

A small project made for practicing AngularJS. For best experience use Google Chrome.

Thumbnail
This awesome code was written by THEK7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright THEK7 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>toDO List</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="https://zapier.cachefly.net/storage/photos/198cda5057608e7e6ee28a43893d3265.png">
    <title>ToDO list</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
    <!--ANGULARjs-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.4/angular-messages.min.js"></script>
    <!--BOOTSTRAP-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <p class="text-center">Made by Kristijan Kelić</p>
        <h4 class="text-center">ToDO List</h4>

    </div>
    <div class="container" ng-app="myApp" ng-cloak ng-controller="myCtrl" ng-init="loadStorage()">
        <h4 id="infoText" class="text-center border border-info">You've
            <span class="badge rounded-circle" ng-bind="numberOfTasksLeft"></span> tasks left to do</h4>
        <ul class="list-group" id="accordion">
            <li class="list-group-item" ng-repeat="x in toDoList | orderBy:('nmb') track by $index">
                <span>{{x.name}}
                    <span ng-show="toDoList[$index].marked">
                        <i class="fa fa-check" aria-hidden="true"></i>
                    </span>
                </span>
                <button class="btn btn-outline-info btn-sm float-right" ng-click="hiddenDiv = !hiddenDiv">Details</button>
                <button class="btn btn-outline-success btn-sm float-right" ng-show="!toDoList[$index].marked" ng-click="done($index)">Done</button>
                <button class="btn btn-outline-danger btn-sm float-right" ng-show="toDoList[$index].marked" ng-click="undo($index)">Undo</button>
                <div ng-show="hiddenDiv" class="colapsi">
                    <hr>
                    <div>
                        <i class="fa fa-file-text" aria-hidden="true"></i>
                        <span>{{x.description}}</span>
                    </div>
                </div>
            </li>
        </ul>
        <br>
        <button class="btn btn-block btn-primary" ng-click="showInputForm()">Add new task</button>
        <button class="btn btn-block btn-danger" ng-show="showDelete" ng-click="deleteItems()">Delete finished tasks</button>

        <div class="container" ng-show="showForm">
            <form name="myForm" ng-submit="submit()">
                <div class="row clearfix">
                    <div class="col-sm-12">
                        <label class="usr">Task</label>
                    </div>
                    <div class="col-sm-6">
                        <input class="form-control" type="text" name="myInput" ng-model="nameOfTask" required/>
                    </div>
                    <div class="col-sm-6">
                        <div id="alert" ng-messages="myForm.myInput.$error" role="alert">
                            <div class="alert alert-warning" ng-message="required">Please enter a value for Task.</div>
                        </div>
                    </div>
                </div>
                <br>
                <label class="comment">Short description</label>
                <textarea class="form-control" ng-model="descriptionOfTask" maxlength="150"></textarea>
                <br>
                <button type="submit" class="btn btn-success" ng-click="hideInputForm()" ng-disabled="myForm.myInput.$invalid">Save</button>
                <button type="button" class="btn btn-danger" ng-click="cancelInput()" ng-hide="cancel">Cancel</button>
            </form>
        </div>
    </div>
</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/THEK7/todo-list-LOMVeQ */
* {
    font-family: "Courier New";
    box-sizing: border-box;
}

html,
body {
    background-image: url("https://img00.deviantart.net/10ee/i/2012/359/e/3/paper_background_by_stickdudeseven-d5p5fts.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    min-height: 100%;
}


ul {
    list-style-type: none;
}

li{
    border:1px solid black !important;
}

h4 {
    font-family: "Great Vibes" !important;
    font-style: italic;
    margin-top: 2%;
}

#infoText{
    padding: 1%;
}

button:disabled{
    cursor: not-allowed;
}


label:first-child{
    margin-top: 5%;
}


.container-fluid {
    background-color: rgb(47, 121, 240);
    margin-bottom: 2%;
    color:white;
    padding: 1%;
}

.container {
    margin-bottom: 150px;
}

p{
    font-size: 0.7rem;
    font-weight: bold;
}

.badge{
    background-color: rgb(47, 121, 240);
    color: white;
    font-size: 2rem;
}

.colapsi{
    padding-left: 5%;
}

/*Downloaded from https://www.codeseek.co/THEK7/todo-list-LOMVeQ */
var br = 0;

$(document).ready(function () {
    //postavljanje globalne varijable brojač, kako bi se uvijek nastavilo ili krenulo od početka
    if (localStorage.length == 0) {
        br = 0;
    } else {
        br = localStorage.length;
    }
});


var app = angular.module("myApp", ['ngMessages']);
app.controller("myCtrl", function ($scope) {
    //sve varijable vezane za aplikaciju
    $scope.nameOfTask = "";
    $scope.descriptionOfTask = "";
    $scope.showForm = false;
    $scope.cancel = false;
    $scope.toDoList = [];
    $scope.showDelete = false;
    $scope.hiddenDiv = false;
    $scope.numberOfTasksLeft = 0;

    /*metoda koja se poziva kada se učita aplikacija, a sprema podatke iz localStoragea
    u toDoListu koja je niz unutar aplikacije*/
    $scope.loadStorage = function () {
        var i = 0;
        var l = localStorage.length;
        for (i = 0; i < l; i++) {
            var kljuc = localStorage.key(i);
            var obj = JSON.parse(localStorage.getItem(kljuc));
            if(obj.name !== undefined){
                $scope.toDoList.push(obj);
                $scope.numberOfTasksLeft++;
                if ($scope.toDoList[i].marked === true) {
                    $scope.done(i);
                }
            }          
        }
    };

    //metoda koja upravlja prikazom forme
    $scope.showInputForm = function () {
        //pokazivanje forme
        $scope.showForm = true;
        $scope.cancel = false;
    };

    //metoda koja poništava unos
    $scope.cancelInput = function () {
        $scope.cancel = true;
        $scope.showForm = false;
        $scope.nameOfTask = "";
        $scope.descriptionOfTask = "";
    };


    //metoda koja označava neki element gotovim
    $scope.done = function (index) {
        $scope.toDoList[index].marked = true;
        var kljuc = localStorage.key(index);
        var obj = JSON.parse(localStorage.getItem(kljuc));
        obj.marked = true;
        localStorage.setItem(kljuc, JSON.stringify(obj));
        $scope.showDelete = true;
        $scope.numberOfTasksLeft--;
    };

    //metoda za undo oznake
    $scope.undo = function (index) {
        $scope.toDoList[index].marked = false;
        var kljuc = localStorage.key(index);
        var obj = JSON.parse(localStorage.getItem(kljuc));
        obj.marked = false;
        localStorage.setItem(kljuc, JSON.stringify(obj));
        $scope.numberOfTasksLeft++;
    };

    //metoda koja sakriva input, a ujedno i obavlja sve potrebno za unos
    $scope.hideInputForm = function () {
        //sakrivanje forme
        $scope.showForm = false;

        var obj = {
            "nmb": br,
            "marked": false,
            "name": $scope.nameOfTask,
            "description": $scope.descriptionOfTask
        };

        $scope.toDoList.push(obj);

        localStorage.setItem(br.toString(), JSON.stringify(obj));
        br++;
        $scope.numberOfTasksLeft++;

        //očistit inpute
        $scope.nameOfTask = "";
        $scope.descriptionOfTask = "";
    };

    /*metoda koja briše označene elemente iz liste, te sve ponovo sprema u localStorage
    radi sinkronizacije*/
    $scope.deleteItems = function () {

        var oldList = $scope.toDoList;
        $scope.toDoList = [];
        localStorage.clear();
        br = 0;
        angular.forEach(oldList, function (x) {
            if (!x.marked) {
                x.nmb = br;
                $scope.toDoList.push(x);
                localStorage.setItem(br.toString(), JSON.stringify(x));
                br++;
            }
        });
        $scope.showDelete = false;
    };
});

Comments