Skip to content

Instantly share code, notes, and snippets.

@jackrr

jackrr/index.html

Created December 6, 2016 23:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jackrr/37bf7765239372a68e72669f0967a685 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jackrr/37bf7765239372a68e72669f0967a685 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=37bf7765239372a68e72669f0967a685
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- DO NOT CHANGE THE HTML!! :) !! -->
<h1>Shapes</h1>
<div id="square" class="shape"></div>
<div id="circle1" class="shape circle"></div>
<div id="circle2" class="shape circle"></div>
<br>
<button id="reveal">Reveal Shapes</button>
<!-- DO NOT CHANGE THE HTML!! :) !! -->
</body>
</html>
Raw
script.js
// 1. Make the circles disappear when you click the square
// 2. Make the square disappear when you click a circle
// 3. Make all the shapes appear again when you click the "Reveal Shapes" button
// **BONUS**: When a shape is clicked, make it turn red (but not the others!!)
Raw
styles.css
.shape {
height: 80px;
width: 80px;
margin-right: 20px;
background-color: black;
display: inline-block;
}
.circle {
border-radius: 50%;
}
button {
margin-top: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment