Skip to content

Commit cdbf945

Browse files
mobilemelodymobilemelody
committed
added date field
1 parent ac70556 commit cdbf945

File tree

6 files changed

+172
-59
lines changed

6 files changed

+172
-59
lines changed

‎app.js

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,37 @@ const ReactDOM = require('react-dom');
44
const TodoForm = ({addTodo}) => {
55
// Input tracker
66
let input;
7+
let dueDate;
78

89
return (
9-
<div className="input-group add-task">
10-
<input ref={node => {
10+
<div className="row add-task">
11+
<div className="col-md-6"><input ref={node => {
1112
input = node;
12-
}} type="text" className="form-control" />
13-
<span className="input-group-btn">
14-
<button onClick={() => {
15-
addTodo(input.value);
16-
input.value = '';
17-
}} className="btn btn-primary">
18-
Add task
19-
</button>
20-
</span>
13+
}} type="text" className="form-control" /></div>
14+
<div className="col-md-4"><input ref={node => {
15+
dueDate = node;
16+
}} type="text" className="form-control" data-provide="datepicker" data-date-autoclose="true" data-date-format="M d" /></div>
17+
<div className="col-md-2"><button onClick={() => {
18+
addTodo(input.value, dueDate.value);
19+
input.value = '';
20+
dueDate.value = '';
21+
}} type="submit" className="btn btn-primary">
22+
Add task
23+
</button></div>
2124
</div>
2225
);
2326
};
2427

2528
const Todo = ({todo, remove}) => {
2629
// Each todo
2730
return (
28-
<li className="list-group-item todo-item">
29-
<a onClick={() => {remove(todo.id)}} className="glyphicon glyphicon-ok-circle todo-check" aria-hidden="true"></a>
30-
{todo.text}
31-
</li>
31+
<div className="row todo-item">
32+
<div className="col-md-8 task-wrapper">
33+
<span onClick={() => {remove(todo.id)}} className="todo-check"><span className="glyphicon glyphicon-ok checkmark"></span></span>
34+
<span className="task-title">{todo.text}</span>
35+
</div>
36+
<div className="col-md-4 task-due-date">{todo.date}</div>
37+
</div>
3238
);
3339
};
3440

