FreeCodeCamp Challenge | Random Quote Generator

freecodecamp-challenge-random-quote-generator.markdown

FreeCodeCamp Challenge | Random Quote Generator

A Pen by Kaung Myat Lwin on CodePen.

License.

index.html

<div id="quote-app">
  <div class="container">
    <div class="card">
      <p v-if="!quoteData.text">
        Click on Button to get quote!
      </p>
      <p class="quote">{{quoteData.text}}</p>
      <p class="author">{{quoteData.author}}</p>
      <p class="error">
        {{message}}
      </p>
      <button class="waves-effect waves-light btn-large blue" v-on:click="generateQuote">
        Get Inspired!
      </button>
      <a :href="'https://twitter.com/intent/tweet?text='+ quoteData.text + ' - ' + quoteData.author" class="twitter" v-if="quoteData.text" target=_blank>Tweet this Quote</a>
    </div>
  </div>

</div>

script.js

var app = new Vue({
  el: '#quote-app', 
  data: {
    quoteData: {
      text: '',
      author: ''
    },
    message: ''
  },
  methods: {
    generateQuote: function(){
  fetch('https://random-quote-generator.herokuapp.com/api/quotes/random')
      .then(function(response){
         response.json().then(function(json){
            app.$data.quoteData = {
              text: json.quote,
              author: json.author
            };
         })
      })
      .catch(function(error){
          console.log(error);
          this.message = error;
      })
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

style.scss

html, body {
  width: 100%;
  height: 100%;
  background-color: #006064;
}

#quote-app {
  display: flex;
  align-items: center;
}

.card {
  text-align: center;
  padding: 3em;
  button {
    display: block;
    margin: 0 auto;
  }
}

.quote {
  padding: 0;
  margin: 0;
  font-size: 2em;
  color: #2979FF;
  font-weight: 300;
}

.author {
  padding: 0;
  font-size: 1.5em;
  color: #111;
  font-weight: 300;
}

.twitter {
  display: block;
  margin-top: 20px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />