a2-jchengz-justin-cheng

README.md

@@ -1,89 +1,29 @@
-Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
-===
-
-Due: September 9th, by 11:59 AM.
-
-This assignment aims to introduce you to the concepts and practice involved in creating a prototype (i.e. not deployment ready) two-tiered web application. 
-
-The baseline aims of this assignment involve creating an application that demonstrates the use of several specific pieces of HTML, CSS, JavaScript, and Node.js functionality.
-Another aim of this assignment is to establish creative boundaries in which you and your partner can explore designing, implementing, and evaluating usable, useful, novel, and technically efficient web applications.
-
-Baseline Requirements
----
-
-Note that there is a very large range of application areas and possibilities that meet these baseline requirements.
-Games, internet of things, organizational tools, commerce, media - all are possibilities with a two-tiered form-focused web application.
-
-Do not limit yourselves to any of the examples given below. 
-Examples like the upcoming `efficiency_ratio` idea for the `cars` dataset are meant to be illustrative and easy to understand.
-They are not intended to be sensible or useful ideas.
-
-Your application is required to implement the following functionalities:
-
-- a `Server` which not only serves files, but also maintains a tabular dataset with 3 or more fields related to your application
-- a `Results` functionality which shows the entire dataset residing in the server's memory
-- a `Form/Entry` functionality which allows a user to add, modify, or delete data items residing in the server's memory
-- a `Server Logic` which, upon receiving new or modified "incoming" data, includes and uses a function that adds at least one additional derived field to this incoming data before integrating it with the existing dataset
-    - the `Derived field` for a new row of data must be computed based on fields already existing in the row. For example, a `cars` dataset with `year`, `horsepower`, and `fuel_efficiency` may create a new field `efficiency_ratio` by dividing `fuel_efficiency` by `horsepower`
-
-Your application is required to demonstrate the use of the following concepts:
-
-HTML:
-- One or more [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), with any combination of form tags appropriate for the user input portion of the application
-    - Clarification: the results page can be implemented in any way. `<div>`s, `table`s, and `list`s are common choices
-
-CSS:
-- CSS styling of the primary visual elements in the application
-- Various CSS Selector functionality must be demonstrated:
-    - Element selectors
-    - ID selectors
-    - Class selectors
-- CSS positioning and sizing of the primary visual elements in the application:
-    - CSS to cause at least one element to be horizontally centered on the page
-    - CSS to cause at least one pair of elements to appear side-by-side
-    - CSS defined in a maintainable, readable form, in external stylesheets 
-
-JavaScript:
-- At minimum, a small amount of front-end JavaScript to get / fetch data from the server; a sample is provided in this repository.
-
-Node.js:
-- An HTTP Server that delivers all necessary files and data for the application. A starting point is provided in this repository.
-
-Deliverables
+Readme
 ---
 
-Do the following to complete this assignment:
-
-1. Fork the starting project code. This repo contains some starter code that may be used or discarded as needed.
-2. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page, it displays correctly.
-4. Deploy your project to Glitch, and fill in the appropriate fields in your package.json file.
-5. Ensure that your project has the proper naming scheme `a2-yourname` so we can find it.
-6. Modify the Readme to the specifications below.
-7. Create and submit a Pull Request to the original repo. Only one member needs to submit a pull request.
+## Character Creator
+By Justin Cheng {http://a2-jchengz.glitch.me}
 
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
+This project is a demonstration of a preliminary/prototype two-tier web application. The application itself is called Character Creator, where the user creates a generic character
+that has the properties of their name, age, occupation, and level of stats for their strength, dexterity, intelligence, luck (how lucky they are), and oddity (how unsual/weird they are).
+Together, the stats sum up to the 'Total' stats value, which is calculated on the server end. After the character is created, the user can view that character in a table of characters, 
+and edit or delete it. 
 
-## Your Web Application Title
-Include a very brief summary of your project here.
-Images are encouraged, along with concise, high-level text.
-
-Here is a sample formula for summarizing your activities, talk about:
-- the domain area the project pertains to
-- the main challenges or problems the application addresses
-- the key innovations that make it possible to address the problem
-- the main results of the implementation, does it really address the problem?
-- any additional implications of the resulting application, or possibly areas for future work that have been discovered as part of the design and implementation activities
-
-(Note that when I use the above formula, I aim to have only one sentence per thought in order to remain concise.)
-
-http://a2-charlieroberts.glitch.me
+The main issue I had was my lack of familiarity with JS and how to properly send over and process data to and from the "server"(working with fetch, json stringify/parsing). A bit of 
+trial and error, and the support of friends and the omnipotent Google search engine has lead me to produce a functional produce. There was one major issue that I was not able
+to address prior to the submission deadline. For the editing functionality, after clicking the butten to send over the new data to the server, the user is immediately
+redirected to a blank page. Upon re-entering the page and clicking on the "See All Characters" button, it is evident, however, that the edits made does go through (provided the
+refresh from glitch has not happen).
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
+- **Using JavaScript to modify HTML & CSS**: I used JavaScript to add more html tags to the original index.html file (instead of creating multiple pages) as well as
+  chaging the style and modifying the display of certain elements.
+- **CSS Animation: Typing Effect**: Using the resource listed below, I was able to stylistically incorporate a different kind of CSS animation into my web app.
 
 ### Design/Evaluation Achievements
-- **Design Achievement 1**: Shown in `style.css`, the code...
-- **Design Achievement 2**: We tested the application with n=X users, finding that...
+- **Single HTML File by Design**: The application functions using one html file that is the index. 
+- **CSS Modifications**: Using CSS, the aesthetics are less mundane but the minimal effects provide a clean and low-clutter view
+
+
+# # Resources
+- Typing Effect: https://usefulangle.com/post/85/css-typewriter-animation#targetText=CSS%20Properties%20Being%20Animated,a%20solid%20color%20to%20transparent.

public/css/style.css

@@ -1 +1,177 @@
-/*Style your own assignment! This is fun! */
+*{
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	height: 100%;
+	position: relative;
+}
+
+body {
+	width: 100%
+	margin: 0px;
+	padding: 0px;
+	background-color: #262626;
+	color: #e0e0e0; 
+
+
+}
+
+#container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+button {
+  font-family: 'Merriweather', serif;
+  border: none;
+  border-radius: 2px;
+}
+td button {
+  margin: 3px;
+}
+
+.mod-button { 
+  padding: 5px;
+}
+
+#edit-character-button {
+  background-color: #4CAF50;
+}
+
+#delete-character {
+  background-color: #f44336;
+}
+.gen-button {
+  background-color: #e0e0e0;
+  color: #262626;
+  padding: 10px;
+}
+#gen-buttons {
+  margin: 3px;
+  display:  
+}
+
+.action-button {
+  background-color: #e0e0e0;
+  color: #262626;
+  padding: 5px;
+  margin: 10px;
+}
+form {
+	margin: 0 auto;
+	width: 400px;
+	padding: 1em;
+}
+
+form div {
+	margin-top: 1em;
+}
+
+#characters td, th {
+  font-family: 'Merriweather', serif;
+  padding: 5px;
+  text-align: center;
+}
+#character-form {
+  display: flex;
+  flex-direction: column;
+
+}
+
+#form-inner {
+  font-family: 'Merriweather', serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#form-inner label {
+  display: flex;
+  justify-content: left;
+}
+
+.descriptor {
+  display: flex;
+  justify-content: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+#editing-character {
+
+}
+#editing-character #form-inner2 {
+  font-family: 'Merriweather', serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+#editing-character #form-inner2 label {
+  display: flex;
+  justify-content: left;
+}
+h1 {
+  font-family: 'Monserrat', sans-serif;
+  align: center;
+}
+/* Typing Effect Inspiration: https://usefulangle.com/post/85/css-typewriter-animation#targetText=CSS%20Properties%20Being%20Animated,a%20solid%20color%20to%20transparent. */
+#typing-title {
+  text-align: center;
+  display: inline-block;
+  font-family: 'Monserrat', sans-serif, monospace;
+}
+
+#typing-text {
+    display: inline-block;
+  	overflow: hidden;
+  	letter-spacing: 2px;
+ 	  animation: typing 4s steps(19,end), blink .75s step-end infinite;
+    white-space: nowrap;
+
+    font-weight: 700;
+    border-right: 4px solid orange;
+    box-sizing: border-box;
+}
+#typing-text2 {
+    display: inline-block;
+  	overflow: hidden;
+  	letter-spacing: 2px;
+ 	  animation: typing 3s steps(19,end), blink .75s step-end infinite;
+    white-space: nowrap;
+
+    font-weight: 700;
+    border-right: 4px solid orange;
+    box-sizing: border-box;
+}
+#typing-text3 {
+    display: inline-block;
+  	overflow: hidden;
+  	letter-spacing: 2px;
+ 	  animation: typing 4s steps(20,end), blink .75s step-end infinite;
+    white-space: nowrap;
+
+    font-weight: 700;
+    border-right: 4px solid orange;
+    box-sizing: border-box;
+}
+
+@keyframes typing {
+    from { 
+        width: 0% 
+    }
+    to { 
+        width: 100% 
+    }
+}
+
+@keyframes blink {
+    from, to { 
+        border-color: transparent 
+    }
+    50% { 
+        border-color: orange; 
+    }