M294 - Interactive Web Frontend

What I Learned

Core competencies and skills developed throughout this module

HTML, CSS & JavaScript Foundations

Deepened the three core web technologies: HTML for the structure of a page, CSS for layout and styling, and JavaScript to make pages interactive. Together they turn a static document into an application that reacts to the user.

Structuring content with semantic HTML (headings, forms, lists, containers)
Styling with CSS: colours, spacing, Flexbox layouts and responsive design
Adding behaviour with JavaScript variables, data types and operators
Connecting markup and logic so the page responds to the user

The DOM & Events

Learned how JavaScript sees the page as the Document Object Model, an object tree it can read, change, create and delete. Combined with events, this is what actually makes a page interactive.

Selecting elements with querySelector and reading their values
Creating, modifying and removing elements at runtime (createElement, appendChild)
Reacting to user actions with addEventListener (click, input, submit)
Using event.preventDefault() to stop a form reloading the page, key for SPAs

Arrays & Functions

Worked with arrays to store and iterate over lists of data, and with functions to keep logic reusable, parameterised and readable, the building blocks for handling data that comes from a backend.

Storing lists of values and objects in arrays
Adding, removing and looping over items (push, forEach, length)
Writing reusable functions with parameters and return values
Iterating over arrays of objects, e.g. a list of users or tasks from an API

JSON & Data Exchange

Understood JSON as the data format used between frontend and backend, and how to convert between text and JavaScript objects in both directions.

Reading the structure of JSON objects and arrays
Parsing incoming text with JSON.parse()
Serialising objects for a request with JSON.stringify()
Accessing nested properties of the resulting objects

CRUD & Backend Communication with fetch()

Built a frontend that doesn't just display data but manages it, using fetch() to perform the four CRUD operations against a backend API and handling the JSON responses.

Create: sending new records with a POST request
Read: loading and displaying data with a GET request
Update: editing existing records with a PUT request
Delete: removing records with a DELETE request

Same-Origin Policy, CORS, Validation & Security

Learned the browser security rules that govern which data a page may load, why cross-origin requests are restricted, and why user input can never be trusted blindly.

The Same-Origin Policy: an origin is protocol + domain + port
Why cross-origin requests are blocked and what a CORS error really means
That CORS is usually a server configuration matter, not a JavaScript bug
Validating user input before processing or sending it

jQuery & Vue.js

Compared two ways of building interactive interfaces: jQuery, which shortens DOM and event code, and Vue.js, a modern reactive framework where the UI updates automatically when the data changes.

Writing shorter DOM manipulation and event handling with jQuery
Understanding reactive data binding in Vue.js
Working with components, methods and directives (v-for, v-model, @click)
Seeing how a framework structures larger apps better than plain DOM access

Pflichtenheft & Project Planning

Learned that software is more than coding: before implementation, requirements are written down in a Pflichtenheft (requirements specification) so it is clear what should be built and under which conditions.

Capturing functional and non-functional requirements
Defining target users, roles and a protected area against anonymous access
Documenting security requirements and how input is handled
Planning the solution before writing any code

Code Examples

Practical examples from the module

                app.js
            

const input = document.querySelector("#todoInput");
const button = document.querySelector("#addButton");
const list = document.querySelector("#todoList");

// React to a click, validate the input, then add it to the DOM
button.addEventListener("click", function () {
    const text = input.value;

    if (text.trim() === "") {
        alert("Please enter a task.");
        return;
    }

    const li = document.createElement("li");
    li.textContent = text;
    list.appendChild(li);

    input.value = "";
});
            

                api.js
            

const API = "https://example.com/api/todos";

// READ: load all tasks from the backend
function loadTodos() {
    return fetch(API).then(function (res) {
        return res.json();
    });
}

// CREATE: send a new task
function createTodo(title) {
    return fetch(API, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title: title, done: false })
    });
}

// UPDATE: change an existing task
function updateTodo(id, data) {
    return fetch(API + "/" + id, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data)
    });
}

// DELETE: remove a task
function deleteTodo(id) {
    return fetch(API + "/" + id, { method: "DELETE" });
}
            

                App.vue
            

<!-- The UI re-renders automatically whenever the data changes -->
<template>
    <div>
        <input v-model="newTodo" placeholder="New task">
        <button @click="addTodo">Add</button>

        <ul>
            <li v-for="todo in todos" :key="todo.id">
                {{ todo.title }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return { newTodo: "", todos: [] };
    },
    methods: {
        addTodo() {
            if (this.newTodo.trim() === "") return;
            this.todos.push({ id: Date.now(), title: this.newTodo });
            this.newTodo = "";
        }
    }
};
</script>
            

Skills Acquired

Technologies and concepts mastered in this module

HTML5 CSS3 & Flexbox JavaScript (ES6+) DOM Manipulation Events Arrays & Functions JSON fetch API CRUD REST APIs Same-Origin Policy CORS Input Validation jQuery Vue.js Pflichtenheft

Key Takeaways

Interactivity is data-driven: keep your data clean and the DOM (or a framework) will reflect it.
Never trust user input: validate on the client for UX, but real security belongs on the server too.
CRUD over fetch() is the backbone: Create, Read, Update and Delete are how a frontend really talks to a backend.
SOP and CORS are browser security, not bugs: cross-origin errors are usually a server-config matter.
Plan before you build: a Pflichtenheft clarifies requirements, roles and security before a single line of code.

M294 - Realising the Frontend of an Interactive Web Application

The project I built for this module