simple-string-visualizer/index.html at main · ellieya/simple-string-visualizer · 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
<html>
    <head>
        <style>
            body {
                margin: 0;
                padding: 0;
                font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            }
            table {
                border-collapse: collapse;
            }
            td {
                text-align: center;
                border: 1px solid black;
                padding: 2px;
                margin: 0;
                width: 15px;
            }
        </style>
        <script>
            clickHandler = () => {
                stringValue = document.getElementById("string-holder").value
                charsElement = document.getElementById("chars")
                numbersElement = document.getElementById("numbers")

                //Reset everything
                charsElement.innerHTML = "<td>CHARACTER</td>"
                numbersElement.innerHTML = "<td>INDEX</td>"
                charactersHTMLString = ""
                numbersHTMLString = ""
                for (let i in stringValue) {
                    console.log(stringValue[i])
                    charactersHTMLString += "<td>" + stringValue[i] + "</td>"
                    numbersHTMLString += "<td>" + i + "</td>"
                }

                charsElement.innerHTML += charactersHTMLString
                numbersElement.innerHTML += numbersHTMLString
            }
        </script>
    </head>
    <body>
        String: <input type="text" id="string-holder"> <button onclick="clickHandler()">Go</button>
        <table id="table" style="border:1px solid black">
            <tr id="chars">
                <td>
                    CHARACTER
                </td>
            </tr>
            <tr id="numbers">
                <td>
                    INDEX
                </td>
            </tr>
        </table>
    </body>
</html>