diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Docs/Challenges.docx b/Docs/Challenges.docx new file mode 100644 index 000000000..1d267bd75 Binary files /dev/null and b/Docs/Challenges.docx differ diff --git a/Docs/Locked PDFs/BEGIN HERE - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/BEGIN HERE - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..c80f82730 Binary files /dev/null and b/Docs/Locked PDFs/BEGIN HERE - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/Challenge #0 - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/Challenge #0 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..6cb3e8576 Binary files /dev/null and b/Docs/Locked PDFs/Challenge #0 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/Challenge #1 - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/Challenge #1 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..a07e9e43a Binary files /dev/null and b/Docs/Locked PDFs/Challenge #1 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/Challenge #2 - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/Challenge #2 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..a400736c4 Binary files /dev/null and b/Docs/Locked PDFs/Challenge #2 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/Challenge #3 - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/Challenge #3 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..e689aec07 Binary files /dev/null and b/Docs/Locked PDFs/Challenge #3 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/Challenge #4 - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/Challenge #4 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..cf85e18f9 Binary files /dev/null and b/Docs/Locked PDFs/Challenge #4 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/Challenge #5 - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/Challenge #5 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..8562ae556 Binary files /dev/null and b/Docs/Locked PDFs/Challenge #5 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/Challenge #6 - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/Challenge #6 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..102b25c68 Binary files /dev/null and b/Docs/Locked PDFs/Challenge #6 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/Challenge #7 - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/Challenge #7 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..3e24f9232 Binary files /dev/null and b/Docs/Locked PDFs/Challenge #7 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/Locked PDFs/FINISH HERE - How to Submit - CodePath WEB102 Prework.pdf b/Docs/Locked PDFs/FINISH HERE - How to Submit - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..dc004580f Binary files /dev/null and b/Docs/Locked PDFs/FINISH HERE - How to Submit - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/._Locked PDFs b/Docs/__MACOSX/._Locked PDFs new file mode 100644 index 000000000..c415e033c Binary files /dev/null and b/Docs/__MACOSX/._Locked PDFs differ diff --git a/Docs/__MACOSX/Locked PDFs/._BEGIN HERE - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._BEGIN HERE - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..349af4f2f Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._BEGIN HERE - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._Challenge #0 - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._Challenge #0 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..bb8a191f5 Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._Challenge #0 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._Challenge #1 - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._Challenge #1 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..d4599c3ef Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._Challenge #1 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._Challenge #2 - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._Challenge #2 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..b5c6338cf Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._Challenge #2 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._Challenge #3 - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._Challenge #3 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..2bfdded65 Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._Challenge #3 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._Challenge #4 - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._Challenge #4 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..d8fd2b006 Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._Challenge #4 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._Challenge #5 - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._Challenge #5 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..6cdf9adf7 Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._Challenge #5 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._Challenge #6 - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._Challenge #6 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..8941b08df Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._Challenge #6 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._Challenge #7 - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._Challenge #7 - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..184348d76 Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._Challenge #7 - CodePath WEB102 Prework.pdf differ diff --git a/Docs/__MACOSX/Locked PDFs/._FINISH HERE - How to Submit - CodePath WEB102 Prework.pdf b/Docs/__MACOSX/Locked PDFs/._FINISH HERE - How to Submit - CodePath WEB102 Prework.pdf new file mode 100644 index 000000000..26c0e5054 Binary files /dev/null and b/Docs/__MACOSX/Locked PDFs/._FINISH HERE - How to Submit - CodePath WEB102 Prework.pdf differ diff --git a/Docs/~$allenges.docx b/Docs/~$allenges.docx new file mode 100644 index 000000000..0fc5504fd Binary files /dev/null and b/Docs/~$allenges.docx differ diff --git a/Docs/~WRL0003.tmp b/Docs/~WRL0003.tmp new file mode 100644 index 000000000..62c57708f Binary files /dev/null and b/Docs/~WRL0003.tmp differ diff --git a/Docs/~WRL2937.tmp b/Docs/~WRL2937.tmp new file mode 100644 index 000000000..de9da8ed0 Binary files /dev/null and b/Docs/~WRL2937.tmp differ diff --git a/README.md b/README.md index a12177342..aeb632668 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,35 @@ -# WEB102 Prework - *Name of App Here* +# WEB102 Prework - _SeaMonsterFundingApp_ -Submitted by: **Your Name Here** +Submitted by: **Sebastián L. Corporán Berríos** -**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded. +**SeaMonsterFundingApp** 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: **16** 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] Display all games in a dynamically created table +- [x] Change name of title bar, and add an icon ## Video Walkthrough Here's a walkthrough of implemented features: -Video Walkthrough +Video Walkthrough -GIF created with ... + +GIF created with [ScreenToGif](https://www.screentogif.com/) for Windows + -
- -

Sea Monster Crowdfunding

-
+ + + + + Sea Monster + + - -

Welcome to Sea Monster!

-
-

The purpose of our company is to fund independent games. We've been in operation for 12 years.

-
+ + +
+ +

Sea Monster Crowdfunding

+
- -

Stats

-
-
-

Individual Contributions

-

-

-
-
-

Total Raised

-

-

-
-
-

Total Number of Games

-

-

-
+ +

Welcome to Sea Monster!

+
+

+ The purpose of our company is to fund independent games. We've been in + operation for 12 years. +

+
+ + +

Stats

+
+
+

Individual Contributions

+

-
-
-

🥇 Top Funded Game

-
-
-

🥈 Runner Up

-
+
+

Total Raised

+

- - -

Our Games

-

Check out each of our games below!

-
- - - +
+

Total Number of Games

+

-
- +
+
+
+

🥇 Top Funded Game

+
+
+

🥈 Runner Up

+
+ + +

Our Games

+

Check out each of our games below!

+
+ + + +
+
+ + + - - \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index 86fe7d438..000000000 --- a/index.js +++ /dev/null @@ -1,155 +0,0 @@ -/***************************************************************************** - * Challenge 2: Review the provided code. The provided code includes: - * -> Statements that import data from games.js - * -> A function that deletes all child elements from a parent element in the DOM -*/ - -// import the JSON data about the crowd funded games from the games.js file -import GAMES_DATA from './games.js'; - -// create a list of objects to store the data about the games using JSON.parse -const GAMES_JSON = JSON.parse(GAMES_DATA) - -// remove all child elements from a parent element in the DOM -function deleteChildElements(parent) { - while (parent.firstChild) { - parent.removeChild(parent.firstChild); - } -} - -/***************************************************************************** - * Challenge 3: Add data about each game as a card to the games-container - * Skills used: DOM manipulation, for loops, template literals, functions -*/ - -// grab the element with the id games-container -const gamesContainer = document.getElementById("games-container"); - -// create a function that adds all data from the games array to the page -function addGamesToPage(games) { - - // loop over each item in the data - - - // 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 - -} - -// call the function we just defined using the correct variable -// later, we'll call this function using a different list of games - - -/************************************************************************************* - * Challenge 4: Create the summary statistics at the top of the page displaying the - * total number of contributions, amount donated, and number of games on the site. - * Skills used: arrow functions, reduce, template literals -*/ - -// grab the contributions card element -const contributionsCard = document.getElementById("num-contributions"); - -// use reduce() to count the number of total contributions by summing the backers - - -// set the inner HTML using a template literal and toLocaleString to get a number with commas - - -// grab the amount raised card, then use reduce() to find the total amount raised -const raisedCard = document.getElementById("total-raised"); - -// set inner HTML using template literal - - -// grab number of games card and set its inner HTML -const gamesCard = document.getElementById("num-games"); - - -/************************************************************************************* - * Challenge 5: Add functions to filter the funded and unfunded games - * total number of contributions, amount donated, and number of games on the site. - * Skills used: functions, filter -*/ - -// show only games that do not yet have enough funding -function filterUnfundedOnly() { - deleteChildElements(gamesContainer); - - // use filter() to get a list of games that have not yet met their goal - - - // use the function we previously created to add the unfunded games to the DOM - -} - -// show only games that are fully funded -function filterFundedOnly() { - deleteChildElements(gamesContainer); - - // 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 - -} - -// show all games -function showAllGames() { - deleteChildElements(gamesContainer); - - // add all games from the JSON data to the DOM - -} - -// 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"); - -// add event listeners with the correct functions to each button - - -/************************************************************************************* - * Challenge 6: Add more information at the top of the page about the company. - * Skills used: template literals, ternary operator -*/ - -// grab the description container -const descriptionContainer = document.getElementById("description-container"); - -// use filter or reduce to count the number of unfunded games - - -// create a string that explains the number of unfunded games using the ternary operator - - -// create a new DOM element containing the template string and append it to the description container - -/************************************************************************************ - * Challenge 7: Select & display the top 2 games - * Skills used: spread operator, destructuring, template literals, sort - */ - -const firstGameContainer = document.getElementById("first-game"); -const secondGameContainer = document.getElementById("second-game"); - -const sortedGames = GAMES_JSON.sort( (item1, item2) => { - return item2.pledged - item1.pledged; -}); - -// use destructuring and the spread operator to grab the first and second games - -// 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 diff --git a/games.js b/js/games.js similarity index 90% rename from games.js rename to js/games.js index 5299327b4..e1c89c352 100644 --- a/games.js +++ b/js/games.js @@ -1,9 +1,20 @@ // Image credits: Kickstarter + +/* + * Pledged- Holds a dollar amount referring to the + amount of money backers have donated to + the game. + + * backers- Holds a number referring to the + number of unique people who have + donated to fund a game. +*/ + const games = ` [ { "name": "Heroes Of Mythic Americas", "description": "An exciting 5e RPG supplement that heroically represents pre-Columbian American cultures and mythologies", - "pledged": 1572, + "pledged": 1572, "goal": 10000, "backers": 9, "img": "./assets/heroes_of_mythic_americas.png" @@ -89,7 +100,7 @@ const games = ` [ "img": "./assets/kingdom_death.png" } ] -` +`; const template = ` { "name": "", @@ -99,6 +110,6 @@ const template = ` "backers": 0, "img": "" }, -` +`; -export default games; \ No newline at end of file +export default games; diff --git a/js/index.js b/js/index.js new file mode 100644 index 000000000..2d0736327 --- /dev/null +++ b/js/index.js @@ -0,0 +1,406 @@ +/***************************************************************************** + * Challenge 2: Review the provided code. The provided code includes: + * -> Statements that import data from games.js + * -> A function that deletes all child elements from a parent element in the DOM + */ + +// import the JSON data about the crowd funded games from the games.js file +import GAMES_DATA from "./games.js"; + +// create a list of objects to store the data about the games using JSON.parse +const GAMES_JSON = JSON.parse(GAMES_DATA); + +// remove all child elements from a parent element in the DOM +function deleteChildElements(parent) { + while (parent.firstChild) { + parent.removeChild(parent.firstChild); + } +} + +/***************************************************************************** + * Challenge 3: Add data about each game as a card to the games-container + * Skills used: DOM manipulation, for loops, template literals, functions + */ + +// grab the element with the id games-container +const gamesContainer = document.getElementById("games-container"); + +// create a function that adds all data from the games array to the page +function addGamesToPage(games) { + games.forEach((game) => { + const gameCard = document.createElement("div"); + + gameCard.setAttribute("class", "game-card"); + + let imgPath = game.img; + + let info = `

