proj3 - sketch 5

by Josh Krauth-Harding

HTML

<div id=post>
  <h1>im going to kill myself today</h1>
  <p>mike0504 &middot; <i>4 minutes ago</i></p>
  <hr />
  <div id="reactions">
    <h2 class="reaction">😂</h2>
    <h2 class="reaction">👍</h2>
    <h2 class="reaction">😍</h2>
    <h2 class="reaction">🌈</h2>
  </div>
</div>
<div id="alert"><h3>WRONG</h3></div>

<!-- Instead of saying that it's wrong, maybe make the emojis populate the screen in some sort of animation. It feels wrong, so it's not necessary to say that it is wrong. -->

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background-color: black;
  color: white;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-weight: normal;
}

p {
  padding: 10px 0;
}

#post {
  width: 80%;
  padding: 20px;
  border: 1px solid white;
}

#reactions {
  padding-top: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#reactions > h2 {
  cursor: pointer;
  user-select: none;
}

#alert {
  display: none;
  position: absolute;
  background-color: black;
  border: 1px solid white;
  font-size: 4em;
}

JavaScript

$('.reaction').click(function() {
	$('#alert').show().delay(400).fadeOut(0);
})