Compare commits
No commits in common. 'master' and 'main' have entirely different histories.
9 changed files with 160 additions and 10 deletions
@ -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 |
||||
@ -0,0 +1,3 @@ |
||||
# Storybook |
||||
|
||||
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 |
|
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; |
||||
} |
||||
} |
||||
@ -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; |
||||
} |
||||
@ -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> |
||||
Loading…
Reference in new issue