Files
  • index.html
  • script.js
  • style.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FREE MEMES! 0 so far.</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>
  <body>
    <main>
      <article id="choose-a-subreddit-article">
        <h2 class="article-title">Choose a Subreddit</h2>
        <div class="padded">
          <div style="display:inline-block;">
            <span>The r/ is optional. That subreddit will be active when you want a new meme.</span>
            <br>
            <input placeholder="" id="subreddit-input" value="memes" style="width:100%;" maxlength="20" onkeydown="this.className = '';setSubredditDebounced(this)" onload="this.value = 'memes';">
          </div>
        </div>
      </article>
      <article id="article">
        <a id="article-link" target="_blank"><h2 id="article-title" class="article-title">Loading...</h2></a>
        <img id="article-image" />
        <p id="article-selftext"></p>
        <div id="article-footer">
          <p>by <a id="article-author-link" target="_blank">u/<span id="article-author"></span></a></p>
          <p><span id="article-score">loading</span> upvotes</p>
        </div>
      </article>
    </main>
    <header onclick="meme()">
      <h1>FREE 👏 MEMES 👏! <span id="meme-counter">0</span> so far. Press space or click on the title to see a new meme.</h1>
    </header>
  </body>
</html>
result
console