Related questions
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
Step by stepSolved in 4 steps with 3 images
- body { font-family: Georgia, serif; font-size: 100%; line-height: 175%; margin: 0 15% 0; background-color:rgb(210,220,157); background-image: url("/Users/332bo/Desktop/Week_9_Lab/images/bullseye.png"); /* Rounded Shape image */ /* background-repeat:round space; */opacity: 0.5; background-size: contain; } header { margin-top: 0; padding: 3em 1em 2em 1em; text-align: center; border-radius:4px; background-color:hsl(0, 14%, 95%); background-image: url("/Users/332bo/Desktop/Week_9_Lab/images/purpledot.png"); background-repeat: repeat-x; } a { text-decoration: none; color:rgb(153,51,153); } a:visited { color: hsl(300, 13%, 51%); } a:hover { background-color: #fff; } a:focus { background-color: #fff; } a:active{color:#ff00ff;} h1 { font: bold 1.5em Georgia, serif; text-shadow: 0.1em 0.1em 0.2em gray; color: rgb(153,51,153);} h2 { font-size: 1em; text-transform: uppercase; letter-spacing: 0.5em; text-align: center; color:rgb(204,102,0); }dt { font-weight: bold; } strong { font-style: italic; }...arrow_forwardC Program In order to discourage excess electric consumption, an electrical company charges its customers a lower rate of P75 for the first 250 kilowatt-hours and a higher rate of P8.5 for each additional kilowatt-hour. In addition, a 10% surtax is added to the final bill. Write a program that calculates the electrical bill given the number of kilowatt-hours consumed as input. At the end, print the number of kilowatt-hours consumed and the computed bill.arrow_forwardvrite a each eler the original assigns the element with 0. Ex: lowerScores = {5, 0, 2, -3} becomes {4, 0, 1, 0}. 406554.2871636.qx3zqy7 1 #include 2 #include 3 using namespace std; 4 5 int main() { 6 7 9 10 11 12 13 14 15 16 17 Run const int SCORES_SIZE = 4; vector lowerScores (SCORES_SIZE); unsigned int i; for (i 0; i> lowerScores.at(i); } /* Your solution goes here */ for (i = 0; i < lowerScores.size(); ++i) { cout << lowerScores.at (i) << " "; nent was greater than 0, and oth wise.arrow_forward
- Find the body:def get_line(board: str, dir: str, col_or_row: int) -> str: """Return the characters that make up the specified row, column, or diagonal from the given tic-tac-toe game board. >>> get_line(4, across, 2) XX >>> get_line(9, down, 3) OOO >>> get_line(4, down_diagonal) OO """arrow_forwardCreate an anonymous block that displays a course list. Declare a cursor and use the OPEN,FETCH, and CLOSE cursor statements to access the cursor. Use the %ROWTYPE attribute for the cursor.arrow_forwardcomplete the docstring using the information provided:arrow_forward
- Hi, can you help me with the indentation in this code, please. import csv# Define global variablesstudent_fields = ['ID', 'name', 'courses', 'absences', 'm1', 'm2', 'm3', 'total']student_database = 'students.csv'def display_menu():print("--------------------------------------")print(" Welcome to Student Management System")print("---------------------------------------")print("1. Add New Student")print("2. View Students")print("3. Search Student by iD")print("4. Search Student by courses")print("5. Delete Student")print("6. Quit")def add_student():print("-------------------------")print("Add Student Information")print("-------------------------")global student_fieldsglobal student_databasestudent_data = []for field in student_fields:value = input("Enter " + field + ": ")student_data.append(value)with open(student_database, "a", encoding="utf-8") as f:writer = csv.writer(f)writer.writerows([student_data])print("Data saved successfully")input("Press any key to continue")returndef...arrow_forward2. Under which TAB do you add a MOVE command to your Structure Tree? a.arrow_forwardvoid getVectorSize(int& size); void readData(vector<Highscore>& scores); void sortData(vector<Highscore>& scores); vector<Highscore>::iterator findLocationOfLargest( const vector<Highscore>::iterator startingLocation, const vector<Highscore>::iterator endingLocation); void displayData(const vector<Highscore>& scores); The size parameter from the given code won't be needed now, since a vector knows its own size. Notice that the findLocationOfLargest() function does not need the vector itself as a parameter, since you can access the vector using the provided iterator parameters. The name field in the struct must still be a c-string The focus of this assignment is to use iterators. You must use iterators wherever possible to access the vector. As a result, you must not use square brackets, the push_back() function, the at() function, etc. Also, the word "index" shouldn't appear in your code anywhere. You won't get full credit if...arrow_forward
- Text book imageComputer Networking: A Top-Down Approach (7th Edi...Computer EngineeringISBN:9780133594140Author:James Kurose, Keith RossPublisher:PEARSONText book imageComputer Organization and Design MIPS Edition, Fi...Computer EngineeringISBN:9780124077263Author:David A. Patterson, John L. HennessyPublisher:Elsevier ScienceText book imageNetwork+ Guide to Networks (MindTap Course List)Computer EngineeringISBN:9781337569330Author:Jill West, Tamara Dean, Jean AndrewsPublisher:Cengage Learning
- Text book imageConcepts of Database ManagementComputer EngineeringISBN:9781337093422Author:Joy L. Starks, Philip J. Pratt, Mary Z. LastPublisher:Cengage LearningText book imagePrelude to ProgrammingComputer EngineeringISBN:9780133750423Author:VENIT, StewartPublisher:Pearson EducationText book imageSc Business Data Communications and Networking, T...Computer EngineeringISBN:9781119368830Author:FITZGERALDPublisher:WILEY