JavaScript-arrays/index.html at master · alizainaslam/JavaScript-arrays · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="author"
      content="Ali Zain Aslam | LinkedIn + GitHub : alizainaslam"
    />
    <meta
      name="description"
      content="A basic web app for practice with the help of Html5, Css3 and JavaScript (DOM). Where I'll write code for user experience with the help of 'objects' and will try to destructure some built-in methods of Array."
    />
    <!-- Css / FavIcon / Title -->
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" href="images/favIcon.png" type="image/x-icon" />

    <title>JS Array's Methods</title>
  </head>
  <body>
    <!-- Header -->
    <header>
      <p class="logo">JS<span>Array</span></p>
      <div class="github">
        <a
          href="https://github.com/alizainaslam/JavaScript-arrays"
          target="_blank"
          >gitHub()</a
        >
      </div>
    </header>
    <!-- ////////////// -->
    <!-- Main -->
    <main>
      <!--  -->
      <div class="web-app container">
        <p class="app-heading">
          <span>T</span>his web app is where you can experiment with
          JavaScript's built-in methods. I create custom code to help you
          understand how these methods work and how you can achieve similar
          results with your own logic.
        </p>
        <figure class="method-selection">
          <label for="methods" id="method-label">
            <h4>Select a method:</h4>
          </label>
          <select name="methods" id="method-select">
            <option value="Math.max">Math.max</option>
            <option value="Math.min">Math.min</option>
            <option value="Splice">Array.splice</option>
            <option value="Reverse">Array.reverse</option>
            <option value="forEach">Array.forEach</option>
            <option value="sort">Array.sort</option>
          </select>
        </figure>
      </div>

      <!--  -->

      <div class="container">
        <p class="instruction">
          Imagine you have a list of test scores, how would you find the highest
          test score from this list?
        </p>
        <h4 style="margin: 10px 0px">Built-in Method:</h4>
        <pre class="code-container">
          <code class="javascript-code language-javascript" id="built-in-method">
const testScores = [85, 78, 96, 89, 94, 91, 87, 90];
const highestScore = Math.max(...testScores);
console.log(highestScore);
//OutPut 96;
          </code>
        </pre>

        <h4 style="margin: 10px 0px">Custom Logic:</h4>
        <pre class="code-container">
            <code class="javascript-code language-javascript" id="custom-logic">
const testScores = [85, 78, 96, 89, 94, 91, 87, 90];
let highestScore = testScores[0];
for (let i = 1; i < testScores.length; i++) {
  if (highestScore < testScores[i]) {
    highestScore = testScores[i];
  }
}
console.log(highestScore);
//OutPut 96;
            </code>
          </pre>

        <p class="explanation" style="padding-bottom: 20px">
          If you want to understand in depth, please visit this link:
          <a
            href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"
            target="_blank"
            id="link"
            >Click here.</a
          >
        </p>
      </div>

      <!-- ///////////// -->
    </main>
    <!-- ////////////// -->
    <!-- Footer -->
    <footer>
      <div class="copyright">
        <p>&copy; JavaScript <span class="year"></span></p>
      </div>
    </footer>

    <!-- JS File -->
    <script type="module" src="js/main.mjs"></script>
  </body>
</html>