These exercises will use some of the technologies we have looked at. Each is labelled with suggestions of which it will use.

HTML & CSS: Make this web page

screenshot.png

Click for the full-size version. You can use your own images and text.

JavaScript and (some) HTML: Make a guessing game

With Java, we made a number guessing game that told the user if their guess was too high or too low. Make this same game using JavaScript. JavaScript has both Math.random() and Math.floor as you're used to.

HTML, CSS, and JavaScript: Create a clickable pop-up "hamburger" menu

This menu will be a small (possibly simulated) button to start with, and display the full menu only when clicked. Within the menu, there may be submenus, which also display in turn only when clicked on.

Extension: display a full-size top-level menu when the page is large, and only condense to the hamburger menu on small screens. You can use the "responsive"/"mobile" mode provided by the browser's inspection tools.

HTML and PHP: A file upload & sharing system

Using HTML forms and PHP, create an application that allows the user to upload a file to the server, and makes that file (if any) available to download again. If the file is a text file, display statistics with it of how many lines and words it contains. If it is an image, display its dimensions (width and height). Otherwise, only provide a link to the file and its file size. Let the user specify a short description to go with the uploaded file. Only store one file: if a new file is provided, replace any existing file.

HTML, CSS, JavaScript, and PHP: A reading list system

Allow the user to create textual notes of things to read that are saved on the server. Let them drag and drop, or click buttons, to reorder them. If they revisit the page, the notes should be in the order they were last in.

HTML, CSS, JavaScript, PHP, and an SQL database: Team Management

Replicate some of the Team Management project using PHP and an SQL database. You can use the starter file netball.php to begin, and import a pre-filled SQL database with all the data with curl https://ecs.wgtn.ac.nz/foswiki/pub/Courses/SWEN504_2020T3/WebApps/mydb.sql | mysql -u DBusername -pDBpassword DBname in the terminal. You may also like to look at that SQL file to see the structure of the database and its tables.

To use more JavaScript, see netball-json.php and netball.js also.
Topic attachments
I Attachment Action Size Date Who Comment
screenshot.pngpng screenshot.png manage 752 K 30 Nov 2020 - 09:00 Main.mwh Screenshot of web page to replicate