codeup-web-exercises/orders.html at main · lexibor/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
<!DOCTYPE html>
<html>
<head>
  <title>Orders</title>
  <link rel="shortcut icon" href="about:blank">
  <style>
    article {
      background-color: cornsilk;
      border: 2px solid black;
      margin-bottom: 5px;
      padding: 10px;
    }
    dt {
      font-weight: bold;
    }
    dd {
      text-decoration: underline;
    }
  </style>
</head>
<body>
<h1>Current Orders</h1>
<div id="orders">
  <!-- This HTML should be dynamically generated by JS -->
  <article>
    <h3>Order #x</h3>
    <dl>
      <dt>Item Ordered</dt>
      <dd>Such and such item</dd>
      <dt>Ordered by</dt>
      <dd>Ordered by such and such</dd>
    </dl>
  </article>
</div>
<button id="update">Update w/Ajax</button>
<script src="./js/jquery-3.6.3.js"></script>
<script>
  $(document).ready(function() {
    "use strict";
    /*
        1. make a request for the data (orders.json)
        2. loop through the data and build an HTML string to create the HTML to display the data
        3. update the DOM with the new HTML
     */

    /**
     * Creates an HTML string based on a JSON array of orders
     * @param orders
     */

    /*
        {
            "orderNumber": 1,
            "itemOrdered": "Small Sweater",
            "orderedBy": "Johnny Be Good"
        }
     */

    // $('#orders').html('TEST');

    $.ajax('./data/orders.json').done(function(data)
    {
      // console.log(data);

      $('#orders').html('');
      for(let i = 0; i < data.length; i++)
      {
            let html = ` <article>
                         <h3>Order #${data[i].orderNumber}</h3>
                            <dl>
                              <dt>Item Ordered</dt>
                              <dd>${data[i].itemOrdered}</dd>
                              <dt>Ordered by</dt>
                              <dd>${data[i].orderedBy}</dd>
                            </dl>
                        </article>`


        $('#orders').append(html)
      }


    });


  });
</script>
</body>
</html>