HTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you! Given the following word search application, which searches for words in paragraphs, modify it so that it Adds two spans tab within the HTML within the designated new "Illustate" text segments as shown below. Has a new click event which searches the occurrence of the word within all span tabs residing within the first div container , then highlights the text in the span tab which contains the word c) In the same routine, count the number of times ( using a global variable) that the word is found Within the object array loop for span tabs ( where the indexOf statement is located) and after all span tabs are highlighted, send that number to a new html element ( a div, h1, span, p choice is up to you). The count should be continually accumulated and should show the total number of times a word is found in a span tab for all user activated clicks of the search button for all click searches activated by the use The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ... The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ... On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ... Richard L. Bloch, investment broker/real estate developer... Karl Eller, outdoor advertising company owner and former... Donald Pitt, Tucson-based attorney; Don Diamond, Tucson-based real estate investor. Page by Unknown Author. Some (all) information taken from Wikipedia. Search for text: Search JAVASCRIPT FILE dom_2_newp.js function searchClick() { var searchPhrase = document.getElementById("searchtext").value; var main = document.getElementById('main'); var mainParas = main.getElementsByTagName('p'); for (var i = 0; i < mainParas.length; i++) { if (mainParas[i].textContent.indexOf(searchPhrase) >= 0) { mainParas[i].classList.add('highlighted');} // highlight else { mainParas[i].classList.remove('highlighted'); // un-highlight } } } const document1 = document.querySelector('#searchbutton'); document1.addEventListener('click',searchClick); CSS FILE OUTSTYLE.CSS /* A style for paragraphs that have been highlighted from a search. */ .highlighted { background-color: yellow; border: 1px dashed #666600; font-weight: bold; } .parlen{ width:50px;} .highlighted1{ background-color:yellow;}
HTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you!
Given the following word search application, which searches for words in paragraphs, modify it so that it
- Adds two spans tab within the HTML within the designated new "Illustate" text segments as shown below.
- Has a new click event which searches the occurrence of the word within all span tabs residing
within the first div container , then highlights the text in the span tab which contains the word
c) In the same routine, count the number of times ( using a global variable) that the word is found
Within the object array loop for span tabs ( where the indexOf statement is located) and
after all span tabs are highlighted, send that number to a new html element ( a div, h1, span, p
choice is up to you). The count should be continually accumulated and should show the total
number of times a word is found in a span tab for all user activated clicks of the search button
for all click searches activated by the use
<html>
<head>
<link rel="stylesheet" href="outstyle.css">
<script src="dom_2_newp.js" defer></script>
</head>
<body>
<div id="main">
<p>The Phoenix Suns are a professional basketball team based in
Phoenix, Arizona. They are members of the ...</p>
<p>The Suns have been generally successful since they began play as an
expansion team in 1968. In forty years of play they have posted ...</p>
<p>On January 22, 1968, the NBA awarded expansion franchises to an
ownership group from Phoenix and one from Milwaukee. ...</p>
<ul>
<li>Richard L. Bloch, investment broker/real estate developer...</li>
<li>Karl Eller, outdoor advertising company owner and former...</li>
<li>Donald Pitt, Tucson-based attorney;</li>
<li>Don Diamond, Tucson-based real estate investor.</li>
</ul>
</div>
<p>Page by Unknown Author. <br />
Some (all) information taken from Wikipedia.</p>
<hr />
<div>
Search for text:
<input id="searchtext" type="text" />
<button id="searchbutton">Search</button>
</div>
</body>
</html>
JAVASCRIPT FILE dom_2_newp.js
function searchClick() {
var searchPhrase = document.getElementById("searchtext").value;
var main = document.getElementById('main');
var mainParas = main.getElementsByTagName('p');
for (var i = 0; i < mainParas.length; i++) {
if (mainParas[i].textContent.indexOf(searchPhrase) >= 0)
{ mainParas[i].classList.add('highlighted');} // highlight
else {
mainParas[i].classList.remove('highlighted'); // un-highlight
}
}
}
const document1 = document.querySelector('#searchbutton');
document1.addEventListener('click',searchClick);
CSS FILE OUTSTYLE.CSS
/* A style for paragraphs that have been highlighted from a search. */
.highlighted {
background-color: yellow;
border: 1px dashed #666600;
font-weight: bold;
}
.parlen{
width:50px;}
.highlighted1{
background-color:yellow;}
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 4 images
