Github project Wth API | React Js Free Source Code

Author - personCodeatnow

Follow Us On Telegram   Telegram link

Download Code

HTML 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | GitHub Card With ReactJS (ES6)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<!-- partial -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script><script  src="./script.js"></script>

</body>
</html>
CSS 
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700,600);
body {
  background: #11131e;
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:active, *:focus {
  border: 0;
  outline: 0;
}

a {
  text-decoration: none;
  display: inline-block;
}

#card {
  width: 25rem;
  box-shadow: 2px 2px 2px 20px 20px whitesmoke;
  margin: auto;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.search--box label {
  position: relative;
}
.search--box label:after {
  position: absolute;
  content: "";
  border-right: 0.625rem solid transparent;
  border-left: 0.625rem solid transparent;
  border-bottom: 0.625rem solid #fff;
  bottom: -1.0625rem;
  right: 50%;
  margin-right: -0.3125rem;
}
.search--box input[type=search] {
  width: 100%;
  font: 1rem "Titillium Web", sans-serif;
  color: #11131e;
  border: 0;
  padding: 0.75rem 0.9375rem 0.9375rem;
  background: #e6ebed;
  border-radius: 0.3125rem 0.3125rem 0 0;
  text-align: center;
  box-sizing: border-box;
}

.notfound {
  background: #fff;
  padding: 1.875rem;
  text-align: center;
}
.notfound h2 {
  font-size: 2rem;
  color: #11131e;
  margin-bottom: 0.625rem;
}
.notfound p {
  font-size: 1rem;
  color: #a3b6bb;
}

.github--profile {
  width: 100%;
}
.github--profile__info {
  background: #fff;
  text-align: center;
  padding: 1.875rem 0.9375rem;
}
.github--profile__info img {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.5);
}
.github--profile__info h2 a {
  font-size: 1.65rem;
  color: #11131e;
}
.github--profile__info h3 {
  font-size: 1.1885rem;
  color: #bdcbce;
}
.github--profile__state {
  background: #11131e;
  text-align: center;
  padding: 1.875rem 0.9375rem;
  border-radius: 0 0 0.3125rem 0.3125rem;
}
.github--profile__state ul {
  direction: ltr;
}
.github--profile__state li {
  list-style: none;
  display: inline-block;
  margin-right: 1rem;
}
.github--profile__state li:last-child {
  margin-right: 0;
}
.github--profile__state a {
  color: #fff;
}
.github--profile__state i {
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  display: block;
}
.github--profile__state span {
  font-size: 0.844rem;
  letter-spacing: 0.0625rem;
  color: white;
}

.hesmaili {
  font-size: 0.9rem;
  font-weight: 400;
  color: #b4c4c8;
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}
.hesmaili a {
  color: #2368bd;
}
JS 
const API = 'https://api.github.com/users';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: 'Harikrishnasinh',
      name: '',
      avatar: '',
      location: '',
      repos: '',
      followers: '',
      following: '',
      homeUrl: '',
      notFound: '' };

  }
  fetchProfile(username) {
    let url = `${API}/${username}`;
    fetch(url).
    then(res => res.json()).
    then(data => {
      this.setState({
        username: data.login,
        name: data.name,
        avatar: data.avatar_url,
        location: data.location,
        repos: data.public_repos,
        followers: data.followers,
        following: data.following,
        homeUrl: data.html_url,
        notFound: data.message });

    }).
    catch(error => console.log('Oops! . There Is A Problem'));
  }
  componentDidMount() {
    this.fetchProfile(this.state.username);
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("section", { id: "card" }, /*#__PURE__*/
      React.createElement(SearchProfile, { fetchProfile: this.fetchProfile.bind(this) }), /*#__PURE__*/
      React.createElement(Profile, { data: this.state })), /*#__PURE__*/

      React.createElement("span", { className: "hesmaili" }, "GitHub Card With ReactJs - Created By ", /*#__PURE__*/React.createElement("a", { href: "https://codeatnow.com", target: "_blank", title: "CodeAtNow" }, "codeatnow"))));


  }}

class SearchProfile extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "search--box" }, /*#__PURE__*/
      React.createElement("form", { onSubmit: this.handleForm.bind(this) }, /*#__PURE__*/
      React.createElement("label", null, /*#__PURE__*/React.createElement("input", { type: "search", ref: "username", placeholder: "Type Username + Enter" })))));



  }

  handleForm(e) {
    e.preventDefault();
    let username = this.refs.username.getDOMNode().value;
    this.props.fetchProfile(username);
    this.refs.username.getDOMNode().value = '';
  }}


class Profile extends React.Component {
  render() {
    let data = this.props.data;
    let followers = `${data.homeUrl}/followers`;
    let repositories = `${data.homeUrl}?tab=repositories`;
    let following = `${data.homeUrl}/following`;
    if (data.notFound === 'Not Found')
    return /*#__PURE__*/(
      React.createElement("div", { className: "notfound" }, /*#__PURE__*/
      React.createElement("h2", null, "Oops !!!"), /*#__PURE__*/
      React.createElement("p", null, "The Component Couldn't Find The You Were Looking For . Try Again ")));else



    return /*#__PURE__*/(
      React.createElement("section", { className: "github--profile" }, /*#__PURE__*/
      React.createElement("div", { className: "github--profile__info" }, /*#__PURE__*/
      React.createElement("a", { href: data.homeUrl, target: "_blank", title: data.name || data.username }, /*#__PURE__*/React.createElement("img", { src: data.avatar, alt: data.username })), /*#__PURE__*/
      React.createElement("h2", null, /*#__PURE__*/React.createElement("a", { href: data.homeUrl, title: data.username, target: "_blank" }, data.name || data.username)), /*#__PURE__*/
      React.createElement("h3", null, data.location || 'I Live In My Mind')), /*#__PURE__*/

      React.createElement("div", { className: "github--profile__state" }, /*#__PURE__*/
      React.createElement("ul", null, /*#__PURE__*/
      React.createElement("li", null, /*#__PURE__*/
      React.createElement("a", { href: followers, target: "_blank", title: "Number Of Followers" }, /*#__PURE__*/React.createElement("i", null, data.followers), /*#__PURE__*/React.createElement("span", null, "Followers"))), /*#__PURE__*/

      React.createElement("li", null, /*#__PURE__*/
      React.createElement("a", { href: repositories, target: "_blank", title: "Number Of Repositoriy" }, /*#__PURE__*/React.createElement("i", null, data.repos), /*#__PURE__*/React.createElement("span", null, "Repositoriy"))), /*#__PURE__*/

      React.createElement("li", null, /*#__PURE__*/
      React.createElement("a", { href: following, target: "_blank", title: "Number Of Following" }, /*#__PURE__*/React.createElement("i", null, data.following), /*#__PURE__*/React.createElement("span", null, "Following")))))));





  }}


React.render( /*#__PURE__*/React.createElement(App, null), document.body);
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link