Java script add event help needed
5) In the "myPage" section, select the fifth
// button and assign a "click" listener. When
// clicked, it should toggle the class named
// "fourthPara" for the fifth paragraph
// in the "myPage" section.
// 6) In the "myPage" section, select the sixth
// button and assign a "click" listener. When
// clicked, it should change the text content
// of the sixth paragraph in the "myPage"
// section to:
// "Event Bubbling. Stopping propagation."
// Your event listener should be set to
// Event Bubbling. You should stop the
// event propagation.
HERE IS THE INDEX HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Assignment 11</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.1.1/mocha.css"
integrity="sha512-Ytt2foRGKdIInPXwyS3gxRvfTv4n2wi7uB7neCLH1LjExT+PKBeQu6LNVB4QpHaJqx7m2btagBs4kqxYC1QNFg=="
crossorigin="anonymous" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<section id="hiddenSection" class="hiddenSection">
<div class="buttons-container">
<button>One</button>
<button>Two</button>
<button>Three</button>
<button>Four</button>
<button>Five</button>
<button>Six</button>
</div>
<div class="para-container">
<p>Paragraph One.</p>
<p>Paragraph Two.</p>
<p>Paragraph Three.</p>
<p>Paragraph Four.</p>
<p>Paragraph Five.</p>
<p>Paragraph Six.</p>
</div>
<hr />
</section>
<section id="myPage" class="myPage">
<div class="buttons-container">
<button id="button1">One</button>
<button id="button2">Two</button>
<button>Three</button>
<button>Four</button>
<button>Five</button>
<button>Six</button>
</div>
<div class="para-container">
<p id="p1">Paragraph One.</p>
<p id="p2">Paragraph Two.</p>
<p>Paragraph Three.</p>
<p>Paragraph Four.</p>
<p>Paragraph Five.</p>
<p>Paragraph Six.</p>
</div>
<hr />
</section>
<section id="tests">
<div class="directions">
<p>
<span id="reloadPage">Refresh this page</span> to see your score update
after you have made changes to your Javascript code in the main.js file.
</p>
<p>
When you are ready to submit your assignment, click the submit button.
</p>
<button id="submitButton">Submit Your Assignment</button>
</div>
<div id="mocha"></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.1.1/mocha.min.js"
integrity="sha512-vOMXB+Rjob/NIG88cgEK+t6Uuf0zJIzQrfKH8VFc7AW18y/rzszRXaKPNAPf1ePv2hQ3eYR8yEu4S85Np3DhLA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"
integrity="sha512-x3BwhuxT44pOQZanacQyDnrB2r1L1AUfjUaefYArTHR9sHEvvy3NSnnm5Z7GAl5YPc3+GEWFT0S34obDSzUvaQ=="
crossorigin="anonymous"></script>
<script>
mocha.setup("bdd");
</script>
<script src="main.js"></script>
<script src="https://serene-roentgen-345cd7.netlify.app/tests/practice11Test.min.js"></script>
<script>
mocha.run();
</script>
<script src="https://serene-roentgen-345cd7.netlify.app/util/util11.min.js"></script>
</body>
</html>
Trending nowThis is a popular solution!
Step by stepSolved in 4 steps with 1 images
- Java prgm basedarrow_forwardGUI calculator in python - The user enters two integers into the text fields. - When the Add button is pressed, the sum of values in the text fields are shown after the Equals: as a label. - The Clear button clears the values in the text fields and the result of the previous calculation. The cleared values can be blank or zero. - The Quit button closes the GUI window.arrow_forwarduser story: place order as a new customer, i want to place a coffee order using the web application, so that i can buy coffee. acceptance criteria: the user can log in to the application. the user can access their account and place an order. tasks: when the user logs in, take them to a page that allows them to place a coffee order. Create an cart.js script and reference it in the page. In this script, create a class that represents an order. it should have a date, product ( you will need to create another class for this that contains the name and price), size (could be small, medium or large) and quantity. As the user selects coffee items, update a cart with this script. Use an array to or web storage to store the items they select. Implement a checkout page that displays the items they ordered. The checkout page should display the total they need to pay.arrow_forward
- Modify the Dice Poker program from this chapter to include any or all of the following features: 1- Splash Screen. When the program first fires up, have it print a short introductory message about the program and buttons for "Let's Play" and "Exit." The main interface shouldn't appear unless the user se- lects "Let's Play." 2-Add a "Help" button that pops up another window displaying the rules of the game (the payoffs table is the most important part). 3-Add a high score feature. The program should keep track of the 10 best scores. When a user quits with a good enough score, he/she is invited to type in a name for the list. The list should be printed in the splash screen when the program first runs. The high-scores list will have to be stored in a file so that it persists between program invocations.arrow_forwardPython GUI tkinter: Using tkinter create a GUI that displays the word cat. The user clicks on the word and sees its synonyms as replacements. When the user selects a desired synonym the synonym replaces the original word. For example: cat The user clicks on that word and has these options listed in a listbox: animal friend companion The user clicks on animal so the GUI now says: animalarrow_forwardExpert this is warming, don't use any AI platform and don't give plagiarised response to me. If I see plagiarism and AI detection I'll report your account and reduce rating.You have a basic User class for a social media platform. Your task is to enhance the class by introducing a new method called 'post_status.' This method should take a single parameter, which is the status message that the user wants to post. The objective is to implement this method to update the user's status.Next, instantiate a new object of the User class, naming it 'SocialUser.' Utilize the extended class with the newly added 'post_status' method. Your next step is to post three distinct status messages for 'SocialUser'—namely, 'Excited for the weekend!', 'Just finished a great book!', and 'Exploring new hobbies!'To conclude, utilize the 'display_info' method to showcase the updated information about 'SocialUser.' Verify that the output includes details about the newly added status messages, ensuring that they…arrow_forward
- JAVA:arrow_forwardSemantic Distance is the distance between what people want to do and the meaning of an interface element. Select one: O True O Falsearrow_forwardNeed help with coding this in python using tkinter Write a GUI program to let the user enter a file name from an entry field and then count the number of occurrences of each letter in that file. Clicking theShow Result button displays the result in a text widget. You need to displaya message in a message box if the file does not exist. https://www.bartleby.com/questions-and-answers/need-help-with-coding-this-in-python-using-tkinter-write-a-gui-program-to-let-the-user-enter-a-file-/153862b8-6d38-47a4-bd38-9c66882021d1arrow_forward
- Im creating a Web page that calculates a tip, total bill, and splits the bill based on user info. Javascript. See instructions.arrow_forwardOpenGL Programming Help (please provide a screenshot that it works) Write a program that creates a three-dimensional figure of the University logo "IU" that animates. The In response to the menu selection, one of the two letters will spin about a vertical axis. When the user clicks on the right mouse button and selects the menu option to spin the “U”, the “I” should stop spinning and the “U” should spin in the same manner. At no point should both letters spin at the same time. This should use a display listarrow_forward#Testing Please test my code and see if it meet the follwing needs: The class should implement the Comparable interface. Circle one is less than Circle two if the radius of Circle one is less than the radius of Circle two. The two Circles are equal if they have the same radius. Circle one is larger than Circle two if its radius is larger. If circle One.compareTo circle Two <> 0 The Test Class displays a menu that allows the user to: Enter a Circle (the user only needs to enter the radius). Print all Circles (print the toString for each Circle in the ArrayList). Quit To adda a circle Cases: The ArrayList is empty The new circle is less than the first circle, add it at the beginning. The circle is greater than the last circle, add it at the end The new circle belongs somewhere in the middle. import java.lang.Math;public class Circle implements Comparable<Circle> {private double radius;public Circle(double radius) {this.radius = radius;}public double findArea()…arrow_forward
- Computer Networking: A Top-Down Approach (7th Edi...Computer EngineeringISBN:9780133594140Author:James Kurose, Keith RossPublisher:PEARSONComputer Organization and Design MIPS Edition, Fi...Computer EngineeringISBN:9780124077263Author:David A. Patterson, John L. HennessyPublisher:Elsevier ScienceNetwork+ Guide to Networks (MindTap Course List)Computer EngineeringISBN:9781337569330Author:Jill West, Tamara Dean, Jean AndrewsPublisher:Cengage Learning
- Concepts of Database ManagementComputer EngineeringISBN:9781337093422Author:Joy L. Starks, Philip J. Pratt, Mary Z. LastPublisher:Cengage LearningPrelude to ProgrammingComputer EngineeringISBN:9780133750423Author:VENIT, StewartPublisher:Pearson EducationSc Business Data Communications and Networking, T...Computer EngineeringISBN:9781119368830Author:FITZGERALDPublisher:WILEY