Event listeners, minor CSS/formatting

README.md

@@ -1,9 +1,27 @@
+CHANGE LOG:
+
+#1. added an event listener that listens for the enter key.
+this opens the input div without having to click the button
+
+#2. added an event listener that listens for the enter key.
+this adds the textinput to the new todo list div without having to click the button
+
+#3. fixed a few minor issues with line height/padding on the list items and underneath the title on the first div
+
+#4. added spaces in between the octothorpes and the section titles (in README file) to fix formatting issues
+
+
+
+
+
+
+
 <img src="https://devmounta.in/img/logowhiteblue.png" width="250" align="right">
 
 Listo with jQuery
 =================
 
-#Objective
+# Objective
 
 Create an interactive "to-do" list with jQuery
 
@@ -17,9 +35,9 @@ With this to-do app, users will be able to:
 ![alt text](https://github.com/DevMountain/jQuery2/blob/master/jQuery2%20Example.png?raw=true, "Title Text")
 
 
-##Step 1
+## Step 1
 
-###Our Environment
+### Our Environment
 
 First, fork and clone this repo, so that we can access this README during our development. For the sake of simplicity, we have created the index.html file and added some markup for the ui. So, no need to change it yet.
 
@@ -34,10 +52,10 @@ Now that we've made our basic files, we want to get them all hooked together in
 *Remember: your browser will read your index.html from top-to-bottom, left-to-right. This means if you put your jQuery under your scripts.js file you will end up with an error.*
 
 
-#Step 2
-###Time For jQuery
+# Step 2
+### Time For jQuery
 
-Now that we have our environment set up and our markup written, it's time to use some jQuery. 
+Now that we have our environment set up and our markup written, it's time to use some jQuery.
 
 The first thing we want to do is go into our scripts.js file and create our document ready function:
 
@@ -53,7 +71,7 @@ $(document).ready(function() {
 
 This allows us to initialize our jQuery code when the document loads. It might look a bit weird, but it's what we do when we're working with jQuery. Remember, all of the code in our scripts.js will go within the curly braces of the above function.
 
-###Basic Architecture
+### Basic Architecture
 
 We are going to be creating a todo list. So the easiest way to store a list of things is to create an array!
 
@@ -106,7 +124,7 @@ src="./app/scripts/scripts.js">
 </script>
 ```
 
-###Making our addTask function
+### Making our addTask function
 
 When we enter something into the input field and hit save, we want to create an object and push it to our array.
 
@@ -231,9 +249,9 @@ Finally, let's make it so that we can open and close the new task form with the
 ```
 
 
-##Step 3
+## Step 3
 
-###Task Progression HTML
+### Task Progression HTML
 
 Before we make it possible to move our tasks from in progress to archived, we want create a space for them to exist in our HTML. We will do this in a very minimalist way in order to get things in a way they make sense.
 
@@ -261,8 +279,8 @@ The css is already done for the progress-box class
 
 
 
-##Step 4
-###Starting, Finishing, and Deleting Tasks
+## Step 4
+### Starting, Finishing, and Deleting Tasks
 
 We need to include this function in our code. We will refer to this function in a minute, so for now, just include the function at the top of your app.
 
@@ -371,7 +389,7 @@ Perhaps it's not so important with a todolist, but it's good to start thinking a
 
 
 ## Black Diamond: Local Storage
-###Our Browser's Brain
+### Our Browser's Brain
 
 The final step for the todo list is to save our list items on local storage. Local storage allows our app to access the browsers built in storage. We can save a limited amount of data in cool ways. This means if we close our browser our list items will still be there!
 

app/scripts/scripts.js

@@ -0,0 +1,128 @@
+$(document).ready(function() {
+  console.log("BASS TEST");
+  var listo = [];
+
+  // ensures the newTaskForm is hidden on page load
+  $('#newTaskForm').hide();
+
+
+//function to advance a task from new to in progress
+var advanceTask = function(task) {
+  var modified = task.innerText.trim()
+  for (var i = 0; i < listo.length; i++) {
+    if (listo[i].task === modified) {
+      if (listo[i].id === 'new') {
+        listo[i].id = 'inProgress';
+      } else if (listo[i].id === 'inProgress') {
+        listo[i].id = 'archived';
+      } else {
+        listo.splice(i, 1);
+      }
+      break;
+    }
+  }
+  task.remove();
+};
+
+$(document).on('click', '#item', function(e) {
+	e.preventDefault();
+});
+
+// this changes the task id from new to in progress, advancing it along our app lists
+// TEST REDUNDENCY OF ID ASSIGNMENT
+
+$(document).on('click', '#item', function(e) {
+	e.preventDefault();
+  var task = this;
+  advanceTask(task);
+  this.id = 'inProgress';
+  $('#currentList').append(this.outerHTML);
+});
+
+// now we need an event listener to change tasks from in progress to achived
+$(document).on('click', '#inProgress', function(e){
+  e.preventDefault();
+  var task = this;
+  task.id = 'archived';
+  var changeIcon = task.outerHTML.replace('glyphicon-arrow-right', 'glyphicon-remove');
+  advanceTask(task);
+  $('#archivedList').append(changeIcon);
+});
+
+// This will delete tasks in the archived div by passing a task into advancetask without an id
+$(document).on('click', '#archived', function (e) {
+  e.preventDefault();
+  var task = this;
+  advanceTask(task);
+});
+
+
+//function to create task object and push it to listo array
+var addTask = function(task) {
+  if(task) {
+      //reference to our constructor function
+      task = new Task(task);
+      listo.push(task);
+
+      // creates a task item rendered in the DOM
+      $('#newItemInput').val('');
+      $('#newList').append(
+            '<a href="#finish" class="" id="item">' +
+            '<li class="list-group-item">' +
+            '<h3>' + task.task + '</h3>' +
+            '<span class="arrow pull-right">' +
+            '<i class="glyphicon glyphicon-arrow-right">' +
+            '<span>' +
+            '</li>' +
+            '</a>'
+        )
+	}
+    $('#newTaskForm').slideToggle('fast', 'linear');
+};
+
+//an event that calls the addTask function when we click the save button on our form
+$('#saveNewItem').on('click', function(e){
+  e.preventDefault();
+  var task = $('#newItemInput').val().trim();
+  addTask(task);
+});
+
+//lets create a listener to call addtask as above when enter is pressed
+$(document).keypress(function(e) {
+    if(e.which == 13) {
+      var task = $('#newItemInput').val().trim();
+      addTask(task);
+      $('#newItemInput').focus();
+    }
+});
+
+//opens form
+$('#add-todo').on('click', function () {
+    $('#newTaskForm').fadeToggle('fast', 'linear');
+    $('#newItemInput').focus();
+});
+
+
+
+//closes form
+$('#cancel').on('click', function (e) {
+    e.preventDefault();
+    $('#newTaskForm').fadeToggle('fast', 'linear');
+});
+
+
+
+
+
+// task constructor function:
+var Task = function(task) {
+	this.task = task;
+	this.id = 'new';
+}
+
+
+
+
+
+//end of $(document).ready
+});

index.html

@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="styles/base/reset.css">
 	<link rel="stylesheet" href="styles/base/fonts.css">
 	<link rel="stylesheet" href="styles/views/landing.css">
+
 </head>
 <body>
 <main class="main-wrapper">
@@ -23,17 +24,37 @@
 
 	<!-- to-do main container -->
 	<section class="todo-main-container">
-		<div
-		class="progress-box"
-		id="newList">
+		<div class="progress-box" id="newList">
 			<h3>New To Dos</h3>
+			<ul class = "list-group"></ul>
+		</div>
+
+		<div class="progress-box">
+			<h3>In Progress</h3>
+			<ul class="list-group" id="currentList"></ul>
+		</div>
+		<div>
 		</div>
 
+		<div class="progress-box">
+			<h3>Complete</h3>
+			<ul class="list-group" id="archivedList"></ul>
+		</div>
+
+
 		<!--Add progress-box from the reademe-->
 	</section>
 
 	<!-- FORM -->
 	<!--Add new task form here -->
+	<section id="newTaskForm">
+	<h3 class="todo-form-title">New To Do </h3>
+	<div  class="form-input-container">
+		<img id="cancel" src="./img/icons/cross.png" alt="close form icon">
+		<input id="newItemInput" class="todo-title-input form-input" type="text" placeholder="To-Do Title">
+		<button  id="saveNewItem" class="complete-todo-button">Add To Do</button>
+	</div>
+</section>
 
 	<!-- FOOTER -->
 	<footer class="todo-footer">
@@ -44,6 +65,7 @@ <h3>New To Dos</h3>
 	<!--jQuery-->
 	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 	<!--INclude your script file here -->
+	<script src="./app/scripts/scripts.js"></script>
 </main>
 </body>
 </html>

styles/views/landing.css

@@ -46,10 +46,12 @@
     color: #fff;
 }
 
-#newList h3 {
-  margin-bottom: 10px;
+li h3 {
+    padding-top: 10px;
 }
 
+
+
 .todo-img-container {
     width: 50px;
 }