Skip to content

a2-azinxtheonix #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AzinxtheOnix wants to merge 5 commits into
base: main
Choose a base branch
from
Open

a2-azinxtheonix #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
935f641
First Draft
Sep 9, 2021
6d837a1
Second Draft (trying to fix connection bug)
Sep 9, 2021
5df43d1
Third Draft (Note: Also not working)
Sep 9, 2021
aa3534e
Revert "Second Draft (trying to fix connection bug)"
Sep 9, 2021
73863e3
Fixed README.md
Sep 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 25 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,29 @@
Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js
### Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js
===

## A Random Survey About Destiny (The Game)
Michael Lai http://a2-azinxtheonix.glitch.me

With this assignment, I've created a scoreboard for people to record their highscores to. This scoreboard also keeps track who has the highscore in each game.

For the technical side of the project, it shows that I can design an application that involves sending data to a server and sending data back to the client to update. I used CSS grids to position items.

As for instructions on how to use the application, I've already put them in the site itself.

NOTE: There's an error that's stating the receiving end does not exist, which in turn causes the whole application not to work. From debugging, it seems to be a server side error when it tries to unsuccessfully load the site in node.js (try node ./server.improved.js in console, go to the localhost on port 3000, and loading the local.html file; it won't work). I've looked through my code and but I can't see what's causing this. I'm fairly certain that the rest of the code works (if the client can connect properly).

The server should also be calculating the highscore as the derived data, but with the server connection bug, nothing can be seen.

## Technical Achievements
**1 - Updating Data:**
The code here should work if it weren't for the weird server connection bug that's going on right now. Essentially what the code should be doing is every time a delete, submit, or modify action is taken, it will beforehand update the client side data to make sure the data the action working with is up to date. After the action is complete, then the table is updated (with another call to the server for the JSON data).

## Design/Evaluation Achievements
N/A

## Old Readme Below
---

Due: September 9th, by 11:59 AM.

This assignment aims to introduce you to creating a prototype two-tiered web application.
Expand Down Expand Up @@ -82,16 +105,4 @@ You'll need to use sometype of collaborative software that will enable you both
3. What comments did they make that surprised you?
4. What would you change about the interface based on their feedback?

*You do not need to actually make changes based on their feedback*. This acheivement is designed to help gain experience testing user interfaces. If you run two user studies, you should answer two sets of questions.

Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
---

## Your Web Application Title
Include a very brief summary of your project here. Be sure to include the CSS positioning technique you used, and any required instructions to use your application.

## Technical Achievements
- **Tech Achievement 1**: Using a combination of...

### Design/Evaluation Achievements
- **Design Achievement 1**:
*You do not need to actually make changes based on their feedback*. This acheivement is designed to help gain experience testing user interfaces. If you run two user studies, you should answer two sets of questions.
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "",
"version": "",
"name": "a2-shortstack",
"version": "1.0.0",
"description": "",
"author": "",
"author": "Michael Lai",
"scripts": {
"start": "node server.improved.js"
},
Expand Down
Binary file added public/Floofle2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 87 additions & 1 deletion public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,87 @@
/*Style your own assignment! This is fun! */
/*
Color Theme Notes:
#010400 (Black)
#B7B7B7 (Gray)
#FFFBFC (White)
#62BBC1 (Cyan)
#EC058E (Magenta)
*/

/*General Formatting*/
body {
font-family: 'Urbanist', sans-serif;
color: black;
background-color: #62BBC1;
}

.gridTitle {
grid-area: header;
}

.gridForm {
grid-area: form;
background-color: #EC058E;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 10px;
}

.gridTable {
grid-area: table;
}

.gridContainer {
display: grid;
grid-template-areas:
'header header header header'
'form table table table';
grid-gap: 10px;
padding: 10px;
}

/*Form*/

.instructions {
padding: 10px;
}

.defaultSelection {
display: none;
}

.button {
cursor: pointer;
}

/*Table*/
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #B7B7B7;
border-radius: 10px;
}

th, td {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}

/*Icons*/

.material-icons-outlined {
user-select: none;
}

.iconButton {
color:black;
}

.iconButton:hover {
cursor: pointer;
color: #FFFBFC;
}
100 changes: 71 additions & 29 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,81 @@
<head>
<title>CS4241 Assignment 2</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/jpg" href="./Floofle2.png"/>
<link href="https://fonts.googleapis.com/css2?family=Urbanist&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form action="">
<input type='text' id='yourname' value="your name here">
<button>submit</button>
</form>
</body>
<script>

const submit = function( e ) {
// prevent default form action from being carried out
e.preventDefault()
<div class="gridContainer">
<div class="gridTitle">
<h1>Arcade Score Keeper</h1>
</div>

<div class="gridForm">
<div class="instructions">
<h2>Introduction:</h2>
<p>This is a simple form for keeping score.</p>
<form>
<label for="name">Name:</label>
<input name="name" type='text' id='nameForm' placeholder="Enter Name Here">
<br><br>

const input = document.querySelector( '#yourname' ),
json = { yourname: input.value },
body = JSON.stringify( json )
<label for="game">Game:</label>
<select name="game" id='gameForm'>
<option disabled=true selected="true" class="defaultSelection">-</option>
<option>Mario Bros.</option>
<option>Donkey Kong</option>
<option>Street Racing</option>
<option>Tetris</option>
</select>
<br><br>

fetch( '/submit', {
method:'POST',
body
})
.then( function( response ) {
// do something with the reponse
console.log( response )
})
<label for="score">Score:</label>
<input for="score" type='number' id='scoreForm' min="0">
<br><br>

return false
}
<input type="submit" value="New Score" class='button' id="newButton">
<input type="submit" value="Submit" class='button' id="submitButton">
</form>
<h2>Instructions:</h2>
<p>
To make an entry, use the form above.
<br>
To edit an entry, click on the
<span class="material-icons-outlined">edit</span>
button.
<br>
To delete an entry, click on the
<span class="material-icons-outlined">delete_forever</span>
button.
</p>
</div>
</div>

window.onload = function() {
const button = document.querySelector( 'button' )
button.onclick = submit
}

</script>
<div class="gridTable">
<table id="scoreTable">
<tr>
<th>Name</th>
<th>Score</th>
<th>Game</th>
<th>High Score?</th>
</tr>
<tr>
<td>Test</td>
<td>0</td>
<td>Test</td>
<td>No</td>
<td>
<span class="material-icons-outlined iconButton">edit</span>
</td>
<td>
<span class="material-icons-outlined iconButton">delete_forever</span>
</td>
</tr>
</table>
</div>
</div>
</body>
<script src="./js/scripts.js"></script>
</html>
Loading