Skip to content

Instantly share code, notes, and snippets.

@sarahzinger

sarahzinger/index.html

Created April 26, 2017 23:42
Show Gist options
  • Save sarahzinger/c8f826dbb673e5f331a61d67c9d63714 to your computer and use it in GitHub Desktop.
Save sarahzinger/c8f826dbb673e5f331a61d67c9d63714 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=c8f826dbb673e5f331a61d67c9d63714
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="question-mark" id="picture"></div>
<button>Will today be a great day?</button>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
$("button").click(function() {
var randomNumber = Math.random() * 2;
randomNumber = Math.floor(randomNumber);
randomNumber = randomNumber+1;
$("#picture").removeClass();
if(randomNumber === 1) {
$("#picture").addClass("THIS IS A BUG CAN YOU FIX IT???");
} else if (randomNumber === 2) {
$("#picture").addClass("frown");
}
});
Raw
styles.css
div {
width:100px;
height: 100px;
}
.question-mark {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Question_mark.svg/220px-Question_mark.svg.png");
background-size: contain;
background-repeat: no-repeat;
}
.smile {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Emblem-cool.svg/60px-Emblem-cool.svg.png);
background-size: contain;
background-repeat: no-repeat;
}
.frown {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Face-sad.svg/48px-Face-sad.svg.png);
background-size: contain;
background-repeat: no-repeat;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment