Skip to content

Instantly share code, notes, and snippets.

@jaeming

jaeming/index.html

Created September 21, 2015 16:40
Show Gist options
  • Save jaeming/63e08791f50000643d44 to your computer and use it in GitHub Desktop.
Save jaeming/63e08791f50000643d44 to your computer and use it in GitHub Desktop.
Download ZIP
Opal screencast 101 - code#1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opal Experiments</title>
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/opal/0.3.43/opal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opal-parser/0.3.43/opal-parser.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opal-jquery/0.0.8/opal-jquery.min.js"></script>
</head>
<body>
<div id="box" class="red">Click Me</div>
<script type="text/ruby">
class Shape
attr_accessor :box
def initialize(box)
@box = box
end
def is_red?
@box.has_class?('red')
end
def activate_red
@box.remove_class('teal')
@box.add_class('red')
end
def activate_teal
@box.remove_class('red')
@box.add_class('teal')
end
def toggle_color
if is_red?
activate_teal
else
activate_red
end
end
end
@shape = Shape.new
@shape.box = Element.find('#box')
@shape.box.on(:click) do
@shape.toggle_color
end
</script>
</body>
</html>
Raw
main.css
#box {
height: 50px;
width: 50px;
color: #fff;
text-align: center;
padding: 5%;
cursor: pointer;
}
.red {
background: tomato;
}
.teal {
background: teal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment