Skip to content

Instantly share code, notes, and snippets.

@janecakemaster

janecakemaster/index.html

Created December 8, 2016 18:48
Show Gist options
  • Save janecakemaster/c73d4a83928f95ac36efa30fd7b79ffc to your computer and use it in GitHub Desktop.
Save janecakemaster/c73d4a83928f95ac36efa30fd7b79ffc to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=c73d4a83928f95ac36efa30fd7b79ffc
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- here's the html element you need to select -->
<div id="box">i'm a box duh</div>
<button id="textChanger">change text</button>
<button id="colorChanger">change color</button>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
// do now: create a click handler to change the
// text in the box to whatever you want
//
// check out the reference table or
// the slides to jog your memory
// DO NOW CODE GOES HERE
$("#colorChanger").mouseover(function() {
$("#box").css("border", "3px dotted black");
});
$("#colorChanger").mouseout(function() {
$("#box").css("border", "1px solid black");
});
Raw
styles.css
/* some default styling for the box
so you can see it on the page */
#box {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1rem;
font-size: 2rem;
}
button {
margin: 1rem;
font-size: 2rem;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.serif {
font-family: serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment