diff --git a/README.md b/README.md index 8c1ea28..8c7cf00 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # Storybook -Small javascript app to demostrate objects and arrays. \ No newline at end of file +Small javascript app to demostrate HtmlDOM, arrays and objects. \ No newline at end of file diff --git a/dynamic.html b/dynamic.html new file mode 100644 index 0000000..182376c --- /dev/null +++ b/dynamic.html @@ -0,0 +1,47 @@ + + + + + + + + + + Storybook + + +
+

{book.title}

+
+ +
+ {page.text} +
+
+
+ {page.buttons} +
+
+ + + \ No newline at end of file diff --git a/images/lonelymountain.jpg b/images/lonelymountain.jpg new file mode 100644 index 0000000..66223ea Binary files /dev/null and b/images/lonelymountain.jpg differ diff --git a/images/noimage.png b/images/noimage.png new file mode 100644 index 0000000..68464e5 Binary files /dev/null and b/images/noimage.png differ diff --git a/images/shire.png b/images/shire.png deleted file mode 100644 index b11523c..0000000 Binary files a/images/shire.png and /dev/null differ diff --git a/images/theshire.jpg b/images/theshire.jpg new file mode 100644 index 0000000..7e44fa5 Binary files /dev/null and b/images/theshire.jpg differ diff --git a/lib/book.js b/lib/book.js new file mode 100644 index 0000000..62456e4 --- /dev/null +++ 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; + } +} diff --git a/lib/style.css b/lib/style.css index 9a55c78..0f1a298 100644 --- a/lib/style.css +++ b/lib/style.css @@ -28,14 +28,14 @@ body { color: white; } -#controls { +#buttons { float: right; display: inline; width: 15%; padding: 10px; } -#controls button { +#buttons button { display: block; width: 100%; margin-top: 5px; diff --git a/index.html b/static.html similarity index 89% rename from index.html rename to static.html index b8b7e99..f7f81de 100644 --- a/index.html +++ b/static.html @@ -6,6 +6,7 @@ + Storybook @@ -17,7 +18,7 @@ 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. -
+