shadencodes

import React from 'react';
import './App.css';
import SubmitForm from './components/SubmitForm/SubmitForm';
import TasksList from './components/TasksList/TasksList'

class App extends React.Component{
  constructor(props){
    super(props);
    this.state ={tasks: []}

shadencodes

.tasks-list-container{
    display: flex;
    width: 40%;
    margin: auto;
    justify-content: center;
}

.tasks-list{
    width: 100%;
    padding-left: 10px;

shadencodes

import React from 'react';
import './TasksList.css'
import Task from '../Task/Task';

class TasksList extends React.Component{

    render(){
        return (
            <div className='tasks-list-container'>
                <div className='tasks-list'>                  

shadencodes

.task-container{
    display: flex;
    border-bottom: 1px solid #979797;
    width: 100%;

}

.task-container-background{
    display: flex;
    flex-grow: 1;

shadencodes

import React from 'react';
import './Task.css';

class Task extends React.Component{
    constructor(props){
        super(props);

        this.removeTask = this.removeTask.bind(this);
        this.markDone = this.markDone.bind(this);

shadencodes

    constructor(props){
        super(props);
        this.state = { tasksCount: 0 };

        this.addItem = this.addItem.bind(this);
    }

    addItem(e) {
        if (this._inputElement.value !== "") {
            var newItem = {

shadencodes

.form{
    margin-top: 100px;
    margin-bottom: 50px;
}
.input{
    width: 400px;
    padding: 10px;
    border-radius: 15px;
    outline: none;
}

shadencodes

import React from 'react';
import './SubmitForm.css';a
class SubmitForm extends React.Component{
    render(){
        return (
            <div className='form'>
                <form>
                    <input className='input' placeholder='Add Task' />
                    <button className='add-button' type='submit'>Add</button>
                </form>