8000 add searchDevs and renderDevs · Note45/github-search-js@83eab40 · GitHub
[go: up one dir, main page]
Skip to content

Commit 83eab40

Browse files
Note45Note45
committed
add searchDevs and renderDevs
1 parent d9192d7 commit 83eab40

File tree

6 files changed

+80
-3
lines changed

6 files changed

+80
-3
lines changed

‎github-search-app/src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from 'react';
22

33
import Header from './components/Header';
4+
import Main from './pages/main'
45

56
import './styles.css';
67

78
function App() {
89
return (
910
<div className="App">
1011
<Header />
12+
<Main />
1113
</div>
1214
);
1315
}

‎github-search-app/src/components/Header/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import './styles.css';
44

55
const Header = () => (
6-
<header id='hearder-app'>GitHub Search</header>
6+
<header id='header-app'>GitHub Search</header>
77
);
88

99
export default Header;

‎github-search-app/src/components/Header/styles.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
header#hearder-app {
1+
header#header-app {
22
width: 100%;
33
height: 60px;
44
background: #F4A460;
5-
font-size: 18px;
5+
font-size: 30px;
66
font-weight: bold;
77
color: #fff;
88
display: flex;

‎github-search-app/src/pages/main/index.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { Component } from 'react';
2+
3+
import api from '../../services/api';
4+
5+
import './styles.css'
6+
7+
export default class Main extends Component {
8+
state = {
9+
dev: [],
10+
}
11+
12+
searchDevs = async () => {
13+
let inputElement = document.getElementById('txtBusca');
14+
15+
let response = await api.get(`/${inputElement.value}`);
16+
17+
this.setState({ dev: response.data });
18+
}
19+
20+
renderDevs = async () => {
21+
await this.searchDevs();
22+
const { login, avatar_url, location, bio, name } = this.state.dev;
23+
24+
let ulElement = document.getElementById('devs-list');
25+
26+
let liElement = document.createElement('li');
27+
let textElement = document.createTextNode(bio);
28+
liElement.appendChild(textElement);
29+
30+
ulElement.appendChild(liElement);
31+
32+
}
33+
34+
render() {
35+
return(
36+
<div id="divBusca">
37+
<input type="text" id="txtBusca" placeholder="Buscar..."/>
38+
<button id="btnBusca" onClick={this.renderDevs}>Buscar</button>
39+
<ul id='devs-list'></ul>
40+
</div>
41+
);
42+
}
43+
}

‎github-search-app/src/pages/main/search-icon.png

56.2 KB
Loading

‎github-search-app/src/pages/main/styles.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
#divBusca{
2+
background-color:rgba(247, 240, 226, 0.774);
3+
border:solid 2px rgb(228, 148, 73);
4+
widows: 90%;
5+
height:40px;
6+
display: flex;
7+
flex-wrap: nowrap;
8+
margin-top: 5px;
9+
}
10+
11+
#txtBusca{
12+
float:left;
13+
background-color:transparent;
14+
padding-left: 5px;
15+
font-size:18px;
16+
border:none;
17+
height:40px;
18+
width:100%;
19+
}
20+
21+
#btnBusca{
22+
font-size: 16px;
23+
border:none;
24+
height:36px;
25+
width:70px;
26+
font-weight:bold;
27+
background:rgb(238, 169, 104);
28+
}
29+
30+
#btnBusca:hover {
31+
background:rgb(247, 206, 168);
32+
}

0 commit comments

Comments
 (0)
0