JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app='todoList' ng-controller='todoController'>
     <h3>My Todo List</h3>

    <ul>
        <li ng-repeat='item in todoItems'> <span ng-class="{'todo-completed': item.isCompleted}">{{item.text}}</span>
 <span ng-class="{'glyphicon-star': item.isCompleted, 'glyphicon-star-empty': !item.isCompleted, }" ng-click='markItemCompleted($index)' class="todo-button glyphicon" aria-hidden="true">
           </span>
 <span ng-click='removeItemClicked($index)' class="todo-button glyphicon glyphicon-remove" aria-hidden="true">
            </span>

        </li>
    </ul>
    <div class="todo-prompt-container"
         ng-show="confirmationPromptVisible">
        <div class="todo-prompt"></div>
        <div class="todo-prompt-backdrop"></div>
    </div>
</div>

CSS

.todo-prompt-container{
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
}
.todo-prompt {
    background-color:#fff;
    z-index:500;
    position: absolute;
    border:solid;
    border-width:1px;
    border-radius:2px;
    border-color:#222;
    min-width:200px;
    min-height:30px;
    width:200px;
    margin:0 auto;
    padding:3px;
}

.todo-prompt-backdrop{
    background-color:#000;
    opacity:.5;
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    z-index:100;
}

.todo-completed {
    text-decoration: line-through;
    color:#aaa;
}
.todo-button {
    border:solid;
    border-width:1px;
    border-radius:2px;
    border-color:#222;
    padding:3px;
    margin:2px 5px;
    cursor:pointer;
    
}
.todo-button:hover {
    border-color:#aaa;
}

JavaScript

var myApp = angular.module('todoList', []);
myApp.controller('todoController', function ($scope) {
    $scope.confirmationPromptVisible = false;
    $scope.todoItems = [{
        text: 'Complete Assignment 1',
        isCompleted: true
    }, {
        text: 'Complete Assignment 2',
        isCompleted: true
    }, {
        text: 'Complete Assignment 3',
        isCompleted: false
    }];

    $scope.removeItemClicked = function (index) {
        $scope.confirmationPromptVisible = true;
        //$scope.todoItems.splice(index, 1)
    }

    $scope.markItemCompleted = function (index) {
        $scope.todoItems[index].isCompleted = !$scope.todoItems[index].isCompleted;
    }
});