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
View tutorial_49_example_1.html
<style>
.form-row {
padding: 5px;
}
.tag {
font-family: Courier, monospace;
display: inline-block;
width: 150px;
}
View tutorial_50_example_1.html
<style>
.form-row {
padding: 5px;
}
.tag {
font-family: Courier, monospace;
display: inline-block;
width: 150px;
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_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_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>
@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_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>
@webapprentice
webapprentice / tutorial_1_example_1.html
Last active Dec 27, 2015
Simple example of embedding a Google Map in a web page
View tutorial_1_example_1.html
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=eiffel+tower,+Paris,+France&amp;aq=t&amp;sll=47.613028,-122.342064&amp;sspn=0.367071,0.644073&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=A&amp;ll=48.858228,2.294388&amp;spn=0.006295,0.006295&amp;output=embed"></iframe>
<br />
<small>
<a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=eiffel+tower,+Paris,+France&amp;aq=t&amp;sll=47.613028,-122.342064&amp;sspn=0.367071,0.644073&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=A&amp;ll=48.858228,2.294388&amp;spn=0.006295,0.006295" style="color:#0000FF;text-align:left">View Larger Map</a>
</small>
@webapprentice
webapprentice / tutorial_3_example_1.html
Last active Dec 27, 2015
Embed a Weather Forecast from forecast.io in a web page
View tutorial_3_example_1.html
<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="75%"
src="http://forecast.io/embed/#lat=69.649205&lon=18.955324&name=Tromso, Norway&color=#00aaff&font=Helvetica&units=us">
</iframe>
@webapprentice
webapprentice / tutorial_2_example_1.html
Created Nov 7, 2013
Example of code to embed a single tweet in a web page
View tutorial_2_example_1.html
<blockquote class="twitter-tweet">
<p>Brazil to export low-cost measles &amp; rubella vaccines to developing countries
<a href="http://t.co/moEfOssAqQ">http://t.co/moEfOssAqQ</a>
</p>
&mdash; BBC News (World) (@BBCWorld)
<a href="https://twitter.com/BBCWorld/statuses/395287088033447936">October 29, 2013</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
You can’t perform that action at this time.