Front-end sub-system

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which part of a system is the front-end?

A The server database that stores all the records

B The part the user sees and interacts with, such as a web form

2. Where does the front-end run?

A Only on the organisation's remote server

B On the user's own device, such as a phone or laptop browser

3. A student types their email into a sign-up form. Which front-end job is this?

A Collecting input through the user interface

B Storing the record permanently in the database

4. A form shows 'Please enter a valid email address' before anything is sent. What is this?

A A client-side input check done in the front-end

B A hashing step done by the back-end database

5. After the user clicks Submit, what does the front-end do next?

A Sends a request to the back-end

B Deletes the form and waits for the user to retry

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<input type="text" id="username">		AA front-end user interface element that collects input from the user on their device
2fetch('/api/orders')		Bif (email.includes('@') === false) { alert('Enter a valid email'); }
3The front-end checks input on the user's device before sending it, so obvious mistakes are caught early		Cdocument.getElementById('result').textContent = data.total;
4The front-end shows output to the user by updating what appears on the screen		DClient-side checks can be bypassed, so the back-end must still validate input. The front-end check only gives quick feedback to the user.
5Front-end: the database that stores all customer records on the company server		EThe front-end sending a request to the back-end to get data
6Client-side input check = the only security a system needs, so the back-end can trust all input		FStoring and managing data on the server is the job of the back-end, not the front-end. The front-end is the interface on the user's device.

Definitions

front-end

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<_____ type="text" id="username">

if (name.______ === 0) { alert("Please enter your name"); }

const reply = _____("/api/scores");

const out = document.getElementById("out"); out.___________ = result;

button.________________("click", checkForm);

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A let name = nameBox.value;

B if (name = "") {

C showError("Enter a name");

D }

Question 2

A function onSubmit() {

B let age = ageBox.value;

C if (age <= 0) send(age);

D }

Question 3

A let email = emailBox.value();

B if (!email.includes("@")) {

C showError("Add an @");

D }

Question 4

A func showResult(msg) {

B out.innerText = msg;

C }

Question 5

A let pass = passBox.value;

B if (pass.length >= 8) {

C sendRequest("/login" pass);

D }

Answer Key

Front-end sub-system

Section A: Quick Questions

B — The part the user sees and interacts with, such as a web form

B — On the user's own device, such as a phone or laptop browser

A — Collecting input through the user interface

A — A client-side input check done in the front-end

A — Sends a request to the back-end

Section B: Match the Pairs

<input type="text" id="username"> → A front-end user interface element that collects input from the user on their device

fetch('/api/orders') → The front-end sending a request to the back-end to get data

The front-end checks input on the user's device before sending it, so obvious mistakes are caught early → if (email.includes('@') === false) { alert('Enter a valid email'); }

The front-end shows output to the user by updating what appears on the screen → document.getElementById('result').textContent = data.total;

Front-end: the database that stores all customer records on the company server → Storing and managing data on the server is the job of the back-end, not the front-end. The front-end is the interface on the user's device.

Client-side input check = the only security a system needs, so the back-end can trust all input → Client-side checks can be bypassed, so the back-end must still validate input. The front-end check only gives quick feedback to the user.

Section C: Definitions

front-end — The part of a system the user sees and uses. It runs on the user's device, collects input through the interface, checks it, sends requests to the back-end and shows the output.

Section D: Fill in the Blanks

<input type="text" id="username">

if (name.length === 0) {
  alert("Please enter your name");
}

const reply = fetch("/api/scores");

const out = document.getElementById("out");
out.textContent = result;

button.addEventListener("click", checkForm);

Section E: Spot the Error

B — A single = assigns a value instead of comparing. The client-side input check must use === to test whether the name is empty.

C — The client-side check is backwards. It should only send the request to the back-end when age >= 0, so valid ages are sent.

A — value is a property of the input box, not a method. It should be emailBox.value with no brackets, which reads what the user typed.

A — JavaScript functions are declared with the keyword function, not func. This function shows output to the user on screen.

C — A comma is missing between the arguments. The front-end request needs the URL and the data separated by a comma: sendRequest("/login", pass);