diff --git a/README.md b/README.md index a12177342..94f08a757 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# WEB102 Prework - *Name of App Here* +# WEB102 Prework - Kaung's Crowdfunder -Submitted by: **Your Name Here** +Submitted by: Kaung San Lin -**Name of your app** is a website for the company Sea Monster Crowdfunding that displays information about the games they have funded. +Kaung's Crowdfunder 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: 5 hours spent in total ## Required Features @@ -17,16 +17,17 @@ The following **required** functionality is completed: The following **optional** features are implemented: -* [ ] List anything else that you can get done to improve the app functionality! +* [ ] Added background color and changed text color for most funded and runner up games. +* [ ] Added a navigation button at the start of the page to jump straight to the games section. ## Video Walkthrough Here's a walkthrough of implemented features: -Video Walkthrough +Video Walkthrough -GIF created with ... +GIF created with ScreenToGif

Welcome to Sea Monster!

@@ -48,7 +52,7 @@

🥈 Runner Up

-

Our Games

+

Our Games

Check out each of our games below!

diff --git a/index.js b/index.js index 86fe7d438..691cd4c2e 100644 --- a/index.js +++ b/index.js @@ -29,27 +29,39 @@ const gamesContainer = document.getElementById("games-container"); function addGamesToPage(games) { // loop over each item in the data - + for (const game of games) { // create a new div element, which will become the game card - + const gameCard = document.createElement("div"); // add the class game-card to the list - + gameCard.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 ("/>") + const gameImg = document.createElement("img"); + gameImg.src = game.img; + gameImg.classList.add("game-img"); + gameCard.append(gameImg) + const gameText = `

${game.name}


${game.description}


Backers: ${game.backers}`; - // append the game to the games-container + // ** Extra aesthetics + const textBox = document.createElement("div"); + textBox.classList.add("stats-card"); + textBox.innerHTML = gameText; + gameCard.append(textBox); + // append the game to the games-container + gamesContainer.append(gameCard); + } } // 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,20 +73,23 @@ function addGamesToPage(games) { const contributionsCard = document.getElementById("num-contributions"); // use reduce() to count the number of total contributions by summing the backers - +const totalContributions = GAMES_JSON.reduce((acc, game) => {return acc + game.backers;}, 0); +//contributionsCard.innerHTML = totalContributions.toLocaleString("en-US"); // set the inner HTML using a template literal and toLocaleString to get a number with commas - +contributionsCard.innerHTML = `${totalContributions.toLocaleString("en-US")}`; // grab the amount raised card, then use reduce() to find the total amount raised const raisedCard = document.getElementById("total-raised"); - +const totalRaised = GAMES_JSON.reduce((acc, game) => {return acc + game.pledged;}, 0).toLocaleString("en-US"); // set inner HTML using template literal +raisedCard.innerHTML = `$${totalRaised}`; // grab number of games card and set its inner HTML const gamesCard = document.getElementById("num-games"); - +const totalGames = GAMES_JSON.reduce((acc, game) => {return acc + 1;}, 0).toLocaleString("en-US"); +gamesCard.innerHTML = `${totalGames}`; /************************************************************************************* * Challenge 5: Add functions to filter the funded and unfunded games @@ -87,10 +102,10 @@ function filterUnfundedOnly() { deleteChildElements(gamesContainer); // use filter() to get a list of games that have not yet met their goal - + const filteredGames = GAMES_JSON.filter((game) => {return game.pledged < game.goal}); // use the function we previously created to add the unfunded games to the DOM - + addGamesToPage(filteredGames); } // show only games that are fully funded @@ -98,10 +113,10 @@ function filterFundedOnly() { deleteChildElements(gamesContainer); // use filter() to get a list of games that have met or exceeded their goal - + const filteredGames = GAMES_JSON.filter((game) => {return game.pledged >= game.goal}); // use the function we previously created to add unfunded games to the DOM - + addGamesToPage(filteredGames) } // show all games @@ -109,7 +124,7 @@ function showAllGames() { deleteChildElements(gamesContainer); // add all games from the JSON data to the DOM - + addGamesToPage(GAMES_JSON); } // select each button in the "Our Games" section @@ -118,7 +133,9 @@ const fundedBtn = document.getElementById("funded-btn"); const allBtn = document.getElementById("all-btn"); // add event listeners with the correct functions to each button - +unfundedBtn.addEventListener("click", filterUnfundedOnly); +fundedBtn.addEventListener("click", filterFundedOnly); +allBtn.addEventListener("click", showAllGames); /************************************************************************************* * Challenge 6: Add more information at the top of the page about the company. @@ -129,13 +146,17 @@ const allBtn = document.getElementById("all-btn"); const descriptionContainer = document.getElementById("description-container"); // use filter or reduce to count the number of unfunded games - +const unfundedGames = GAMES_JSON.reduce((acc, game) => {return acc + ((game.pledged < game.goal)? 1 : 0)}, 0); // create a string that explains the number of unfunded games using the ternary operator - +const message = `A total of $${totalRaised} has been raised for ${totalGames} games. + Currently, ${unfundedGames} ${(unfundedGames === 1)? "game remains" : "games 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 - +const paragraph = document.createElement("p"); +paragraph.innerHTML = message; +descriptionContainer.append(paragraph); /************************************************************************************ * Challenge 7: Select & display the top 2 games * Skills used: spread operator, destructuring, template literals, sort @@ -149,7 +170,14 @@ const sortedGames = GAMES_JSON.sort( (item1, item2) => { }); // 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 - -// do the same for the runner up item \ No newline at end of file +const firstGameName = document.createElement("p"); +firstGameName.innerHTML = first.name; +firstGameContainer.append(firstGameName); + +// do the same for the runner up item +const secondGameName = document.createElement("p"); +secondGameName.innerHTML = second.name; +secondGameContainer.append(secondGameName); \ No newline at end of file diff --git a/style.css b/style.css index 11303c2a7..28ea92f7e 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,22 @@ body { } #tentacles { - width: 50px; + width: 100px; +} + +h2 { + display:flex; + justify-content: center; +} + +#first-game { + color: gold; + background-color: rgb(112, 75, 16); +} + +#second-game { + color: rgb(214, 214, 214); + background-color: rgb(125, 125, 125); } .header { @@ -21,6 +36,12 @@ body { .stats-container { display: flex; + align-items: center; +} + +.stats-container:hover { + cursor: pointer; + box-shadow: 0 0 30px lightblue; } .stats-card {