nick34992
3/14/2017 - 10:46 AM

Task List: HTML, JavaScript, CSS, Bootstrap

Task List: HTML, JavaScript, CSS, Bootstrap

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
h1 {
    font-size: 36px;
    font-weight: 400;
    color: rgba(39, 135, 255, 0.9);
}
html, body {
    font-family: 'Indie Flower', sans-serif;
}
h1 {
    font-size: 36px;
    font-weight: 400;
    color: rgba(39, 135, 255, 0.9);
}
.main {
    margin-top: 50px;
}
form.input {
    background: #f0f0f0;
    border: none;
    border-left: 2px solid #fff;
    font-size: 36px;
    padding-left: 20px;
    width: 100%;
    transition: background 2s, border-left 2s;
}
form.input:focus {
    background: #fff;
    border-left: 2px solid #000;
    box-shadow: none;
    outline: none;
}
button.btn {
    background: transparent;
    border: 2px solid #000;
    color: #00f28f;
    cursor: pointer;
    font-size: 36px;
    padding: 20px 24px;
    transition: background 2s, color 2s;
}
button.btn.hover{
    background: #00f28f;
    color: #fff;
}
tasks {
    margin-top: 20px;
    list-style: none;
    padding-left: 0px;
}
li {
    padding-left: 20px;
    border-left: 3px solid #000;
    font-size: 36px;
    margin: 25px 0 0px;
}
fa.fa-check {
    color: rgba(76, 141, 44, 0.9);
}
fa.fa-times {
    color: rgba(215, 40, 40, 0.9);
    padding-right: 10px;
    padding-left: 10px;
}
fa.fa-calendar {
    padding-right: 15px;
}
li.done {
    background: #CCFF99;
}
class Task {
    constructor(id, description, entryDate, isCompleted) {
    this.id = id;
    this.description = description;
    this.entryDate = entryDate;
    this.isCompleted = isCompleted;
    }
}

var main = () => {

    // Add date in page title
    var today = new Date().toDateString();

    var myTasks = [];

    $('h1').append(`My tasks for today, ${today}`);

    // Add task
    $('form').submit((event) => {
        var input = $(event.target).find('input');
        var description = input.val();
        if (description != "") {
            var currentTaskCount = $("#tasks").children().length;
            task = new Task(currentTaskCount + 1, description, today, false);
            myTasks.push(task);
            var html = $('<li>').html(`<i class="fa fa-check"></i><i class="fa fa-times"></i>${task.description}`);
            html.appendTo('#tasks');
            input.val("");
        }
    return false;
    });

    // Remove task
    $('#tasks').on('click', '.fa.fa-times', function(event) {
        console.log($(this).closest("li").index());
        var selectedTask = $(this).closest("li").index();
        myTasks.splice(selectedTask, 1);
        $(this).closest("li").remove();
        console.log(myTasks);
    });

    // Highlight task
    $('#tasks').on('click', '.fa.fa-check', function(event) {
        var selectedTask = $(this).closest("li").index();
        $(this).closest("li").toggleClass('done');
        if ($(this).closest("li").hasClass('done')) {
            myTasks[selectedTask].isCompleted = true;
        }
        else {
            myTasks[selectedTask].isCompleted = false;
        }
        console.log(myTasks);
    });
};

$(document).ready(main);
<!DOCTYPE html><html lang="en"><meta charset=utf-8>
    <head>
        <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
              rel='stylesheet' type='text/css'>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
              rel="stylesheet">
        <link href='styles/style.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>
                            <i class="fa fa-calendar"></i>
                        </h1>
                    </div>
                </div>
            </div>
        </header>
        <div class="main">
            <div class="container">
                <div class="row">
                    <form class="form">
                        <div class="col-xs-12 col-md-4">
                            <input id="comment" type="text" placeholder="Write description">
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <button type="submit" class="button">
                                <i class="fa fa-plus"></i>Add task
                            </button>
                        </div>
                    </form>
                </div>
                <ul class="tasks" id="tasks"></ul>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
        <script src="scripts/script.js"></script>
    </body>
</html>