Etch-A-Sketch

Developer
Eleftheria Batsou
Size
2,665 Kb
Views
26,312
  1. Etch-A-Sketch Previews
  2. Etch-A-Sketch HTML Codes
  3. Etch-A-Sketch CSS Codes
  4. Etch-A-Sketch JS Codes

How do I make an etch-a-sketch?

Paint-Sketch Click "Draw" to sketch or "Clear" to erase everythingThe project uses most of this code: http://intridea.github.io/sketch.js/lib/sketch.js . What is a etch-a-sketch? How do you make a etch-a-sketch? This script and codes were developed by Eleftheria Batsou on 27 October 2022, Thursday.

Etch-A-Sketch Previews
IQ Test

Etch-A-Sketch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Etch-A-Sketch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class='demo' id='colors_demo'> <div class="tools center">
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>
<div class="center"> <a href="#colors_sketch" data-tool="marker">Draw</a> <!-- <a href="#colors_sketch" data-tool="eraser">Erase</a>
--> <a href="" data-tool="eraser">Clear</a>
</div> <!-- for footer --> <h5><a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria</a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a></h5> <!-- end footer -->
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://intridea.github.io/sketch.js/lib/sketch.js'></script> <script src="js/index.js"></script>
</body>
</html>

Etch-A-Sketch - Script Codes CSS Codes

body { font-family: "Open Sans", sans-serif; color: #444; } h1, h2, h3, h4 { font-family: Yellowtail; font-weight: normal; color:
#06a; } #wrapper { width: 800px; margin: 0 auto; } header { text-align: center; } header h1 { font-size: 46px; text-align: center; margin: 15px 10px; } article h1 { font-size: 26px; margin: 0 0 15px; } article canvas { width: 800px; height: 300px; border: 1px solid #ccc; } pre.source { background: #e5eeee; padding: 10px 20px; width: 760px; overflow-x: auto; border: 1px solid #acc; } code { background: #cff; } .tools { margin-bottom: 10px; } .center a { border: 1px solid black; height: 30px; line-height: 30px; padding: 0
10px; vertical-align: middle; text-align: center; text-decoration: none;
display: inline-block; color: black; font-weight: bold; } .center { margin:0 auto; width:450px; text-align:center; }

Etch-A-Sketch - Script Codes JS Codes

 $(function() { $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'],
function() { $('#colors_demo .tools').append("<a href='#colors_sketch' data-color='" +
this + "' style='width: 10px; background: " + this + ";'></a> "); }); $.each([3, 5, 10, 15], function() { $('#colors_demo .tools').append("<a href='#colors_sketch' data-size='" +
this + "' style='background: #ccc'>" + this + "</a> "); }); $('#colors_sketch').sketch(); document.getElementById("colors_sketch").height=$(window).height()-100; document.getElementById("colors_sketch").width=$(window).width(); });
Etch-A-Sketch - Script Codes
Etch-A-Sketch - Script Codes
Home Page Home
Developer Eleftheria Batsou
Username EleftheriaBatsou
Uploaded October 27, 2022
Rating 3.5
Size 2,665 Kb
Views 26,312
Do you need developer help for Etch-A-Sketch?

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!

Eleftheria Batsou (EleftheriaBatsou) Script Codes
Name
Vertical Timeline - My life
Landing Page for an App
Clock with JS
Personal Portfolio Webpage
Postcode Finder and Map
Whack - A - Mole
Calculate Calories and Macros
Video Player Custom Controls
Draw Like Never Before
Animate Your Name
Create amazing art & images 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!