parent
38d29b3fb4
commit
9a5d95edb5
9 changed files with 93 additions and 4 deletions
@ -1,3 +1,3 @@ |
||||
# Storybook |
||||
|
||||
Small javascript app to demostrate objects and arrays. |
||||
Small javascript app to demostrate HtmlDOM, arrays and objects. |
||||
@ -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> |
||||
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 656 KiB |
|
After Width: | Height: | Size: 296 KiB |
@ -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; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue