Login

Create â€œNew Classâ€¦â€ named Book to store the details of a book Declare 3 fields for the...

80.2K

Verified Solution

Question

Programming

Create â€œNew Classâ€¦â€ named Book tostore the details of a book
Declare 3 fields for the details of the book:
field named author of typeString
field named title of typeString
field named callNumber of typeString
Add overloaded constructors with the following headers and makesure each constructor has only 1 statement in thebody that makes an internal method call tosetBookDetails:
public Book(String author, String title, StringcallNumber)
public Book(String author, Stringtitle)
HINT: Initializethe callNumber field to an emptyString in #2 constructor
Add accessor method getAuthor toreturn the author field
Add accessor method getTitle toreturn the title field
Add accessor method getCallNumber toreturn callNumber field
Add accessor method getBookDetails toreturn a String in the format:
â€œ :Â Â <author>(<callNumber>)â€</strong></p><p style=\"margin-left:23px;margin-right:-10px;\">HINT: Complete withONLY 1 line of code using String concatenation</p><ul style=\"list-style-type:square;\"><li>Add mutator method <strong><em>setBookDetails</em></strong>with the following header to will initialize the fields to theseparameters of the same name:</li></ul><p><strong>Â Â Â Â Â <em>public voidsetBookDetails(String author, String title, StringcallNumber)Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </em></strong></p><p style=\"margin-right:-10px;\"><strong>NOTE</strong><strong>:</strong> Use method call<strong><em>getBookDetails</em></strong> where the <em>details</em>of a book are needed (i.e. when listing/printing books or supplyinginformation about a particular book)</p><ul style=\"list-style-type:square;\"><li>Create â€œNew Classâ€¦â€ named <strong><em>Genre</em></strong> tostore a group of books</li><li>Import all necessary Java package library classes</li><li>Declare 2 fields for each genre:</li><li>field named <strong><em>genreName</em></strong> of type<strong><em>String</em></strong></li><li>field named <strong><em>books</em></strong> of type<strong><em>ArrayList of Book</em></strong></li><li>Write a constructor (with the following header) to initializeBOTH fields</li></ul><p style=\"margin-left:59px;margin-right:-10px;\"><strong><em>publicGenre(String genreName)</em></strong></p><p style=\"margin-left:24px;margin-right:-10px;\">HINT: Make sure youinstantiate a <strong><em>new</em></strong><strong><em>books</em></strong> ArrayList object</p><ul style=\"list-style-type:square;\"><li>Add accessor method <strong><em>getGenreName</em></strong> toreturn the <strong><em>genreName</em></strong> field</li><li>Add accessor <strong><em>getGenreBooks</em></strong> to returnthe <strong><em>books</em></strong> field</li><li>Add accessor <strong><em>getNumberOfGenreBooks</em></strong>returning # of items in the <strong><em>books</em></strong></li><li>Add a method (with header below) to check if an index is validin <strong><em>books</em></strong></li></ul><p style=\"margin-left:59px;\"><strong><em>public booleanbookIndexValid(int index)</em></strong></p><p style=\"margin-left:23px;margin-right:-10px;\">HINT: First makesure <strong><em>books</em></strong> collection is NOT<em>null</em> or <em>empty</em></p><ul style=\"list-style-type:square;\"><li>Overload method <strong><em>addGenreBook</em></strong> (withthe following headers) to add a new book to the genre using theArrayList <strong>.<em>add</em></strong> method</li></ul><ol><li><strong><em>public void addGenreBook(Bookbook)</em></strong></li><li><strong><em>public void addGenreBook(String author,Stringtitle,String callNumber)</em></strong></li></ol><p style=\"margin-left:24px;margin-right:-10px;\">HINT: Make sure youcreate a <strong><em>new Book</em></strong> object in #2</p><ul style=\"list-style-type:square;\"><li>Add method to <strong><em>return</em></strong> the index (orâ€“1, if not found) of the FIRST book in ArrayList<strong><em>books</em></strong> that EXACTLY matches a particular<strong><em>callNumber</em></strong></li></ul><p style=\"margin-left:59px;margin-right:-10px;\"><strong><em>publicint findGenreBookWithCallNumber(StringcallNumber)</em></strong></p><ul style=\"list-style-type:square;\"><li>Use 2 local variables (<strong><em>index</em></strong> and<strong><em>searching)</em></strong> along with a <em>while</em>loop</li><li>(Only after ENTIRE search loop is completed - thus, outside ofloop)Â Â Â Check (using<strong><em>searching</em></strong>) if match was found, todetermine the return value</li><li>(At some point) Print formatted <em>book details</em> (iffound) or error (if not found)</li></ul><ul style=\"list-style-type:square;\"><li>Add method to remove ONLY the FIRST book in<strong><em>books</em></strong> matching<strong><em>callNumber</em></strong>:</li></ul><p style=\"margin-left:60px;margin-right:-10px;\"><strong><em>publicvoid removeGenreBookWithCallNumber(String callNumber)</em></strong><em><strong>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </strong></em></p><ul style=\"list-style-type:square;\"><li><strong>MUST</strong> 1<sup>st</sup> use<strong><em>findGenreBookWithCallNumber( )</em></strong> to findindex of <strong><em>callNumber</em></strong></li><li><em>if</em> <strong><em>bookIndexValid( )</em></strong> of thereturned index, then perform removal using the index and then printformatted output <strong>â€œRemoving: <<em>bookdetails</em>>â€</strong></li><li><em>else</em> print <strong><em>\"NO book with call number:<callNumber>â€</em></strong></li></ul><p style=\"margin-left:24px;\">HINT: <strong>MUST</strong><strong>NOT</strong> use any type of loops at all</p><ul style=\"list-style-type:square;\"><li>Add method to remove ALL items in<strong><em>books</em></strong> matching a particular<strong><em>author</em></strong></li></ul><p style=\"margin-left:59px;margin-right:-10px;\"><strong><em>publicvoid removeAllGenreBooksByAuthor(Stringauthor)Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </em></strong></p><ul style=\"list-style-type:square;\"><li><strong>MUST</strong> use <strong><em>Iterator</em></strong>and <em>while</em> loop to search through the<strong><em>books</em></strong> <em>ArrayList</em></li><li>Remove book if <strong><em>author</em></strong> EXACTLY matches(without case-sensitivity)</li><li><strong>MUST</strong> print <em>book details</em> for EACHremoved or 1 error output (if not found)</li></ul><p style=\"margin-left:24px;margin-right:-10px;\">HINT:<strong>MUST</strong> use <strong><em>.remove</em></strong> methodfrom <strong><em>Iterator</em></strong> to ensure properremovals</p><ul style=\"list-style-type:square;\"><li>Add method <strong><em>void listAllGenreBooks( )</em></strong>to print out ALL items in <strong><em>books</em></strong></li><li><em>if</em> books <em>ArrayList</em> is empty, print<strong>â€NO books to printâ€</strong></li><li><em>else</em> print heading <strong>â€œ<genreName>BOOKS:â€</strong> and use <em>for-each</em> to print each<em>Book</em>â€™s <em>book details</em> with leading <strong>â€œ<spaces>â€</strong> on its own line</li><li>Add <strong><em>void listGenreBooksByAuthor(Stringauthor)</em></strong> to print ALL <strong><em>author</em></strong>matches</li><li>Always print heading: <strong>â€œ<genreName> BOOKS BYAUTHOR <author>:â€</strong></li><li>Use <em>for-each</em> and <strong><em>String.equalsIgnoreCase()</em></strong> to check every book in<strong><em>books</em></strong> to find<strong><em>author</em></strong> matches to print their <em>bookdetails</em> with leading <strong>â€œ <spaces>â€</strong></li></ul><p>(Only after ENTIRE search loop is completed - thus, outside ofloop)Â Â Â Check if NO match found, then print<strong>â€NO books by author: <author>â€</strong></p><ul style=\"list-style-type:square;\"><li>Create â€œNew Classâ€¦â€ <strong><em>Library</em></strong> for agroup of genres and a book of the week</li><li>Import all necessary Java package library classes</li><li>Declare 2 fields for each library:</li><li>field named <strong><em>bookOfTheWeek</em></strong> of type<strong><em>Book</em></strong></li><li>field named <strong><em>genres</em></strong> of type<strong><em>ArrayList of Genre</em></strong></li><li>Write a constructor with header <strong><em>public Library()</em></strong> to initialize both fields</li></ul><p style=\"margin-left:24px;margin-right:-6px;\">HINT: Includeinstantiation of a new <strong><em>genres</em></strong> ArrayListobject AND initialize <strong><em>bookOfTheWeek</em></strong> toeither <em>null</em> or use (optional)<strong><em>pickBookOfTheWeek( )</em></strong></p><ul style=\"list-style-type:square;\"><li>Add method <strong><em>int getNumberOfTotalBooks</em></strong>to return the TOTAL number of books in the ENTIRE library (includeALL genres) or 0 if there are NO books</li></ul><p style=\"margin-left:24px;margin-right:-10px;\">HINT:<strong>MUST</strong> use <em>for-each</em> loop and call to<strong><em>getNumberOfGenreBooks( )</em></strong></p><ul style=\"list-style-type:square;\"><li>Overload method <strong><em>addGenre</em></strong> (with thefollowing headers) to add a new genre to the library using theArrayList <strong>.<em>add</em></strong> method:</li></ul><ol><li><strong><em>public void addGenre(Genregenre)Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </em></strong></li><li><strong><em>public void addGenre(StringgenreName)</em></strong></li></ol><p style=\"margin-left:23px;margin-right:-10px;\">HINT:<strong>MUST</strong> create and use a <strong><em>newGenre</em></strong> anonymous object in #2.</p><ul style=\"list-style-type:square;\"><li>Add method <strong><em>void removeGenre(StringgenreName)</em></strong> to remove the FIRST genre ONLY inArrayList <strong><em>genres</em></strong> matching the<strong><em>genreName</em></strong> searchparameter<strong><em>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </em></strong></li></ul><p style=\"margin-left:23px;margin-right:-10px;\">HINT:<strong>MUST</strong> use <strong>Iterator</strong> to help<strong><em>get</em></strong> the genre to<strong><em>remove</em></strong> it and also include any formattedoutput detailing the removal or an error message (if not found)</p><ul style=\"list-style-type:square;\"><li>Add method <strong><em>void listAllGenres( )</em></strong> toprint out ALL <strong><em>genreNames</em></strong> in<strong><em>genres</em></strong> with a heading format:<strong>â€œTHE GENRE NAMES:â€</strong> (or error msg if NOgenres)</li></ul><p>HINT: Use <em>for-each</em> and print formatted genre info withleading spaces <strong>â€œÂ Â Â Â â€</strong></p><ul style=\"list-style-type:square;\"><li>Add method <strong><em>void listAllLibraryBooks()</em></strong> to print out ALL <strong><em>books</em></strong> inALL <strong><em>genres</em></strong> in the ENTIRElibrary<strong><em>Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </em></strong></li></ul><p style=\"margin-left:24px;\">HINT: First check using<strong><em>getNumberOfTotalBooks</em></strong> that the libraryhas books and print error message if there are NO books in theentire library</p><p style=\"margin-left:24px;margin-right:-6px;\">HINT:<strong>MUST</strong> use <strong>Iterator</strong> and<strong><em>listAllGenreBooks</em></strong> to help print the booksfor each genre (Yes, I know itâ€™s possible w/o an Iterator, BUT youMUST use it !!!)</p><p>Add method <strong><em>void printBookOfTheWeek( )</em></strong>to print out the details of the<strong><em>bookOfTheWeek</em></strong> or an error stating that<strong>â€There is NO Book of the Weekâ€</strong>HINT:<strong>MUST</strong> have a heading and use<strong><em>getBookDetails( )</em></strong> to print thedetails</p><ul style=\"list-style-type:square;\"><li>Add method <strong><em>void pickBookOfTheWeek( )</em></strong>to randomly pick a <strong><em>Book</em></strong> in the entire<strong><em>library</em></strong> from any of the<strong><em>genres</em></strong> as the<strong><em>bookOfTheWeekÂ Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â </em></strong></li></ul><p>HINT: First check that <strong><em>Library</em></strong> hasbooks to chose from, then use <strong>Random</strong> to pick arandom <strong><em>Genre</em></strong>. Then, MUST check the chosen<strong><em>Genre</em></strong> has books before picking a random<strong><em>Book</em></strong> from the randomly selected genre. Ifthere are NO books in the selected genre, then repeat the loop bytrying another genre. Remember to call<strong><em>getGenreBooks</em></strong> and<strong><em>printBookOfTheWeek</em></strong> (as needed)</p></div></div> </h4> <div style="background-color: #cbf2f6" class="p-3 rounded-3 answer-section ai-message fixed bottom-0 left-10 right-10 z-[100]"> <div class="d-flex justify-content-between flex-d-col"> <h5 class="fw-semibold fs-5">Answer & Explanation <span class="text-primary fw-normal"> <svg width="21" height="30" viewBox="0 0 21 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_116_1173)"> <g clip-path="url(#clip1_116_1173)"> <g clip-path="url(#clip2_116_1173)"> <mask id="mask0_116_1173" style="mask-type: luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="21" height="21"> <path d="M20.5037 4.97021H0.802246V24.6717H20.5037V4.97021Z" fill="white" /> </mask> <g mask="url(#mask0_116_1173)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.05641 6.76177C6.84824 6.69858 7.59996 6.38721 8.20456 5.87197C9.61543 4.66963 11.6906 4.66963 13.1014 5.87197C13.706 6.38721 14.4577 6.69858 15.2495 6.76177C17.0974 6.90923 18.5647 8.37654 18.7122 10.2244C18.7754 11.0162 19.0867 11.7679 19.602 12.3725C20.8043 13.7834 20.8043 15.8585 19.602 17.2694C19.0867 17.874 18.7754 18.6257 18.7122 19.4175C18.5647 21.2654 17.0974 22.7327 15.2495 22.8801C14.4577 22.9434 13.706 23.2547 13.1014 23.77C11.6906 24.9723 9.61543 24.9723 8.20456 23.77C7.59996 23.2547 6.84824 22.9434 6.05641 22.8801C4.20858 22.7327 2.74126 21.2654 2.5938 19.4175C2.53061 18.6257 2.21924 17.874 1.704 17.2694C0.501661 15.8585 0.501661 13.7834 1.704 12.3725C2.21924 11.7679 2.53061 11.0162 2.5938 10.2244C2.74126 8.37654 4.20858 6.90923 6.05641 6.76177ZM15.2177 13.229C15.6985 12.7481 15.6985 11.9685 15.2177 11.4876C14.7368 11.0067 13.9572 11.0067 13.4763 11.4876L9.42165 15.5422L7.82965 13.9503C7.34879 13.4694 6.56914 13.4694 6.08827 13.9503C5.6074 14.4311 5.6074 15.2108 6.08827 15.6917L8.55096 18.1544C9.03183 18.6352 9.81147 18.6352 10.2923 18.1544L15.2177 13.229Z" fill="#026870" /> </g> </g> </g> </g> <defs> <clipPath id="clip0_116_1173"> <rect width="19.7015" height="29.5522" fill="white" transform="translate(0.802246 0.0446777)" /> </clipPath> <clipPath id="clip1_116_1173"> <rect width="19.7015" height="29.5522" fill="white" transform="translate(0.802246 0.0446777)" /> </clipPath> <clipPath id="clip2_116_1173"> <rect width="19.7015" height="19.7015" fill="white" transform="translate(0.802246 4.97021)" /> </clipPath> </defs> </svg> Solved by verified expert </h5> <div class="d-flex align-items-center"> <div class=" d-flex stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <i class="far fa-star"></i> </div> <div class="rating-text">3.7 Ratings (350 Votes)</div></div> </div> <div class="mt-2" id="answer_section"> <span id='short-answer' class='blur-sm hover:blur-none'>Solution Bookjava public class Book private String author private String title private String callNumber public BookString author String title setBookDetailsauthor title public BookString author String title String callNumber setBookDetailsauthor title callNumber public String getAuthor return author public String getTitle return title public String getCallNumber return callNumber public String getBookDetails return thisgetTitle thisgetAuthor thisgetCallNumber public void setBookDetailsString author String title String callNumber thisauthor author thistitle title thiscallNumber callNumber Genrejava import javautilArrayList import javautilIterator public class Genre private String genreName private ArrayList books public GenreString genreName thisgenreName genreName books new ArrayList public</span> <span class="show-answer-btn bg-primary p-2 text-light absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" style="white-space: nowrap;border-radius: 10px !important;" > See Answer </span> </div> </div> </div> </div> <div class="col-sm-4" id="membership-div"> <div class="card text-center shadow"> <h5 class="bg-primary text-light p-3">Get Answers to Unlimited Questions</h5> <div class="card-body p-4"> <p class="card-text">Join us to gain access to millions of questions and expert answers. Enjoy exclusive benefits tailored just for you!</p> <h5 class="card-subtitle text-primary">Membership Benefits:</h5> <ul class="list-unstyled"> <li>Unlimited Question Access with detailed Answers</li> <li>Zin AI - 3 Million Words</li> <li>10 Dall-E 3 Images</li> <li>20 Plot Generations</li> <li>Conversation with Dialogue Memory</li> <li>No Ads, Ever!</li> <li>Access to Our Best AI Platform: <a href="/ai_world"><strong class="flexAI text-primary">Flex AI</strong></a> - Your personal assistant for all your inquiries!</li> </ul> <a href="javascript:;" id="basic_plan" value="1" class="btn btn-primary">Become a Member</a> </div> </div> </div> </div> </main>  <div id="atContainer-6dfdb6c84f48b77fbfc1cbcc7492031c"></div> <section class="container-lg w-100 d-flex flex-column gap-3" style="padding-bottom: 150px"> <h1 class="fw-bold text-start" style="font-size: clamp(30px, 5vw, 45px)">Other questions asked by students</h1>  <div class="d-flex flex-wrap justify-content-center gap-3 mt-5">  <div class="d-flex flex-wrap justify-content-center gap-3 mb-3"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Chemistry</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/biochem-lab-explain-the-basis-for-the-stacking-gel-portion-48164" class="hover:text-blue-600">Biochem Lab: Explain the basis for the stacking gel portion of a polyacrylamide gel. Describe how...</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Psychology</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/what-are-some-mental-models-that-you-see-in-the-91708" class="hover:text-blue-600">What are some mental models that you see in the movie/documentary Fire in the Blood?</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Basic Math</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/shawn-has-been-hired-as-a-sales-associatehorizon-mobile-phone-227735" class="hover:text-blue-600">Shawn has been hired as a sales associateHorizon Mobile Phone Company. He has twosalary options....</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Statistics</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/according-to-the-federal-trade-commission-report-on-consumer-fraud-245773" class="hover:text-blue-600">According to the Federal Trade Commission report on consumer fraud and identity theft 23 of...</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Calculus</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/use-a-linear-approximation-or-differentials-to-estimate-the-given-282701" class="hover:text-blue-600">Use a linear approximation or differentials to estimate the given number Round your answer to...</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Accounting</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/prepare-a-flexible-budget-at-activity-levels-of-16000-units-356917" class="hover:text-blue-600">Prepare a flexible budget at activity levels of 16,000 units and 20,000 units. ...</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Accounting</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/in-preparing-its-statement-of-cash-flows-for-the-year-405114" class="hover:text-blue-600">In preparing its statement of cash flows for the year ended December 31, 2019, Coronado...</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Accounting</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/lou-barlow-a-divisional-manager-for-sage-company-has-an-418840" class="hover:text-blue-600">Lou Barlow, a divisional manager for Sage Company, has an opportunity to manufacture and sell...</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Accounting</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/assume-the-following-account-balances-at-january-1-20x1-accounts-444381" class="hover:text-blue-600">Assume the following account balances at January 1, 20x1: Accounts Receivable (control account) Accounts Receivable-john...</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Accounting</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/the-adjusted-trial-balance-of-cairns-ltd-shows-a-long-446581" class="hover:text-blue-600">The adjusted trial balance of Cairns Ltd shows a long service leave expense of $56,000....</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Accounting</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/problem-1721-algo-pension-disclosure-amortization-of-actuarial-gain-or-447830" class="hover:text-blue-600">Problem 17-21 (Algo) Pension disclosure; amortization of actuarial gain or loss; Supplies \& More [LO17-3,...</a> </p> </div><div class="bg-white p-4 rounded-lg shadow-md border border-gray-200 transform hover:scale-105 transition-transform"> <div class="flex items-center justify-between mb-2"> <div class="bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Accounting</div> <div class="flex items-center text-gray-500 text-xs"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 4.5C6.75 4.5 2.61 7.61 1 12c1.61 4.39 5.75 7.5 11 7.5s9.39-3.11 11-7.5c-1.61-4.39-5.75-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/> </svg> 1.2K views </div> </div> <p class="text-gray-900 font-medium"> <a href="/study-material/question-answers/in-the-assessment-of-an-entity-strategic-plan-and-vision-467895" class="hover:text-blue-600">In the assessment of an entity strategic plan and vision, there are key measures that...</a> </p> </div></div> </div> </div> </section>  <div class="modal fade" id="pricingModal" tabindex="-1" aria-labelledby="pricingModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header bg-primary text-white"> <h4 class="modal-title fw-bold text-white" id="pricingModalLabel">StudyZin's Question Purchase</h4> <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close" style="filter: invert(1);opacity: 1;"></button> </div> <div class="modal-body"> <div class="row text-center">  <div class="col-md-4 mb-4"> <div class="card h-100 shadow-sm border-2 border-info position-relative"> <div class="card-body"> <h5 class="card-title text-info fw-bold">1 Answer</h5> <h6 class="card-price display-6 text-dark">$0.99</h6> <del class="striked-price">$1.99</del> <p style="font-size: 16px">(Save <span class="saved-price">$1</span> )</p> <p class="card-text text-muted">One time Pay</p> <ul class="list-plan"> <li>No Ads</li> <li>Answer to <strong>1</strong> Question</li> <li>Get free Zin AI - <strong>50 Thousand Words</strong> per Month</li> </ul> </div> <div class="card-footer bg-light border-top-0"> <button class="btn btn-info w-100 text-white checkout-button" value="10">Buy Question</button> </div> </div> </div>  <div class="col-md-4 mb-4"> <div class="ribbon-wrapper"><div class="ribbon_custom"><span>Best</span></div></div> <div class="card h-100 shadow-sm border-4 border-primary position-relative"> <div class="card-body"> <h5 class="card-title text-primary fw-bold">Unlimited</h5> <h6 class="card-price display-6 text-dark">$4.99</h6> <del class="striked-price">$9.99</del> <p style="font-size: 16px">(Save <span class="saved-price">$5</span> )</p> <p class="card-text text-muted">Billed Monthly</p> <ul class="list-plan"> <li>No Ads</li> <li>Answers to <strong>Unlimited</strong> Questions</li> <li>Get free Zin AI - <strong>3 Million Words</strong> per Month</li> </ul> <p class="card-text text-muted">First month only</p> </div> <div class="card-footer bg-light border-top-0"> <button class="btn btn-primary w-100 checkout-button" value="1">Buy Membership</button> </div> </div> </div>  <div class="col-lg-4 col-md-4 mb-4"> <div class="card h-100 shadow-sm border-danger"> <div class="card-body"> <h5 class="card-title text-danger fw-bold">Free</h5> <h6 class="card-price display-6 text-dark">$0</h6> <p class="card-text text-muted"></p> <ul class="list-plan"> <li>Get this answer for free!</li> <li>Sign up now to unlock the answer instantly</li> </ul> </div> <div class="card-footer bg-light border-top-0"> <button class="btn btn-danger w-100 login_from_question">Sign Up Now</button> </div> </div> </div> </div> <div class="text-center mt-4"> <p class="text-muted">You can see the logs in the Dashboard.</p> </div> </div> </div> </div> </div> </div> </div> </section> </div> <div class="loader-page position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-dark bg-opacity-75 hidden" style="z-index: 9999;"> <div role="status" style="width: 5rem; height: 5rem;" class="spinner-grow text-white"> <span class="visually-hidden">Loading...</span> </div> </div><footer class="position-relative" style="margin-top: 50px; overflow-x: hidden; max-width: 100%"> <img src="/front/assets/footer/bg-footer-01.png" defer alt="bg-foot" class="d-none d-lg-block position-absolute mx-auto w-100 d-inline-flex bg-footer"/> <img src="/front/assets/footer/mobile-footer-bg.png" defer alt="bg-foot" class="d-block d-lg-none position-absolute mx-auto w-100 mobile-bg-footer"/> <div class="footer-content mx-auto d-lg-flex" style="gap: 0px 120px; max-width: max-content"> <section class="ms-5 d-flex flex-column gap-3" style="margin-top: 10%;"> <div><img src="/front/assets/studyzin-logo.svg" defer alt="Logo" href="/" style="width: 170px; height: 42px; margin-left: 0px" class=""/></div> </section>  <section class="container px-5 row row-cols-2"> <div> <h5 class="text-primary text-start fw-bold">Organization</h5> <div class="mx-auto"> <li class="list-unstyled"> <a style="font-weight: 500" href="/privacy-policy">Privacy Policy</a></li> <li class="list-unstyled"> <a style="font-weight: 500" href="/copyrights">Copyrights</a></li> </li> <li class="list-unstyled"> <a style="font-weight: 500" href="/support">Customer Service</a> </li> </div> </div> <div> <h5 class="text-primary text-start fw-bold">Popular Subjects</h5> <div class="mx-auto"> <li class="list-unstyled" > <a style="font-weight: 500" href="/study-material/question-answers/sciences">Sciences</a></li><li class="list-unstyled" > <a style="font-weight: 500" href="/study-material/question-answers/mathematics">Mathematics</a></li><li class="list-unstyled" > <a style="font-weight: 500" href="/study-material/question-answers/business">Business</a></li><li class="list-unstyled" > <a style="font-weight: 500" href="/study-material/question-answers/engineering">Engineering</a></li><li class="list-unstyled" > <a style="font-weight: 500" href="/study-material/question-answers/computer-science">Computer Science</a></li><li class="list-unstyled" > <a style="font-weight: 500" href="/study-material/question-answers/social-sciences">Social Sciences</a></li> </div> </div> <div> <h5 class="text-primary text-start fw-bold">Services</h5> <div class="mx-auto"> <li class="list-unstyled" > <a style="font-weight: 500" href="/study-material/question-answers"> Sitemap </a> </li> <li class="list-unstyled" > <a style="font-weight: 500" href="/ai_world"> AI Homework Help </a> </li> </div> </div> </section>           <?//= SERVER_PREPEND ?>   </div> <div class="text-center" style="margin-top: 30px"> <h4 style="font-size: 16px; font-weight: 500">All rights reserved @StudyZin</h4> </div> </footer> <div class="smallText center">  </div> <script> $(document).ready(function($) { var qid = "63224"; var planid = 0; function togglePasswordVisibility(event) { const type = event.target.checked ? 'text' : 'password'; document.querySelectorAll('.password_input').forEach(field => field.type = type); } document.querySelectorAll('.show_password').forEach(button => button.addEventListener('change', togglePasswordVisibility) ); function toggleForms() { document.querySelectorAll('.password_input').forEach(field => field.type = 'password'); document.querySelectorAll('.show_password').forEach(checkbox => { checkbox.checked = false; checkbox.dispatchEvent(new Event('change')); }); ['signin', 'signup'].forEach(id => { const form = document.getElementById(id); form.classList.toggle('active'); form.classList.toggle('inactive'); setTimeout(function() { form.classList.toggle('hidden'); }, 600); // Adjust the debounce delay as needed }); } ['button_show_up', 'button_show_in'].forEach(id => document.getElementById(id).addEventListener('click', toggleForms) ); $(document).on("click", "#btn_signin", function(e) { signIn(); }); $('.btn-close').click(function (){ jQuery("#pricingModal").modal('hide'); jQuery("#signModal").modal('hide'); }); $(document).on("keydown", "#email_in,#password_in", function(e) { if (e.key === 'Enter') { signIn(); } }); $(document).on("keydown", "#email_up,#password_up", function(e) { if (e.key === 'Enter') { signUp(); } }); $(document).on("click", "#btn_signup", function(e) { signUp(); }); function signIn(){ jQuery("#password_in").removeClass("form-control-error"); jQuery("#email_in").removeClass("form-control-error"); var u_email = $('#email_in').val(); var u_pass = $('#password_in').val(); if(u_email.trim() == "" || u_pass.trim() == ""){ alert("Please enter email and password!");return; } jQuery.ajax({ type: "POST", url: "/login", data: {u_email:u_email, u_pass:u_pass}, beforeSend: function() { jQuery("#btn_signin").addClass("hidden"); $('.loader-page').removeClass('hidden'); }, success: function(res) { $('.loader-page').addClass('hidden'); try { res = res.trim(); var result = $.parseJSON(res); if(result.err==1) { jQuery("#btn_signin").removeClass("hidden"); jQuery("#password_in").addClass("form-control-error"); jQuery("#email_in").addClass("form-control-error"); jQuery("#error_sign_in").removeClass("hidden").text( result.err_value); return false; } else{ planid = jQuery("#selected_plan_id_without_session").val(); if(planid == -1){ unlockFreeAnswer(qid); }else{ if (window.location.href.includes("/ai_world")) { qid = 0; planid = jQuery("#selected_plan_id_without_session").val(); }else{ if(qid == ""){ qid = 1; } } createCheckoutSession(planid,qid); } } } catch (e) { planid = jQuery("#selected_plan_id_without_session").val(); if(planid == -1){ unlockFreeAnswer(qid); }else { if (window.location.href.includes("/ai_world")) { qid = 0; planid = jQuery("#selected_plan_id_without_session").val(); } else { if (qid == "") { qid = 1; } } //res = res.replace("sign_in", "enter"); createCheckoutSession(planid, qid); //location.reload(); } } } }); } function signUp(){ jQuery("#error_sign_up").addClass("hidden"); var user_pass = $('#password_up').val(); var user_email = $('#email_up').val(); var email_pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; if (!email_pattern.test(user_email)) { alert('Please enter a valid email address.'); return; } // Password validation var password_pattern = /^(?=.[0-9]).{8,}$/; if (!password_pattern.test(user_pass)) { alert('Password must be at least 8 characters long and contain at least one number.'); return; } $.ajax({ type: "POST", url: "/login", data: { 'email_user': user_email, 'pass_user': user_pass, 'r_new_user': 1 }, beforeSend: function() { jQuery("#btn_signup").addClass("hidden"); $('.loader-page').removeClass('hidden'); }, success: function(response) { $('.loader-page').addClass('hidden'); try { response = response.trim(); var result = $.parseJSON(response); if(result.error_cd == 1){ jQuery("#btn_signup").removeClass("hidden"); jQuery("#error_sign_up").removeClass("hidden").text(result.error_message); return false; }else{ jQuery("#btn_signup").removeClass("hidden"); jQuery("#error_sign_up").removeClass("hidden").text( result.message ); return false; } planid = jQuery("#selected_plan_id_without_session").val(); if(planid == -1){ unlockFreeAnswer(qid); }else { if (window.location.href.includes("/ai_world")) { qid = 0; planid = jQuery("#selected_plan_id_without_session").val(); } else { if (qid == "") { qid = 1; } } createCheckoutSession(planid, qid); } } catch (e) { planid = jQuery("#selected_plan_id_without_session").val(); if(planid == -1){ unlockFreeAnswer(qid); }else { if (window.location.href.includes("/ai_world")) { qid = 0; planid = jQuery("#selected_plan_id_without_session").val(); } else { if (qid == "") { qid = 1; } } createCheckoutSession(planid, qid); //location.reload(); } } } }); } }); function createCheckoutSession(plan_id,qid) { gtag_report_conversion(); $('.loader-page').removeClass('hidden'); $.ajax({ url: "/payment", method: 'POST', data: { pay_now: true, qid: qid, plan_id: plan_id, ref_uri: window.location.href }, success: function (session) { // console.log(session);return false; if (typeof session === "string") { try { var res = JSON.parse(session); if (res.hasOwnProperty('payment_url')) { if (res.payment_url) { location.href = res.payment_url; } } if (res.hasOwnProperty('already_availed')) { if (res.already_availed) { location.reload(); } } } catch (e) { console.error("Error parsing JSON:", e); } } else { if(session.id) redirectToCheckout(session.id); else if(JSON.parse(session).url_redirect){ location.href = JSON.parse(session).url_redirect; } } }, error: function (error) { } }); } function unlockFreeAnswer(qid){ $('.loader-page').removeClass('hidden'); $.ajax({ url: document.URL, method: 'POST', data:{ unlock_question:true, qid:qid }, success: function (res) { $('.loader-page').addClass('hidden'); if(res!= 1){ alert("Something went wrong Please try again"); }else{ location.reload(); } } }); } </script> <style> #signin, #signup { transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; } .active { opacity: 1; transform: translateZ(0) scale(1); z-index: 2; } .inactive { opacity: 0; transform: translateZ(-200px) scale(0.8); /position: absolute;/ /top: 0;/ /left: 0;/ /right: 0;/ z-index: 1; } .bg-gradient { background: linear-gradient(to right, #007bff, #6610f2); } @media (max-width: 992px) { #signin, #signup { width: 100%; } } .text-left{ text-align: left !important; } </style>  <div class="modal" id="signModal" style="background: rgba(0, 0, 0, 0.5);" tabindex="-1" aria-labelledby="signModalLabel" aria-hidden="true"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header bg-primary text-white"> <span class="modal-title fw-bold text-white" id="signModalLabel"></span> <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close" style="filter: invert(1);opacity: 1;"></button> <input type="hidden" id="selected_plan_id_without_session" /> </div> <div class="modal-body"> <div class="row text-center">  <div class="col-lg-12 col-md-12 mb-12"> <div id="signin" class="active"> <main class="d-flex flex-column flex-lg-row rounded-5"> <div class="bg-light p-4 p-lg-5 flex-grow-1"> <div class="d-flex flex-column gap-3"> <div> <h2 class="fw-semibold text-left">Sign In</h2> <span class="bg-primary d-block" style="width: 80px; height: 5px"></span> </div> <form class="mt-1"> <div class="mb-3 text-left"> <label for="email_in" class="form-label fw-semibold">Email address</label> <input type="email" class="form-control" id="email_in" placeholder="Enter your Email"> </div> <div class="mb-3 text-left"> <label for="password_in" class="form-label fw-semibold">Password</label> <input type="password" class="form-control password_input" id="password_in" placeholder="Enter password"> </div> <div class="form-check text-left"> <input class="form-check-input show_password" type="checkbox" id="showPassword_in"> <label class="form-check-label" for="showPassword_in">Show password</label> </div> <span id="error_sign_in" class="hidden text-danger"></span> </form> <div class="d-flex flex-column gap-4"> <button id="btn_signin" class=" w-100 bg-gradient text-light rounded-3 btn border-0"> <span>Sign In</span> <span class="ms-2"> <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 5H11M11 5L7.25 1M11 5L7.25 9" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </button>           <h6 class="fw-semibold text-center"> Don't have an account? <a href="javascript:;" id="button_show_up"><span class="text-primary fw-semibold btn btn-primary text-white">Sign Up</span></a> </h6> </div> </div> </div> </main> </div> <div id="signup" class="inactive hidden"> <main class="d-flex flex-column flex-lg-row rounded-5"> <div class="bg-light p-4 p-lg-5 flex-grow-1"> <div class="d-flex flex-column gap-3"> <div> <h2 class="fw-semibold text-left">Sign Up</h2> <span class="bg-primary d-block" style="width: 80px; height: 5px"></span> </div> <form class="mt-1"> <div class="mb-3 text-left"> <label for="email_up" class="form-label fw-semibold">Email address</label> <input type="email" class="form-control" id="email_up" placeholder="Enter your Email"> </div> <div class="mb-3 text-left"> <label for="password_up" class="form-label fw-semibold">Password</label> <input type="password" class="form-control password_input" id="password_up" placeholder="Enter password"> </div> <div class="form-check text-left"> <input class="form-check-input show_password" type="checkbox" id="showPassword_up"> <label class="form-check-label" for="showPassword_up">Show password</label> </div> <span id="error_sign_up" class="hidden text-danger"></span> </form> <div class="d-flex flex-column gap-4"> <button id="btn_signup" class="w-100 bg-gradient text-light rounded-3 btn border-0"> <span>Sign Up</span> <span class="ms-2"> <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 5H11M11 5L7.25 1M11 5L7.25 9" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </span> </button>           <h6 class="fw-semibold text-center"> Already have an account? <a href="javascript:;" id="button_show_in"><span class="text-primary fw-semibold btn btn-primary text-white">Sign In</span></a> </h6> <h6 class="fw-semibold text-center"> By joining you agree to our <a href="/privacy-policy" rel="noopener noreferrer" target="_blank">Privacy Policy</a> | <a href="/copyrights" rel="noopener noreferrer" target="_blank">Terms & Conditions</a> </h6> </div> </div> </div> </main> </div> </div> </div> </div> </div> </div> </div> <style> .sticky-share { position: fixed; right: 0; top: 50%; z-index: 1000; transform: translateY(-50%); background-color: #f9f9f9; border-radius: 10px 0 0 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .share-button { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px; cursor: pointer; transition: all 0.3s ease; } .share-button img { width: 24px; height: 24px; } .share-button:hover { background-color: #ddd; } .share-button::after { content: attr(data-label); position: absolute; left: 120%; / Adjusted to position outside the icon */ top: 50%; transform: translateY(-50%); background-color: #333; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 4px; opacity: 0; white-space: nowrap; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .share-button:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } </style> </body> </html>