parent
38d29b3fb4
commit
9a5d95edb5
9 changed files with 93 additions and 4 deletions
@ -1,3 +1,3 @@ |
|||||||
# Storybook |
# 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