diff --git a/README.md b/README.md index a12177342..6ebec5245 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# WEB102 Prework - *Name of App Here* +# WEB102 Prework - Sea Monster Crowdfunding Application -Submitted by: **Your Name Here** +Submitted by: Joel Castro -**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 Application 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: 15 hours spent in total ## Required Features @@ -15,30 +15,23 @@ The following **required** functionality is completed: * [ ] 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. -The following **optional** features are implemented: - -* [ ] List anything else that you can get done to improve the app functionality! ## Video Walkthrough Here's a walkthrough of implemented features: -Video Walkthrough - -GIF created with ... - + -## Notes +GIF created with ... QuickTime Player -Describe any challenges encountered while building the app. +## Notes +Went through the use of DOM, combining both JavaScript and HTML together. +Interaction between creating new elements to be displayed in the HTML website, being created in the JS file ## License - Copyright [yyyy] [name of copyright owner] + Copyright [2024] [Joel Castro] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/index.js b/index.js index 86fe7d438..f71200d00 100644 --- a/index.js +++ b/index.js @@ -30,26 +30,37 @@ function addGamesToPage(games) { // loop over each item in the data + for (let g = 0; g < games.length; g++) { + // create a new div element, which will become the game card + let div = document.createElement('div'); + + // add the class game-card to the list + div.classList.add("game-card"); + + // 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 ("/>") + let display = ` + +

${ games[g].name }

+

Pledged: ${ games[g].pledged }

+ `; + div.innerHTML = display; + + + // append the game to the games-container + let gcont = document.getElementById("games-container"); + gcont.appendChild(div); - // 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 - +addGamesToPage(GAMES_JSON); /************************************************************************************* * Challenge 4: Create the summary statistics at the top of the page displaying the @@ -61,19 +72,28 @@ function addGamesToPage(games) { const contributionsCard = document.getElementById("num-contributions"); // use reduce() to count the number of total contributions by summing the backers +const contributors= GAMES_JSON.reduce((ppl, game)=>{ + return ppl + game.backers; +},0); // set the inner HTML using a template literal and toLocaleString to get a number with commas - +contributionsCard.innerHTML = `${contributors.toLocaleString("en-US")}`; // grab the amount raised card, then use reduce() to find the total amount raised const raisedCard = document.getElementById("total-raised"); +const donations = GAMES_JSON.reduce((amt,game)=>{ + return amt + game.pledged; +},0); + // set inner HTML using template literal +raisedCard.innerHTML = `$${donations.toLocaleString("en-US")}`; // grab number of games card and set its inner HTML const gamesCard = document.getElementById("num-games"); +gamesCard.innerHTML = GAMES_JSON.length; /************************************************************************************* @@ -87,9 +107,12 @@ function filterUnfundedOnly() { deleteChildElements(gamesContainer); // use filter() to get a list of games that have not yet met their goal - + let unfunded = GAMES_JSON.filter((game)=>{ + return game.pledged{ + return game.pledged>=game.goal; + }); // use the function we previously created to add unfunded games to the DOM - + addGamesToPage(funded); } // show all games @@ -109,6 +135,7 @@ function showAllGames() { deleteChildElements(gamesContainer); // add all games from the JSON data to the DOM + addGamesToPage(GAMES_JSON); } @@ -116,8 +143,12 @@ function showAllGames() { const unfundedBtn = document.getElementById("unfunded-btn"); const fundedBtn = document.getElementById("funded-btn"); const allBtn = document.getElementById("all-btn"); +const searchBtn =document.getElementById('search-btn'); // add event listeners with the correct functions to each button +unfundedBtn.addEventListener("click",filterUnfundedOnly); +fundedBtn.addEventListener("click", filterFundedOnly); +allBtn.addEventListener("click", showAllGames); /************************************************************************************* @@ -131,11 +162,20 @@ 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 +let unfundedAmt = GAMES_JSON.filter((game)=>{ + return game.pledged1 ? "games":"game"} remain unfunded. We need your help to fund these amazing games!`; // create a new DOM element containing the template string and append it to the description container +let p = document.createElement('p'); +p.innerHTML = displayStr; +descriptionContainer.appendChild(p); + /************************************************************************************ * Challenge 7: Select & display the top 2 games * Skills used: spread operator, destructuring, template literals, sort @@ -149,7 +189,15 @@ const sortedGames = GAMES_JSON.sort( (item1, item2) => { }); // use destructuring and the spread operator to grab the first and second games +const [first, second, ...others] = sortedGames; // create a new element to hold the name of the top pledge game, then append it to the correct element +let firstP = document.createElement('p'); +firstP.innerHTML = first.name; +firstGameContainer.appendChild(firstP); + +// do the same for the runner up item -// do the same for the runner up item \ No newline at end of file +let secondP = document.createElement('p'); +secondP.innerHTML = second.name; +secondGameContainer.appendChild(secondP); \ No newline at end of file diff --git a/seamonsterTest.gif b/seamonsterTest.gif new file mode 100644 index 000000000..d8b12d676 Binary files /dev/null and b/seamonsterTest.gif differ diff --git a/style.css b/style.css index 11303c2a7..7f6fe351f 100644 --- a/style.css +++ b/style.css @@ -21,6 +21,12 @@ body { .stats-container { display: flex; + align-items: center; +} + +.stats-container :hover{ + cursor: pointer; + box-shadow: 0 0 30px lightblue; } .stats-card {