Todo React

Todo React

by Boris Kachanov

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
    <title>Todo App React</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'Courgette', cursive;
  background: #f5f5f5;
}

h2 {
  margin-bottom: 20px;
}

/*@font-face {
  font-family: "Courgette-Regular";
  src: url("./font/Courgette-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}*/

.input {
  font-family: 'Courgette', cursive;
  font-size: 20pt;
  text-transform: uppercase;
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 10px;
  height: 30px;
  width: 200px;
  background: #ffffff;
}

.addButton  {
  width: 100px;
  font-weight: 700;
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  border-radius: 3px;
  background: rgb(64,199,129);
  transition: 0.2s;
  height: 36px;
  position: absolute;
  margin-top: 20px;
  font-family: 'Courgette', cursive;
  font-size: large;
  padding-top: 7px;

}
.addButton:hover {
  background: rgb(53, 167, 110);
}

.addButton:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}

h2{
  font-family: 'Courgette', cursive;
  font-size: 50pt;
  margin-left: 20px;
}

.todoList {
  margin: 20px;
  width: 305px;
  vertical-align: middle;
  background: white;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.todoItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 20pt;
  text-transform: uppercase;
  padding: 2px;
  width: 300px;
  height: 30px;
  border: 1px solid #f5f5f5;
  text-align: justify;
  white-space: nowrap;
}

.todoControlButtons{
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 50px;
  height: 25px;
  margin-top: -4px;

}

.deleteButton {
  margin-right: 5px;
  color: red;
  cursor: pointer;
  user-select: none;
  margin-top: 3px;
}

.readyButton {
  color: greenyellow;
  cursor: pointer;
  user-select: none;
  font-size: 23pt;
  margin-right: 5px;
}


.navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 150px;
 ...

Babel + JSX

var selectedItem;

class Todo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {item: props.value, todoArray: [], status: false, all: false};
        this.defaultTodoItem = {
            value: "",
            done: false,
            id: 0,
        };
    }

    handleChange = (event) => {
        this.setState({item: event.target.value.toUpperCase()});
    };

    addTodo() {
        const input = document.getElementById("input");
        if(input.value) {
            this.setState({
                todoArray: [...this.state.todoArray,
                    {
                        ...this.defaultTodoItem,
                        value: input.value, id: this.defaultTodoItem.id++
                    }]
            });
        }
        input.value = "";
    }

    handleClick = (event) => {
        this.addTodo();
    };

    handleEnter = (event) => {
        if(event.keyCode === 13){
            this.addTodo();
        }
    };

    handleDelete = (item) => {
        let index = item.id;
        const items = this.state.todoArray;
        items[index] = {};
        this.setState({todoArray: this.state.todoArray});
    };

    handleReady = (item) => {
        const index = item.id;
        this.state.todoArray.splice(index, 1, {...this.state.todoArray[index], done: true});

        this.setState({
            todoArray: [...this.state.todoArray],
            id: this.state.todoArray.length
        });
    };

    showCurrentTodos = () => {
        this.setState({
            status: false,
            all: false
        });
    };

    showDoneTodos = () => {
        this.setState({
            status: true,
            all: false
        });

    };

    showAllTodos = () => {
         this.setState({
              all: true
         });
    };

    showTodo = (item) => {
      const maxLength = 18;

      if(item.value.length > maxLength) {
          return <div>{item.value.slice(0, maxLength - 3) + "..."}</div>
 ...