Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes made following issues #32

Merged
merged 1 commit into from
Jul 12, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,27 @@
todoNode.appendChild(newSpan);

/* this adds the delete button */
var deleteButtonNode = document.createElement('button');
var deleteButtonNode = document.createElement("button");
deleteButtonNode.setAttribute("class", "delete-button");
deleteButtonNode.innerHTML = 'x';
deleteButtonNode.addEventListener('click', function(event) {
deleteButtonNode.innerHTML = "❌";
deleteButtonNode.addEventListener("click", function(event) {
var newState = todoFunctions.deleteTodo(state, todo.id);
update(newState);
});
todoNode.appendChild(deleteButtonNode);


// add markTodo button
var markTodoButtonNode = document.createElement("button");
markTodoButtonNode.setAttribute("class", "mark-button");
if (todo.done == false) {markTodoButtonNode.setAttribute('style', 'background-color: #2f537d;')}
if (todo.done == true) {markTodoButtonNode.innerText = 'v'}
if (todo.done == true) {markTodoButtonNode.setAttribute('style', 'background-color: green;')}
if (todo.done == false) {
markTodoButtonNode.setAttribute("style", "background-color: #2f537d;");
}
if (todo.done == true) {
markTodoButtonNode.innerText = "✅";
}
if (todo.done == true) {
markTodoButtonNode.setAttribute("style", "background-color: green;");
}
markTodoButtonNode.addEventListener("click", function(event) {
var newState = todoFunctions.markTodo(state, todo.id);
// markTodoButtonNode.innerHTML = 'test'
Expand Down
42 changes: 13 additions & 29 deletions logic.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
// you can access these on todo.todoFunctions
// For part one we expect you to use tdd


/* USED FOR TESTING
var todos = [
{id: 0, description: 'make tea', done: true},
Expand Down Expand Up @@ -32,72 +31,57 @@ var todoFunctions = {
//cloneArrayOfObjects will create a copy of the todos array
//changes to the new array don't affect the original
cloneArrayOfObjects: function(todos) {
return todos.map(function(todo){
return todos.map(function(todo) {
return JSON.parse(JSON.stringify(todo));
});
},

addTodo: function(todos, newTodo) {
var newTodos = todoFunctions.cloneArrayOfObjects(todos)
newTodos.push({
description: document.getElementsByName('description')[0].value,
done: false,
id: todoFunctions.generateId(),
})
return newTodos
var newTodos = todoFunctions.cloneArrayOfObjects(todos);
newTodos.push({
description: document.getElementsByName("description")[0].value,
done: false,
id: todoFunctions.generateId()
});
return newTodos;
// should leave the input argument todos unchanged (you can use cloneArrayOfObjects)
// returns a new array, it should contain todos with the newTodo added to the end.
// add an id to the newTodo. You can use the generateId function to create an id.
// hint: array.concat
},

deleteTodo: function(todos, idToDelete) {

var newTodos = todoFunctions.cloneArrayOfObjects(todos);
for (let x = 0; x < newTodos.length; x++) {
if (newTodos[x].id == idToDelete) {
newTodos.splice(x, 1)
newTodos.splice(x, 1);
}
}
return newTodos

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

return newTodos;
},

markTodo: function(todos, idToMark) {
var newTodos = todoFunctions.cloneArrayOfObjects(todos);
for (let item of newTodos) {
if (item.id == idToMark) {
if (item.done == false) {
item.done = true
}
else if (item.done == true) {
item.done = false
}
} else {
continue;
item.done ? (item.done = false) : (item.done = true);
}
console.log(newTodos);
}
return newTodos;
},


sortTodos: function(todos, sortFunction) {
// stretch goal! Do this last
// should leave the input arguement todos unchanged (you can use cloneArrayOfObjects)
// sortFunction will have same signature as the sort function in array.sort
// hint: array.slice, array.sort
},
}
};


// Why is this if statement necessary?
// The answer has something to do with needing to run code both in the browser and in Node.js
// See this article for more details:
// http://www.matteoagosti.com/blog/2013/02/24/writing-javascript-modules-for-both-browser-and-node/
if (typeof module !== 'undefined') {
if (typeof module !== "undefined") {
module.exports = todoFunctions;
}
10 changes: 8 additions & 2 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* ENTIRE FORM */
html {
font-family: "Raleway", sans-serif;
min-width: 300px;
}
/*orange - e86742
blue - 2f537d
Expand Down Expand Up @@ -35,10 +36,15 @@ body {
background: none;
padding: 3px;
border: 2px #f5af41 solid;
font-family: "Raleway", sans-serif;
}

#input-field:focus {
outline: 0; /* avoids blue shadow when clicking on button */
outline: 1px #e86742;
border: 1px solid #e86742 !important;
box-shadow: 0 0 3px #e86742 !important;
-moz-box-shadow: 0 0 3px #e86742 !important;
-webkit-box-shadow: 0 0 3px #e86742 !important;
}

@media (max-width: 500px) {
Expand Down Expand Up @@ -116,7 +122,7 @@ body {
background: none;
color: #f5af41;
border: 2px #f5af41 solid;
background-color:
background-color: ;
}

#todo-block {
Expand Down