This website is one of the weekly projects assigned at Epicodus and was created to demonstrate what I have learned so far regarding the use of arrays and looping in JavaScript, as well as JavaScript and jQuery methods for creating, transforming, and updating data in arrays. The website takes a user-inputted integer and displays a count of numbers up to and including that integer. However, it simulates a "Mr Rogers"-themed robot and replaces integers containing specific digits with output such as "Beep!", "Boop!", and "Won't you be my neighbor?" In addition to showcasing the new skills I have begun to cultivate in the use of arrays and looping, the website is the first major example of the separation of business and user-interface logic we have been able to produce, and demonstrates the ongoing development of my skills in using HTML, CSS, and Bootstrap to produce a simple yet highly functional user experience.
- Bootstrap
- CSSS
- HTML
- JavaScript
- jQuery
- Markdown
- Git Bash
- Microsoft Windows 10
- Mozilla Firefox
- Visual Studio Code
- Download a web browser, such as Apple Safari, Google Chrome, Microsoft Edge, Mozilla Firefox, or Yandex.
- Navigate to https://github.com/taylorsomers/mr-roboger.
- Click the green "Clone or download" button at the right of the screen.
- Select "Download ZIP."
- Use a file extractor or unzip program (such as PeaZip, Unzipper, WinZip, Zipware, or 7-ZIP) to extract the ZIP files onto your computer.
- Open the directory containing the extracted files.
- Double-click the "index.html" file to run the program through your web browser.
| Program Behavior | Example Behavior | Example Output |
|---|---|---|
| Program displays an error when a non-number is entered. | "4", "a", "." | "4", "Please enter a whole number.", "Please enter a whole number." |
| Program displays an error when a non-integer is entered. | "4", "4.5" | "4", "Please enter a whole number." |
| Program displays an error when an integer less than 0 is entered. | "0", "-1" | "0", "Please enter a whole number." |
| Program displays a count of integers from 0 up to the integer the user inputs and includes the user-inputted integer in its count. | "2" | "0,1,2" |
| For numbers included in the program's count, if the number includes the digit 1, the program replaces that number in the count with "Beep!" | "1" | "0,Beep!" |
| For numbers included in the program's count, if the number includes the digit 2, the program replaces that number in the count with "Boop!" | "2" | "0,Beep!,Boop!" |
| If a number included in the program's count includes both 1 and 2, the program replaces that number in the count with "Boop!" (*I.e., it prioritizes "Boop!" over "Beep!") | "12" | "0,Beep!,Boop!,4,5,6,7,8,9,Beep!,Beep!,Boop!" |
| For numbers included in the program's count, if the number includes the digit 3, the program replaces that number in the count with "Won't you be my neighbor?" | "4" | "0,Beep!,Boop!,Won't you be my neighbor?,4" |
| If a number included in the program's count includes both 1 and 3, the program replaces that number in the count with "Won't you be my neighbor?" (I.e., it prioritizes "Won't you be my neighbor?" over "Beep!") | "13" | "0,Beep!,Boop!,Won't you be my neighbor?,4,5,6,7,8,9,Beep!,Beep!,Boop!,Won't you be my neighbor?" |
| If a number included in the program's count includes both 2 and 3, the program replaces that number in the count with "Won't you be my neighbor?" (I.e., it prioritizes "Won't you be my neighbor?" over both "Boop!" and "Beep!") | "23" | "0,Beep!,Boop!,Won't you be my neighbor?,4,5,6,7,8,9,Beep!,Beep!,Boop!,Won't you be my neighbor?,Beep!,Beep!,Beep!,Beep!,Beep!,Beep!,Boop!,Boop!,Boop!,Won't you be my neighbor?" |
| The program allows the user to enter a new number once a result has been displayed and will produce new results as many times as new input is submitted. | "4", "3" | "0,Beep!,Boop!,Won't you be my neighbor?,4", "0,Beep!,Boop!,Won't you be my neighbor?" |
- No known bugs at this time. If any are discovered, please feel free to reach out and let me know. If you would like to contribute any fixes or improvements, please do!
- Taylor Somers
This website is licensed under the GNU General Public License GPLv3. (C) 2020 Taylor Somers. All rights reserved.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent