mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
js updates
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<h1>todos</h1>
|
||||
<input class="textfield" placeholder="add todo" /><button class="button add">Add</button>
|
||||
<div class="filter">
|
||||
<button class="active">all</button>
|
||||
<button class="selected">all</button>
|
||||
<button>active</button>
|
||||
<button>completed</button>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
@@ -28,7 +28,7 @@ h1 {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.filter .active {
|
||||
.filter .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
Add
|
||||
</button>
|
||||
<div class="filter">
|
||||
<button onclick="filter('all', this)" class="active">all</button>
|
||||
<button onclick="filter('all', this)" class="selected">all</button>
|
||||
<button onclick="filter('active', this)">active</button>
|
||||
<button onclick="filter('completed', this)">completed</button>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
@@ -28,7 +28,7 @@ h1 {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.filter .active {
|
||||
.filter .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
@@ -47,4 +47,4 @@ footer span {
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ export class TodoHeader extends React.Component {
|
||||
<input className="textfield" placeholder="add todo" />
|
||||
<button className="button add">Add</button>
|
||||
<div className="filter">
|
||||
<button className="active">all</button>
|
||||
<button className="completed">all</button>
|
||||
<button>active</button>
|
||||
<button>completed</button>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
@@ -28,7 +28,7 @@ h1 {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.filter .active {
|
||||
.filter .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
@@ -47,4 +47,4 @@ footer span {
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,9 @@ export class TodoHeader extends React.Component<any, any> {
|
||||
<input className="textfield" placeholder="add todo" />
|
||||
<button className="button add">Add</button>
|
||||
<div className="filter">
|
||||
<button className={filter == 'all' ? 'active' : ''}>all</button>
|
||||
<button className={filter == 'active' ? 'active' : ''}>active</button>
|
||||
<button className={filter == 'completed' ? 'active' : ''}>completed</button>
|
||||
<button className={filter == 'all' ? 'completed' : ''}>all</button>
|
||||
<button className={filter == 'active' ? 'completed' : ''}>active</button>
|
||||
<button className={filter == 'completed' ? 'completed' : ''}>completed</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
@@ -28,7 +28,7 @@ h1 {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.filter .active {
|
||||
.filter .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
@@ -47,4 +47,4 @@ footer span {
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,13 +23,13 @@ export class TodoHeader extends React.Component<TodoHeaderProps, any> {
|
||||
Add
|
||||
</button>
|
||||
<div className="filter">
|
||||
<button onClick={() => setFilter('all')} className={filter == 'all' ? 'active' : ''}>
|
||||
<button onClick={() => setFilter('all')} className={filter == 'all' ? 'completed' : ''}>
|
||||
all
|
||||
</button>
|
||||
<button onClick={() => setFilter('active')} className={filter == 'active' ? 'active' : ''}>
|
||||
<button onClick={() => setFilter('active')} className={filter == 'active' ? 'completed' : ''}>
|
||||
active
|
||||
</button>
|
||||
<button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
|
||||
<button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'completed' : ''}>
|
||||
completed
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
@@ -28,7 +28,7 @@ h1 {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.filter .active {
|
||||
.filter .selected {
|
||||
border-bottom: 2px solid blue;
|
||||
}
|
||||
|
||||
@@ -47,4 +47,4 @@ footer span {
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user