Skip to content

Instantly share code, notes, and snippets.

Web Apprentice webapprentice

Block or report user

Report or block webapprentice

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@webapprentice
webapprentice / tutorial_55_example_1.html
Last active Aug 29, 2015
2D Graphics - Introduction to Canvas
View tutorial_55_example_1.html
<canvas id='mycanvas' width='500' height='300' style='border: 1px solid black'></canvas>
</div>
<script>
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
// Draw horizontal line
context.strokeStyle = '#f00';
context.beginPath();
View tutorial_54_example_1.html
<div style="width: 50%; margin: auto; text-align: center">
Enter a URL or String and hit Return <br> &nbsp;
<input id="text" type="text" value="" style="width:100%" />
</div>
<br>&nbsp;<br>&nbsp;<br>&nbsp;
<p style="text-align: center">Default is 256px Square in Black and White </p>
<div id="qrcode_1" style="width: 256px; margin: auto"></div>
View tutorial_53_example_1.html
<div style="width: 60%; margin:auto">
<p>Search the Web Apprentice site</p>
<script>
(function() {
var cx = '005712830755614811841:qkpmgdedxzy';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
View tutorial_52_example_1.html
<p>This text will be copied when you click the button</p>
<p id='copy_this_text' style="width: 50%; border: 1px solid #888">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod <i>tempor incididunt ut labore</i> et dolore magna
aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button id="copy-button">Copy to Clipboard</button>
<br>
<p>Paste into this box with Ctrl/Cmd-V to show that it worked.</p>
View tutorial_51_example_1.html
<script>
$(document).ready(function() {
// Check whether the browser is capable of speech synthesis
if (window.speechSynthesis != 'undefined') {
// Basic demo
$("#demo_1").on('click', function(e) {
var u = new SpeechSynthesisUtterance('You have reached your destination');
View tutorial_50_example_1.html
<style>
.form-row {
padding: 5px;
}
.tag {
font-family: Courier, monospace;
display: inline-block;
width: 150px;
View tutorial_49_example_1.html
<style>
.form-row {
padding: 5px;
}
.tag {
font-family: Courier, monospace;
display: inline-block;
width: 150px;
}
View tutorial_46_example_1.html
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>
<img src="/assets/slideshow_3.png" alt="Bronze mice by the Old Bridge in Heidelberg" width="300px" />
<p><a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fweb-apprentice-demo.craic.com%2Ftutorials%3Ftutorial%3D43%26demo%3D1&media=http%3A%2F%2Fweb-apprentice-demo.craic.com%2Fassets%2Fslideshow_3.png&description=Web%20Apprentice%20Demo%20%2346%20-%20Embed%20Pinterest%20Buttons" data-pin-do="buttonPin" data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
Bronze mice by the Old Bridge in Heidelberg
</p>
<img src="/assets/slideshow_1.png" alt="Heidelberg Saturday Market" width="300px"/>
<p>Heidelberg Saturday Market</p>
View tutorial_45_example_1.html
<form action="/tutorial_45_demo_1" method="post">
<p>
Name: <input type="text" name="name" size="40">
</p>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=YOUR_RECAPTCHA_PUBLIC_KEY_GOES_HERE">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=YOUR_RECAPTCHA_PUBLIC_KEY_GOES_HERE"
height="300" width="500" frameborder="0"></iframe><br>
View tutorial_44_example_1.html
<style type="text/css" media="screen">
textarea {
display: block;
margin: auto;
width: 600px;
height: 5px;
}
#editor_div {
display: block;
margin: auto;
You can’t perform that action at this time.