jendoe0110.github.io/part3_5.html at main · jendoe0110/jendoe0110.github.io · 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>State Information Lookup</title>
    <style>
        body {
            background-color: lightblue; /* Correct color declaration */
            color: white;
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .button {
            background-color: red;
            color: white;
            padding: 10px 20px;
            margin: 10px 0;
            border: none;
            cursor: pointer;
        }
        .button:hover {
            background-color: darkred;
        }
        .result {
            background-color: white;
            color: black;
            padding: 20px;
            margin-top: 10px;
        }
        a {
            color: white;
        }
    </style>
</head>
<body>
    <h1>State Information Lookup</h1>
    <a href="homework5.html">Go back to Homework 5 Main Page</a>
    <form id="stateForm" onsubmit="event.preventDefault(); getStateInfo();">
        <input type="text" id="stateInput" placeholder="Type state name or abbreviation" onkeypress="if(event.keyCode==13){getStateInfo();}">
        <input type="button" value="State Info" class="button" onclick="getStateInfo()">
        <input type="reset" value="Clear" class="button">
        <div id="output" class="result"></div>
    </form>

    <script>
        const statesData = [
            { abbr: 'AL', name: 'Alabama', capital: 'Montgomery', population: '4,903,185' },
            { abbr: 'AK', name: 'Alaska', capital: 'Juneau', population: '731,545' },
            { abbr: 'AZ', name: 'Arizona', capital: 'Phoenix', population: '7,278,717' },
            { abbr: 'AR', name: 'Arkansas', capital: 'Little Rock', population: '3,017,825' },
            { abbr: 'CA', name: 'California', capital: 'Sacramento', population: '39,512,223' },
            { abbr: 'CO', name: 'Colorado', capital: 'Denver', population: '5,758,736' }
            // Add additional states as needed
        ];

        function getStateInfo() {
            const userInput = document.getElementById('stateInput').value.trim().toLowerCase();
            const outputDiv = document.getElementById('output');
            const state = statesData.find(s => s.abbr.toLowerCase() === userInput || s.name.toLowerCase() === userInput);

            if (state) {
                outputDiv.innerHTML = `Thanks for your inquiry, here is the information you requested:<br>
                                      State abbr = ${state.abbr}<br>
                                      State Name = ${state.name}<br>
                                      Capital = ${state.capital}<br>
                                      Population = ${state.population}`;
            } else {
                outputDiv.innerHTML = "Sorry, we do not have information about this state! We only have information about the following states:<br>" +
                                      statesData.map(s => `${s.name} (${s.abbr})`).join(', ');
            }
        }

        document.getElementById('stateForm').onreset = function() {
            document.getElementById('output').innerHTML = '';
        };
    </script>
</body>
</html>