Wikipedia Viewer -- FCC Zipline (Alpha)

index.html

<div id="app"></div>

script.babel

const Form = ({
    handelChange
  }) =>
  <div className="form">
    <div className="container">
      <input className="search" 
        onKeyPress={
          event =>{
            if(event.key === 'Enter'){
              handelChange(
                  event.target.value
                )
            }
          }
        }
        />
      <div>search here</div>
   </div>
    <button
      onClick={
        () => {
          window.location = "https://en.wikipedia.org/wiki/Special:Random";
        }
      }
      >Random Wiki Page</button>  
  </div>

const Entry = ({
    title,
    description,
    url
  }) =>
    <div className="entry"
      
      onClick = {
            () => window.open(url)
      }>
        <h2>{title}</h2>
        <p>{description}</p>   
    </div>

class App extends React.Component {

  constructor() {
    super()

    this.state = {
      entries: []
    }    
   
    this.search = this.search.bind(this)

  }

  search(query) {
    $.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + query + "&limit=10&profile=normal&redirects=resolve",
      dataType: "jsonp",
      success: json => {

        if (typeof json !== typeof [] &&
          json.length < 2) {
          return;
        }

        let entries = [];

        json[1].map(
          title => {
            entries.push({
              title: title,
              description: "",
              url: ""
            })
          }
        )

        json[2].map(
          (description, index) => {
            entries[index]
              .description = description
          }
        )

        json[3].map(
          (url, index) => {
            entries[index]
              .url = url
          }
        )

        this.setState({
          entries: entries
        })
      }
    });
  }

  render() {
    return (
      <div>
        <div
          className="header">
          Wikipedia Viewer
        </div>
        <Form 
          handelChange={
            this.search
          }
          />
        <div>
          {
              this.state.entries.map(
                props => 
                <Entry 
                  {...props} />
                )
          }
        </div>
    </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>

style.scss

@import 'https://fonts.googleapis.com/css?family=Lobster';

@import 'https://fonts.googleapis.com/css?family=Josefin+Slab:700';


body {
  background: url(https://hd.unsplash.com/photo-1470173274384-c4e8e2f9ea4c);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.header {
  font-family: 'Lobster', cursive;
  font-size: 6em;
  color: #eee;
  text-shadow: -2px -1px 4px rgba(30, 30, 30, 1);
  
}

.form {
  margin: 0 auto;
  text-align: center;
  padding-top: 3em;
  
  button {
    margin-top: 2em;
    padding: .5em .5em;
    font-family: "Josefin Slab", sherif;
    font-size: 1.5em;
  }
}

.container {
  position: relative;
  left: 50%;
  width: 20em;
  transform: translate(-50%);
  
  .search {
    width: 1em;
    transition: width .5s ease-in-out;
    border: 1px solid grey;
    background: grey;
    padding: 1em;
    border-radius: 2em;
    outline: none;
    text-indent: 1em;
    font-family: "Josefin Slab", sherif;
        font-size: 1em;

      &:focus {
        width: 80%;
        
      }
  }
  
}


.entry {
  background: rgb(158, 158, 158);
  width: 90%;
  margin: 0 auto;
  padding: 0 1em;
  font-family: "Josefin Slab", sherif;
  font-size: 1.5em;
  
  h2 {
    padding-top: .5em;
    border-bottom: 2px solid;
  }
  
  p {
   padding-bottom: .5em;
  }
}

wikipedia-viewer-fcc-zipline-alpha.markdown

Wikipedia Viewer -- FCC Zipline (Alpha)

A Pen by Sk. Imtiaz Ahmed on CodePen.

License.