Hide menu

TDP013 Web Programming and Interactivity

HTML, CSS & JavaScript

Learning objectives

From the syllabus: Link to syllabus

  • Create rich web pages that include dynamic information, interactivity and database connectivity;
  • Using programming languages such as JavaScript and NodeJS to create interactive Web content;
  • Using techniques such as AJAX and REST to create interactive Web content.

Aims

This lab aims to provide a basic understanding of HTML, CSS and JavaScript and how they complement each other. The task is to create a simplified version of Twitter. The messages will be added dynamically to the website and saved in a cookie.

Implementation

The laboratory is carried out according to the group in webreg (individually or in groups of two). You are free to choose which tool you want to use for coding, but we recommend Visual Studio Code. No WYSIWYG tools may be used to create the interface. The page does not have to be "pretty" but the layout should be based on conscious choices regarding the components' relationships to each other as well as margins, padding and text alignment. It is advisable to use the illustration below as a reference.
When submitting, a README.md should contain instructions for how to run the code.

Part 1 - Tweeeter

In part 1 of the lab, you will create a simplified version of Twitter.

Requirements for part 1

  • A message should be able to be written in a text field and published with a button.
  • Before the message is published, it should be validated with JavaScript. If the message is empty or contains more than 140 characters, it should not be published. Instead, an error message should be displayed to the user.
  • Error messages should be presented appropriately (see illustration below). Using alert() is not an approved solution.
  • All messages should be saved in a cookie (i.e. they should remain if you reload the page but disappear if you clear the cookies).
  • Published messages should be displayed in chronological order with newer messages at the top. Messages should be clearly separated and presented with the author's name and an appropriately worded timestamp.
  • Published messages should have a button that, when clicked, marks/unmarks a message as read/unread. The difference between read and unread messages should be clear (see illustration below).
  • The lab should demonstrate your mastery of HTML and CSS. All elements should therefore be placed appropriately in relation to the content with appropriate adjustment of components in height and width and well-chosen distances between components. Feel free to use, for example, How to Design a Website: 7 Key Principles for visually appealing websites och Create better CSS forms with these design principles as inspiration.
  • Bootstrap should be used to change the appearance of the text box and buttons.
  • The lab should be done with HTML5, CSS and pure JavaScript (no JavaScript libraries may be used in this lab).
  • Make sure your HTML code validates before submission (e.g. https://validator.w3.org/). Modern browsers are very forgiving when it comes to syntax errors, so it is not certain that any errors will actually be visible on your website.
Schema 1

Part 2 - Ajax

In part 2 of the lab, you will connect your earlier part of the lab with your backend (lab 1).

Requirements for part 2

  • The user should be able to use the page just like in part 1, with the difference that the messages are loaded from the database when the page is reloaded.
  • When a message is added, only necessary parts of the interface should be updated.
  • When a message's status changes, only necessary parts of the interface should be updated.
  • Messages and their status displayed to the user should reflect the data in MongoDB. Messages that are not saved in the database should also not be visible on the page.
  • The client should handle all communication with the server via AJAX and use CORS.
  • Tests similar to those implemented in lab 1 should also be included for this lab. Also describe how you will test support for CORS if you have not included it in the automated tests.
  • Calls should be validated on the client and server side.
  • The information in the database should be retained if the server is restarted.

Demonstration

Before submitting a lab, you need to present your solution to an assistant. During the presentation, discuss the following reflection questions:

  • What does JavaScript do in your application and how do you call a function from your website?
  • What are cookies?
  • Describe the structure and flow of your application and demonstrate that it works.
  • How have you set up CORS on your backend/server?
  • How does CORS work?
  • How do you prevent the entire page from reloading when something changes?
  • What do you use as the message ID? How do you ensure that all messages have a unique ID?
  • How do you protect yourself against injections?
Your lab assistant may ask follow-up questions, but the basic idea is that you show with the report that you wrote the code and that you understand what you have done.


Page responsible: Huanyu Li
Last updated: 2026-08-24