What Web developers are responsible for is that they make sure that all the content that is needed for the website is clear, visible, and found in the right place. In some cases, front-end developers may also have content writing skills, allowing them to create the content for the website as they go. As a Web developer, given the HTML and CSS below, design and write the JavaScript code to add behavior to the designed user interface of the client. The web platform you suppose to design, performs a comparison of lines of two pieces or more of texts placed into two text area elements on the web page. Use the instructions below to compose the desired interactive web page”: • When the client clicks “Compare” button, they should compare the two pieces of texts, line by line in the designed texts areas. • Make sure the information supplied in text areas can be separated by new line. • If a given line of the expected output does not match the corresponding line at the same index in the actual output, a new ordered list item should appear in the ordered list with id of differences. • If the two text areas have a different number of lines or input texts are different, an ordered list should be added that states that the number of lines differs and shows the lengths, as indicated on the below image example. • If the “Compare” button is clicked multiple times, any ordered list from past runs should be removed before going forward. • If there are any differences, the order list should be given the CSS class name called change with the message “Texts are different” on the top of the . • If there are not any differences, a single should be placed into the list that says, “No differences found”, and the ul should be given the class nochange.

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

100%

What Web developers are responsible for is that they make sure that all the content that is needed for the website is clear, visible, and found in the right place. In some cases, front-end developers may also have content writing skills, allowing them to create the content for the website as they go. As a Web developer, given the HTML and CSS below, design and write the JavaScript code to add behavior to the designed user interface of the client. The web platform you suppose to design, performs a comparison of lines of two pieces or more of texts placed into two text area elements on the web page. Use the instructions below to compose the desired interactive web page”:

• When the client clicks “Compare” button, they should compare the two pieces of texts, line by line in the designed texts areas.

• Make sure the information supplied in text areas can be separated by new line.

• If a given line of the expected output does not match the corresponding line at the same index in the actual output, a new ordered list item should appear in the ordered list

with id of differences.

• If the two text areas have a different number of lines or input texts are different, an ordered list should be added that states that the number of lines differs and shows the lengths, as indicated on the below image example.

• If the “Compare” button is clicked multiple times, any ordered list from past runs should be removed before going forward.

should be placed into the list that says, “No differences found”, and the ul should be given the class nochange.

The web platform you suppose to design, performs a comparison of lines of two pieces
or more of texts placed into two text area elements on the web page. Use the
instructions below to compose the desired interactive web page":
• When the client clicks "Compare" button, they should compare the two pieces
of texts, line by line in the designed texts areas.
Make sure the information supplied in text areas can be separated by new line.
If a given line of the expected output does not match the corresponding line at
the same index in the actual output, a new ordered list item should appear in
the ordered list <ol> with id of differences.
If the two text areas have a different number of lines or input texts are
different, an ordered list should be added that states that the number of lines
differs and shows the lengths, as indicated on the below image example.
• If the "Compare" button is clicked multiple times, any ordered list from past runs
should be removed before going forward.
• If there are any differences, the order list <ol> should be given the CSS class
name called change with the message "Texts are different" on the top of the
<ol>.
• If there are not any differences, a single <ol> should be placed into the list that
says, "No differences found", and the ul should be given the class nochange.
NB: The relevant HTML/CSS code is the following.
<div class="column">
<h2>Expected output</h2>
<textarea id="expected" rows="10" cols="35"></textarea>
</div>
<div class="column">
<h2>Your Actual output</h2>
<textarea id="actual" rows="10" cols="35"></textarea>
</div>
<div id="comparearea">
<button id="compare">Compare</button>
</div>
<ul id="differences"></ul>
.column {
float: left;

margin-right: 1em;
#comparearea ( clear: left; }
#differences li {
font-family: monospace;
white-space: pre;
.nochange { background-color: tccffcc: }
.change { background-color: te5b7b7:
font-weight: bold;}
The following screenshots show the initial state and state after some various text
stages has been compared with the output messages.
Step 1
Expected output Your actual output
Compare
Step 2
Expected output Your actual output
app le
banana
chaca late
apple
banana
chacalate
Compare
• No differences found
Step 3
Expected output Your actual output
Aple
banana splst
chacelate
duahnat
lant
apple
tande
chacolate chip caokse
che larraine
pepera
Campan
< banana spit
> fene
2 Lie S
lant
> quiche larraine
3 Lengths differi 5, >

Expert Solution

Step by step

Solved in 5 steps with 3 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions