HanumanChalisa book using html ,css, js.

HTML CODE

<!-- Book Structure -->
  <div class="book" id="book">
    <div class="page" id="leftPage">
        <div class="pagehead">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbjOJepgl7NhCpb0wcJl-ZjGXktc6Kw4i5DA&s" />
            <h5>Shri Hanuman Chalisa</h5>
        </div>
      <p></p>
      <div class="page-number">1</div>
    </div>
    <div class="page" id="rightPage">
        <div class="pagehead">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbjOJepgl7NhCpb0wcJl-ZjGXktc6Kw4i5DA&s"
            />
            <h5>Shri Hanuman Chalisa</h5>
        </div>
      <p></p>
      <div class="page-number">2</div>
    </div>
  </div>

  <!-- Navigation Buttons -->
  <div class="buttons">
    <button id="prevBtn" disabled>Previous</button>
    <button id="nextBtn">Next</button>
  </div>

CSS CODE

 body {
      font-family: 'Arial', sans-serif;
      display: block;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f5f5f5;
      margin: 0;
    }
    .book {   
        margin:3px;
      width: 550px;
      height: 400px;
      display: flex;
      position: relative;
      background-color: #f9f9f9;

      border: 3px solid #322f2f;
      box-shadow: 0 0 30px 5px black;
      /* perspective: 1000px; */
    }
    .page {
      width: 50%;
      padding: 20px;
      border-right: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: white;
    }


    .page h2 {
      margin: 0;
      font-size: 22px;
      color: #333;
    }
    .page p {
      flex-grow: 1;
      margin-top: 20px;
      font-size: 16px;
      line-height: 1.5;
      color: #666;
    }
    .page-number {
      text-align: right;
      font-size: 14px;
      color: #999;
    }
    .buttons {
      display: flex;
      justify-content: space-between;
      width: 400px;
      margin:auto;
      margin-top: 20px;
    }
    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:disabled {
      background-color: #ccc;
    }
    img{
        height: 40px;
        width:40px
    }
    .pagehead{
        display: flex;
        justify-content: space-between;
    }
    h5{
        padding-bottom: 5px;
    }

JAVASCRIPT CODE

<script>
        //logics here:
        const pages=[
            {left:{number:1,content:`Shree Guru Charan Saroj Raj, Nij Man Mukur Sudhaari
  Barnau Raghuvar Bimal Jasu, Jo Dayaku Phal Chaari.
  Buddhiheen Tanu Jaanike, Sumirau Pavan Kumar
  Bal Buddhi Vidya Dehu Mohi, Harahu Kalesh Vikaar.`},right:{number:2,content: `Jai Hanuman Gyan Guna Sagar, Jai Kapis Tihun Lok Ujagar.
  Ramdoot Atulit Bal Dhama, Anjani Putra Pavansut Nama.
  Mahabir Bikram Bajrangi, Kumati Nivaar Sumati Ke Sangi.
  Kanchan Baran Biraaj Subesa, Kanan Kundal Kunchit Kesa.`}},
            {left:{number:3,content:`Haath Bajra Aur Dhvaja Birjai, Kandhe Moonj Janeu Saaje.
  Shankar Suvan Kesari Nandan, Tej Pratap Maha Jag Vandan.
  Vidyavaan Guni Ati Chatur, Ram Kaj Karibe Ko Aatur.
  Prabhu Charitra Sunibe Ko Rasiya, Ram Lakhan Sita Man Basiya.`},right:{number:4,content:`Sukshma Roop Dhari Siyahi Dikhawa, Bikat Roop Dhari Lank Jarawa.
  Bhima Roop Dhari Asur Sanhare, Ramachandra Ke Kaaj Savare.
  Laaye Sanjivan Lakhan Jiyaye, Shree Raghuvir Harashi Ur Laye.
  Raghupati Kinhi Bahut Badaai, Tum Mama Priya Bharat Sam Bhai.`}},
            {left:{number:5,content: `Sahas Badan Tumharo Yash Gaave, As Kahi Shripati Kanth Lagaave.
  Sanakadik Brahmadi Muneesa, Narad Sarad Sahit Aheesa.
  Yam Kuber Digpal Jahan Te, Kavi Kovid Kahin Sake Kahan Te.
  Tum Upkar Sugrivahin Keenha, Ram Milaye Rajpad Deenha.`},right:{number:6,content:`Tumharo Mantra Vibheeshan Maana, Lankeshwar Bhaye Sab Jag Jaana.
  Yug Sahastra Yojan Par Bhaanu, Leelyo Taahi Madhur Phal Jaanu.
  Prabhu Mudrika Meli Mukha Maahi, Jaladhi Langhi Gaye Acharaj Naahi.
  Durgam Kaaj Jagat Ke Jete, Sugam Anugrah Tumhre Tete.`}}
        ]

        let currentPageIndex=0;
        const leftPage=document.getElementById('leftPage');
        const rightPage=document.getElementById('rightPage')
        const prevBtn=document.getElementById('prevBtn')
        const nextBtn=document.getElementById('nextBtn')

        function updatePages(){
            leftPage.querySelector('p').textContent=pages[currentPageIndex].left.content;
            leftPage.querySelector('.page-number').textContent=pages[currentPageIndex].left.number;

        //for the right page

        rightPage.querySelector('p').textContent=pages[currentPageIndex].right.content;
        rightPage.querySelector('.page-number').textContent=pages[currentPageIndex].right.number;


        prevBtn.disabled=currentPageIndex===0;
        nextBtn.disabled=currentPageIndex===pages.length-1;

        }

        //now event listeners for the next and back step

        nextBtn.addEventListener('click',()=>{
            if(currentPageIndex<pages.length-1){
                currentPageIndex++;
                updatePages();
            }
        })

        //for previous button
        prevBtn.addEventListener('click',()=>{
            if(currentPageIndex>0){
                currentPageIndex--;
                updatePages();
            }
        })
</script>