Alex Botello: Complete + Stretch

answers.md

@@ -1,19 +1,27 @@
 ### All Answers to Partner Study should be filled out in this file.
 
 1. Single Page Application
+    - An application that loads a single html page and all the necessary assests required for the application to run.
 
 2. Compilers
+    - A compiler takes the code, transforms it and returns code in a different format. Babel is the compiler most commonly used with React.
 
 3. Bundlers
+    - Bundlers take JS and CSS code writtren as seperate modules, and combine them together into a few files better optimized for the browsers.
 
 4. Elements
+    - React elements are the building blocks of React applications. An element describes what you want to see on the screen. Elements are immutable.
 
 5. Components
+    - Components are small, reusable pieces of code that return a React element to be rendered to the page.
 
 6. JSX
+    - A syntax extension to JS. Similar to a template language, but still has the full power of JS.
 
 7. Package Mangers
+    - Tools that allow you to manage dependencies in your project.
 
 8. CDN
+    - Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe.
 
 9. Props and State

src/App.css

@@ -0,0 +1,72 @@
+body {
+  margin: 0 auto;
+  height: 100%;
+  width: 100%;
+  background-image: url("./img/background.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+
+}
+
+.container {
+  border: 3px solid black;
+  border-radius: 10px;
+  display: flex;
+  max-width: 1100px;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  margin-top: 100px;
+}
+
+.textBox {
+  width: 700px;
+  height: 40px;
+  text-align: center;
+  font-size: 24px;
+  margin-bottom: 25px;
+  border: 3px black solid;
+  border-radius: 10px;
+  background:rgba(255,255,255,0.5);
+  color: black;
+}
+
+.textBox::placeholder {
+  color: black;
+  font-weight: bold;
+}
+
+.todo {
+  display: flex;
+}
+
+.todoTask {
+  display: flex;
+  font-size: 30px;
+  align-items: center;
+  margin: 15px 0;
+  padding-left: 5px;
+  width: 500px;
+  height: 35px;
+  max-height: 100%;
+  border: 3px solid black;
+  border-radius: 10px;
+  font-weight: bold;
+  background:rgba(255,255,255,0.5);
+}
+
+.button {
+  display: flex;
+  align-self: center;
+  margin-left: 25px;
+  color: red;
+  font-size: 25px;
+  font-weight: bold;
+}
+
+.button:hover {
+  cursor: pointer;
+}

src/App.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import TodoList from './components/TodoList';
+import './App.css';
 
 const App = () => (
-  <div>
-    <h2>Todo App</h2>
-
+  <div className="container">
+    <h1>Todo List</h1>
+    <TodoList />
   </div>
 );
 

src/components/Todo.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+
+class Todo extends Component {
+
+  handleClick = () => {
+    this.props.toggleTodoCompleted(this.props.index)
+  }
+
+  handleButton = () => {
+    this.props.removeTodo(this.props.index);
+  }
+
+  render() {
+    let style = {
+      "textDecoration": this.props.todo.completed ? "line-through" : "none",
+    }
+    return (
+      <div className="todo">
+        <div className="todoTask" style={style} onClick={this.handleClick}>
+          {this.props.todo.text}
+        </div>
+        <div className="button" onClick={this.handleButton}>&times;</div>
+      </div>
+    );
+  }
+}
+
+export default Todo;

src/components/TodoList.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import Todo from './Todo';
+
+class TodoList extends Component {
+  constructor() {
+    super();
+    let todos = this.grabLocalStorage();
+    this.state = {
+      todos,
+      newTodo: '', 
+    }
+  }
+
+  grabLocalStorage = () => {
+    return JSON.parse(localStorage.getItem('todos')) || [];
+  }
+
+  pushToLocalStorage = (todos) => {
+    localStorage.setItem('todos', JSON.stringify(todos))
+  }
+
+  addTodo = (event) => {
+    event.preventDefault();
+    let todoObject = {'text': this.state.newTodo, 'completed': false}
+    let todos = this.state.todos;
+    todos.push(todoObject);
+    this.setState({
+      todos: todos,
+      newTodo: ''
+    });
+    this.pushToLocalStorage(todos);
+  }
+
+  removeTodo = (index) => {
+    let todos = this.state.todos;
+    todos.splice(index, 1);
+    this.setState({
+      todos: todos,
+      newTodo: '',
+    });
+    this.pushToLocalStorage(todos);
+  }
+
+  handleChange = (event) => {
+    this.setState({
+        newTodo: event.target.value,
+    }); 
+ }
+
+  toggleTodoCompleted = (index) => {
+    let todos = this.state.todos;
+    todos[index].completed = !todos[index].completed;
+    this.setState({
+      todos: todos,
+      newTodo: '',
+    });
+    this.pushToLocalStorage(todos);
+  } 
+
+  render() {
+    return (
+      <div>
+       <form onSubmit={this.addTodo}>
+         <input className="textBox" type="text" onChange={this.handleChange} 
+          placeholder="Add a new task!" value={this.state.newTodo}/>
+       </form> 
+       {this.state.todos.map((item, index) => {
+           return <Todo toggleTodoCompleted={this.toggleTodoCompleted} 
+                  removeTodo={this.removeTodo} key={index}
+                  todo={item} index={index}/>
+       })}
+      </div>
+    );
+  }
+}
+
+export default TodoList;