This is an interactive story about the famous Jack and the Beanstalk.
I want to make it easy to read the story section by section, instead of scrolling thru a whole story in a long and a boring text layout.
The project is hosted on Github Pages at
https://rawa08.github.io/Jack-and-the-Beanstalk-Interactive-Story/
I made the layout simple and clean, with minimum amount of buttons.
I made also a section counter to track in witch chapter the reader is.
The user is able to navigate thru the sections with the Next and Previous buttons.
The section counter helps to keep track of the reading.
The website is developed in HTML 5, CSS 3 and Javascript ES6.
Bootstrap v4.3
jQuery v3.4.1
The website responsiveness and functionality was tested on:
Safari on apple mobile devices (Iphone 6, 8plus, xr, xs, 11 pro Max).
Chrome for android (SM-Galaxy s10+, Huawei p30 pro ).
Chrome for Mac and PC.
Safari for Mac.
html - https://validator.w3.org/
CSS - https://jigsaw.w3.org/css-validator
JS - http://beautifytools.com/javascript-validator
I retrieved the text for the story from:
https://www.storynory.com/jack-and-the-beanstalk/
I retrieved the images from: http://taleswithgigi.com/tale/25/
The javascript iteration of the "next" and "previous" function is retrieved from webzone at
https://www.youtube.com/watch?v=sQuniQCzNlY , and customized for this project by me.