${game.name}

+

${game.description}

+ `; + + gameCard.innerHTML = info; + + gamesContainer.appendChild(gameCard); + }); // foreach + + // gamesContainer.append(table); +} // addGamesToPage() + +//================================================================================ + +// call the function we just defined using the correct variable +// later, we'll call this function using a different list of games + +addGamesToPage(GAMES_JSON); + +//================================================================================ + +/************************************************************************************* + * Challenge 4: Create the summary statistics at the top of the page displaying the + * total number of contributions, amount donated, and number of games on the site. + * Skills used: arrow functions, reduce, template literals + */ + +// grab the contributions card element +const contributionsCard = document.getElementById("num-contributions"); + +//================================================================================ + +function getTotalContributions() { + const total = GAMES_JSON.reduce((acc, game) => { + return acc + game.backers; + }, 0); + + const formattedTotal = total.toLocaleString(); + + contributionsCard.innerHTML = formattedTotal; +} // getTotalContributions() + +//================================================================================ + +getTotalContributions(); + +//================================================================================ + +// grab the amount raised card, then use reduce() to find the total amount raised +const raisedCard = document.getElementById("total-raised"); + +//================================================================================ + +function getTotalAmountRaised() { + const total = GAMES_JSON.reduce((acc, game) => { + return acc + game.pledged; + }, 0); + + const formatter = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + minimumFractionDigits: 0, + maximumFractionDigits: 2, + }); + + const formattedTotal = formatter.format(total); + + return formattedTotal; +} // GetTotalAmountRaised() + +getTotalAmountRaised(); + +//================================================================================ + +const totalRaised = getTotalAmountRaised(); + +// set inner HTML using template literal +raisedCard.innerHTML = totalRaised; + +//================================================================================ + +function getTotalGamesPlayed() { + const numUnfundedGames = filterUnfundedOnly().length; + + const numFundedGames = filterFundedOnly().length; + + const total = numFundedGames + numUnfundedGames; + + return total; +} // getTotalGamesPlayed() + +//================================================================================ + +// grab number of games card and set its inner HTML +const totalGamesPlayed = getTotalGamesPlayed(); + +const gamesCard = document.getElementById("num-games"); + +gamesCard.innerHTML = totalGamesPlayed; + +/************************************************************************************* + * Challenge 5: Add functions to filter the funded and unfunded games + * total number of contributions, amount donated, and number of games on the site. + * Skills used: functions, filter + */ + +// show only games that do not yet have enough funding +function filterUnfundedOnly() { + deleteChildElements(gamesContainer); + + const unfundedGames = GAMES_JSON.filter((game) => { + return game.pledged < game.goal; + }); // filter() + + return unfundedGames; +} // filterUnfundedOnly() + +//================================================================================ + +// show only games that are fully funded +function filterFundedOnly() { + deleteChildElements(gamesContainer); + + const fundedGames = GAMES_JSON.filter((game) => { + return game.pledged >= game.goal; + }); // filter() + + return fundedGames; +} // filterFundedOnly() + +//===================================================================== + +// 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"); + +function appendTableBody(tableBody, table, games) { + // deleteChildElements(tableContainer); + games.forEach((game) => { + const contentRow = document.createElement("tr"); + + const nameCell = document.createElement("td"); + + nameCell.style.textAlign = "left"; + + nameCell.innerHTML = game.name; + + const descriptionCell = document.createElement("td"); + + descriptionCell.style.textAlign = "left"; + + descriptionCell.innerHTML = game.description; + + const posterCell = document.createElement("td"); + + const poster = document.createElement("img"); + + poster.setAttribute("src", `${game.img}`); + + posterCell.appendChild(poster); + + contentRow.append(nameCell); + + contentRow.append(descriptionCell); + + contentRow.append(posterCell); + + tableBody.appendChild(contentRow); + }); // foreach + + table.appendChild(tableBody); +} // appendTableBody() + +//===================================================================== + +function appendTableHeader(tableHeader, table) { + const nameHeaderCell = document.createElement("th"); + + nameHeaderCell.innerHTML = "Game"; + + tableHeader.appendChild(nameHeaderCell); + + const descriptionHeaderCell = document.createElement("th"); + + descriptionHeaderCell.innerHTML = "Description"; + + tableHeader.appendChild(descriptionHeaderCell); + + const posterHeaderCell = document.createElement("th"); + + posterHeaderCell.innerHTML = "Image"; + + tableHeader.appendChild(posterHeaderCell); + + table.appendChild(tableHeader); +} // appendTableHeader() + +//===================================================================== + +// add event listeners with the correct functions to each button + +function unfundedBtnClick() { + unfundedBtn.addEventListener("click", () => { + const unfundedGames = filterUnfundedOnly(); + + const table = document.createElement("table"); + + const tableHeader = document.createElement("thead"); + + appendTableHeader(tableHeader, table); + + const tableBody = document.createElement("tbody"); + + appendTableBody(tableBody, table, unfundedGames); + + gamesContainer.appendChild(table); + }); // addEventListener() +} // unfundedBtnClick() + +unfundedBtnClick(); +//================================================================================ + +function fundedBtnClick() { + fundedBtn.addEventListener("click", () => { + const fundedGames = filterFundedOnly(); + + const table = document.createElement("table"); + + const tableHeader = document.createElement("thead"); + + appendTableHeader(tableHeader, table); + + const tableBody = document.createElement("tbody"); + + appendTableBody(tableBody, table, fundedGames); + + gamesContainer.appendChild(table); + }); // addEventListener() +} // fundedBtnClick() + +fundedBtnClick(); + +//================================================================================ + +function allBtnClick() { + allBtn.addEventListener("click", () => { + const table = document.createElement("table"); + + const tableHeader = document.createElement("thead"); + + appendTableHeader(tableHeader, table); + + const tableBody = document.createElement("tbody"); + + const fundedGames = filterFundedOnly(); + + const unfundedGames = filterUnfundedOnly(); + + appendTableBody(tableBody, table, fundedGames); + + appendTableBody(tableBody, table, unfundedGames); + + gamesContainer.appendChild(table); + }); +} // allBtnClick() + +allBtnClick(); + +/************************************************************************************* + * Challenge 6: Add more information at the top of the page about the company. + * Skills used: template literals, ternary operator + */ + +// grab the description container +const descriptionContainer = document.getElementById("description-container"); + +// use filter or reduce to count the number of unfunded games +function getTotalUnfundedGames() { + const unfundedGames = filterUnfundedOnly(); + + const total = unfundedGames.length; + + return total; +} // getTotalUnfundedGames() + +//================================================================================ + +// create a string that explains the number of unfunded games using the ternary operator +function getUnfundedGamesDescription() { + const totalRaised = getTotalAmountRaised(); + + const remainingUnfundedGames = getTotalUnfundedGames(); + + const totalGames = getTotalGamesPlayed(); + + const string1 = + `A total of ${totalRaised} has been raised for ${totalGames} games. ` + + `Currently, 1 game remains unfunded. ` + + `We need your help to fund this amazing game!`; + + const string2 = + `A total of ${totalRaised} has been raised for ${totalGames} games. ` + + `Currently, ${remainingUnfundedGames} games remain unfunded. ` + + `We need your help to fund these amazing games!`; + + const isOneGameFunded = remainingUnfundedGames === 1; + + return isOneGameFunded ? string1 : string2; +} // getUnfundedGamesDescription() + +//================================================================================ + +// create a new DOM element containing the template string and append it to the description container + +function displayUnfundedGamesDescription() { + const para = document.createElement("p"); + + const description = getUnfundedGamesDescription(); + + para.append(description); + + descriptionContainer.appendChild(para); +} // displayUnfundedGamesDescription() + +displayUnfundedGamesDescription(); + +/************************************************************************************ + * Challenge 7: Select & display the top 2 games + * Skills used: spread operator, destructuring, template literals, sort + */ + +const firstGameContainer = document.getElementById("first-game"); +const secondGameContainer = document.getElementById("second-game"); + +const sortedGames = GAMES_JSON.sort((item1, item2) => { + return item2.pledged - item1.pledged; +}); + +// use destructuring and the spread operator to grab the first and second games + +const [first, second] = sortedGames; + +// create a new element to hold the name of the top pledge game, then append it to the correct element + +function displayTopFundedGame() { + const para = document.createElement("p"); + + para.append(first.name); + + firstGameContainer.appendChild(para); +} // displayTopFundedGame() + +displayTopFundedGame(); + +//============================================================================ + +// do the same for the runner up item + +function displayRunnerUp() { + const para = document.createElement("p"); + + para.append(second.name); + + secondGameContainer.appendChild(para); +} // displayRunnerUp() + +displayRunnerUp(); + +//================================================================================