9 changed files with 160 additions and 10 deletions
--- a/10
+++ b/10
@ -1,10 +0,0 @@
 Volume in drive D is Storage
 Volume Serial Number is 4E2A-0C29
 Directory of D:\projects\storybook
 02/25/2023  12:15 PM    <DIR>          .
 02/25/2023  12:15 PM    <DIR>          ..
 02/25/2023  12:15 PM                 0 README
               1 File(s)              0 bytes
               2 Dir(s)  452,155,760,640 bytes free
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
 # Storybook
 Small javascript app to demostrate HtmlDOM, arrays and objects.
--- a/dynamic.html
+++ b/dynamic.html
@ -0,0 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lib/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Overpass">
    <script src="lib/book.js"></script>
    <title>Storybook</title>
 </head>
 <body>
    <div id="book">
        <h2 id="title">{book.title}</h2>
        <div id="page">
            <img src="images/noimage.png" id="pageImage">
            <div id="pageText">
                {page.text}
            </div>
        </div>
        <div id="buttons">
            {page.buttons}
        </div>
    </div>
    <script type="text/javascript">
        // array of pages
        pages = [];
        // page 1
        buttons = [];
        buttons.push(new Button(1, "Visit Lonely Mountain"));
        pages.push(new Page("images/theshire.jpg", "The Shire is a region of J. R. R. Tolkien's fictional Middle-earth, described in The Lord of the Rings and other works. The Shire is an inland area settled exclusively by hobbits, the Shire-folk, largely sheltered from the goings-on in the rest of Middle-earth. It is in the northwest of the continent, in the region of Eriador and the Kingdom of Arnor.", buttons));
        // page 2
        buttons = [];
        buttons.push(new Button(0, "Visit The Shine"));
        pages.push(new Page("images/lonelymountain.jpg", "Erebor stood hundreds of miles from the nearest mountain range. Tolkien's rendering of Thrór's map in The Hobbit shows it with six ridges stretching out from a central peak that was snowcapped well into spring. The whole mountain was perhaps ten miles in diameter; it contained an immense wealth of gold and jewels.", buttons));
        book = new Book("The Hobbit Locations", pages);
        book.displayPage(0);
    </script>
 </body>
 </html>
--- a/images/lonelymountain.jpg
+++ b/images/lonelymountain.jpg
--- a/images/noimage.png
+++ b/images/noimage.png
--- a/images/theshire.jpg
+++ b/images/theshire.jpg
--- a/lib/book.js
+++ b/lib/book.js
@ -0,0 +1,41 @@
 class Book {
    constructor(title, pages) {
        this.title = title;
        this.pages = pages;
    }
    displayPage(pageIndex) {
        var page = this.pages[pageIndex];
        document.getElementById("title").innerHTML = this.title;
        document.getElementById("pageImage").src = page.imageSRC;
        document.getElementById("pageText").innerHTML = page.text;
        var buttons = document.getElementById("buttons");
        // clear buttons
        buttons.innerHTML = "";
        for(var button of page.buttons) {
            const btn = document.createElement("button");
            btn.append(document.createTextNode(button.text));
            btn.setAttribute("onclick", "book.displayPage("+ button.pageIndex +")");
            buttons.append(btn);
        }
    }
 }
 class Page {
    constructor(imageSRC, text, butttons) {
        this.imageSRC = imageSRC;
        this.text = text;
        this.buttons = buttons;
    }
 };
 class Button {
    constructor(pageIndex, text) {
        this.pageIndex = pageIndex;
        this.text = text;
    }
 }
--- a/lib/style.css
+++ b/lib/style.css
@ -0,0 +1,42 @@
 body {
    background-color: #CCC;
    font-family: "Overpass", sans-serif;
 }
 #book {
    width: 80%;
    padding: 10px;
    margin: 0 auto;
    min-height: 600px;
    max-width: 900px;
 }
 #page {
    float: left;
    width: 80%;
    min-height: 500px;
 }
 #pageImage {
    width: 100%;
    max-height: 400px;
 }
 #pageText {
    background-color: rgba(1,1,1,.5);
    padding: 10px;
    color: white;
 }
 #buttons {
    float: right;
    display: inline;
    width: 15%;
    padding: 10px;
 }
 #buttons button {
    display: block;
    width: 100%;
    margin-top: 5px;
 }
--- a/static.html
+++ b/static.html
@ -0,0 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lib/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Overpass">
    <script src="lib/script.js" type="text/javascript"></script>
    <title>Storybook</title>
 </head>
 <body>
    <div id="book">
        <h2 id="title">The Shire</h2>
        <div id="page">
            <img src="images/shire.png" id="pageImage">
            <div id="pageText">
                The Shire is a region of J. R. R. Tolkien's fictional Middle-earth, described in The Lord of the Rings and other works. The Shire is an inland area settled exclusively by hobbits, the Shire-folk, largely sheltered from the goings-on in the rest of Middle-earth. It is in the northwest of the continent, in the region of Eriador and the Kingdom of Arnor.
            </div>
        </div>
        <div id="buttons">
            <button>Prev</button>
            <button>Next</button>
        </div>
    </div>
 </body>
 </html>
		`@ -0,0 +1,3 @@`
							`# Storybook`

							`Small javascript app to demostrate HtmlDOM, arrays and objects.`