first push

This commit is contained in:
coralmania 2020-01-05 23:07:36 +02:00
parent 9c14273eec
commit 446b81dc1c
13 changed files with 2279 additions and 2 deletions

1624
README.md

File diff suppressed because it is too large Load diff

18
package.json Normal file
View file

@ -0,0 +1,18 @@
{
"name": "hometask",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.4.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "0.9.5"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

31
public/index.html Normal file
View file

@ -0,0 +1,31 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<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`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>

457
src/App.css Normal file
View file

@ -0,0 +1,457 @@
.App {
text-align: center;
}
body {
background-color: #f9f9fa
}
.flex {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
@media (max-width:991.98px) {
.padding {
padding: 1.5rem
}
}
@media (max-width:767.98px) {
.padding {
padding: 1rem
}
}
.padding {
padding: 5rem
}
.card {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none
}
.pl-3,
.px-3 {
padding-left: 1rem !important
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #d2d2dc;
border-radius: 0
}
.pr-3,
.px-3 {
padding-right: 1rem !important
}
.card .card-body {
padding: 1.25rem 1.75rem
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem
}
.card .card-title {
color: #000000;
margin-bottom: 0.625rem;
text-transform: capitalize;
font-size: 0.875rem;
font-weight: 500
}
.add-items {
margin-bottom: 1.5rem;
overflow: hidden
}
.d-flex {
display: flex !important
}
.add-items input[type="text"] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: 100%;
background: transparent
}
.form-control {
border: 1px solid #f3f3f3;
font-weight: 400;
font-size: 0.875rem
}
.form-control {
display: block;
width: 100%;
padding: 0.875rem 1.375rem;
font-size: 1rem;
line-height: 1;
color: #495057;
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 2px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}
.add-items .btn {
margin-left: .5rem
}
.btn {
font-size: 0.875rem;
line-height: 1;
font-weight: 400;
padding: .7rem 1.5rem;
border-radius: 0.1275rem
}
.list-wrapper {
height: 100%;
max-height: 100%
}
.add-items {
margin-bottom: 1.5rem;
overflow: hidden
}
.add-items input[type="text"] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: 100%;
background: transparent
}
.add-items .btn,
.add-items .fc button,
.fc .add-items button,
.add-items .ajax-upload-dragdrop .ajax-file-upload,
.ajax-upload-dragdrop .add-items .ajax-file-upload,
.add-items .swal2-modal .swal2-buttonswrapper .swal2-styled,
.swal2-modal .swal2-buttonswrapper .add-items .swal2-styled,
.add-items .wizard>.actions a,
.wizard>.actions .add-items a {
margin-left: .5rem
}
.rtl .add-items .btn,
.rtl .add-items .fc button,
.fc .rtl .add-items button,
.rtl .add-items .ajax-upload-dragdrop .ajax-file-upload,
.ajax-upload-dragdrop .rtl .add-items .ajax-file-upload,
.rtl .add-items .swal2-modal .swal2-buttonswrapper .swal2-styled,
.swal2-modal .swal2-buttonswrapper .rtl .add-items .swal2-styled,
.rtl .add-items .wizard>.actions a,
.wizard>.actions .rtl .add-items a {
margin-left: auto;
margin-right: .5rem
}
.list-wrapper {
height: 100%;
max-height: 100%
}
.list-wrapper ul {
padding: 0;
text-align: left;
list-style: none;
margin-bottom: 0
}
.list-wrapper ul li {
font-size: .9375rem;
padding: .4rem 0;
border-bottom: 1px solid #f3f3f3
}
.list-wrapper ul li:first-child {
border-bottom: none
}
.list-wrapper ul li .form-check {
max-width: 90%;
margin-top: .25rem;
margin-bottom: .25rem
}
.list-wrapper ul li .form-check label:hover {
cursor: pointer
}
.list-wrapper input[type="checkbox"] {
margin-right: 15px
}
.list-wrapper .remove {
cursor: pointer;
font-size: 1.438rem;
font-weight: 600;
width: 1.25rem;
height: 1.25rem;
line-height: 20px;
text-align: center
}
.list-wrapper .completed {
text-decoration: line-through;
text-decoration-color: #3da5f4
}
.list-wrapper ul li .form-check {
max-width: 90%;
margin-top: .25rem;
margin-bottom: .25rem
}
.list-wrapper ul li .form-check,
.list-wrapper ul li .form-check .form-check-label,
.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-name,
.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-designation,
.email-wrapper .mail-list-container .mail-list .content .sender-name,
.email-wrapper .message-body .attachments-sections ul li .details p.file-name,
.settings-panel .chat-list .list .info p {
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
white-space: nowrap
}
.form-check {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 0
}
.list-wrapper ul li .form-check,
.list-wrapper ul li .form-check .form-check-label,
.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-name,
.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-designation,
.email-wrapper .mail-list-container .mail-list .content .sender-name,
.email-wrapper .message-body .attachments-sections ul li .details p.file-name,
.settings-panel .chat-list .list .info p {
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
white-space: nowrap
}
.form-check .form-check-label {
min-height: 18px;
display: block;
margin-left: 1.75rem;
font-size: 0.875rem;
line-height: 1.5
}
.form-check-label {
margin-bottom: 0
}
.list-wrapper input[type="checkbox"] {
margin-right: 15px
}
.form-check .form-check-label input {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
margin-top: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0)
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0
}
.list-wrapper ul li .form-check,
.list-wrapper ul li .form-check .form-check-label,
.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-name,
.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-designation,
.email-wrapper .mail-list-container .mail-list .content .sender-name,
.email-wrapper .message-body .attachments-sections ul li .details p.file-name,
.settings-panel .chat-list .list .info p {
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
white-space: nowrap
}
.form-check .form-check-label input[type="checkbox"]+.input-helper:before {
content: "";
width: 18px;
height: 18px;
border-radius: 2px;
border: solid #405189;
border-width: 2px;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
transition-duration: 0s;
-webkit-transition-duration: 250ms;
transition-duration: 250ms
}
.form-check .form-check-label input[type="checkbox"]+.input-helper:before,
.form-check .form-check-label input[type="checkbox"]+.input-helper:after {
position: absolute;
top: 0;
left: 0
}
.form-check .form-check-label input[type="checkbox"]+.input-helper:after {
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
transition-duration: 0s;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
font-family: Material Design Icons;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
content: '\F12C';
font-size: .9375rem;
font-weight: bold;
color: #ffffff
}
.form-check .form-check-label input[type="checkbox"]+.input-helper:before,
.form-check .form-check-label input[type="checkbox"]+.input-helper:after {
position: absolute;
top: 0;
left: 0
}
.form-check .form-check-label input[type="checkbox"]:checked+.input-helper:before {
background: #405189;
border-width: 0
}
.form-check .form-check-label input[type="checkbox"]+.input-helper:before {
content: "";
width: 18px;
height: 18px;
border-radius: 2px;
border: solid #405189;
border-width: 2px;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
transition-duration: 0s;
-webkit-transition-duration: 250ms;
transition-duration: 250ms
}
.form-check .form-check-label input[type="checkbox"]+.input-helper:after {
font-family: FontAwesome;
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
color: #fff
}
.text-primary,
.list-wrapper .completed .remove {
color: #405189 !important
}
.list-wrapper .remove {
cursor: pointer;
font-size: 1.438rem;
font-weight: 600;
width: 1.25rem;
height: 1.25rem;
line-height: 20px;
text-align: center
}
.ml-auto,
.list-wrapper .remove,
.mx-auto {
margin-left: auto !important
}
.mdi-close-circle-outline:before {
content: "\F15A"
}
.list-wrapper ul li {
font-size: .9375rem;
padding: .4rem 0;
border-bottom: 1px solid #f3f3f3
}
.mdi:before {
font-family: FontAwesome;
content: "\f00d";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-size: .756em;
color: #405189
}
.list-wrapper ul {
padding: 0;
text-align: left;
list-style: none;
margin-bottom: 0
}
.flex-column-reverse {
flex-direction: column-reverse !important
}
.d-flex,
.loader-demo-box,
.distribution-chart-legend .distribution-chart,
.distribution-chart-legend .distribution-chart .item,
.list-wrapper ul li,
.email-wrapper .mail-sidebar .menu-bar .profile-list-item a,
.email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user,
.email-wrapper .mail-list-container .mail-list .details,
.email-wrapper .message-body .attachments-sections ul li .thumb,
.email-wrapper .message-body .attachments-sections ul li .details .buttons,
.lightGallery .image-tile .demo-gallery-poster,
.swal2-modal,
.navbar .navbar-menu-wrapper .navbar-nav,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item {
display: flex !important
}

13
src/App.js Normal file
View file

@ -0,0 +1,13 @@
import React, { Component } from 'react';
import Todolist from './components/TodoList';
import './App.css';
class App extends Component {
render() {
return (
<Todolist />
);
}
}
export default App;

8
src/App.test.js Normal file
View file

@ -0,0 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});

3
src/components/Li.css Normal file
View file

@ -0,0 +1,3 @@
.marked{
text-decoration: line-through;
}

42
src/components/Li.js Normal file
View file

@ -0,0 +1,42 @@
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './Li.css';
class Li extends React.Component {
constructor(props){
super(props)
console.log(this.props);
this.markedFlag = false;
this.state = {
cssClass: 'unMarked'
}
}
render(){
return (
<div>
<li className={this.state.cssClass}>
<div className="form-check">
<label className="form-check-label">
<input className="checkbox" type="checkbox" onClick={this.mark} />
{this.props.todo} At {this.props.at}
<i className="input-helper"></i>
</label>
</div>
</li>
</div>
)
}
mark = () => {
if (this.markedFlag) {
this.markedFlag = false;
this.setState({cssClass:'unmarked'})
}else{
this.markedFlag = true;
this.setState({cssClass:'marked'})
}
}
}
export default Li

View file

@ -0,0 +1,64 @@
import React from 'react';
import Li from './Li.js';
import 'bootstrap/dist/css/bootstrap.css';
class TodoList extends React.Component {
constructor(props){
super(props)
this.state = {
todoList : [
{todo: 'Clean the bathroom' , at:'2020'},
{todo: 'Buy Milk', at:'2019'},
{todo: 'Walk the dog' , at:'2018'},
]
}
}
addToList = () => {
let todo = document.getElementById('user_input').value;
if (todo !== '') {
let tmp_state = this.state.todoList;
tmp_state.push({todo:todo, at:'This year'})
this.setState({tmp_state})
}
}
render(){
return (
<div className="page-content page-container" id="page-content">
<div className="padding">
<div className="row container d-flex justify-content-center">
<div className="col-lg-12">
<div className="card px-3">
<div className="card-body">
<h4 className="card-title">Awesome Todo list</h4>
<div className="add-items d-flex">
<input className="form-control todo-list-input" id="user_input" />
<button className="add btn btn-primary font-weight-bold todo-list-add-btn" onClick={this.addToList}>Add</button>
</div>
<div className="list-wrapper">
<ul className="d-flex flex-column-reverse todo-list">
{
this.state.todoList.map( (element, index) => (
<Li
key={index}
id={index}
todo={element.todo}
at={element.at}
/>
))
}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default TodoList

5
src/index.css Normal file
View file

@ -0,0 +1,5 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

9
src/index.js Normal file
View file

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);

7
src/logo.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB