Skip to content

michaeloconnor1717/a2-shortstack

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js

https://a2-michaeloconnor1717.glitch.me

Assignment 1 - Short Stack

Michael O'Connor

Project Summary:

The project required the creation of a simple two-tier web application that enabled a client session to be opened that allowed for client-server communication

The particular website I created involves having students fillout a survey about a Disney Channel television show (phineas and ferb)

Notes on Usage

The data is not initially visible. Please select "view data" to open the relevant tables

Project Objectives:

Base Objectives:

A server will run that maintains the data delivered by the client in a JSON format

The server returns the entire dataset to the client upon request

Data can be added or removed from the dataset by either submitting data using the HTML form or by entering the UserID and clicking delete in the appropriate fields

The server maintains several derived fields that are displayed in the "Avg Phineas And Ferb Knowledge" meter and the accumulated majors table Additionally, a UserID is attached to the data by the server before being integrated into the database

CSS selectors for the img, body, and main elements were implemented the .majorCont, .checkmark, and several other classes were used for specific styling of main elements the div[id="data"] was used to demonstrate use of ID selectors

Flex box was used for the majority of main elements

Google Font's Roboto was implemented for all text content

CSS for the site was primarily defined in css/style.css

JS code was implemented in the index.htlm and server.imporved.js files

Technical Achievements

The site deploys a single page app to both submit and view the data transmitted to the server.

For the design requirements: Zhang: they did not have any significant problems with the functional design of the site. They did note that the aesthetics left something to be desired and that it was overall bland.

Based on Zhang's feedback, I would significantly overhaul the CSS of the page to provide a more modern feel or at least a less in-complete feel

Nguyen: Once again, they did not have any issues navigating the site. They mentioned that more graphics to represent the data would be more helpful for visualizing the results. Additionally, they enjoyed the Doofenshmirtz easter egg embedded in the site. They made similiar comments as Zhang about the apparent lack of aesthetic appeal

Based on this feedback, the overall visual design is definitely not complete and needs to be re-evaluated. I'm glad to know that the easter egg was noticed and enjoyable without being too obnoxious.

The HTML form holds the necessary input fields and controls to select and submit the data The data is displayed in table that is generated by the JS script associated with the page (see the function: displayData) The index.htlm was vaildated at https://validator.w3.org/#validate_by_upload

About

Assignment #2 for Webware, 2022

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 54.0%
  • JavaScript 33.8%
  • CSS 12.2%