In this assignment, you are required to prepare a comprehensive client-side interface for a Web Application. You are free to choose any web application of your liking or the application which you see can easily demonstrate majority of features or techniques being discussed in this module. You can take inspiration from the list of applications presented in the lecture but you are not limited to any of those applications. You are strongly encouraged to carefully select your web application considering that you will be further enhancing the same assignment introducing additional features as the semester goes by.

• Demonstrate a complete understanding of Web Application types and their requirements.
• Prepare and showcase important information collection and presentation for your selected application.
• Use a broad range of HTML tags and HTML 5 features.
• Demonstrate ability to design an easy to navigate user interface and visually appealing to a variety of audience.
• Design and implement different types of CSS files for your web application interface.
• Demonstrate effective use of CSS for your web application using a broad range of CSS rules.
• Demonstrate your understanding of the HTML and CSS code by adding comments in your code wherever possible.

n this assignment, you are required to extend the client-side interface for your Web application submitted as Assignment 1. You are required to introduce Java Script and related technologies learnt during Lecture 3 and Lecture 4 to enhance client-side interface for your web application. You also need to demonstrate good Java Script programming/scripting skills for processing HTML/CSS document, dynamic content generation, event handling and local data processing.

• ntroduce a dynamic menu bar on top and/or side panel of your web application. The menu bar should only appear after a client-side event (click, mouse over etc.) is captured and should disappear on capturing another event. Please note that you are required to create this menu bar using JavaScript rather than CSS only and it should be more aesthetic in design and appearance. You are encouraged to come up with your innovative design ideas and introduce multiple features (fading in, scrolling, dynamic positioning etc.) which you believe are suitable for your web application and target audience. An example menu bar from Google maps is shown below.
• Create at least two different HTML forms in your web application having minimum 10 different input fields/types combined in both forms requiring input from a user. You are required to introduce different types of validation checks and controls for user input fields using Java Script and also provide suggestions/hint to the user regarding the right input.
• Using the web forms, you created for Q2, collect user input dynamically and store all inputs from user either into a local file or in system cache. Then introduce a button in your webpage which on click displays all responses received so far in a tabular form creating dynamic html table and its contents. Alternatively, you can get dynamic input from the user in the form and display the input incrementally just below the form e.g. A table below the form which has one row added after every time a submit button is hit on the form. You can use either HTML local storage or AJAX external contents loading functionality.
• Introduce different events capturing functionality within your web application. You are expected to introduce a variety of events capturing function (e.g. alert, Click, Key, Mouse Over, Document Load, and Document Close etc.). Please use these functions as appropriate depending on the type of contents available in your web application interface. You are encouraged to demonstrate a wide range of user events being captured rather than a repetition of single event capturing functionality replicated over different pages.
• Using JQuery to capture DOM tree of a Webpage in your application. Add a button at the bottom of your Web page and once a user clicks that button it should display DOM Tree of your document by appending at the bottom of the same page. You are free to use any styles for displaying DOM Tree e.g. tree structure, and indentation in a list etc.

These technologies are used in projects to work properly:

• [HTML5] - HTML enhanced for web apps!
• [CSS3] - Awesome Designing
• [Javascript] - Client Side Scripts
• [BOOTSTRAPS] - great UI boilerplate for modern web apps
• [JQUERRY] - more easy and short js implementation

No isntallations rqeuired.

cd jokesapp
npm install express
npm install sqlite3
npm install md5

Open terminal and run the command below, make sure all requirements are installed previously

open index.html

MIT