codeup-web-exercises/DOM-warmup2.html at main · afonse03/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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM Warm Up In Class 8/20/21</title>
</head>
<body>

<!-- TODO: add functionality such that the number in the input will be added to the total in the h1 when the button is clicked
      No changes to the existing HTML is needed, other than adding jQuery or JavaScript.
-->
<h1 id="number-output">0</h1>
<form>
  <input id="number-input" type="number" min="0" max="100">
  <button id="add-btn">Add</button>
</form>
<!--<nav>-->
<!--  <div class='container'>-->
<!--    <div>-->
<!--      <span class='menu-button'>Menu</span>-->
<!--      <span class='login-button'>Login</span>-->
<!--    </div>-->
<!--  </div>-->
<!--</nav>-->
<!--<div className='nav-menu' id="nav-dropdown">-->
<!--  <div className='container'>-->
<!--    <ul>-->
<!--      <li>Shoes</li>-->
<!--      <li>Women's Shoes</li>-->
<!--      <li>Men's Shoes</li>-->
<!--      <li>Shoe Accessories</li>-->
<!--      <li>Wholesale</li>-->
<!--    </ul>-->
<!--    <ul>-->
<!--      <li>Contact</li>-->
<!--      <li>Twitter</li>-->
<!--      <li>Facebook</li>-->
<!--      <li>Instagram</li>-->
<!--      <li>Email</li>-->
<!--    </ul>-->
<!--  </div>-->
<!--</div>-->


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
  $(document).on("click","#add-btn", function() {
    // e.preventDefault();
    console.log('alert');
  })

  const output = document.getElementById('number-output');
  const input = document.getElementById('number-input');
  $('.menu-button').on("mouseenter", () => {
    // console.log('alert');
    $("#nav-dropdown").hide();

  });
          $(".menu-button").on("mouseleave", function() { //.on is a handler
            $("#nav-dropdown").show();

          })
$('#add-btn').on("mouseenter", function() {
  $('#add-btn').animate({
    fontSize: '30px'
  }, 200);
});
  $('#add-btn').on("mouseleave", function() {
    $('#add-btn').animate({
      fontSize: '18px'
    }, 200);
  });


  // $('.menu-button').on("click", () => {
  //   // console.log('alert');
  //   $('li').last().fadeToggle(); //jquery effects: .toggle allowed the li to appear and disappear //.fadeToggle & .slideToggle
  //
  // })

  // let myName = 'amanda';
  // let myJob = 'developer';
  // console.log(`my name is ${myName} and I'm a ${myJob} from El Paso`);


  /*TODO: add functionality such that the number in the input will be added to the total in the h1 when the button is clicked
        No changes to the existing HTML is needed, other than adding jQuery or JavaScript.
<h1 id="number-output">0</h1>
<form>
  <input id="number-input" type="number" min="0" max="100">
  <button id="add-btn">Add</button>
</form>
   */
  //justin's solution:
  document.querySelector('#add-btn').addEventListener('click', function(e) {
    e.preventDefault();
    let currentNum = Number(document.querySelector('#number-output').innerText);
    let numberToAdd = Number(document.querySelector('#number-input').value);
    document.querySelector('#number-output').innerText = currentNum + numberToAdd;
  });


</script>
</body>
</html>