Skip to content

Instantly share code, notes, and snippets.

@emwiles

emwiles/Erins-Card-o-matic.markdown

Last active August 29, 2015 14:03
Show Gist options
  • Save emwiles/235c126a3800d527a598 to your computer and use it in GitHub Desktop.
Save emwiles/235c126a3800d527a598 to your computer and use it in GitHub Desktop.
Download ZIP
Working with Women's Coding Collective to learn a few things about JavaScript.
Raw
index.html
<html>
<head>
<title>Card-o-Matic</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/features.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id='wrapper'>
<h1>Erin's Card-o-Matic</h1>
<!-- Left side with all the controls -->
<div id='controls'>
<!-- Color picker -->
<h2>Pick a color</h2>
<div id="red" class="color"></div>
<div id="orange" class="color"></div>
<div id="gold" class="color"></div>
<div id="green" class="color"></div>
<div id="blue" class="color"></div>
<div id="purple" class="color"></div>
<div id="gray" class="color"></div>
<div class="clearfix"></div>
<div id='results'></div>
<!-- Texture picture -->
<h2>Pick a texture</h2>
<div id="circles" class="texture"></div>
<div id="cloth" class="texture"></div>
<div id="paper" class="texture"></div>
<div id="swirls" class="texture"></div>
<div id="none" class="texture">None</div>
<div class="clearfix"></div>
<!-- Message -->
<h2>Pick a message</h2>
<!-- Recipient -->
<h2>Dear...</h2>
<!-- Sticker picker -->
<h2>Click a sticker to add</h2>
</div>
<!-- Right side with the live preview -->
<div id='preview'>
<div id='card-background'>
<div id='canvas'>
<div id='message-output'></div>
<div id='recipient-output'></div>
</div>
</div>
<!-- Buttons -->
<input type='button' id='refresh-btn' value='Start over'>
<input type='button' id='print-btn' value='Print'>
</div>
</div>
<script src="js/card-o-matic.js"></script>
</body>
</html>
Raw
script.js
$('.color').click(function(){
var chosen_color = $(this).css('background-color')
$('#canvas').css('background-color', chosen_color)
});
$('.texture').click(function(){
var chosen_color = $(this).css('background-image')
$('#canvas').css('background-image', chosen_color)
});
Raw
style.css
.color {
width:30px;
height:30px;
border: 1px solid #474747;
float:left;
margin-left: 10px;
cursor: pointer;
}
#red { background-color: #990000;}
#orange { background-color: #FF6600}
#gold { background-color: #FFCC00}
#green { background-color: #009999}
#blue { background-color: #336699}
#purple { background-color: #993399}
#gray { background-color: #474747}
.texture {
width: 60px;
height: 30px;
border: 1px solid #666666;
float:left;
margin-left: 10px;
cursor: pointer;
}
#circles {
background-image: url('../images/texture-circles.png');}
#cloth {
background-image: url('../images/texture-cloth.png');}
#paper {
background-image: url('../images/texture-paper.png');}
#swirls {
background-image: url('../images/texture-swirls.png');}
#none {
font-size: 1.5em;
color:999999;
text-align: center;
vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment