seungho715/a3-persistence

assignment 3, webware, a-term 2019

Seungho Lee - slee7

Rec Center Worksheet

Glitch: https://seungho715-a3-persistence-6.glitch.me/ Heroku: https://cs4241-a3.herokuapp.com/

Include a very brief summary of your project here. Images are encouraged, along with concise, high-level text. Be sure to include: I have worked on assignment 3 based on assignment 2. Despite making a login screen and main screen, it does not work. I have tried multiple ways to fix it, but I can not find a solution to it. If you look at my code and commits, you can probably see it. I was trying to make a TimeSheet for the WPI Recreational Center, where it can calculate the amount of time and payment. I chose the Github Authentication Strategy to challenge myself. I thought it will be interesting to give access to my project with an existing github accounts. For CSS framework, I used a simple CSS framework. I have looked at CSS files like Sakura and normalize. Since I do not have much knowledge of HTML/CSS compared to others, I just used it as a reference to make my own local CSS framework.

Five Express Middleware packages

• Body-parser: Help parse the body and transforms it into a json.
• serve-favicon: It displays/serves a icon named favicon on a website.
• helmet: Adds addtional layer of security and sends request from the server. I thought of using this to secure the github accounts.
• response-time: makes the site to log the server's response time
• morgan: Used morgan for logging things beside the response time.

Technical Achievements

• Tech Achievement 1: I used OAuth authentication via Github Strategy. https://github.com/kevinsimper/node-github-auth-example/ and the youtube video from the same github repo owner, helped me to guide through. I have done what I could do, but does not work properly.
• Tech Achievement 2: Connected to Heroku App. I personally like it better than glitch because I did not have to constantly import from Github if I made a brand new changes. Adding on, it did not have an black dot infront of my code for Heroku, where for glitch, it always does.

Design/Evaluation Achievements

• Design Achievement 1:

1. Provide Informative, unique page titles: I did this by changing the title of login screen and the main screen. Also by looking at the title, users can see what the app is for.'
2. Write meaningful text alternatives: Used headingds and bolds to convey importance of texts
3. Keep content clear and concise: Used minial amount of text, but sometimes gave examples for clear content
4. Provide clear instructions: provided clear instructions by giving examples or range.
5. Sufficient contrast bettween foreground and background: Because my page does not work properly, it can not be seen, but if you look at the code, or even the main page, it gave a subtle contrast between the foreground and the background.
6. Provide clear navigation options: texts on buttons or on the website guides the user pretty well and concisely tell them what each buttons are.
7. Interactive Element are easy to identify: Used contrasting colors or centered most of them in middle so that users can identify the elements clearly.
8. Identify language changes: used lang=en to show that it is written in English.
9. All forms labelled: All headings and content in the table and website are labeled on top of the textboxs.
10. Help users avoid or correct mistakes: alert or send out warnings if they did not fill out certain areas of the form. Adding on example value is provided for grades.
11. Reflect the reading order: Reads from top to bottom, right to left just like other apps.
12. Use mark-up: Used div tags to break up sections in index.html.