diff --git a/README.md b/README.md index a12177342..a271c1d3e 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,34 @@ -# WEB102 Prework - *Name of App Here* +# WEB102 Prework - _Sea Monster CrowdFunding_ -Submitted by: **Your Name Here** +Submitted by: **Tanvir Islam** -**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** 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: **6** 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] List anything else that you can get done to improve the app functionality! ## Video Walkthrough Here's a walkthrough of implemented features: -Video Walkthrough +Video Walkthrough -GIF created with ... + +GIF created with Kap +
- -

Sea Monster Crowdfunding

+ +

Sea Monster Crowdfunding

Welcome to Sea Monster!

-

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

+

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

+ +

Games

+ +

Stats

-
-

Individual Contributions

-

-

-
-
-

Total Raised

-

-

-
-
-

Total Number of Games

-

-

-
+
+

Individual Contributions

+

+
+
+

Total Raised

+

+
+
+

Total Number of Games

+

+
-
-

🥇 Top Funded Game

-
-
-

🥈 Runner Up

-
+
+

🥇 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 index 86fe7d438..746558ca4 100644 --- a/index.js +++ b/index.js @@ -2,114 +2,145 @@ * 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'; +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) +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); - } + 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 + for (let i = 0; i < games.length; i++) { + // create a new div element, which will become the game card + const div = document.createElement("div"); - // 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 + div.classList.add("game-card"); + //div.classList.add("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 ("/>") + // 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 ("/>") + div.innerHTML = ` +

${games[i]["name"]}

+

${games[i]["description"]}

+

Pledged: $${games[i]["pledged"]}

+

Goal: $${games[i]["goal"]}

+

Backers: ${games[i]["backers"]}

`; - // append the game to the games-container + const gameCon = document.getElementById("games-container"); + gameCon.append(div); + // append the game to the games-container + } } +addGamesToPage(GAMES_JSON); // 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 +const totalCont = GAMES_JSON.reduce((total, GAMES_JSON) => { + return total + GAMES_JSON["backers"]; +}, 0); + +//function to add commas in numbers (also used later) +function addCommas(number) { + return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); +} +const totalCont1 = addCommas(totalCont); // set the inner HTML using a template literal and toLocaleString to get a number with commas - +contributionsCard.innerHTML = `${totalCont1}`; // 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 +const totalrai = GAMES_JSON.reduce((total, GAMES_JSON) => { + return total + GAMES_JSON["pledged"]; +}, 0); +const totalrai1 = addCommas(totalrai); +// set inner HTML using template literal +raisedCard.innerHTML = `$${totalrai1}`; // grab number of games card and set its inner HTML const gamesCard = document.getElementById("num-games"); +const totalgames = GAMES_JSON.reduce((total, GAMES_JSON) => { + return total + 1; +}, 0); +gamesCard.innerHTML = `${totalgames}`; /************************************************************************************* * 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 + deleteChildElements(gamesContainer); + // use filter() to get a list of games that have not yet met their goal + const unfunded = GAMES_JSON.filter((games) => { + return games["pledged"] < games["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 + addGamesToPage(unfunded); } // 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 - + deleteChildElements(gamesContainer); - // use the function we previously created to add unfunded games to the DOM + // use filter() to get a list of games that have met or exceeded their goal + const funded = GAMES_JSON.filter((games) => { + return games["pledged"] > games["goal"]; + }); + // use the function we previously created to add unfunded games to the DOM + addGamesToPage(funded); } // show all games function showAllGames() { - deleteChildElements(gamesContainer); - - // add all games from the JSON data to the DOM + deleteChildElements(gamesContainer); + // add all games from the JSON data to the DOM + addGamesToPage(GAMES_JSON); } // select each button in the "Our Games" section @@ -118,38 +149,180 @@ const fundedBtn = document.getElementById("funded-btn"); const allBtn = document.getElementById("all-btn"); // add event listeners with the correct functions to each button - +unfundedBtn.onclick = filterUnfundedOnly; +fundedBtn.onclick = filterFundedOnly; +allBtn.onclick = showAllGames; /************************************************************************************* * 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 +// use reduce to count the number of unfunded games +const totalUnfunded = GAMES_JSON.reduce( + (total, game) => (game["pledged"] < game["goal"] ? total + 1 : total), + 0 +); +const totalUnfundedmoney = GAMES_JSON.reduce( + (total, game) => total + game["pledged"], + 0 +); +const totalUnfundedMoney1 = addCommas(totalUnfundedmoney); // create a string that explains the number of unfunded games using the ternary operator - +let text = `A total of $${totalUnfundedMoney1} has been raised for 11 games. Currently, ${totalUnfunded} games are unfunded. We need your help to fund these awesome games.`; // create a new DOM element containing the template string and append it to the description container +const flavor = document.createElement("flavortext"); +flavor.innerText = text; +descriptionContainer.append(flavor); /************************************************************************************ * Challenge 7: Select & display the top 2 games - * Skills used: spread operator, destructuring, template literals, sort + * 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; +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 [a, b, ...rest] = sortedGames; + +function topGame() { + const bestgame = document.createElement("div"); + bestgame.innerHTML = ` +

${a.name}

+

${a.description}

+

Pledged: ${a.pledged}

`; + firstGameContainer.append(bestgame); +} + +topGame(); // 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 +// do the same for the runner up item + +function runnerup() { + const bestgame = document.createElement("div"); + bestgame.innerHTML = ` +

${b.name}

+

${b.description}

+

Pledged: ${b.pledged}

`; + secondGameContainer.append(bestgame); +} + +runnerup(); + +//carousel function + +function carousel(games) { + for (let i = 0; i < games.length; i++) { + const ul = document.createElement("figure"); + ul.classList.add("carousel-card"); + if (games[i]["name"].length > 25) { + let tempname = games[i]["name"].slice(0, 25); + ul.innerHTML = `
${tempname}
`; + } else { + ul.innerHTML = `
${games[i]["name"]}
`; + } + const caracontainer = document.getElementById("carousel-container"); + caracontainer.append(ul); + } +} + +carousel(GAMES_JSON); + +//All code past this was code for potential features that can be implemented but not complete + +function filterAlmostfundedOnly() { + deleteChildElements(gamesContainer); + + // use filter() to get a list of games that have not yet met their goal + const unfunded = GAMES_JSON.filter((games) => { + return games["pledged"] < games["goal"]; + }); + + const left = unfunded.map((games) => { + return games["goal"] - games["pledged"]; + }); + + const almostfunded = left.sort((a, b) => a - b); + + let almostfundedFinal = []; + + for (let i = 0; i < almostfunded.length; i++) { + for (let j = 0; j < unfunded.length; j++) { + if (almostfunded[i] == unfunded[j]["goal"] - unfunded[j]["pledged"]) { + almostfundedFinal.push(unfunded[i]); + } + } + } + addGamesToPage(almostfundedFinal); +} + +// + +//const almostFunded = document.getElementById("almost-funded-btn"); +//almostFunded.onclick = filterAlmostfundedOnly; + +// +// +// +// +//
+// +// +// + +function ConvertToEuro() { + deleteChildElements(gamesContainer); + function addGamesToPageEuro(games) { + for (let i = 0; i < games.length; i++) { + const div = document.createElement("div"); + div.classList.add("game-card"); + let pledges = Math.ceil(games[i]["pledged"] * 0.93); + let goals = Math.ceil(games[i]["goal"] * 0.93); + div.innerHTML = ` +

${games[i]["name"]}

+

${games[i]["description"]}

+

Pledged: £${pledges}

+

Goal: £${goals}

+

Backers: ${games[i]["backers"]}

`; + const gameCon = document.getElementById("games-container"); + gameCon.append(div); + } + } + + addGamesToPageEuro(GAMES_JSON); +} + +//const euro = document.getElementById("currency"); +//euro.onchange = ConvertToEuro; + +//from almostfunded +//unfunded.forEach(element => {almostFunded.append([])}); + +//let almostFunded = []; +//almostFunded.append(unfunded[0][goal]-unfunded[0][pledged]); +//for (i = 1; i < unfunded.size(); i++) { +// let left = unfunded[i][goal] - unfunded[i][pledged]; +// for (j = 0; j < almostFunded.size(); j++) { +// if (left < almostFunded[j]) { +// +// } +// } +//} + +//addGamesToPage(unfunded); diff --git a/seamonster.gif b/seamonster.gif new file mode 100644 index 000000000..0de378352 Binary files /dev/null and b/seamonster.gif differ diff --git a/style.css b/style.css index 11303c2a7..6d3ab037a 100644 --- a/style.css +++ b/style.css @@ -14,24 +14,43 @@ body { background-color: lightblue; padding: 1%; align-items: center; - margin-left: -10px; - margin-right: -10px; - margin-top: -10px; + margin-left: 0px; + margin-right: 0px; + margin-top: 0px; +} + +.currencies { + padding-left: 990px; } .stats-container { display: flex; + justify-content: center; + align-items: center; + gap: 9px 14px; +} +.stats-container:hover { + cursor: pointer; + box-shadow: 0 0 30px; + color: lightblue; } .stats-card { background-color: #a8b0bc; - border-radius: 7px; + border-radius: 5px; padding: 1%; margin: 1%; width: 100%; text-align: center; } +.stats-card img { + width: 290px; + height: 150px; + border-radius: 10px; + box-shadow: 0 0 10px #FFFFFF; +} + #num-contributions, #total-raised, #num-games { font-size: 50px; } @@ -40,18 +59,27 @@ body { display: flex; flex-wrap: wrap; justify-content: space-around; + margin: -5px; } .game-img { - width: 100%; - border-radius: 5px; + width: 50px; + height: 50px; + border-radius: 9px; + box-shadow: 0 0 10px #FFFFFF; +} + +.game-card img { + width: 290px; + height: 150px; + border-radius: 10px; box-shadow: 0 0 10px #FFFFFF; } .game-card { background-color: #FFFFFF; - padding: 1%; - margin: 1%; + padding: 20px; + margin: 20px; width: 300px; text-align: center; border-radius: 7px; @@ -72,4 +100,36 @@ button { padding: 1%; margin: 1%; border-radius: 7px; -} \ No newline at end of file +} +button:hover { + cursor: pointer; +} + +.carousel-container { + display: flex; + overflow-x: auto; + margin: 10px; + +} +.carousel-card { + width: 250px; + height: 100px; + border-radius: 7px; + background-color: lightblue; + padding: 12px; + margin: 12px; + text-align: center; + text-overflow: hidden; +} + +.carousel-card:hover { + box-shadow: 0px 0px 10px #ffffff; + cursor: pointer; +} + +.carousel-card img { + width: 130px; + height: 65px; + border-radius: 10px; + margin: auto; +}