webapprentice

<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

<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

<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

<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

  <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

<style>

  .form-row {
    padding: 5px;
  }
  .tag {
    font-family: Courier, monospace;
    display: inline-block;
    width: 150px;

webapprentice

<style>

  .form-row {
    padding: 5px;
  }
  .tag {
    font-family: Courier, monospace;
    display: inline-block;
    width: 150px;
  }

webapprentice

<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>

webapprentice

  <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>

webapprentice

<style type="text/css" media="screen">
    textarea {
        display: block;
        margin: auto;
        width: 600px;
        height: 5px;
    }
    #editor_div {
        display: block;
        margin: auto;