Meme Generator

index.html

<!-- MAIN CONTENT BOX SECTION -->
<main>
  <!-- HEADER -->
  <header>
    <h1>Meme Generator</h1>
    <h2>A meme a day keeps the normies away.</h2>
  </header>
  
  <!-- MEME CONTENT SECTION -->
  <section class="meme-content">
    <!-- MEME DIV -->
    <div class="meme-div">
      <img id="meme-image">
    </div><!-- MEME-DIV END -->
    
    <div class="button">
      <a id="meme-button">Next Meme &#8680;</a>
    </div>
    
    <div class="reddit">
      <h3>Images provided by</h3> 
      <a href="https://www.reddit.com/" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Reddit_logo.svg/2000px-Reddit_logo.svg.png" alt="reddit logo" class="reddit-image"></a>
      <p>API responses do not display very well on CodePen. Please refer to the generator app <a style="color:red;" href="https://michaelgee22.github.io/meme-generator/" target="_blank">here</a></p>
    </div>
    
  </section><!-- Meme-content Section end -->
  
</main><!-- MAIN CONTENT END -->

<!-- WARNING SECTION -->
<section class="warning">
    <h2 style="font-size:1.8em;">Image Not Loading?</h2>
    <p class="warning-p">After hours of messing with the Reddit API, I have got it to return png or jpg results but some still do not display because of the incorrect data type.<br><br>
  So what can I do?
  </p>  
  
    <!-- WARNING EXPLANATION LIST -->
    <ol class="warning-p">
      <!-- 1. -->
      <li>Right click anywhere inside the white content box and click "Inspect Element" or "Inspect".</li>
      <br>
      <img src="http://i63.tinypic.com/bfiek1.png" id="warning-pic">
      <br><br>
      
      <!-- 2. -->
      <li>Go to the "Console" tab and that is where each image will display as you click the button.</li>
      <br>
      
      <!-- 3. -->
      <li>If you're on a mobile device, just hit the "Next Meme" button to generate a new one.</li>
      
    </ol><!-- LIST END -->
  
  </section><!-- WARNING SECTION END -->

  <!-- Tribute Div -->
  <div class="tribute">
    <h2 style="font-size:1.8em;">Tribute</h2>
    <iframe width="500" height="335"
src="https://www.youtube.com/embed/OJw3MmL-Omk">
</iframe>
  </div><!-- Tribute Div End -->
  
  <!-- Song -->
  <div class="song">
    <h2 style="font-size:1.8em;">Song</h2>
    <iframe width="500" height="335"
src="https://www.youtube.com/embed/XwZ6hBwTogg">
</iframe>
  </div><!-- SONG DIV END -->

meme-generator.markdown

Meme Generator

A Pen by Michael Gee on CodePen.

License.

script.js

getMeme();

$("#meme-button").on("click", function(){
  
  getMeme();
  
});

function getMeme() {
  
var randNum; 
  
var memeResponses = [];
var memeImages = [];
  
  $.getJSON("https://www.reddit.com/r/dankmemes/.json?&show=all&limit=300", function(response){
    
    // LOG THE AJAX RESPONSE
    console.log(response);
    
    //for loop that goes throught json response and weeds out the ones that do not have include an image
    for(var i = 0; i < response.data.children.length; i++) {
      
      var imageURL = response.data.children[i].data.url;
      
      if( response.data.children[i].data.link_flair_text === "Meta") {
        //don't push these responses into the array
      } //else if(){
        
    //  }
    else {
        memeResponses.push(imageURL);
      }
    } // for loop end bracket
    
    var arrayIndex;
    
    for(var b = 0; b < memeResponses.length; b++) {
      var imageType = memeResponses[b].slice(-3);
      
      if(imageType === "jpg" || imageType === "png") {
      
        memeImages.push(memeResponses[b]);
        
      }
      
    } // "B" for loop bracket end
    
      randNum = Math.floor(Math.random() * memeImages.length);
    
    console.log(memeImages[randNum]);
  
  document.getElementById("meme-image").src = memeImages[randNum];
    
    }); // getJSON bracket end
  
} // getMeme() bracket end

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

/* GOOGLE FONTS */
@import 'https://fonts.googleapis.com/css?family=Orbitron';

body {
  margin: 0;
  width: 100%;
  background-image: url("http://wallpaper.zone/img/86363.jpg");
  font-family: "Orbitron", arial, sans-serif;
  font-weight: bold;
  
}

/* MAIN SECTION */
main {
  background-color: rgba(255, 255, 255, 0.98);
  width: 950px;
  max-width: 95%;
  border-radius: 1%;
  margin: auto;
  margin-top: 60px;
  padding: 25px;
}

@media(max-width:1020px) {
  main {
    padding: 25px 0 25px 0;
  }
}

/* HEADER */
header {
  text-align: center;
}

/* MEME DIV */
.meme-div {
  max-width: 550px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 10px;
  text-align: center;
}

.meme-div img {
  width: 90%;
}

/* BUTTON DIV */
.button {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 10px;
}

.button a, a:visited{
  padding: 25px 45px 25px 45px;
  background-color: red;
  border-radius: 5%;
  text-decoration: none;
  font-size: 1.5em;
  color: white;
}

.button a:hover {
  opacity: 0.8;
  cursor: pointer;
}

/* REDDIT  */
.reddit {
  text-align: center;
  padding-top: 25px;
}

h3 {
  margin-bottom: 0;
}

.reddit-image {
  width: 230px;
  cursor: pointer;
  padding-top: 10px;
}

/* WARNING SECTION */
.warning {
  background-color: rgba(255, 255, 255, 0.99);
  width: 950px;
  max-width: 96%;
  border-radius: 1%;
  margin: auto;
  margin-top: 40px;
  padding: 25px;
}

.warning {
  text-align: center;
}

.warning-p {
  font-size: 1.4em;
  font-weight: bold;
}

#warning-pic {
  width: 440px;
  max-width: 85%;
  border: 5px solid black;
}

@media(max-width:1020px) {
  .warning {
    padding: 25px 0 25px 0;
  }
}


/* BOTTOM CONTENT SECTION */
.tribute {
  background-color: rgba(255, 255, 255, 0.98);
  text-align: center;
  width: 45%;
  border-radius: 1%;
  margin: 10px;
  margin-top: 40px;
  padding: 15px;
  padding-bottom: 60px;
  float: left;
}

/* MAKING THE 2 IFRAMES RESPONSIVE */
.tribute iframe {
  max-width: 100%;
}
.song iframe {
  max-width: 100%;
}

/* MOTM DIV */
.song {
  float: right;
   background-color: rgba(255, 255, 255, 0.98);
  text-align: center;
  width: 45%;
  border-radius: 1%;
  margin: 10px;
  margin-top: 40px;
  margin-bottom: 30px;
  padding: 15px;
  padding-bottom: 60px;
}

@media(max-width: 1020px) {
  .tribute{
    float: none;
    width: 91%;
    margin: auto;
    margin-top: 40px;
  }
  
  .song{
    float: none;
    width: 91%;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 30px;
  }
}