Unit 4 Summary Task

Due Dates Given in Class - Pay Attention!

Unit 4 Review & Summary Project

Please read carefully, attend class, and participate.

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.

The Program Must:

  • 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.

BINGO call numbers are:

B I N G O

1-15 16-30 31-45 46-60 61-75


Time to plan!

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.