livchits / memeoftheday Goto Github PK

Use it for text color at least.

Less 500px width: header has to be flex (no position: absolute), with order: 1 and align-self: center.

Add tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

to index.html

• body
• footer
• change a:visited order

• Change index.html, adding divs for de image and text.
• Change styles.css, adding image-container, meme, meme-text-container and meme-text classes, adding .meme-text with .btn-get-random-meme styles, and putting meme-text class under ".btn-get-random-meme, .meme-text" styles.
• Change index.js, adding memeText constant, showMemeOfTheDay function and memeText.textContent = randomMeme.name; in showRandomMeme function.
• Add .image-container { position: relative; } to center the text on the image.

That way (max-heigth: 66vh) big images don't shrink the button.

function showRandomMeme() {
  h1.textContent = "Random Meme";
  randomButton.textContent = "Get another random Meme!";
  const newRandomMeme = getRandomMeme(memesArray);
  img.src = newRandomMeme.url;
  img.alt = newRandomMeme.name;
}

Its called in an event listener on the button.

randomButton.addEventListener("click", showRandomMeme);

Change html and css