codeup-web-exercises/jquery_faq.html at main · John-Alejandro/codeup-web-exercises · 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
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery_faq.html</title>
    <script src="/js/jquery_faq.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

</head>
<body>
<h1><strong>Frequently Asked Park Questions</strong></h1>

<dl>
    <dt><strong>1. Seasonal Closures</strong></dt>
    <dd>Winter season closed</dd>

    <dt><strong>2. Hours of Operation</strong></dt>
    <dd>6 am - 9 pm </dd>

    <dt><strong>3. Fire Arms</strong></dt>
    <dd>All Federal parks do not allow fire arms</dd>

    <dt><strong>4. Rules</strong></dt>
    <dd> Lorem ipsum dolor sit amet, consectetur</dd>

    <dt><strong>5. Animal Encounters</strong></dt>
    <dd> Lorem ipsum dolor sit amet, consectetur</dd>

    <dt><strong>6. Camping</strong></dt>
    <dd>Lorem ipsum dolor sit amet, consectetur</dd>

    <dt><strong>7. Swimming</strong></dt>
    <dd>Lorem ipsum dolor sit amet, consectetur</dd>

    <dt><strong>8. Tours</strong></dt>
    <dd>Lorem ipsum dolor sit amet, consectetur</dd>

    <dt><strong>9. Hiking Trails</strong></dt>
    <dd>Lorem ipsum dolor sit amet, consectetur</dd>

    <dt><strong>10. Internships</strong></dt>
    <dd>Lorem ipsum dolor sit amet, consectetur</dd>
</dl>
<h3>Big Bend</h3>
<ul>
    <li>West Texas</li>
    <li>Borders Mexico</li>
    <li>Dry Climate</li>
    <li>Large Area</li>
</ul>

<h3>Death Valley</h3>
<ul>
    <li>Eastern California</li>
    <li>Elevation -282.2'</li>
    <li>Hottest Temp: 134 Degrees</li>
    <li>3,000 square miles</li>
</ul>
<h3>Yellow Stone</h3>

<ul>
    <li>Western United States</li>
    <li>In 3 states</li>
    <li>Old Faithful</li>
    <li>2,219,791 acres</li>
</ul>

<script
        src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
        crossorigin="anonymous"></script>

<script
        src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
        crossorigin="anonymous"></script>
<button id="makeYellow">Click To Highlight</button>
<a id="clickForAnswers" href="">Click for Answers</a>
<script>
    $("#clickForAnswers").click(function (e) {
        e.preventDefault();
        $("dd").toggleClass("invisible");
    });

    $("dt").click(function () {
        $(this).css({"background-color": "yellow", "width": "11%"})
    });

    $("#makeYellow").click(function (e) {
        e.preventDefault();
        $("ul").each(function () {
            $(this).children().last().css("background-color","yellow");
        })
    })

    $("h3").click(function (e) {
        e.preventDefault();
        $(this).next().css("font-weight","bold")
    })

    $("li").click(function (e) {
        e.preventDefault();
        $(this).parent().children().first().css("color","blue")
    })
</script>
</body>
</html>