SwiftBuzz/code.html at master · MattBridges/SwiftBuzz · 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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!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>Swift Buzz: 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="">
            Swift Buzz
          </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/SwiftBuzz">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 input values.
        function GetValues() {
          //Get the user inputs from the page and parse them into numbers
          let swiftValue = parseInt(document.getElementById('swiftValue').value);
          let buzzValue = parseInt(document.getElementById('buzzValue').value);
          let stopValue = parseInt(document.getElementById('stopValue').value);

        //Check to make sure only numbers were entered
        if (Number.isInteger(swiftValue) && Number.isInteger(buzzValue) && Number.isInteger(stopValue)) {
          if(stopValue>5000){
            //If the stop value is larger than 5000 to protect the page from crashing
            Swal.fire({
              icon: 'error',
              title: 'Oops!',
              text: 'Stop Value should be less than 5000'
            });
            }
            else if(swiftValue==0||buzzValue==0){
            //Make sure the user didnt enter a 0 value for swift or buzz
            Swal.fire({
              icon: 'error',
              title: 'Oops!',
              text: 'Swift and Buzz values cannot be 0'
            });
            }
            else{
               //If all are numbers Generate FizzBuzz then display it.
            let possibleValues = GenerateFizzBuzzDry(swiftValue, buzzValue, stopValue);
            DisplayFizzBuzz(possibleValues);
            }
        }
        else
            {
              //If they are not, tell the user
              Swal.fire({
                icon: 'error',
                title: 'Oops!',
                text: 'Only integers are allowed for SwiftBuzz'
              });
            }
        }

        //Generate the FizzBuzz.
        function GenerateFizzBuzz(swiftValue, buzzValue, stopValue) {

          let swiftBuzzArray = [];

          for (let i = 0; i <= stopValue; i++) {
            if (i % (swiftValue * buzzValue) == 0) {
              //Put Fizz Buzz Result Here
              swiftBuzzArray.push('SwiftBuzz');
            }
            else if (i % swiftValue == 0) {
              //Put Swift Result Here
              swiftBuzzArray.push('Swift');
            }
            else if (i % buzzValue == 0) {
              //Put Buzz Result Here
              swiftBuzzArray.push('Buzz');
            }
            else {
              //Put Plain Number Here
              swiftBuzzArray.push(i);
            }


          }

          return swiftBuzzArray
        }

        //Display the result to the screen.
        function DisplayFizzBuzz(swiftBuzzArray) {
          let tableBody = document.getElementById('results');
          let tableHTML = "";

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

            if (value == 'Swift') {
              className = 'swift';
            }
            else if (value == 'Buzz') {
              className = 'buzz';
            }
            else if (value == 'SwiftBuzz') {
              className = 'swiftBuzz';
            }
            else{
              className='';
            }

            //Force Table to only be 5 columns wide
            if (i-1% 5 == 0) {
              tableHTML += '<tr>'
            }

            //Generate the td html for each result and append it to the existing tableHTML
            let tableData = `<td class="${className}">${value}</td>`
            tableHTML += tableData;

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

      </code>
    </pre>
        </div>
        <div class="col-12 col-lg-4">
          <p>The basic three function app, where we get some user input, generate the FizzBuzz then display the results</p>
          <h5><code class="code-writeup">GetValues()</code></h5>
          <p>This function we get the users input values and check to make sure that they are actually numbers. If they are we pass them into our generate function, if not we popup a warning window informing the user that they entered an invalid input.</p>
          <h5><code class="code-writeup">GenerateFizzBuzz()</code></h5>
          <p>To generate our values, we loop through each number from 0 to the users input stop value. To check if the value is devisible by the swift and buzz values we first multiply them together and use the modulus operator to see if the value we are testing goes into this calculation evenly. If there is no remainder we push a value of "SwiftBuzz" into our results array.  If the value being checked is not divisible by both we take the modulus of the value to test and the user inputs for both swift and buzz and push the appropriate input into the results array. If the test value isnt divisibe by any of those inputs, we push the number itself into the results array.</p>
          <h5><code class="code-writeup">DisplayFizzBuzz()</code></h5>
          <p>After iterating through all of the possibe values, we grab the results element from the page, and build a 5 column table to display the FizzBuzz results. </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>