Domovská stránka Prehľadávať Pomoc
Prihlásiť sa
Entony
/
To-do
Pridať medzi pozorované 1
Hviezda 0
Fork 0
Súbory Issues 1 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

work in classroom

Your Name 7 rokov pred
commit
58d1c7a60a
4 zmenil súbory, kde vykonal 149 pridanie a 0 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 23 0
      bower.json
  2. 3 0
      css/style.css
  3. 78 0
      index.html
  4. 45 0
      js/script.js

+ 23 - 0
bower.json
Zobraziť súbor 

@@ -0,0 +1,23 @@
 
+{
 
+  "name": "practics",
 
+  "authors": [
 
+    "Entony <leonskottkenedi@gmail.com>"
 
+  ],
 
+  "description": "",
 
+  "main": "",
 
+  "license": "MIT",
 
+  "homepage": "",
 
+  "private": true,
 
+  "ignore": [
 
+    "**/.*",
 
+    "node_modules",
 
+    "bower_components",
 
+    "test",
 
+    "tests"
 
+  ],
 
+  "dependencies": {
 
+    "bootstrap": "^3.3.7",
 
+    "jquery": "^3.2.1",
 
+    "font-awesome": "^4.7.0"
 
+  }
 
+}

+ 3 - 0
css/style.css
Zobraziť súbor 

@@ -0,0 +1,3 @@
 
+.tab-content {
 
+	padding: 15px;
 
+}

+ 78 - 0
index.html
Zobraziť súbor 

@@ -0,0 +1,78 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+	<title>To-Do</title>
 
+
 
+	<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
 
+	<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
 
+	<link rel="stylesheet" href="css/style.css">
 
+</head>
 
+<body>
 
+<div class="container">
 
+		<div class="page-header">
 
+			<h1>Todo list</h1>
 
+		</div>
 
+
 
+	<!-- Button trigger modal -->
 
+	<div class="text-right">
 
+		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-window"><span class="glyphicon glyphicon-plus"></span>Add new task</button>
 
+	</div>
 
+
 
+	<ul class="nav nav-tabs" role="tablist">
 
+		<li class="active"><a href="#to-do" data-toggle="tab">To do</a></li>
 
+		<li><a href="#go-go" data-toggle="tab">In progress</a></li>
 
+		<li><a href="#completed" data-toggle="tab">Completed</a></li>
 
+	</ul>
 
+
 
+		<div class="tab-content" id="task-list">
 
+			<div role="tabpanel" class="tab-pane active" id="to-do" data-status="1">
 
+				<ul class="list-group"></ul>
 
+			</div>
 
+
 
+			<div role="tabpanel" class="tab-pane" id="go-go" data-status="2">
 
+				<ul class="list-group"></ul>
 
+			</div>
 
+
 
+			<div role="tabpanel" class="tab-pane" id="completed" data-status="3">
 
+				<ul class="list-group"></ul>
 
+			</div>
 
+		</div>
 
+
 
+	
+
 
+	<!-- Modal -->
 
+	<div class="modal fade" id="modal-window" tabindex="-1" role="dialog" aria-hidden="true">
 
+	  	<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>
 
+	       			 <h5 class="modal-title">Add new task</h5>
 
+	     		 </div>
 
+	     			<div class="modal-body">
 
+	      				<form id="form-add-task">
 
+	      					<div class="form-group">
 
+		      					<input type="text" name="title" class="form-control" placeholder="Title">
 
+	      					</div>
 
+	      					<div class="form-group">
 
+		      					<textarea name="description" class="form-control" placeholder="Description"></textarea>	
+		      				</div>
 
+	      				</form>
 
+	      			</div>
 
+	      		<div class="modal-footer">
 
+	        		<button type="button" class="btn btn-danger" data-dismiss="modal">Cansel</button>
 
+	       			<button type="submit" form="form-add-task" class="btn btn-success">Save</button>
 
+	      		</div>
 
+	   		</div>
 
+	  	</div>
 
+	</div>
 
+</div>
 
+
 
+	<script src="lib/jquery/dist/jquery.min.js"></script>
 
+	<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
 
+	<script src="js/script.js"></script>
 
+</body>
 
+</html>

+ 45 - 0
js/script.js
Zobraziť súbor 

@@ -0,0 +1,45 @@
 
+console.clear();
 
+
 
+var $formAddTask = $('#form-add-task'),
 
+	$modalAddTask = $('#modal-window'),
 
+	$taskList = $('#task-list');
 
+
 
+function addTask(task, id) {
 
+	var $listGroup = $taskList.find('[data-status="' + task.status + '"]').find('.list-group');
 
+
 
+	var $btnDelete = $('<button>').addClass('btn btn-danger btn-xs pull-right delete-task').append('<span class="glyphicon glyphicon-remove">');
 
+
 
+	$('<li>').addClass('list-group-item').text(task.title).attr('data-id', id).append($btnDelete).appendTo($listGroup);
 
+}
 
+
 
+$formAddTask.on('submit', function(event) {
 
+	event.preventDefault();
 
+
 
+	var task = {
 
+		title: $(this).find('[name=title]').val(),
 
+		description: $(this).find('[name=description]').val(),
 
+		status: 2                // 1- todo, 2 - in progress, 3 - completed
 
+	};
 
+
 
+	var id = new Date().getTime();
 
+	localStorage.setItem(id, JSON.stringify(task));   // записать это туда
 
+	addTask(task, id);
 
+	$modalAddTask.modal('hide');
 
+
 
+	this.reset();  // возвращает форму к виду к котором она определена в хтмл (очистка формы)
 
+
 
+})
 
+
 
+$taskList.on('click', '.delete-task', function() {  // вешаем обработчик клик на кнопку delete-task
 
+	var $parent = $(this).parent();   // вызываем родителя
 
+	var taskId =  $parent.data('id');
 
+	localStorage.removeItem(taskId);
 
+	$parent.remove();
 
+});
 
+
 
+;(function() {    // самовызывающаяся функция которая перебирает и рисует li на странице динамически
 
+	for (var key in localStorage) {
 
+		var task = JSON.parse(localStorage[key]);
 
+		addTask(task, key);
 
+	}	
+})();