JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='controls'>
    <button id='back'>Back</button> &nbsp &nbsp &nbsp 
    Viewing: <span id='current_page'></span> &nbsp &nbsp &nbsp 
    <button id='next'>Next</button>
</div>

<div id='book_container'>
    
    <div id='blank_front' class='book_page blank center'>
        [EMPTY SPACE]
    </div>
    
    <div id='cover_front' class='book_page center'>
        <h1>Jamie and the<br>Dragonette</h1>
    </div>
    
    <div id='inner_front' class='book_page center'>
        [inside front cover. nothing here?]
    </div>
    
    <div id='title_front' class='book_page center'>
        <h1>Jamie and the<br>Dragonette</h1>
    </div>
    
    <div id='title_back' class='book_page center'>
        [back of title page. nothing here? or credits?]
    </div>
    
    <!-- START -->
    
    <div id='page_1' class='book_page'>
        Magicians also have to eat. ... And that wouldn’t be any good at all.
    </div>
    
    <div id='page_2' class='book_page'>
        So wizards... like a nice, well-cooked dinner.
    </div>
    
    <div id='page_3' class='book_page'>
        To be a chef — or a sous-chef, ... why be forced to share?
    </div>
    
    <div id='page_4' class='book_page'>
        Jamie lived in a village... and other topics of that sort.
    </div>
    
    <div id='page_5' class='book_page'>
        When Jamie had had all the schooling... he could think of something better.
    </div>
    
    <div id='page_6' class='book_page'>
        Now, like all boys and girls... almost as scarce as dragons.
    </div>
    
    <div id='page_7' class='book_page'>
        But Jamie wasn’t thinking about... his friends.
    </div>
    
    <div id='page_8' class='book_page'>
        At the moment he was helping... careful round letters.
    </div>
    
    <div id='page_9' class='book_page'>
        Today, though, he was in... particularly understanding.
    </div>
    
    <div id='page_10' class='book_page'>
        “A newt,” his uncle moaned... a toad for...

CSS

#controls {
    text-align: center;
}

#book_container {
    width: 800px;
    height: 400px;
    display: flex;
    margin: 20px auto;
}

#book_container .book_page {
    width: 50%;
    border: 1px solid grey;
    display: none;
    background-size: cover;
    position: relative;
}

#book_container .blank {
    border: 1px dotted silver;
    color: silver;
}

#book_container .center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_number {
    position: absolute;
    top: 10px;
    left: 10px;
}

#cover_front {
    background-image: url("https://images.squarespace-cdn.com/content/v1/5982fa4fe58c62cb28091fa4/1563203317753-TXUUTJIODX6NH307JIIY/ke17ZwdGBToddI8pDm48kCSKf0tXHhZMOJEs2UZu1H17gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UVO29KmUhBuJMxzeDSk7PRK7zyIYo4A__KnqiAPZYTPbYIU5blbDmN6a0_3pd8Fnhg/Cheese+1.jpg");
}

#cover_back {
    background-image: url("https://ak4.picdn.net/shutterstock/videos/4597934/thumb/1.jpg");
}

/* Empty? */
#inner_front, #inner_back {
    
}

#cover_front, #cover_back, #title_front, #title_back {
    display: flex;
    justify-content: center;
    align-items: center;
}

JavaScript

let book = ["blank_front", "cover_front", "inner_front","title_front","title_back"];
for(let i = 1; i < 27; i++){
    book.push("page_" + i);
    $("#page_" + i).append("<div class='page_number'>" + i + "</div>");
}
book = book.concat(["inner_back", "cover_back", "blank_back"]);

let pageNumber = 0;

$("#back").click(function(){
    if(pageNumber < 1){ return; }
    pageNumber -= 1;
    displayPages();
});

$("#next").click(function(){
    if(pageNumber > 15){ return; }
    pageNumber += 1;
    displayPages();
});

function displayPages(){
    $("#book_container div").hide();
    $("#book_container #" + book[(pageNumber * 2)]).show();
    $("#book_container #" + book[(pageNumber * 2) + 1]).show();
    
    $("#current_page").html(book[(pageNumber * 2)] +", "+ book[(pageNumber * 2) + 1]);
}

displayPages();