AstraHundo/code.html at master · MattBridges/AstraHundo · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!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, shrink-to-fit=no">
    <title>Perator: A Coding Challange</title>
    <!-- Bootstrap -->
    <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">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

    <!-- Devicons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
    <!-- Prism CSS -->
    <link rel="stylesheet" href="/css/prism.css">


    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/site.css">


  </head>

  <body>

    <header>
      <nav id="mainNav" class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
          <a class="navbar-brand" href="/index.html">
            <img src="/img/Base Logo Vector Files Blue Red.svg" height="50" alt="">
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon-mrb">
              <i class="bi bi-list"></i>
            </span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="/index.html">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/app.html">App</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" href="/code.html">The Code</a>
              </li>
              <li class="nav-item">
                <!-- Change This Before Publishing -->
                <a class="nav-link" href="https://github.com/MattBridges/AstraHundo">The Repo</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://mattbridgesportfolio.netlify.app/">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <main class="content container">
      <div class="row">
        <h1 class="border-bottom botder-2 border-dark">The Code</h1>
        <!-- The Source Code -->
        <div class="col-12 col-lg-8">
          <pre class="line-numbers">
      <code class="language-js">
        //Get the user input from the page
        function GetValues() {
          //Get the values from the page
          let startValue = document.getElementById('startValue').value;
          let endValue = document.getElementById('endValue').value;

          //Parse our inputs into numbers
          startValue = parseInt(startValue);
          endValue = parseInt(endValue);

          //Verify our inputs are numbers
          if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
            //If they are numbers, generate on the page
            let numbersArray = GenerateNumbers(startValue, endValue)
            DisplayNumbers(numbersArray);
          }
          else
          {
            //If they are not, tell the user
            Swal.fire({
                icon: 'error',
                title: 'Oops!',
                text: 'Only integers are allowed for Perator'
              });
          }
        }

        //Generate our numbers
        function GenerateNumbers(start, end) {
          let numbers = [];

          for (let i=start; i <= end; i++) {

            numbers.push(i);
          }

          return numbers;
        }

        //Display them on the page
        function DisplayNumbers(numbersArray) {
          let tableBody = document.getElementById('results');
          let tableHTML="";

          for(let i=0; i < numbersArray.length; i++){
            let value = numbersArray[i];
            className='';

            /* If the value is even make the className even,
            else its className will be odd*/
            if(value%2==0){
              className='even';
            }
            else{
              className = 'odd'
            }

            /* To make the table easier to read, start a new
            row every 5 indexed values*/
            if(i%5==0){
              tableHTML+='<tr>'
            }

            // Generate the td HTML and append it to the table html
            let tableRow=`<td class=${className}>${value}</td>`;
            tableHTML += tableRow;

            /*Check if the next index is divisible by 5 and if so
            close our tr tag on the current row*/
            if((i+1)%5==0){
              tableHTML+='</tr>';
            }
          }

          tableBody.innerHTML = tableHTML;
        }
      </code>
    </pre>
        </div>
        <div class="col-12 col-lg-4">
          <p>The code is structured in with three functions.</p>
          <h5><code class="code-writeup">GetValues()</code></h5>
          <p>This function is our entry point. First we grab the inputs and reassign them from strings to integers. We
            then check to ensure that the inputs are actually integers and if so we are going to generate a list of
            numbers between the input number values and display them. If one of the inputs is not an integer let the
            user know they must enter numbers only.</p>
          <h5><code class="code-writeup">GenerateNumbers()</code></h5>
          <p>To generate the numbers we loop through all the numbers from the starting value to the ending value and
            push each one into an array. When the loop has finished running, we return the array that we created.</p>
          <h5><code class="code-writeup">DisplayNumbers()</code></h5>
          <p>Once we have our numbers we pass that array into a display function. We loop throught he array and use the
            modulo operator on each value to check if its even or odd and then assign an appropriate class for css
            styling. We then check if the current value should be on the current row of the table or if a new row should
            be started. In this case we are keeping the table 5 columns wide. Now all we need to do is use a template
            literal to build the cell datas html using the correct css class and value. This is then appended onto the
            end of the exitisting tableHTML string, and the loop runs again till we finish building the table string. To
            show it on the screen we set the innerHtml of our results div to our completed tableHTML string. </p>
        </div>
      </div>

    </main>
    <footer class="container-fluid py-3">
      <div class="container">
        <div class="row row-cols-1 row-cols-lg-3 align-items-center order-last order-lg-first">
          <div class="col text-center text-lg-start ">&copy;2023 Matt Bridges</div>
          <div class="col text-center">
            <img src="/img/Light_Grey_Signature_Long.svg" height="40" alt="">
          </div>
          <div class="col d-flex justify-content-center justify-content-lg-end my-2">
            <a href="https://www.linkedin.com/in/themattbridges/" target="_blank" class="socialicons"><i
                class="bi bi-linkedin"></i></a>
            <a href="https://twitter.com/MattBridgesDev" target="_blank" class="socialicons"><i
                class="bi bi-twitter"></i></a>
            <a href="https://www.instagram.com/mattbridgesdev/" target="_blank" class="socialicons"><i
                class="bi bi-instagram"></i></a>
            <a href="https://github.com/MattBridges" target="_blank" class="socialicons"><i
                class="bi bi-github"></i></a>
          </div>
        </div>
      </div>


    </footer>


    <!-- Scripts -->
    <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>
    <!-- Prism Script -->
    <script src="/js/prism.js"></script>
    <script>
      Prism.plugins.NormalizeWhitespace.setDefaults({
        'remove-trailing': true,
        'remove-indent': true,
        'left-trim': true,
        'right-trim': true
      })
    </script>
  </body>

</html>