Projects-Palindrome_Checker/index.html at main · quintincodes/Projects-Palindrome_Checker · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Palindrome Checker</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <h1>Palindrome Checker</h1>
            <input type="text" id="text-input" placeholder="Enter a word" />
            <button id="check-btn">Check</button>
            <button id="reset" onclick="window.location.reload()">Reset</button>
            <div id="definition-div">
                <p id="definition">
                    A palindrome is a word, phrase, number, or other sequence of
                    characters that reads the same forward and backward
                    (ignoring spaces, punctuation, and capitalization).
                </p>
            </div>
            <div id="reverse-animation"></div>
            <div id="final-word"></div>
            <div id="result"></div>
            <div id="special-message" class="hidden">
                Numbers can be palindromes but 2025 isn't
            </div>
            <audio id="success-audio" src="Assets/success.wav"></audio>
            <audio id="error-audio" src="Assets/error.wav"></audio>
            <audio id="new-year-audio" src="Assets/new-year.m4a"></audio>
        </div>
        <script src="script.js"></script>
    </body>
</html>