Skip to content

Commit f851572

Browse files
kobomarunkobomarun
committed
Search list
1 parent 996ec80 commit f851572

File tree

6 files changed

+59
-15
lines changed

6 files changed

+59
-15
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>React App</title>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
78
</head>
89
<body>
910
<div id="root"></div>

‎src/App.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
1-
.App {
1+
.olu-search {
22
text-align: center;
33
}
44

5-
.App-logo {
5+
.olu-logo {
66
animation: spin infinite 20s linear;
7-
height: 80px;
7+
margin-top: -20px;
8+
height: 60px;
89
}
910

10-
.App-header {
11+
.olu-search-header {
1112
height: 20px;
1213
padding: 20px;
1314
background-color: #222;
1415
color: white;
1516
}
1617

18+
.navbar-inverse {
19+
height: 70px;
20+
border-radius: 0px;
21+
}
22+
1723
.olu-search-container {
18-
margin-top: 150px;
24+
margin-top: 50px;
1925
}
2026

2127
.olu-search-container h1 {
@@ -29,7 +35,7 @@
2935
color: #777;
3036
}
3137

32-
.App-intro {
38+
.olu-intro {
3339
font-size: large;
3440
}
3541

@@ -39,7 +45,7 @@
3945
width: 780px;
4046
}
4147
.olu-show-search {
42-
margin-top: -45px;
48+
margin-top: -30px;
4349
margin-left: 290px;
4450
width: 500px;
4551
height: 30px;
@@ -51,7 +57,7 @@
5157
.olu-search-container input[type="text"] {
5258
padding: 5px;
5359
width: 700px;
54-
height: 30px;
60+
height: 40px;
5561
font-size: 20px;
5662
border: 1px solid #555;
5763
}

‎src/App.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { Component } from 'react';
2-
import logo from './logo.svg';
32
import './App.css';
43
import Search from './components/Search.js';
54
import SearchList from './components/SearchList.js';
5+
import Header from './components/Header.js';
66

77
class App extends Component {
88
constructor(props) {
@@ -34,17 +34,18 @@ class App extends Component {
3434
}
3535

3636
return (
37-
<div className="App">
38-
<div className="App-header">
39-
<img src={logo} className="App-logo" alt="logo" />
40-
<h2>Welcome to React</h2>
41-
</div>
37+
<div className="olu-search">
38+
<Header />
4239
<div className="olu-search-container">
4340
<h1> Search for All Javascript Librariess and Framework</h1>
4441

4542
<Search onHandleSearch={this.handleSearch} handleType={this.state.search} />
43+
4644
<SearchList libraries={libraries} search={search}/>
4745
</div>
46+
<div className="panel panel-default">
47+
<div className="panel-heading">2016. Copyright</div>
48+
</div>
4849
</div>
4950
);
5051
}

‎src/components/Header.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import logo from '../logo.svg';
3+
4+
const Header = () => {
5+
return (
6+
7+
<nav className="navbar navbar-inverse">
8+
<div className="container-fluid">
9+
<div className="navbar-header">
10+
<a className="navbar-brand" href="#"><img src={logo} className="olu-logo" alt="logo" /></a>
11+
</div>
12+
13+
<ul className="nav navbar-nav">
14+
<li className="active"><a href="#">Link <span className="sr-only">(current)</span></a></li>
15+
<li><a href="#">Link</a></li>
16+
<li className="dropdown">
17+
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span className="caret"></span></a>
18+
<ul className="dropdown-menu">
19+
<li><a href="#">Action</a></li>
20+
<li><a href="#">Another action</a></li>
21+
<li><a href="#">Something else here</a></li>
22+
<li role="separator" className="divider"></li>
23+
<li><a href="#">Separated link</a></li>
24+
<li role="separator" className="divider"></li>
25+
<li><a href="#">One more separated link</a></li>
26+
</ul>
27+
</li>
28+
</ul>
29+
</div>
30+
</nav>
31+
32+
)
33+
};
34+
35+
export default Header;

‎src/components/Search.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const Search = (props) => {
99
placeholder="Enter your search term"
1010
value={props.handleType}
1111
onChange={props.onHandleSearch}
12+
autoFocus
1213
/>
1314
<p><small> e.g react, jquery etc..</small></p>
1415
<div className="olu-show-search">{props.handleType}</div>

‎src/components/SearchList.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const SearchList = (props) => {
1212
<tbody>
1313
<tr>
1414
<td>{list.name}</td>
15-
<td>{list.url}</td>
15+
<td><a href={list.url} target="_blank">{list.url}</a></td>
1616
</tr>
1717
</tbody>
1818
</table>

0 commit comments

Comments
 (0)