Phrasal Verbs

index.html

<div class="container-fluid">
   <div class="row">
    <button id="nextPhrase" class="btn btn-primary">
  Next Phrase
      </button>
  </div>
  <div id = "main-background">
  <div class="row ">
    <div class="text-center message col-md-5 ">
    </div>
  </div>
  
</div>
 
</div>

phrasal-verbs.markdown

Phrasal Verbs

A Pen by Mike Hoang on CodePen.

License.

script.js

  $(document).ready(function() {
    $(".message").html("<h2>pick up</h2>" + "<p> go faster </p>" + "<br> <hr> <p class='example'> Examples: It took me 3 months to learn to play that song, but my brother picked it up in 2 days!</p>");
    $("#nextPhrase").on("click", function() {
      $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'https://raw.githubusercontent.com/Semigradsky/phrasal-verbs/master/common.json',
        success: function(a) {
          var i = [Math.floor(Math.random() * a.length)];
          if (i % 2 === 1) {
            i + 1;
          }
          $(".message").html("<h2>" + a[i].verb + "</h2>" + a[i].definition + "<br> <hr> <p class='example'> Examples:  " + a[i].examples + "</p>");

        }

      });
    });
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

@media (min-width:800px){body {
  background-image: url('http://i.imgur.com/SLKeWM7.png')
  }
#main-background{
  background:white;
  margin: 50px auto ;
  width: 70%;
 border-radius: 50px;
}
  
}
@media (max-width:600){
  body{
   background-image: url('http://www.planwallpaper.com/static/images/apple-iphone4s-wallpaper-26.jpg')

  }
  #main-background{
  background:red;
 
}
}

h2{
  font-family: 'Delius Unicase', cursive;
  padding-top: 40px;
  padding-bottom: 30px;
  font-size: 50px;
  }
.message {
  margin: 0 auto;
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
}
.example {
font-size:15px;
  
}
#nextPhrase {
  margin: 50px auto;
  font-size: 32px;
  font-family: cursive ;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Delius+Unicase:700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:700" rel="stylesheet" />