diff --git a/index.js b/index.js
index 86fe7d438..189a345ad 100644
--- a/index.js
+++ b/index.js
@@ -29,27 +29,72 @@ const gamesContainer = document.getElementById("games-container");
function addGamesToPage(games) {
// loop over each item in the data
+ for (let game of games){
+
+ // Set-up
+ let gameCard = document.createElement("div");
+ gameCard.classList.add("game-card");
+
+ // Customization: Custom message depending on goal being met or not, made more sense than a single type of message
+ let goalsMet =''
+ if(game["pledged"] >= game["goal"])
+ {
+ goalsMet = `
+
The $${game["goal"].toLocaleString('en-US')} goal has been met!
+ For this game, ${game["backers"].toLocaleString('en-US')} backers have pledged $${game["pledged"].toLocaleString()} total.
+ `;
+ }
+ else
+ {
+ goalsMet = `
+
The $${game["goal"].toLocaleString('en-US')} goal hasn't been met yet!
+ For this game, ${game["backers"].toLocaleString('en-US')} backers have pledged $${game["pledged"].toLocaleString()} total.
+ `;
+ }
+
+ // Adding info to page
+ const gameInfo = `
+
+
${game["name"]}
+
${game["description"]}
+ ${goalsMet}
+ `;
+ gameCard.innerHTML = gameInfo;
+ document.getElementById("games-container").appendChild(gameCard);
+ }
+}
+// Customization: function adds games to an html table when called
+function addGamesToTable(games) {
+
+ // Set-up
+ let gameTable = document.createElement("table");
+ let tableInfo = `
+ | Name |
+ Description |
+ Pledged |
+ Goal |
+ Backers |
+
`
+
+ // Loops through each game and sets up the info as expected
+ for (let game of games){
+ tableInfo += `
+ | ${game["name"]} |
+ ${game["description"]} |
+ $${game["pledged"].toLocaleString()} |
+ $${game["goal"].toLocaleString()} |
+ ${game["backers"].toLocaleString()} |
+
`
+ }
- // create a new div element, which will become the game card
-
-
- // add the class game-card to the list
-
-
- // set the inner HTML using a template literal to display some info
- // about each game
- // TIP: if your images are not displaying, make sure there is space
- // between the end of the src attribute and the end of the tag ("/>")
-
-
- // append the game to the games-container
-
+ // Adding info to page
+ gameTable.innerHTML = tableInfo;
+ document.getElementById("games-container").appendChild(gameTable);
}
-// call the function we just defined using the correct variable
-// later, we'll call this function using a different list of games
-
+// Function Call
+addGamesToPage(GAMES_JSON);
/*************************************************************************************
* Challenge 4: Create the summary statistics at the top of the page displaying the
@@ -61,19 +106,22 @@ function addGamesToPage(games) {
const contributionsCard = document.getElementById("num-contributions");
// use reduce() to count the number of total contributions by summing the backers
-
+const contributions = GAMES_JSON.reduce( (accum, game) => {return accum + game["backers"];}, 0);
// set the inner HTML using a template literal and toLocaleString to get a number with commas
-
+contributionsCard.innerHTML = ` ${contributions.toLocaleString()}
`;
// grab the amount raised card, then use reduce() to find the total amount raised
const raisedCard = document.getElementById("total-raised");
+const raised = GAMES_JSON.reduce( (accum, game) => {return accum + game["pledged"];}, 0);
// set inner HTML using template literal
-
+raisedCard.innerHTML = ` $${raised.toLocaleString()}
`;
// grab number of games card and set its inner HTML
const gamesCard = document.getElementById("num-games");
+const games = GAMES_JSON.length;
+gamesCard.innerHTML = ` ${games.toLocaleString()}
`;
/*************************************************************************************
@@ -82,43 +130,81 @@ const gamesCard = document.getElementById("num-games");
* Skills used: functions, filter
*/
+// Customization: record last click to ensure switching to table format works on current button
+let lastClick = "all";
+
// show only games that do not yet have enough funding
function filterUnfundedOnly() {
+
+ // Setup
deleteChildElements(gamesContainer);
+ lastClick = "unfunded";
+ let tableBtn = document.getElementById("table-btn");
// use filter() to get a list of games that have not yet met their goal
+ let unfundedGames = GAMES_JSON.filter(game => { return game["pledged"] < game["goal"];});
-
- // use the function we previously created to add the unfunded games to the DOM
-
+ // use the function we previously created to add the unfunded games to the DOM, depending on specificied format
+ tableBtn.checked ? addGamesToTable(unfundedGames) : addGamesToPage(unfundedGames);
}
// show only games that are fully funded
function filterFundedOnly() {
+
+ // Setup
deleteChildElements(gamesContainer);
+ lastClick = "funded";
+ let tableBtn = document.getElementById("table-btn");
- // use filter() to get a list of games that have met or exceeded their goal
-
-
- // use the function we previously created to add unfunded games to the DOM
+ // use filter() to get a list of g\ames that have met or exceeded their goal
+ let fundedGames = GAMES_JSON.filter(game => { return game["pledged"] >= game["goal"];});
+ // use the function we previously created to add the unfunded games to the DOM, depending on specificied format
+ tableBtn.checked ? addGamesToTable(fundedGames) : addGamesToPage(fundedGames);
}
// show all games
function showAllGames() {
- deleteChildElements(gamesContainer);
- // add all games from the JSON data to the DOM
+ // Setup
+ deleteChildElements(gamesContainer);
+ lastClick = "all"
+ let tableBtn = document.getElementById("table-btn");
+ // add all games from the JSON data to the DOM, depending on specificied format
+ tableBtn.checked ? addGamesToTable(GAMES_JSON) : addGamesToPage(GAMES_JSON);
}
+// Customization: Sets up the Table depending on the last button clicked
+function setTable() {
+ switch (lastClick) {
+ case "funded":
+ filterFundedOnly();
+ break;
+
+ case "unfunded":
+ filterUnfundedOnly();
+ break;
+
+ default:
+ showAllGames();
+ break;
+ }
+}
// select each button in the "Our Games" section
const unfundedBtn = document.getElementById("unfunded-btn");
const fundedBtn = document.getElementById("funded-btn");
const allBtn = document.getElementById("all-btn");
+const tableBtn = document.getElementById("table-btn");
// add event listeners with the correct functions to each button
+unfundedBtn.addEventListener("click", filterUnfundedOnly);
+fundedBtn.addEventListener("click", filterFundedOnly);
+allBtn.addEventListener("click", showAllGames);
+// Customization: Event listener for new button
+tableBtn.addEventListener("change", () => tableBtn.checked != "checked" ? tableBtn.checked = "checked" : tableBtn.checked = null);
+tableBtn.addEventListener("change", setTable);
/*************************************************************************************
* Challenge 6: Add more information at the top of the page about the company.
@@ -129,13 +215,20 @@ const allBtn = document.getElementById("all-btn");
const descriptionContainer = document.getElementById("description-container");
// use filter or reduce to count the number of unfunded games
-
+let unfundedGames = GAMES_JSON.filter(game => { return game["pledged"] < game["goal"];}).length;
// create a string that explains the number of unfunded games using the ternary operator
-
+let unfundedStr = `A total of $${GAMES_JSON.reduce( (accum, game) => {return accum + game["pledged"];}, 0).toLocaleString()} has been raised for ${GAMES_JSON.length} games.
+Currently, ${unfundedGames} ${unfundedGames > 1 ? "games remain" : "game remains"} unfunded.
+We need your help to fund ${unfundedGames > 1 ? "these amazing games" : "this amazing game"}!`;
// create a new DOM element containing the template string and append it to the description container
+const description = document.createElement("p");
+const descriptionText = document.createTextNode(unfundedStr);
+description.appendChild(descriptionText);
+
+descriptionContainer.appendChild(description);
/************************************************************************************
* Challenge 7: Select & display the top 2 games
* Skills used: spread operator, destructuring, template literals, sort
@@ -149,7 +242,16 @@ const sortedGames = GAMES_JSON.sort( (item1, item2) => {
});
// use destructuring and the spread operator to grab the first and second games
+let [firstGame, secondGame, ...otherGames] = sortedGames;
// create a new element to hold the name of the top pledge game, then append it to the correct element
-
-// do the same for the runner up item
\ No newline at end of file
+const firstGameElement = document.createElement("p");
+const firstGameName = document.createTextNode(`${firstGame["name"]}`);
+firstGameElement.appendChild(firstGameName);
+firstGameContainer.appendChild(firstGameElement);
+
+// do the same for the runner up item
+const secondGameElement = document.createElement("p");
+const secondGameName = document.createTextNode(`${secondGame["name"]}`);
+secondGameElement.appendChild(secondGameName);
+secondGameContainer.appendChild(secondGameElement);
\ No newline at end of file
diff --git a/style.css b/style.css
index 11303c2a7..d339c6beb 100644
--- a/style.css
+++ b/style.css
@@ -21,6 +21,9 @@ body {
.stats-container {
display: flex;
+ align-items: center;
+ cursor: pointer;
+ box-shadow: 0 0 30px lightblue;
}
.stats-card {
@@ -72,4 +75,21 @@ button {
padding: 1%;
margin: 1%;
border-radius: 7px;
-}
\ No newline at end of file
+}
+
+/* Custom cs for table and tale elements */
+table {
+ border-collapse: collapse;
+ box-shadow: 0 0 30px lightblue;
+ border: 3px solid ;
+ width: 90%;
+}
+
+th, td {
+ border-collapse: collapse;
+ background-color: #a8b0bc;
+ padding: 10px;
+ border: 2 px solid lightblue;
+ box-shadow: 0 0 30px lightblue;
+ box-sizing: border-box;
+ }
\ No newline at end of file
From ccaac91d8c390dbe13994337722d53287f891925 Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 22:32:25 -0400
Subject: [PATCH 02/10] Added README and fixed up some code
---
README.md | 34 +++++++++++++++-------------------
index.js | 28 ++++++++++------------------
2 files changed, 25 insertions(+), 37 deletions(-)
diff --git a/README.md b/README.md
index a12177342..bf38acfb0 100644
--- a/README.md
+++ b/README.md
@@ -1,44 +1,40 @@
-# WEB102 Prework - *Name of App Here*
+# WEB102 Prework - *Sea Monster Crowdfunding Web App*
-Submitted by: **Your Name Here**
+Submitted by: **Jaydon Bingham**
-**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
+**Sea Monster Crowdfunding Web App** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
-Time spent: **X** hours spent in total
+Time spent: **4.5** hours spent in total
## Required Features
The following **required** functionality is completed:
-* [ ] The introduction section explains the background of the company and how many games remain unfunded.
-* [ ] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
-* [ ] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
-* [ ] The Our Games section has three buttons that allow the user to display only unfunded games, only funded games, or all games.
+* [x] The introduction section explains the background of the company and how many games remain unfunded.
+* [x] The Stats section includes information about the total contributions and dollars raised as well as the top two most funded games.
+* [x] The Our Games section initially displays all games funded by Sea Monster Crowdfunding
+* [x] The Our Games section has three buttons that allow the user to display only unfunded games, only funded games, or all games.
The following **optional** features are implemented:
-* [ ] List anything else that you can get done to improve the app functionality!
+* [x] Custom message below each gamecard displaying all relevant information, which changes depending on whether funding has been completed.
+* [x] Checkbox button which changes the information display from gamecards to a table (information displayed is based on last button clicked)
## Video Walkthrough
Here's a walkthrough of implemented features:
-
+
-
-GIF created with ...
-
+GIF created with ScreenToGif
## Notes
-Describe any challenges encountered while building the app.
+I wasn't incredibly challenged during while building the app, but there were a couple concepts I was unfamiliar with whilst building the app, such as the ternary operator and destructuring. I did a bit of research, and got much more familiar with these concepts, allowing me to finish up development. I was relatively familiar with other parts of the application because of previous experience, and didn't see too much difficulty. Creating a custom improvement was also a bit harder compared to the rest (as it wasn't as guided) but I was able to brainstorm and implement my custom feature after spending a bit of time on it.
## License
- Copyright [yyyy] [name of copyright owner]
+ Copyright [2023] [Jaydon Bingham]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -50,4 +46,4 @@ Describe any challenges encountered while building the app.
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
- limitations under the License.
+ limitations under the License.
\ No newline at end of file
diff --git a/index.js b/index.js
index 189a345ad..53854fe26 100644
--- a/index.js
+++ b/index.js
@@ -36,21 +36,10 @@ function addGamesToPage(games) {
gameCard.classList.add("game-card");
// Customization: Custom message depending on goal being met or not, made more sense than a single type of message
- let goalsMet =''
- if(game["pledged"] >= game["goal"])
- {
- goalsMet = `
- The $${game["goal"].toLocaleString('en-US')} goal has been met!
- For this game, ${game["backers"].toLocaleString('en-US')} backers have pledged $${game["pledged"].toLocaleString()} total.
- `;
- }
- else
- {
- goalsMet = `
- The $${game["goal"].toLocaleString('en-US')} goal hasn't been met yet!
- For this game, ${game["backers"].toLocaleString('en-US')} backers have pledged $${game["pledged"].toLocaleString()} total.
- `;
- }
+ let goalsMet = `
+ The $${game["goal"].toLocaleString('en-US')} goal ${game["pledged"] >= game["goal"] ? "has been met!": "has not been met."}
+ For this game, ${game["backers"].toLocaleString('en-US')} backers have pledged $${game["pledged"].toLocaleString()} total.
+ `;
// Adding info to page
const gameInfo = `
@@ -93,8 +82,8 @@ function addGamesToTable(games) {
document.getElementById("games-container").appendChild(gameTable);
}
-// Function Call
-addGamesToPage(GAMES_JSON);
+// Function Call -> Moved to 248
+// addGamesToPage(GAMES_JSON);
/*************************************************************************************
* Challenge 4: Create the summary statistics at the top of the page displaying the
@@ -254,4 +243,7 @@ firstGameContainer.appendChild(firstGameElement);
const secondGameElement = document.createElement("p");
const secondGameName = document.createTextNode(`${secondGame["name"]}`);
secondGameElement.appendChild(secondGameName);
-secondGameContainer.appendChild(secondGameElement);
\ No newline at end of file
+secondGameContainer.appendChild(secondGameElement);
+
+// Late function call ensures list of games is sorted by pledged
+addGamesToPage(GAMES_JSON);
\ No newline at end of file
From 2ff45415556ae92f6a970e903c0d95cf303e0ce0 Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 22:38:41 -0400
Subject: [PATCH 03/10] Update README.md
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index bf38acfb0..46b573389 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ The following **optional** features are implemented:
Here's a walkthrough of implemented features:
-
+CodePath Website Demo
GIF created with ScreenToGif
@@ -46,4 +46,4 @@ I wasn't incredibly challenged during while building the app, but there were a c
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
- limitations under the License.
\ No newline at end of file
+ limitations under the License.
From c32cf2bc6946172d455bdf1f8a2537871c10cded Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 22:44:34 -0400
Subject: [PATCH 04/10] Update README.md
---
README.md | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 46b573389..d33c7d4e1 100644
--- a/README.md
+++ b/README.md
@@ -24,8 +24,7 @@ The following **optional** features are implemented:
Here's a walkthrough of implemented features:
-CodePath Website Demo
-
+CodePath Website Demo
GIF created with ScreenToGif
## Notes
From 8648665ec9fef240e6f33ac594a2d37cb2c0026c Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 22:50:54 -0400
Subject: [PATCH 05/10] Update README.md
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index d33c7d4e1..480094234 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ The following **optional** features are implemented:
## Video Walkthrough
-Here's a walkthrough of implemented features:
+Here's a walkthrough of implemented features (Click the link and bypass the warning):
CodePath Website Demo
GIF created with ScreenToGif
From b16efe5e2d1c2a128d65b7c619839af64613d19d Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 22:53:15 -0400
Subject: [PATCH 06/10] Update README.md
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 480094234..c7bb8cc8a 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ GIF created with ScreenToGif
## Notes
-I wasn't incredibly challenged during while building the app, but there were a couple concepts I was unfamiliar with whilst building the app, such as the ternary operator and destructuring. I did a bit of research, and got much more familiar with these concepts, allowing me to finish up development. I was relatively familiar with other parts of the application because of previous experience, and didn't see too much difficulty. Creating a custom improvement was also a bit harder compared to the rest (as it wasn't as guided) but I was able to brainstorm and implement my custom feature after spending a bit of time on it.
+I wasn't incredibly challenged while building the app, but there were a couple concepts I was unfamiliar with, such as the ternary operator and destructuring. I did a bit of research, got much more familiar with these concepts, and finished up development. I was relatively familiar with other parts of the application because of previous experience, and didn't see too much difficulty. Creating a custom improvement was also a bit harder compared to the rest (as it wasn't as guided) but I was able to brainstorm and implement my custom feature after spending a bit of time on it.
## License
From 93a603c625ae14d7bf60363a12b96387faf06030 Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 23:05:14 -0400
Subject: [PATCH 07/10] Update README.md
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index c7bb8cc8a..b04ea5c4c 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ The following **optional** features are implemented:
Here's a walkthrough of implemented features (Click the link and bypass the warning):
-CodePath Website Demo
+CodePath Website Demo
GIF created with ScreenToGif
## Notes
From d72d67c1435101afe1a6f4bfcd9670b4aef8d614 Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 23:05:55 -0400
Subject: [PATCH 08/10] Update README.md
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index b04ea5c4c..8890c4031 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ The following **optional** features are implemented:
Here's a walkthrough of implemented features (Click the link and bypass the warning):
-CodePath Website Demo
+CodePath Website Demo
GIF created with ScreenToGif
## Notes
From ea013d415db7f0e8063c64f0ef61529eee1142c0 Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 23:11:37 -0400
Subject: [PATCH 09/10] Update README.md
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 8890c4031..7771b6044 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ The following **optional** features are implemented:
## Video Walkthrough
-Here's a walkthrough of implemented features (Click the link and bypass the warning):
+Here's a walkthrough of implemented features:
CodePath Website Demo
GIF created with ScreenToGif
From ec3990deb831c121a30b63a703459c2d149025ec Mon Sep 17 00:00:00 2001
From: LastS3cond <97639400+LastS3cond@users.noreply.github.com>
Date: Mon, 31 Jul 2023 23:17:43 -0400
Subject: [PATCH 10/10] Update README.md
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 7771b6044..0bc70d2ad 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ Submitted by: **Jaydon Bingham**
**Sea Monster Crowdfunding Web App** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded.
-Time spent: **4.5** hours spent in total
+Time spent: **6** hours spent in total
## Required Features