Skip to content

Instantly share code, notes, and snippets.


Web Apprentice webapprentice

View GitHub Profile
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>
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
// Draw horizontal line
context.strokeStyle = '#f00';
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%" />
<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>
(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>
<p>Paste into this box with Ctrl/Cmd-V to show that it worked.</p>
View tutorial_51_example_1.html
$(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
.form-row {
padding: 5px;
.tag {
font-family: Courier, monospace;
display: inline-block;
width: 150px;
View tutorial_49_example_1.html
.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="//" 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="//" data-pin-do="buttonPin" data-pin-config="none">
<img src="//" /></a>
Bronze mice by the Old Bridge in Heidelberg
<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">
Name: <input type="text" name="name" size="40">
<script type="text/javascript"
<iframe src=""
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;