From 3530d7ddb154ca2142284157a377d8eae9e01f80 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Mon, 21 Jun 2021 04:54:57 +0000 Subject: [PATCH 1/8] Setting up GitHub Classroom Feedback From 045ee983ae9033a799f8ca7b841076756b4f0b91 Mon Sep 17 00:00:00 2001 From: APM246 Date: Wed, 23 Jun 2021 00:54:45 +0800 Subject: [PATCH 2/8] implemented adding tasks --- public/index.html | 6 +++ src/App.css | 39 ++++++------------ src/App.js | 102 +++++++++++++++++++++++++++++++++++++--------- 3 files changed, 102 insertions(+), 45 deletions(-) diff --git a/public/index.html b/public/index.html index aa069f2..70cdfa8 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,9 @@ + + React App diff --git a/src/App.css b/src/App.css index 74b5e05..d050b73 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,25 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; +body { + background-color: #282c34; + color: white; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.left { + border-right: 5px solid green; + position: relative; } -.App-header { - background-color: #282c34; +.right { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +.task-adder { + text-align: center; + position: absolute; + top: 50%; + left: 50%; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..ebabc84 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,89 @@ +/* eslint-disable no-unused-vars */ import logo from './logo.svg'; import './App.css'; +import React from 'react'; -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); +class Task extends React.Component { + constructor(props) { + super(props); + this.state = {color: 'white'}; + this.changeColor = this.changeColor.bind(this); + } + + changeColor() { + this.setState({color: 'red'}); + } + + render() { + return ( + // double curly braces needed +

+ {this.props.name} +

+ ); + } +} + +function ListItem(props) { + return
  • {props.name}
    • +} + +class TaskList extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( + + ); + } +} + +// component function +class App extends React.Component { + constructor(props) { + super(props); + this.state = {value: '', tasks: []}; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange(e) { + this.setState({value: e.target.value}); + } + + handleSubmit(e) { + let updated_tasks = this.state.tasks.concat(this.state.value); + this.setState({tasks: updated_tasks}); + e.preventDefault(); + console.log(this.state.tasks.toString()); + } + + render() { + return ( +
    +
    +
    +
    + + +
    +
    +
    +
    + +
    +
    + ); + } } export default App; From 3858f590a97d3655f1434e30d3de689d3a0f93ae Mon Sep 17 00:00:00 2001 From: APM246 Date: Wed, 23 Jun 2021 22:33:49 +0800 Subject: [PATCH 3/8] implemented deleting tasks and marking tasks as complete --- src/App.css | 31 +++++++++++++++++++++++----- src/App.js | 58 ++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 70 insertions(+), 19 deletions(-) diff --git a/src/App.css b/src/App.css index d050b73..5034962 100644 --- a/src/App.css +++ b/src/App.css @@ -3,23 +3,44 @@ body { color: white; } +.App { + height: 100vh; +} + .left { border-right: 5px solid green; position: relative; + height: 100%; } .right { - min-height: 100vh; - display: flex; - flex-direction: column; align-items: center; justify-content: center; - font-size: calc(10px + 2vmin); + font-size: 2em; } .task-adder { text-align: center; position: absolute; top: 50%; - left: 50%; + left: 10%; +} + +.submit { + margin-left: 10px; + border-radius: 10px; + font-size: 1.2em; + background-color: red; +} + +.todo-header { + margin-left: 10px; +} + +.task-complete { + text-decoration: line-through; +} + +button { + font-size: 1em; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index ebabc84..51f6f45 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import logo from './logo.svg'; import './App.css'; import React from 'react'; +import { render } from '@testing-library/react'; class Task extends React.Component { constructor(props) { @@ -24,25 +25,41 @@ class Task extends React.Component { } } -function ListItem(props) { - return
  • {props.name}
    • -} - -class TaskList extends React.Component { +class ListItem extends React.Component { constructor(props) { super(props); - this.state = {}; + this.state = {className: ''} + this.handleDeletion = this.handleDeletion.bind(this); + } + + handleDeletion() { + this.props.handleDoubleClick(this.props.name); } render() { return ( - + + ) + } + ); } } @@ -54,6 +71,7 @@ class App extends React.Component { this.state = {value: '', tasks: []}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); + this.handleDoubleClick = this.handleDoubleClick.bind(this); } handleChange(e) { @@ -62,9 +80,16 @@ class App extends React.Component { handleSubmit(e) { let updated_tasks = this.state.tasks.concat(this.state.value); - this.setState({tasks: updated_tasks}); + this.setState({tasks: updated_tasks, value: ''}); e.preventDefault(); - console.log(this.state.tasks.toString()); + } + + handleDoubleClick(task) { + let index = this.state.tasks.indexOf(task); + let tasks_copy = this.state.tasks.slice(); + tasks_copy.splice(index, 1); + this.setState({tasks: tasks_copy}) + } render() { @@ -72,14 +97,19 @@ class App extends React.Component {
    +

    To add tasks to your todo list, enter them in the text box and press + submit. To mark tasks as complete, click the checkbox beside them. To delete + tasks, double click on the task. +

    - +
    - +

    Todo List

    +
    ); From 7bebfa5c43a2d12b41408e2a9c62ab511d2df10b Mon Sep 17 00:00:00 2001 From: APM246 Date: Wed, 23 Jun 2021 22:46:13 +0800 Subject: [PATCH 4/8] implemented undoing task completion --- src/App.css | 5 +++-- src/App.js | 15 +++++++++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/App.css b/src/App.css index 5034962..f472f86 100644 --- a/src/App.css +++ b/src/App.css @@ -41,6 +41,7 @@ body { text-decoration: line-through; } -button { - font-size: 1em; +input[type="checkbox"] { + transform: scale(1.3); + margin-left: 10px; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 51f6f45..2f7a7e6 100644 --- a/src/App.js +++ b/src/App.js @@ -28,21 +28,32 @@ class Task extends React.Component { class ListItem extends React.Component { constructor(props) { super(props); - this.state = {className: ''} + this.state = {className: '', completed: false} this.handleDeletion = this.handleDeletion.bind(this); + this.handleClick = this.handleClick.bind(this); } handleDeletion() { this.props.handleDoubleClick(this.props.name); } + handleClick() { + if (this.state.completed) { + this.setState({className: '', completed: false}) + } + + else { + this.setState({className: 'task-complete', completed: true}) + } + } + render() { return (
  • {this.props.name} - this.setState({className: 'task-complete'})} /> +
    • ); } From 1bc3ed83e56653ee9493b2828b1ace93c0f42c10 Mon Sep 17 00:00:00 2001 From: APM246 Date: Wed, 23 Jun 2021 23:12:16 +0800 Subject: [PATCH 5/8] removed unnecessary scrollbars and centred contents of left column --- src/App.css | 12 ++++++------ src/App.js | 24 ++++++++++++++---------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/App.css b/src/App.css index f472f86..21d05a7 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,7 @@ body { background-color: #282c34; color: white; + overflow: hidden; } .App { @@ -9,8 +10,6 @@ body { .left { border-right: 5px solid green; - position: relative; - height: 100%; } .right { @@ -19,11 +18,12 @@ body { font-size: 2em; } -.task-adder { +.description { text-align: center; - position: absolute; - top: 50%; - left: 10%; +} + +.create-tasks { + margin: auto; } .submit { diff --git a/src/App.js b/src/App.js index 2f7a7e6..ee731f8 100644 --- a/src/App.js +++ b/src/App.js @@ -106,16 +106,20 @@ class App extends React.Component { render() { return (
    -
    -
    -

    To add tasks to your todo list, enter them in the text box and press - submit. To mark tasks as complete, click the checkbox beside them. To delete - tasks, double click on the task. -

    -
    - - -
    +
    +
    +
    +

    To add tasks to your todo list, enter them in the text box and press + submit. To mark tasks as complete, click the checkbox beside them. To delete + tasks, double click on the task. +

    +
    +
    +
    + + +
    +
    From e46fea91ebde09f3ea5d1d89e95bfb71809e6430 Mon Sep 17 00:00:00 2001 From: APM246 Date: Thu, 24 Jun 2021 22:24:46 +0800 Subject: [PATCH 6/8] added express server --- server.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 server.js diff --git a/server.js b/server.js new file mode 100644 index 0000000..9bb1aa7 --- /dev/null +++ b/server.js @@ -0,0 +1,11 @@ +const express = require('express'); +const path = require('path'); +const app = express(); + +app.use(express.static(path.join(__dirname, 'build'))) + +app.get('/', function(req, res) { + res.sendFile(path.join(__dirname, 'build', 'index.html')); +}); + +app.listen(9000); \ No newline at end of file From 47b4e89133354e2d415e1b86a7c15277fe82835f Mon Sep 17 00:00:00 2001 From: APM246 Date: Thu, 24 Jun 2021 23:51:24 +0800 Subject: [PATCH 7/8] updated gitignore and readme --- .gitignore | 1 + README.md | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/.gitignore b/.gitignore index 864a05c..01cd317 100644 --- a/.gitignore +++ b/.gitignore @@ -132,3 +132,4 @@ dist npm-debug.log* yarn-debug.log* yarn-error.log* +*.pem diff --git a/README.md b/README.md index 280c785..35d0d29 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ +# Deployment + +The website is deployed at http://ubuntu@ec2-13-239-60-176.ap-southeast-2.compute.amazonaws.com:9000/ + + # Getting Started with Create React App This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). From e6f2348da9447233212db6e57a743ece540cc02c Mon Sep 17 00:00:00 2001 From: APM246 Date: Fri, 25 Jun 2021 01:24:05 +0800 Subject: [PATCH 8/8] added Firebase authentication using email/password --- package.json | 2 ++ public/index.html | 7 ++++++- src/App.css | 7 +++++++ src/App.js | 39 ++++++++++++++++++++++++++++++++++++++- 4 files changed, 53 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f267c1a..6d14480 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", + "firebase": "^8.6.8", + "firebaseui": "^4.8.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", diff --git a/public/index.html b/public/index.html index 70cdfa8..c7a4a5e 100644 --- a/public/index.html +++ b/public/index.html @@ -34,7 +34,12 @@ -
    +
    +
    +
    + + +