My-HTML-CSS-JAVASCRIPT-Mini-Projects/searchText.html at main · KalamPinjar/My-HTML-CSS-JAVASCRIPT-Mini-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        body {
            height: 100vh;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 30px;
            flex-direction: column;
            background: rgba(0, 0, 0, 0.548);
        }

        #searchBox {
            width: 50%;
            height: 50px;
            display: flex;
            flex-flow: row nowrap;
        }

        #input {
            width: 80%;
            border: none;
            outline: none;
            padding: 10px 20px;
            font-size: 20px;
        }

        #searchBtn {
            padding: 10px 20px;
            margin-left: 10px;
            border: none;
            background: white;
            font-weight: bold;
            cursor: pointer;
        }

        .content-container {
            width: 90%;
            color: #fff;
            font-size: 20px;
            padding-top: 20px;

            text-align: justify;
            max-width: 700px;
            margin-top: 20px;
            font-family: sans-serif;

            /* Javascript */

            mark {
                background: crimson;
            }
        }
    </style>
</head>

<body>
    <div id="searchBox">
        <input type="text" name="input" id="input" placeholder="Search" />
        <button id="searchBtn">Search</button>

    </div>

    <div class="content-container" id="content">
        <p id="p">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis necessitatibus iusto eum explicabo,
            dolores eaque dicta ea, accusantium voluptatum modi praesentium omnis alias debitis? Magnam maxime ab
            doloribus omnis rem? Ducimus hic earum et ex, itaque aut sed maiores, vero totam nesciunt perferendis
            repudiandae nisi. Blanditiis fuga amet aliquam fugiat dolorem distinctio obcaecati facere aperiam dolor
            suscipit, autem molestias minus consectetur qui doloribus at doloremque officia corporis sapiente accusamus
            neque voluptates in. Tempora laudantium expedita facilis nostrum. Sunt deserunt pariatur iusto saepe iure
            aliquam aliquid delectus, aut laboriosam eveniet qui autem dignissimos. Pariatur dolorem nesciunt animi
            ullam voluptate aspernatur id?
        </p>
    </div>


    <script>

        const p = document.getElementById("p")
        const searchBtn = document.getElementById("searchBtn")


        searchBtn.addEventListener("click", () => {
            let input = document.getElementById("input").value

            if (input !== "") {
                let regExp = new RegExp(input, "gi");
                p.innerHTML = p.textContent.replace(regExp, "<mark>$&</mark>")
            }
        })
    </script>
</body>

</html>