Pick a texture

Developer
Emily K
Size
2,284 Kb
Views
14,168
  1. Pick a texture Previews
  2. Pick a texture HTML Codes
  3. Pick a texture CSS Codes
  4. Pick a texture JS Codes

How do I make an pick a texture?

What is a pick a texture? How do you make a pick a texture? This script and codes were developed by Emily K on 09 September 2022, Friday.

Pick a texture Previews
IQ Test

Pick a texture - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pick a texture</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head>	<title>Codagogy 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>Codagogy Card-o-Matic</h1>	<!-- Left side with all the controls -->	<div id='controls'>	<!-- Color picker -->	<h2>Pick a color</h2>	<div class='colors' id='red'></div>	<div class='colors' id='orange'></div>	<div class='colors' id='yellow'></div>	<div class='colors' id='green'></div>	<div class='colors' id='blue'></div>	<div class='colors' id='indigo'></div>	<div class='colors' id='violet'></div>	<div class='clearfix'></div>	<!-- Texture picture -->	<h2>Pick a texture</h2>	<div class='texture' id='paper'></div>	<div class='texture' id='swirls'></div>	<div class='texture' id='circles'></div>	<div class='texture' id='cloth'></div>	<div class='clearfix' id=''></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 src="js/index.js"></script>
</body>
</html>

Pick a texture - Script Codes CSS Codes

.colors {	width:30px;	height:30px;	cursor:pointer;	float:left;	margin-right:5px;
}
#red{	background-color:red;
}
#orange{	background-color:orange;
}
#yellow{	background-color:yellow;
}
#green{	background-color:green;
}
#blue{	background-color:blue;
}
#indigo{	background-color:indigo;
}
#violet{	background-color:violet;
}
.texture {	width:30px;	height:30px;	cursor:pointer;	float:left;	margin-right:5px;
}
#paper{	background-image: url('../images/texture-paper.png');
}
#swirls{	background-image: url('../images/texture-swirls.png');
}
#circles{	background-image: url('../images/texture-circles.png');
}
#cloth{	background-image: url('../images/texture-cloth.png');
}

Pick a texture - Script Codes JS Codes

$('.colors').click(function(){	var chosen_color = $(this).css('background-color');	$('#canvas').css('background-color', chosen_color);
});
$('.texture').click(function(){
var chosen_texture = $(this).css('background-image');
$('#canvas').css('background-image', chosen_texture);
});
Pick a texture - Script Codes
Pick a texture - Script Codes
Home Page Home
Developer Emily K
Username Emnk
Uploaded September 09, 2022
Rating 3
Size 2,284 Kb
Views 14,168
Do you need developer help for Pick a texture?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emily K (Emnk) Script Codes
Name
BOMP Test
Fluid layout practice v3 with map
Fluid layout practice
Done - Monster Mash
Map for event - simple
A taste of jQuery UI with dragging
PHPiggy Bank
Flagg CSS Practice
Boston Middle Passage Profile Gallery Beta
Bonus Features
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!