Is anyone able to help with me writing this code in a simplified way ? Write the
ID: 3916765 • Letter: I
Question
Is anyone able to help with me writing this code in a simplified way ?
Write the JavaScript code to add behavior to a web page for manipulating strings. The page UI allows the user to type a phrase into a text box. The user can click the "Go!" button to display the words in that phrase in reverse order. Each word in the phrase should be inserted as a span with a class of word, inside a div with the id of words. (The word class gives the spans their appearance in the screenshots belovw giving them a border and a background and so on.) Every other word (the first, third, fifth, etc.) should also be underlined. The user can optionally specify a "filter" text by typing into a text box with the id of filter. If a non-blank filter is specified, you should exclude any words from the phrase that contain that filter text, case-insensitively. For example, if the filter text is "abc," exclude any words containing abc, ABC, aBs, etc. If any words are excluded, under the list of words you should modify the div with id of count to display text of the form, "5 word(s) filtered out." The code should work for multiple clicks of the button. On each click it should clear any previous information you injected. You may assume that words in the phrase are separated by single spaces. Do not use any JavaScript libraries such as jQuery or Prototype. Here is the relevant HTML code for the page 5entence Reverser! Phrase : FilterExplanation / Answer
If you have any doubts, please give me comment...
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
span {
font-weight: bold;
color: red;
a border: 1px dotted red;
margin: 3px;
padding: 10px;
display: inline-block
}
</style>
</head>
<body>
<h1>Sentence Reverser!</h1>
<div> Phrase: <input id="phrase" type="text" size="40" /> </div>
<div> Filter: <input id="filter" type="text" size="10" /> </div>
<div> <button id="go">Go!</button> </div>
<div id="words"> </div>
<div id="count"> </div>
<script type="text/javascript">
$(document).ready(function() {
$("#go").click(function() {
$("#words").html("");
var phraseVal = $("#phrase").val().split(/s/);
var filterVal = $("#filter").val();
var count = 0;
for (var i = phraseVal.length - 1; i >= 0; i--) {
if (phraseVal[i].toLowerCase().indexOf(filterVal.toLowerCase()) == -1 || filterVal == "") {
var str = "<span>";
if (i % 2 == 0)
str += "<u>" + phraseVal[i] + "</u>";
else
str += phraseVal[i];
str += "</span>";
$("#words").append(str);
count++;
}
}
if (filterVal != "")
$("#count").html(count + "word(s) filtered out.");
})
});
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.