JS-> // selecting required element const element = document.querySelector(".pagination ul"); let totalPages = 10; let page = 2; //calling function with passing parameters and adding inside element which is ul tag element.innerHTML = createPagination(totalPages, page); function createPagination(totalPages, page){   let liTag = '';   let active;   let beforePage = page - 1;   let afterPage = page + 1;   if(page > 1){ //show the next button if the page value is greater than 1     liTag += Prev;   }   // how many pages or li show before the current li   if (page == totalPages) {     beforePage = beforePage - 2;   } else if (page == totalPages - 1) {     beforePage = beforePage - 1;   }   // how many pages or li show after the current li   if (page == 1) {     afterPage = afterPage + 2;   } else if (page == 2) {     afterPage  = afterPage + 1;   }   for (var plength = beforePage; plength <= afterPage; plength++) {     if (plength > totalPages) { //if plength is greater than totalPage length then continue       continue;     }     if (plength == 0) { //if plength is 0 than add +1 in plength value       plength = plength + 1;     }     if(page == plength){ //if page is equal to plength than assign active string in the active variable       active = "active";     }else{ //else leave empty to the active variable       active = "";     }     liTag += ${p≤n>h};   }   if (page < totalPages) { //show the next button if the page value is less than totalPage(20)     liTag += Next;   }   element.innerHTML = liTag; //add li tag inside ul tag   return liTag; //reurn the li tag }   HTML->             Pagination in JavaScript | CodingNepal                                     Question: How can I  put and show images to the page 1

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

JS->


// selecting required element
const element = document.querySelector(".pagination ul");
let totalPages = 10;
let page = 2;

//calling function with passing parameters and adding inside element which is ul tag
element.innerHTML = createPagination(totalPages, page);
function createPagination(totalPages, page){
  let liTag = '';
  let active;
  let beforePage = page - 1;
  let afterPage = page + 1;
  if(page > 1){ //show the next button if the page value is greater than 1
    liTag += <liclass=btn prevonclick=createPagination(totalPages, ${page - 1})><span><iclass=fas fa-angle-left><i>Prev<span><li>;
  }

  // how many pages or li show before the current li
  if (page == totalPages) {
    beforePage = beforePage - 2;
  } else if (page == totalPages - 1) {
    beforePage = beforePage - 1;
  }
  // how many pages or li show after the current li
  if (page == 1) {
    afterPage = afterPage + 2;
  } else if (page == 2) {
    afterPage  = afterPage + 1;
  }

  for (var plength = beforePage; plength <= afterPage; plength++) {
    if (plength > totalPages) { //if plength is greater than totalPage length then continue
      continue;
    }
    if (plength == 0) { //if plength is 0 than add +1 in plength value
      plength = plength + 1;
    }
    if(page == plength){ //if page is equal to plength than assign active string in the active variable
      active = "active";
    }else{ //else leave empty to the active variable
      active = "";
    }
    liTag += <liclass=numb ${active}onclick=createPagination(totalPages, ${plength})><span>${p≤n>h}<span><li>;
  }

  if (page < totalPages) { //show the next button if the page value is less than totalPage(20)
    liTag += <liclass=btn nextonclick=createPagination(totalPages, ${page + 1})><span>Next<iclass=fas fa-angle-right><i><span><li>;
  }
  element.innerHTML = liTag; //add li tag inside ul tag
  return liTag; //reurn the li tag
}

 

HTML->


<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagination in JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="pagination">
    <ul> <!--pages or li are comes from javascript --> 
       
    </ul>
  </div>
  </div>
  <script src="script.js"></script>

</body>
</html>

 

Question: How can I  put and show images to the page 1

Expert Solution
steps

Step by step

Solved in 4 steps with 3 images

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY