A Pen by mate

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  mate</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html lang="pl_PL">
  <head>

 
    <!-- CDN links for ANGULAR -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-touch.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="style.css"/>

  </head>
  <body>
    <div class="container center-block" ng-app="todoApp" ng-controller="todoCtrl">
      <div class="col-md-4 col-xs-12 col-sm-4 todo-box">
        <h1>TO-DO LIST</h1>
        <ul>
          <li ng-click="selectedObjective($index)" ng-swipe-right="addItemToDone($index)" ng-model="objectives[x]" ng-repeat="x in objectives">
            {{x}}

         <i class="fa fa-clock-o timer-btn" ng-click="addTimer()" aria-hidden="true"></i>
          <i class="fa fa-times pull-right" aria-hidden="true" ng-click="removeItem($index)"></i>
          </li>

        </ul>
        <div class="form-group">
          <input class="form-control"  ng-model="addObjective" placeholder="Add new task" type="text">
        </div>
        <button class="btn btn-success btn-block" ng-click="addItem()">SET NEW TASK</button>
        <p class="">{{errortext}}</p>
      </div>
      <div class="col-md-4 col-xs-12 col-sm-4 text-center timer-box">
        <i class="fa fa-clock-o fa-5x" aria-hidden="true"></i></br>
        <span class="timerText">{{minutes}}:{{seconds}}</span>
        <div class="form-group">
          <input class="form-control" id="timerInput" ng-model="timerVal" placeholder="Set time for task..." type="text">
        </div>
        

      </div>
      <div class="col-md-4 col-xs-12 col-sm-4 done-box">
        <h1>DONE LIST</h1>
        <ul>
          <li ng-repeat="y in objectivesDone">
            {{y}}
            <i class="fa fa-times" aria-hidden="true" ng-click="removeItemDone($index)"></i>
          </li>
        </ul>
        <p class="">{{errortext2}}</p>
      </div>
    </div>



    <!-- Button trigger modal -->
<button type="button" class="btn btn-info btn-lg center-block" data-toggle="modal" data-target="#myModal">
  HOW IT WORKS?
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">How it works</h4>
      </div>
      <div class="modal-body">
        <p>1.Add some tasks to your TO-DO LIST</p>
        <p>2.Set time in timer input</p>
        <p>3.Click at timer icon in TO-DO LIST to start countdown</p>
        <p>4.WORK!</p>
        <p>5.If u have finished a one task, swipe it to the right to DONE LIST</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

  </body>
</html>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/sirmmate/a-pen-by-mate-OXOVNQ */
/*
Author:Mateusz Skulski;
*/


body{
  padding: 50px 0 0 0;
}
.todo-box > h1 {
  margin: 5px 0 5px 0;
  font-size: 2.5em;
  color: #ff3300;

}
.done-box > h1 {
  color: #99ff66;
  margin: 5px 0 5px 0;
  font-size: 2.5em;
}
.todo-box {
  background-color: #ffffe6;
  border: 2px solid #d9d9d9;
  border-radius: 5px;
  
}
.done-box {
  border: 2px solid #d9d9d9;
  border-radius: 5px;
  
}
.fa-5x {
  font-size: 5.0em;
}
.fa-times {
  color:#ff3300;
}
.timerText {
  margin: 20px 0 20px 0;
  color:#000;
  font-size: 2.7em;
  font-weight: bold;
}
#timerInput {
  margin: 20px 0 20px 0;
}
.timer-btn {
  color: #ffbf80;
  margin: 0 0 0 10%;
}
.btn-info {
  margin: 50px auto 0 auto;
}
.btn-success { 
  font-weight: bold;
}
.well {
  width: 30%;
}
ul {
  margin: 5px 0 30px -30px;
}
li {
  border-bottom: 2px solid #ff3300;;
  list-style:none;
  color:#000;
  font-size: 1.5em;
  margin: 10px 0 10px 0;
}

/*Downloaded from https://www.codeseek.co/sirmmate/a-pen-by-mate-OXOVNQ */
var app = angular.module('todoApp', ['ngTouch']);
	app.controller('todoCtrl', function($scope,$timeout) {
		$scope.objectives  = [];
		$scope.objectivesDone = [];
		var	mytimeout;
		$scope.addTimer = function () {
			$scope.stop();
			if (!$scope.timerVal) {return;}
				$scope.minutes = $scope.timerVal-1;
				$scope.seconds = 60;
			$scope.onTimeout = function(){
						    $scope.seconds--;
						    if ($scope.seconds == 00) {
						      $scope.minutes--;
						      $scope.seconds = 60;
					}
							mytimeout = $timeout($scope.onTimeout,1000);
							if($scope.minutes == -1) {
							    $scope.stop();
					}
				}
				mytimeout = $timeout($scope.onTimeout,1000);	
		}
		$scope.stop = function(){
				$timeout.cancel(mytimeout);
				$scope.minutes = 00;
				$scope.seconds = 00; 
		}
		$scope.addItem = function () {
			$scope.errortext = "";
	        if (!$scope.addObjective) {return;}
	        if ($scope.objectives.indexOf($scope.addObjective) == -1) {
	            $scope.objectives.push($scope.addObjective);		
	        } else {
	            $scope.errortext = "The objective is already in your TODO-list.";
	        }
			}
		$scope.removeItem = function (x) {
			$scope.objectives.splice(x,1);
			$scope.stop();
		}
		$scope.selectedObjective = function (y) {
			$('li').eq(y).css("border-bottom",'2px solid #99ff66');
		}
		$scope.addItemToDone = function (z) {
			$scope.errortext2 = "";
			 if ($scope.objectivesDone.indexOf($scope.objectives[z]) == -1) {
	            $scope.objectivesDone.push($scope.objectives[z]);

	            
	        } else {
	            $scope.errortext2 = "The objective is already in your DONE-list.";
	        }
			
			$scope.objectives.splice(z,1);
			$scope.stop();
		}
		$scope.removeItemDone = function (x) {
			$scope.objectivesDone.splice(x,1);
		}


});

Comments