Web – Google Book A.P.I. and codepen. – free-tutorials.org with free tutorials and source code

The tool website called codepen.io is a very useful tool in which you can test HTML, CSS, and JavaScript source code with the related libraries.
In this short tutorial, I show you I translated a simple example from Google Books A.P.I. in the codepen.io web interface.
The basic example of the source code from the google web page is this:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Books Embedded Viewer API Example</title>
    <script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
    <script type="text/javascript">
      google.books.load();

      function initialize() {
        var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
        viewer.load('ISBN:0738531367');
      }

      google.books.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id="viewerCanvas" style="width: 600px; height: 500px"></div>
  </body>
</html>

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Google Books Embedded Viewer API Example</title>

google.books.load();

function initialize() {

var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));

viewer.load('ISBN:0738531367');

}

google.books.setOnLoadCallback(initialize);

</script>

</head>

<body>

</body>

</html>

The result after translated source code can be seen on the web page.
<br /> See the Pen <a href="https://codepen.io/catafest/pen/PobNZem">test simple Google Books API example</a> by Cătălin George Feștilă<br /> (<a href="https://codepen.io/catafest">@catafest</a>) on <a href="https://codepen.io">CodePen</a>.<br />

Leave a Reply Cancel reply