CSE104 Project
Objective
Develop a dynamic, interactive, standard compliant, website using client based programming (html, css, js).Required elements
- General structure defined clearly in valid current HTML.
- General design/appearance defined in valid CSS.
- Interaction with the user, based on JavaScript
Groups
- You may develop your project alone or by pair.
Possible topics
You can choose your own topic of project. Check with a teacher that your topic is valid.- Video game is OK
- Website of an imaginary company is OK
- General user service is OK
If you lack inspiration, here is two possible topic of projects
Online Computational Sheet
Inspired from Jupyter spreadsheet type, you develop an online application in which the user can enter mathematical command as a text (following JavaScript syntax), and the answer is displayed automatically.
- As a basic step, you should at least be able to handle simple numerical computations.
- In a more advance setup, keywords such as solve, plot can be parsed to handle more complex actions and display (equation solving, graph plots, etc).
Basic video games
A second possible topic is to develop a set of basic video games where the interaction with the user is programed in JavaScript.
In a first step, you may start with very simple game such as tic-tac-toe. Once achieved, you may develop other games associated to more technical challenges.
Example of last year project
- Educative games
- Maze game
- Isometric RPG
- Quizz games
- Creation of some website for friends, company
- Symbolic calculator
Screenshots examples
Warning
Avoids projects that would require to store/load data: You will not have access to files (this will be seen later on server side programming). For instance, avoid website aiming at data between users such as blogs, facebook-like, etc.Prefer website where data can be fully described in your HTML/JavaScript code.
Methodology
Decomposing into sub-steps
Decompose your project in a series of steps/check-points.
- Make sure the first check-point providing a basic usable website is easily and quickly do-able.
- Set up the more challenging/explorative point in the latest steps.
In particular, make sure you don't spend any class without having a working website, even if it doesn't have all the expected functionalities (don't stay for a long time developing code without testing your steps, test your code all along the development. .
Merge your code often in pairs
Make sure than when working by pair, you share and often merge your code.
- Don't spend more than one class without merging your code.
- Versioning tools such as github may help you sharing and merging regularly your code.
Check often that your code is valid
Your HTML code must be valid with respect to HTML validator
Your JavaScript code must be compatible with the ECMAScript 6 standard ("use strict";)
Your website should run correctly on the machines from the lab using Firefox. Check before giving back your project: you may have hidden errors that you don't see on your computer/system/browser, that may not work on other computers.
Your website is not expected to work on IE or Edge.
Assessment
- HTML should be clear, lisible, valid, highlighting the semantic organization.
- You need to show that you designed your website as you wanted using CSS
- It is not an art-contest project. You are not graded on the "beauty" of the result, but on your CSS technical solution to achieve your goal.
- JavaScript code should
- Be clear and easy to read.
- Follow the current good practice.
- Allow to handle user events.
Note
- You can use at your own "risk" (= there is no class on the topic)
- External library/framework. You need to explain clearly what you have coded, and what you didn't.
- Server based programming if you know some.
What you need to give
- All your website source code (including the images, etc.) as a single archive.
- A short 1-3 pages report explaining your approach.