Working with Women's Coding Collective to learn a few things about JavaScript.

## Erins-Card-o-matic.markdown

      
          Raw
        
        
              Erins-Card-o-matic.markdown
            
          
    Erin's Card-o-matic
A Pen by Erin Wiles on CodePen.
License.

  
## 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>

## 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)
});

## 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;
	}
	<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>
	$('.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)
	});
	.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;
	}