codeup-web-exercises/jquery_faq.html at main · Geniece-Tims/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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dubai FAQs</title>
  <style>
    .invisible {
      visibility: hidden;
    }
    body {
      background-color: white;
    }
    h1 {
      text-decoration: underline;
      text-align: center;
      font-size: 36px;
    }
    #highlightButton p {
      text-align: center;
      font-size: 20px;
    }
    .super-mario p {
      text-align: center;
      color: red;
      font-size: 24px;
    }
    .logo {
      width: 50%;
      border: none;
      margin-left: 400px;
    }

    .top-row, .middle-row, .bottom-row {
      display: flex;
      justify-content: space-around;
      margin: 80px;
    }
    .frame {
      width: 200px;
      height: 200px;
      margin: 10px;
      padding: 10px;
      text-align: center;
    }
    .swapButton {
      margin-left: 50px;
      background-color: red;
      color: white;
      border: none;
      border-radius: 3px;
      font-size: 20px;
      width: 100px;


    }
    img {
      width: 220px;
      height: 220px;
      background: transparent;
      border: 10px solid black;
      border-radius: 5px;
    }
  </style>

</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
  <img src="../../../../var/folders/54/vnkq7cf562n5f_vzqp0qwhtc0000gn/T/TemporaryItems/NSIRD_screencaptureui_5Inqrm/Screenshot 2023-05-24 at 10.16.14 PM.png"/>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
</script>
<h1>Here are 10 frequently asked questions (FAQs) about Dubai:</h1>
<a href="#" id="toggleLink">Click to view</a>
<dl>
  <dd class="invisible">Is Dubai a country?</dd>
  <dd class="invisible">Is Dubai safe for tourists?</dd>
  <dd class="invisible">When is the best time to visit Dubai?</dd>
  <dd class="invisible">Do I need a visa to visit Dubai?</dd>
  <dd class="invisible">What currency is used in Dubai?</dd>
  <dd class="invisible">Can I drink alcohol in Dubai?</dd>
  <dd class="invisible">What are some popular tourist attractions in Dubai?</dd>
  <dd class="invisible">Is Dubai a tax-free city?</dd>
  <dd class="invisible">Can I visit the Burj Khalifa?</dd>
  <dd class="invisible">Are there any cultural considerations or dress codes in Dubai?</dd>
</dl>


<button id="highlightButton">4 Key Highlights About Dubai</button>
<h3>Wealth</h3>
<ul>
  <li>Economic Diversification:</li>
  <p>Dubai has transformed from a small trading port to a global business and tourism hub. It's economically diversified, with sectors such as real estate, tourism, finance, logictics, and trade contributing to its wealth. The city has strategically focused on attracting foreign investment and creating a business-friendly environment.</p>
  <li>Oil Independence:</li>
  <p>While the United Arab Emirates (UAE) as whole has significant oil reserves, Dubai's wealth is not solely dependent on oil. Oil revenues contribute a smaller percentage to Dubai's economy compared to other emirates in the UAE. Instead, Dubai has focused on diversifying its economy to reduce its reliance on oil and create sustainable growth.</p>
  <li>Tourism and Hospitality:</li>
  <p>Dubai has invested heavily in building world-class infrastructure and iconic attractions to attract tourists from around the globe. The city boasts luxurious hotels, stunning architectural landmarks like the Burj Khalifa and Palm Jumeirah, entertainment venues, shopping malls, and a vibrant nightlife scene. Tourism plays a vital role in Dubai's economy and contributes significantly to its wealth.</p>
  <li>Business and Financial Center:</li>
  <p>Dubai has positioned itself as a regional and international business and financial center. It offers a favorable business environment with free zones, low taxation, and regulations that attract multinational corporations and entrepreneurs. The Dubai International Financial Centre (DIFC) serves as a prominent financial hub, attracting financial institutions and professional services companies.</p>
</ul>
<h3>Luxury Hotels</h3>
<ul>
  <li>Iconic and Luxurious Properties:</li>
  <p>Dubai is renowned for its opulent and extravagant luxury hotesl that showcase stunning architecture, lavish interiors, and world-class amenities. Properties like the Burj Al Arab Jumeirah, Atlantis The Palm, and the Emirates Palace Hotel are internationally recognized for their grandeur and exclusivity.</p>
  <li>Record-Breaking Accomodations:</li>
  <p>Dubai is home to record-breaking hotel features. For example, the Burj Al Arab Jumeirah, often referred to as the world's only 7-star hotel, stands on its own man-made island and features lavish suites, exquisite dining options, and a helipad. The JW Marriott Marquis Dubai is one of the tallest hotels globally, offering luxurious rooms nad multiple dining outlets.</p>
  <li>Unparalleled Hospitality Services:</li>
  <p>Dubai's luxury hotels pride themselves on providing exceptional hospitality services. Guests can experience personalized attention, 24-hour concierge services, private butlers, and a range of amenities designed to exceed expectations. Many hotels also offer exclusive experiences such as spa treatments, private beach access, and gourmet dining options.</p>
  <li>Unique Leisure and Entertainment Facilites:</li>
  <p>Dubai's luxury hotels often feature unique leisure and entertainment facilities to enhance the guest experience. These can include private beaches, luxurious swimming pools, upscale spa and wellness centers, fine dining restaurants with renowned chefs, high-end shopping outlets, and extravagant nightlife venues.</p>
</ul>
<h3>Sparkling Nightlife</h3>
<ul>
  <li>Diverse Entertainment Options:</li>
  <p>Dubai offers a diverse and vibrant nightlife scene with a wide range of entertainment options to suit various preferences. From trendy nightclubs and rooftop bars to live music venues and beach clubs, there's something for everyone. The city hosts internationally renowned DJs, musicians, and performers, making it a popular destination for nightlife enthusiasts.</p>
  <li>Strict Alcohol Regulations:</li>
  <p>Dubai has specific regulations regarding the sale and consumption of alcohol. Alcohol is primarily served in licensed establishments such as hotels, bars, clubs, and restaurants. These venues typically require a valid ID and enforce age restrictions. It's important to respect and adhere to local laws and guidelines when enjoying the nightlife in Dubai.</p>
  <li>Theme Nights and Events:</li>
  <p>Dubai's nightlife scene is known for its lively theme nights and special events. Many venues host themed parties, ladies' nights, live performances, and guest appearances. These events add excitement and variety to the nightlife experience and attract localsand tourists alike.</p>
  <li>Stunning Skyline Views:</li>
  <p>Dubai's skyline is a breathtaking sight, especially at night. Several venues offer panoramic views of the city's iconic landmarks such as the Burj Khalifa, Palm Jumeirah, and Dubai Marina. Rooftop bars and restaurants provide an opportunity to enjoy the stunning cityscape while socializing and savoring drinks and food.</p>
</ul>
<hr>
<div class="super-mario">
  <img class="logo" src="images/supermariologo.png" alt="Super Mario logo"> <iframe src="https://giphy.com/embed/S5uMJDmtnATLbjjw3h" width="200" height="200" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/S5uMJDmtnATLbjjw3h"></a></p>
  <p>Fan of the Super Mario Bros.? Swap your favorites in order down below!</p>
</div>
<!--gif is from https://giphy.com/gifs/S5uMJDmtnATLbjjw3h-->
<div class="top-row">
  <div class="frame" id="top-left">
    <img src="images/mario.png" alt="Mario from Mario Kart">
    <button class="swapButton">Switch</button>
  </div>
  <div class="frame" id="top-center">
    <img src="images/luigi.png" alt="Luigi from Mario Kart">
    <button class="swapButton">Switch</button>
  </div>
  <div class="frame" id="top-right">
    <img src="images/princess.png" alt="Princess from Mario Kart">
    <button class="swapButton">Switch</button>
  </div>
</div>
<div class="middle-row">
  <div class="frame" id="middle-left">
    <img src="images/bowser.png" alt="Bowser from Mario Kart">
    <button class="swapButton">Switch</button>
  </div>
  <div class="frame" id="middle-center">
    <img src="images/yoshi.png" alt="Yoshi from Mario Kart">
    <button class="swapButton">Switch</button>
  </div>
  <div class="frame" id="middle-right">
    <img src="images/toad.png" alt="Toad from Mario Kart">
    <button class="swapButton">Switch</button>
  </div>
</div>
<div class="bottom-row">
  <div class="frame" id="bottom-left">
    <img src="images/donkeykong.png" alt="Donkey Kong from Mario Kart">
    <button class="swapButton">Swap</button>
  </div>
  <div class="frame" id="bottom-center">
    <img src="images/wario.png" alt="Wario from Mario Kart">
    <button class="swapButton">Swap</button>
  </div>
  <div class="frame" id="bottom-right">
    <img src="images/kirby.png" alt="Kirby from Mario Kart">
    <button class="swapButton">Swap</button>
  </div>
</div>
<script>
  $(document).ready(function() {
    $('#toggleLink').on('click', function() {
      $('dd').toggleClass('invisible');
    });
    $('dt').on('click', function() {
      $(this).addClass('highlighter');
    });
    $('#highlightButton').click(function() {
      $('ul').each(function() {
        $(this).find('li:last').css('background-color', 'yellow');
      });
    $('h3').click(function() {
      $(this).next('ul').find('li').css('font-weight', 'bold');
    });
    $('li').click(function() {
      $(this).closest('ul').find('li:first').css('color', 'blue');
    });
    });
  });

  $(document).ready(function() {
    $('.swapButton').click(function() {
      let currentFrame = $(this).parent('.frame');
      let previousFrame = currentFrame.prev('.frame');
      let nextFrame = currentFrame.next('.frame');

      let currentImage = currentFrame.find('img');
      let previousImage = previousFrame.find('img');
      let nextImage = nextFrame.find('img');

      if (currentFrame.parent().hasClass('top-row')) {
        let tempSrc = currentImage.attr('src');
        currentImage.attr('src', nextImage.attr('src'));
        nextImage.attr('src', tempSrc);
      } else if (currentFrame.parent().hasClass('middle-row')) {
        let randomDirection = Math.random();
        if (randomDirection < 0.33) {
          let tempSrc = currentImage.attr('src');
          currentImage.attr('src', previousImage.attr('src'));
          previousImage.attr('src', tempSrc);
        } else if (randomDirection < 0.66) {
          let tempSrc = currentImage.attr('src');
          currentImage.attr('src', nextImage.attr('src'));
          nextImage.attr('src', tempSrc);
        }
      } else if (currentFrame.parent().hasClass('bottom-row')) {
        let tempSrc = currentImage.attr('src');
        currentImage.attr('src', previousImage.attr('src'));
        previousImage.attr('src', tempSrc);
      }
      return false;
    });
  });
</script>
</body>
</html>