codeup-web-exercises/DOMwarmpup.html at main · CoJUr/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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Another DOM Warm Up</title>
</head>
<body>

<h1>The magic number is: <span id="output"></span></h1>
<form>
  <label id='label-id' for="number-input">Number</label>
  <input id="number-input" type="number" min="0" max="100">
  <button id="num-btn" type="button">Update Number</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>
<script>

  "use strict";

  // TODO: update the following code to redirect the user to the following page if the user submits the number 42:
  // https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy

  // The functionality of displaying any other number in the h1 should be preserved.

  // const output = document.querySelector('#output');
  // const input = document.querySelector('#number-input');
  // const numBtn = document.querySelector('#num-btn');
  // numBtn.addEventListener('click', function() {
  //   if (input.value == 42) {
  //
  //     window.location = 'https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy'
  //   } else {
  //     output.innerText = input.value;
  //   }
  //
  // });

$('#label-id').hover(function() {
  $(this).text($(this).text().toUpperCase);
}, function() {
  $(this).text($(this).text().toLowerCase())
})

</script>

</body>
</html>