Compare commits
No commits in common. 'main' and 'master' have entirely different histories.
9 changed files with 10 additions and 160 deletions
@ -0,0 +1,10 @@ |
|||||||
|
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 |
||||||
@ -1,3 +0,0 @@ |
|||||||
# Storybook |
|
||||||
|
|
||||||
Small javascript app to demostrate HtmlDOM, arrays and objects. |
|
||||||
@ -1,47 +0,0 @@ |
|||||||
<!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> |
|
||||||
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 296 KiB |
@ -1,41 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
<!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