LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,900");
* {
  box-sizing: border-box;
}
body {
  margin-top: 2rem;
  font-family: 'Lato', sans-serif;
  background: #00b9ce;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  font-size: 1.1rem;
}
.searchbox {
  max-width: 20rem;
  margin: 1rem auto;
}
.searchbox__input {
  height: 3rem;
  width: 100%;
  box-shadow: none;
  border: none;
  padding: 0 1rem;
  color: #003d44;
  border-radius: 0.2rem;
}
.searchbox__button {
  width: 100%;
  padding: 1rem 2rem;
  border: none;
  margin: 1rem 0 0 0;
  background: #11e7ff;
  color: #006b77;
  font-weight: 700;
  border-radius: 0.4rem;
}
.searchbox__button:hover {
  background: #00def6;
}
.card {
  position: relative;
  background: #00b0c3;
  max-width: 20rem;
  margin: 7rem auto 2rem;
  border: solid 5px #09a;
  border-radius: 0.4rem;
  padding: 5.5rem 2.5rem 1rem;
}
.card__avatar {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 10rem;
  height: auto;
  text-align: center;
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  background: #09a;
  padding: 5px;
  max-width: 100%;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.card__avatar:hover {
  background: #008290;
}
.card__username {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  margin: 1rem auto;
}
.card__link {
  color: #fff;
  border-bottom: solid 2px #fff;
  text-decoration: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.card__link:hover {
  opacity: 0.8;
}
.card__notfound {
  text-align: center;
  margin: 0 auto;
  padding: 1rem;
}
/* some non-BEM stuff to avoid overloading the JSX for demo purposes */
dl {
  margin: 0;
  padding: 0;
}
dt,
dd {
  text-align: center;
}
dt {
  font-weight: 900;
  margin-bottom: 0.2rem;
}
dd {
  margin: 0 0 1rem 0;
}
JS
const Component = React.Component

class App extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      username: 'simonswiss',
      realName: '',
      avatar: '',
      location: '',
      repos: '',
      followers: '',
      url: '',
      notFound: ''
    }
  }
  render() {
    return (
      
) } // the api request function fetchApi(url) { fetch(url) .then((res) => res.json() ) .then((data) => { // update state with API data this.setState({ username: data.login, realName: data.name, avatar: data.avatar_url, location: data.location, repos: data.public_repos, followers: data.followers, url: data.html_url, notFound: data.message }) }) .catch((err) => console.log('oh no!') ) } fetchUser(username) { let url = `https://api.github.com/users/${username}` this.fetchApi(url) } componentDidMount() { let url = `https://api.github.com/users/${this.state.username}` this.fetchApi(url) } } class SearchBox extends Component { render() { return (
) } handleClick(e) { e.preventDefault() let username = this.refs.search.getDOMNode().value // sending the username value to parent component to fetch new data from API this.props.fetchUser(username) this.refs.search.getDOMNode().value = '' } } class Card extends Component { render() { let data = this.props.data if (data.notFound === 'Not Found') { // when username is not found... return

User not found. Try again!

} else { // if username found, then... return (

{data.username}

Real name
{data.realName}
Location
{data.location}
Number of public repos
{data.repos}
Number of followers
{data.followers}
) } } } React.render(, document.getElementById('app'))

Description

A small app demonstrating the process of fetching data from the GitHub API and displaying a user profile card.
Term
Mon, 11/27/2017 - 21:19

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv