FYI - these instructions look better in Replit.
For a review of what we know so far, have a look at this page on our class site.
This is a pairs or solo task - no more, no less.
Everyone loves a good game of BINGO. You will create a web application that will call BINGO numbers out at the click of a button (or image or something clickable). The design of your program is up to you, with some specific rules.
Good apps are built in stages.
Building a good, usable application is all about the planning. Read the following description of the app, and then start at "Stage 1" below.
Be able to call a BINGO number with letter and number. Example: B15
Not repeat previously called BINGO numbers.
Clearly display the currently called number to the user.
Keep a running history of called numbers for the user to see (in case they missed one)
Provide a red/green or yes/no flag somewhere that displays if a win is currently possible (Min. 5 in same column or at least 1 in BIGO - N has the FREE square)
End once the last number has been called. If there are no numbers left to be called, the method of calling the next number could be disabled or a message show on the screen, etc.
B I N G O
1-15 16-30 31-45 46-60 61-75
Stage 1 - Layout (Front-End Mockup)
First rule of programming - build the front-end first. It does not need to be pretty right now. Read what the client wants and mock up a prototype - not in code. Bring that mock-up to the client for approval or suggestions.
Utilize the planning.draw file in your files list to the left. This will allow you to collaboratively mock-up the look and layout of your front-end. Keep the requirements of the program in mind and stay within your own abilities. If you ever ask yourself "how is that possible" then you need to simplify the layout.
What will the screen look like?
What portions require interactivity with the user?
Where will output go?
Can you create this layout with HTML?
Stage 2 - Draft the Front-End
Once you have approval from the client and everyone is aware of the plan, create the layout using your front-end tools (in our case, HTML). Prepare the functionality of the layout. Do not waste time on fonts and colours right now!
Ensure that your layout matches the approved mock-up (or close enough) and that the front-end is ready for the "hooks" of the back-end (elements have obvious IDs, etc).
Stage 3 - Structure the Back-End
Do not rush the data setup or code! Use the planning document, whiteboards, paper - anything you need to plan how you will store data, pass data, and react to user input.
How do you plan to keep track of the data that needs to exist for the entire program?
What global variables will you need and what should they be called?
What event listeners will you need?
What functions will you need to write? Make a list.
Do not code yet! Plan the code for your functions. This is called pseudocode. Write or type the basic logic/ideas/structure in English. It should be readable by any programmer who can then translate that to whatever programming language they choose.
Stage 4 - Draft the Back-End
The stage is set. You have the plans. You have the front-end, the list of variables, the event listeners, and the functions. You even have basic logic and structure for the functions. It's time to create a workable draft of the program.
Do this stage... in stages. Get one thing working. Then another. Pause and plan. Have you realized a mistake in your data structure? Go back to the drawing board. Do not code yourself into a corner.