← QCE Digital Solutions Unit 4

Front-end sub-system

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.

Part of: QCE Digital Solutions Unit 4 — Digital Methods for Exchanging Data — Module 124

Understanding Front-end sub-system in QCE Digital Solutions Unit 4

What it does: This client-side input check runs in the browser and stops bad input before any request reaches the back-end. The code takes data returned from the back-end and displays it in the interface, which is the front-end showing output. Collecting input is a front-end job. Permanent storage is a back-end job. Client-side checks run on the user's device and catch simple mistakes early, which saves a trip to the server. Buttons, text boxes and menus make up the user interface. Password storage is a back-end job.

Common mistakes: A single = assigns a value instead of comparing. The client-side input check must use === to test whether the name is empty. The client-side check is backwards. It should only send the request to the back-end when age >= 0, so valid ages are sent.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Front-end sub-system to a class →

This module's key terms are also in a printable crossword (Modules 89–125) and word search (Modules 17–125).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which part of a system is the front-end?

The server database that stores all the recordsThe part the user sees and interacts with, such as a web form

Matches

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.

Applying

Meanings

Term

front-end

Meaning

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.

Practice

Testing

Gaps

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

Check Answer

Spots

1let name = nameBox.value;

2if (name = "") {

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

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 ✓

The front-end is the user interface. The database sits in the back-end.

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 ✓

The front-end runs on the client device. Server-side processing belongs to the back-end.

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

Collecting input is a front-end job. Permanent storage is a back-end job.

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

Client-side checks run on the user's device and catch simple mistakes early, which saves a trip to the server.

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

The front-end sends the request to the back-end, which processes it and returns a response.

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.

Key Term

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.

Fill in the Blanks

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

Hint: Type the HTML element name used in the user interface to collect typed data from the user.

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

Hint: Type the property that gives the number of characters in a string, so the front-end can check the input is not empty before sending it.

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

Hint: Type the function name the front-end uses to send a request from the browser to the back-end.

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

Hint: Type the property that sets the text shown on the page, so the front-end displays output to the user.

5. button.addEventListener("click", checkForm);

Hint: Type the method name that makes the front-end run a check when the user clicks the button.

Spot the Error

Question 1

A let name = nameBox.value;

B if (name = "") {

C showError("Enter a name");

D }

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

Question 2

A function onSubmit() {

B let age = ageBox.value;

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

D }

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

Question 3

A let email = emailBox.value();

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

C showError("Add an @");

D }

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

Question 4

A func showResult(msg) {

B out.innerText = msg;

C }

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

Question 5

A let pass = passBox.value;

B if (pass.length >= 8) {

C sendRequest("/login" pass);

D }

Line 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);

Student with a class code? Join your class →