<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin
=
"anonymous"
>
integrity
=
"sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww=="
crossorigin
=
"anonymous"
>
</
script
>
<
style
>
);
</
style
>
<
style
>
mark.a0 {
color: black;
padding: 5px;
background: greenyellow;
}
mark.a1 {
color: black;
padding: 5px;
background: cyan;
}
mark.a2 {
color: black;
padding: 5px;
background: red;
}
mark.a3 {
color: white;
padding: 5px;
background: green;
}
mark.a4 {
color: black;
padding: 5px;
background: pink;
}
</
style
>
</
head
>
<
body
style
=
"border:4px solid rgb(0, 128, 28);"
>
<
h1
style="font-family: 'Roboto Slab',
serif;text-align: center;color:green;">
GeeksForGeeks
</
h1
>
<
br
><
br
>
<
form
>
<
div
class
=
"container-fluid"
align
=
"center"
>
<
input
type
=
"text"
size
=
"30"
placeholder
=
"search..."
id
=
"searched"
style="border: 1px solid green;
width:300px;height:30px;">
<
button
type
=
"button"
class
=
"btn-primary btn-sm"
style="margin-left:-5px;height:32px;width:35px;
background-color:rgb(12, 138, 12);
border:0px;"
onclick
=
"highlight('0');"
>
<
i
class
=
"fa fa-search"
></
i
>
</
button
>
</
div
>
</
form
>
<
br
><
br
>
<
div
align
=
"center"
>
<
div
>
<
b
><
i
>Choose the color of highlighter:</
i
></
b
>
</
div
>
<
br
>
<
div
style="background-color: cyan;
width: 20px; height: 20px;
display: inline-block; margin-left: -30px;"
onmouseover
=
"highlight('1')"
>
</
div
>
<
div
style="background-color: red;
width: 20px; height: 20px;
display: inline-block; margin-left: 10px;"
onmouseover
=
"highlight('2')"
>
</
div
>
<
div
style="background-color: green;
width: 20px; height: 20px;
display: inline-block; margin-left: 10px;"
onmouseover
=
"highlight('3')"
>
</
div
>
<
div
style="background-color: pink;
width: 20px; height: 20px;
display: inline-block; margin-left: 10px;"
onmouseover
=
"highlight('4')"
>
</
div
>
</
div
>
<
div
class
=
"container-fluid"
style=
"padding-left: 30%; padding-right: 30%;
padding-top: 5%;">
<
p
class
=
"select"
>
GeeksforGeeks.org was created with a
goal in mind to provide well written,
well thought and well explained solutions
for selected questions.The core team of
five super geeks constituting of technology
lovers and computer science enthusiasts
have been constantly working in this
direction.
</
p
>
</
div
>
<
script
>
function highlight(param) {
// Select the whole paragraph
var ob = new Mark(document.querySelector(".select"));
// First unmark the highlighted word or letter
ob.unmark();
// Highlight letter or word
ob.mark(
document.getElementById("searched").value,
{ className: 'a' + param }
);
}
</
script
>
</
body
>
</
html
>