fcc-wikipediaViewer

In this example below you will see how to do a fcc-wikipediaViewer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by aurberg, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright aurberg ©
  • HTML
  • CSS
  • JavaScript
    <div id="app" class="container">
</div>

/*Downloaded from https://www.codeseek.co/aurberg/fcc-wikipediaviewer-beNwQb */
    body {
  background: #3D5473;
}

.main-text {
  font-family: 'Permanent Marker', cursive;
}

.card {
  background: #BF4539;
}

.input-field input[type=text]:focus {
  border-bottom: 1px solid #D9A25F;
  box-shadow: 0 1px 0 0 #D9A25F;
}

.btn-floating {
  margin-bottom: 2px;
}

#random-btn {
  margin-top: -10px
}

.searchmatch {
  color: #F2C3A7;
}


/*Downloaded from https://www.codeseek.co/aurberg/fcc-wikipediaviewer-beNwQb */
    // **********************************
class Card extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div className='row'>
        <div className='col s12 m8 offset-m2'>
          <div className='card hoverable'>
            <div className='card-content white-text'>
              <span className='card-title'>{this.props.title}</span>
              <p dangerouslySetInnerHTML={{__html: this.props.snippet}}></p>
            </div>
            <div className='card-action'>
              <a href={'https://en.wikipedia.org/?title='+this.props.title} target='_blank'>view full page</a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

// ************************************
class Search extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div className='row'>
        <div className='input-field col s10 m7 offset-m2 white-text'>
          <input placeholder='Word(s) to Be Searched' type='text' onChange={this.props.getValues}/>
        </div>
        <div className='col s2 m1'>
          <a href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>
            <button className='btn-floating btn-small black' id='random-btn' title='Random Post'>
              R
            </button>
          </a>
          <button className='btn-floating btn-small black' onClick={this.props.search}>
            <i className='fa fa-search'/>
          </button>
        </div>
      </div>
    )
  }
}

// *********************************
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      searchVals: '',
      results: []
    }
  }
  
  search() {
    const self = this;
    $.ajax({
      url: 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=' + this.state.searchVals + '&format=json&callback=?',
      jsonp: "callback",
      dataType: "jsonp",
      success: function(response) {
        self.setState({results: response.query.search}); 
      }
    });
  }
  
  getValues(event) {
    this.setState({searchVals: event.target.value});
  }
  
  render(){
    return (
      <div className='main'>
        <h2 className='main-text center-align'>Fake Wikipedia</h2>
        <Search search={this.search.bind(this)} getValues={this.getValues.bind(this)} />
        { this.state.results.map(result => <Card title={result.title} snippet={result.snippet}/>) }
      </div>
    )
  }
}

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

Comments