advanced-javascript-challenge-arrays-in-depth/index.html at master · mfrcodingproject/advanced-javascript-challenge-arrays-in-depth · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <title>MFR Advance JS Array functions</title>

  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link href="./web/styles.css" rel="stylesheet" />
</head>
<body>
  <header class="adv__header">
    <h1>
      MFR Advance JS challenge
    </h1>
    <h2>
      Arrays in depth
    </h2>
  </header>
  <main class="adv__body">
    <section>
      <p>
        Each function in this exercise will receive the list of pokemons that you can see <a href="#pokemonList" data-bs-toggle="collapse">clicking here</a>
      </p>
      <pre class="collapse" id="pokemonList">
        <code>
          [
            { name: "Squirtle", type: "water", power: 20 },
            { name: "Pikachu", type: "electric", power: 50 },
            { name: "Charmander", type: "fire", power: 10 },
            { name: "Zapdos", type: "electric", power: 30 },
            { name: "Voltorb", type: "electric", power: 10 },
            { name: "Ponyta", type: "fire", power: 50 },
            { name: "Raichu", type: "electric", power: 40 }
          ]
        </code>
      </pre>
    </section>
    <div class="container adv__grid" id="grid">
      <div class="row adv__grid__header">
        <div class="col adv__grid__header">Function name</div>
        <div class="col adv__grid__header">Input for function</div>
        <div class="col adv__grid__header">Expected output</div>
        <div class="col adv__grid__header">Result of executing</div>
      </div>
    </div>
  </main>
  <script type="module" src="./web/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>