@@ -73,9 +79,9 @@ class TodoApp extends React.Component{
7379
});
7480
}
7581
// Add todo handler
76-
addTodo(val){
82+
addTodo(val, dueDate){
7783
// Assemble data
78-
const todo = {text: val}
84+
const todo = {text: val, date: dueDate};
7985
// Update data
8086
axios.post(this.apiUrl, todo)
8187
.then((res) => {

‎build/bundle.js

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9533,22 +9533,35 @@ const ReactDOM = __webpack_require__(80);
95339533
const TodoForm = ({ addTodo }) => {
95349534
// Input tracker
95359535
let input;
9536+
let dueDate;
95369537

95379538
return React.createElement(
95389539
'div',
9539-
{ className: 'input-group add-task' },
9540-
React.createElement('input', { ref: node => {
9541-
input = node;
9542-
}, type: 'text', className: 'form-control' }),
9540+
{ className: 'row add-task' },
95439541
React.createElement(
9544-
'span',
9545-
{ className: 'input-group-btn' },
9542+
'div',
9543+
{ className: 'col-md-6' },
9544+
React.createElement('input', { ref: node => {
9545+
input = node;
9546+
}, type: 'text', className: 'form-control' })
9547+
),
9548+
React.createElement(
9549+
'div',
9550+
{ className: 'col-md-4' },
9551+
React.createElement('input', { ref: node => {
9552+
dueDate = node;
9553+
}, type: 'text', className: 'form-control datepicker' })
9554+
),
9555+
React.createElement(
9556+
'div',
9557+
{ className: 'col-md-2' },
95469558
React.createElement(
95479559
'button',
95489560
{ onClick: () => {
9549-
addTodo(input.value);
9561+
addTodo(input.value, dueDate.value);
95509562
input.value = '';
9551-
}, className: 'btn btn-primary' },
9563+
dueDate.value = '';
9564+
}, type: 'submit', className: 'btn btn-primary' },
95529565
'Add task'
95539566
)
95549567
)
@@ -9558,12 +9571,29 @@ const TodoForm = ({ addTodo }) => {
95589571
const Todo = ({ todo, remove }) => {
95599572
// Each todo
95609573
return React.createElement(
9561-
'li',
9562-
{ className: 'list-group-item todo-item' },
9563-
React.createElement('a', { onClick: () => {
9564-
remove(todo.id);
9565-
}, className: 'glyphicon glyphicon-ok-circle todo-check', 'aria-hidden': 'true' }),
9566-
todo.text
9574+
'div',
9575+
{ className: 'row todo-item' },
9576+
React.createElement(
9577+
'div',
9578+
{ className: 'col-md-8 task-wrapper' },
9579+
React.createElement(
9580+
'span',
9581+
{ onClick: () => {
9582+
remove(todo.id);
9583+
}, className: 'todo-check' },
9584+
React.createElement('span', { className: 'glyphicon glyphicon-ok checkmark' })
9585+
),
9586+
React.createElement(
9587+
'span',
9588+
{ className: 'task-title' },
9589+
todo.text
9590+
)
9591+
),
9592+
React.createElement(
9593+
'div',
9594+
{ className: 'col-md-4 task-due-date' },
9595+
todo.date
9596+
)
95679597
);
95689598
};
95699599

@@ -9622,11 +9652,11 @@ class TodoApp extends React.Component {
96229652
});
96239653
}
96249654
// Add todo handler
9625-
addTodo(val) {
9655+
addTodo(val, dueDate) {
96269656
// Assemble data
9627-
const todo = { text: val
9628-
// Update data
9629-
};axios.post(this.apiUrl, todo).then(res => {
9657+
const todo = { text: val, date: dueDate };
9658+
// Update data
9659+
axios.post(this.apiUrl, todo).then(res => {
96309660
this.state.data.push(res.data);
96319661
this.setState({ data: this.state.data });
96329662
});

‎build/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@
88
<!-- Bootswatch CSS -->
99
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-h21C2fcDk/eFsW9sC9h0dhokq5pDinLNklTKoxIZRUn3+hvmgQSffLLQ4G4l2eEr" crossorigin="anonymous">
1010

11+
<!-- jQuery + jQuery UI -->
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
13+
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
14+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
15+
16+
<!-- Bootstrap datepicker -->
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
19+
1120
</head>
1221

1322
<body>
@@ -17,6 +26,11 @@
1726
</div>
1827

1928
<script src="https://npmcdn.com/axios/dist/axios.min.js"></script>
29+
<script>
30+
$('.datepicker').datepicker({
31+
format: 'M d'
32+
});
33+
</script>
2034

2135
<script type="text/javascript" src="bundle.js"></script></body>
2236
</html>

‎build/styles.css

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,45 @@
33
}
44

55
.todo-item {
6-
font-size: 125%;
6+
padding: 10px 0;
7+
border-bottom: 1px solid #dddddd;
78
}
89

9-
a.todo-check {
10-
color: #dddddd;
11-
top: 5px;
12-
font-size: 150%;
13-
padding-right: 10px;
14-
}
10+
.todo-item .todo-check {
11+
position: relative;
12+
display: inline-block;
13+
border: 1px solid #dddddd;
14+
width: 22px;
15+
height: 22px;
16+
border-radius: 15px;
17+
}
18+
19+
.todo-item .todo-check .checkmark {
20+
color: #ffffff;
21+
position: relative;
22+
top: 4px;
23+
left: 4px;
24+
font-size: 83%;
25+
26+
}
27+
28+
.todo-item .todo-check:hover {
29+
text-decoration: none;
30+
cursor: pointer;
31+
}
32+
33+
.todo-item .todo-check:hover .checkmark {
34+
color: #dddddd;
35+
}
36+
37+
.todo-item .task-title {
38+
padding-left: 10px;
39+
position: relative;
40+
top: 3px;
41+
}
1542

16-
a.todo-check:hover {
17-
color: #2780e3;
18-
text-decoration: none;
19-
cursor: pointer;
20-
}
43+
.todo-item .task-due-date {
44+
text-align: right;
45+
font-size: 80%;
46+
line-height: 27px;
47+
}

‎index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@
88
<!-- Bootswatch CSS -->
99
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css" rel="stylesheet" integrity="sha384-h21C2fcDk/eFsW9sC9h0dhokq5pDinLNklTKoxIZRUn3+hvmgQSffLLQ4G4l2eEr" crossorigin="anonymous">
1010

11+
<!-- jQuery + jQuery UI -->
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
13+
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
14+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
15+
16+
<!-- Bootstrap datepicker -->
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
19+
1120
</head>
1221

1322
<body>

‎styles.css

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,45 @@
33
}
44

55
.todo-item {
6-
font-size: 125%;
6+
padding: 10px 0;
7+
border-bottom: 1px solid #dddddd;
78
}
89

9-
a.todo-check {
10-
color: #dddddd;
11-
top: 5px;
12-
font-size: 150%;
13-
padding-right: 10px;
14-
}
10+
.todo-item .todo-check {
11+
position: relative;
12+
display: inline-block;
13+
border: 1px solid #dddddd;
14+
width: 22px;
15+
height: 22px;
16+
border-radius: 15px;
17+
}
18+
19+
.todo-item .todo-check .checkmark {
20+
color: #ffffff;
21+
position: relative;
22+
top: 4px;
23+
left: 4px;
24+
font-size: 83%;
25+
26+
}
27+
28+
.todo-item .todo-check:hover {
29+
text-decoration: none;
30+
cursor: pointer;
31+
}
32+
33+
.todo-item .todo-check:hover .checkmark {
34+
color: #dddddd;
35+
}
36+
37+
.todo-item .task-title {
38+
padding-left: 10px;
39+
position: relative;
40+
top: 3px;
41+
}
1542

16-
a.todo-check:hover {
17-
color: #2780e3;
18-
text-decoration: none;
19-
cursor: pointer;
20-
}
43+
.todo-item .task-due-date {
44+
text-align: right;
45+
font-size: 80%;
46+
line-height: 27px;
47+
}

0 commit comments

Comments
 (0)