Web Apprentice webapprentice
webapprentice
/ tutorial_49_example_1.html
Last active
August 29, 2015 13:56
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .form-row { | |
| padding: 5px; | |
| } | |
| .tag { | |
| font-family: Courier, monospace; | |
| display: inline-block; | |
| width: 150px; | |
| } |
webapprentice
/ tutorial_50_example_1.html
Last active
August 29, 2015 13:56
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .form-row { | |
| padding: 5px; | |
| } | |
| .tag { | |
| font-family: Courier, monospace; | |
| display: inline-block; | |
| width: 150px; |
webapprentice
/ tutorial_51_example_1.html
Last active
August 29, 2015 13:57
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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'); |
webapprentice
/ tutorial_53_example_1.html
Last active
August 29, 2015 13:58
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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:') + |
webapprentice
/ tutorial_54_example_1.html
Last active
August 29, 2015 13:58
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="width: 50%; margin: auto; text-align: center"> | |
| Enter a URL or String and hit Return <br> | |
| <input id="text" type="text" value="" style="width:100%" /> | |
| </div> | |
| <br> <br> <br> | |
| <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
/ tutorial_55_example_1.html
Last active
August 29, 2015 14:02
2D Graphics - Introduction to Canvas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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(); |
webapprentice
/ tutorial_52_example_1.html
Last active
December 13, 2015 15:26
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ tutorial_1_example_1.html
Last active
December 27, 2015 16:59
Simple example of embedding a Google Map in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=eiffel+tower,+Paris,+France&aq=t&sll=47.613028,-122.342064&sspn=0.367071,0.644073&ie=UTF8&hq=&hnear=&t=m&iwloc=A&ll=48.858228,2.294388&spn=0.006295,0.006295&output=embed"></iframe> | |
| <br /> | |
| <small> | |
| <a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=eiffel+tower,+Paris,+France&aq=t&sll=47.613028,-122.342064&sspn=0.367071,0.644073&ie=UTF8&hq=&hnear=&t=m&iwloc=A&ll=48.858228,2.294388&spn=0.006295,0.006295" style="color:#0000FF;text-align:left">View Larger Map</a> | |
| </small> |
webapprentice
/ tutorial_3_example_1.html
Last active
December 27, 2015 16:59
Embed a Weather Forecast from forecast.io in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ tutorial_2_example_1.html
Created
November 7, 2013 18:24
Example of code to embed a single tweet in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <blockquote class="twitter-tweet"> | |
| <p>Brazil to export low-cost measles & rubella vaccines to developing countries | |
| <a href="http://t.co/moEfOssAqQ">http://t.co/moEfOssAqQ</a> | |
| </p> | |
| — 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> |
OlderNewer