diff --git a/answers.md b/answers.md index a90c39911c..fa81211e54 100644 --- a/answers.md +++ b/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 diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000000..90ffc21acc --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 9c129b5c9b..9fd742348b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,11 @@ import React from 'react'; +import TodoList from './components/TodoList'; +import './App.css'; const App = () => ( -
-

Todo App

- +
+

Todo List

+
); diff --git a/src/components/Todo.js b/src/components/Todo.js new file mode 100644 index 0000000000..d2ac2dd6e4 --- /dev/null +++ b/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 ( +
+
+ {this.props.todo.text} +
+
×
+
+ ); + } +} + +export default Todo; \ No newline at end of file diff --git a/src/components/TodoList.js b/src/components/TodoList.js new file mode 100644 index 0000000000..2083b1c173 --- /dev/null +++ b/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 ( +
+
+ +
+ {this.state.todos.map((item, index) => { + return + })} +
+ ); + } +} + +export default TodoList; \ No newline at end of file diff --git a/src/img/background.jpg b/src/img/background.jpg new file mode 100644 index 0000000000..92f24c7b2b Binary files /dev/null and b/src/img/background.jpg differ