Stats
+Individual Contributions
@@ -48,7 +62,7 @@
🥈 Runner Up
Our Games
+Our Games
Check out each of our games below!
diff --git a/index.js b/index.js
index 86fe7d438..4c5768b7b 100644
--- a/index.js
+++ b/index.js
@@ -10,6 +10,7 @@ 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) {
@@ -27,27 +28,40 @@ 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
-
-
+ //forEach goes over each value in the list of ojbects games
+ // game = one value in games
+ games.forEach(game => {
// create a new div element, which will become the game card
-
-
+ // document.createElement - creates a new element in the document
+ 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 ("/>")
-
-
+ //call upon each key in the game value (game.key) to get their value
+ //back ticks so it reads the ${}
+ gameCard.innerHTML = `
+ 
+
+
+ `;
// append the game to the games-container
+ //this element is grabbed outside the function
+ gamesContainer.appendChild(gameCard)
+ })
+ // 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 ("/>")
}
// call the function we just defined using the correct variable
+addGamesToPage(GAMES_JSON)
// later, we'll call this function using a different list of games
@@ -61,19 +75,40 @@ function addGamesToPage(games) {
const contributionsCard = document.getElementById("num-contributions");
// use reduce() to count the number of total contributions by summing the backers
-
+//call reduce on GAMES_JSON object
+//acc = accumulator (fancy word for the total added)
+//game = the object from GAMES_JSON (one at a time ladies)
+//using dot notation to get the backers for each game and add them all
+const contributions = GAMES_JSON.reduce((acc, game) => {
+ return acc + game.backers;
+}, 0)
+//check you get an accurate number, should be:19187 (counted them myself)
+console.log(contributions)
// set the inner HTML using a template literal and toLocaleString to get a number with commas
-
+const contribFormatted = contributions.toLocaleString('en-US')
+contributionsCard.innerHTML = `${contribFormatted}`
// 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((acc, game) => {
+ return acc + game.pledged;
+}, 0)
+console.log(raised)
// set inner HTML using template literal
-
+const raisedFormatted = raised.toLocaleString('en-US')
+raisedCard.innerHTML = `$${raisedFormatted}`
// grab number of games card and set its inner HTML
const gamesCard = document.getElementById("num-games");
+const games = GAMES_JSON.reduce((acc, game) => {
+ return acc + 1
+}, 0)
+console.log(games)
+
+const gamesFormatted = games.toLocaleString('en-US')
+gamesCard.innerHTML = `${gamesFormatted}`
+
/*************************************************************************************
@@ -87,10 +122,9 @@ function filterUnfundedOnly() {
deleteChildElements(gamesContainer);
// use filter() to get a list of games that have not yet met their goal
-
-
+ const underFunded = GAMES_JSON.filter((game) => game.pledged < game.goal)
// use the function we previously created to add the unfunded games to the DOM
-
+ addGamesToPage(underFunded)
}
// show only games that are fully funded
@@ -98,10 +132,10 @@ function filterFundedOnly() {
deleteChildElements(gamesContainer);
// use filter() to get a list of games that have met or exceeded their goal
-
+ const funded = GAMES_JSON.filter((game) => game.pledged >= game.goal)
// use the function we previously created to add unfunded games to the DOM
-
+ addGamesToPage(funded)
}
// show all games
@@ -109,6 +143,7 @@ function showAllGames() {
deleteChildElements(gamesContainer);
// add all games from the JSON data to the DOM
+ addGamesToPage(GAMES_JSON)
}
@@ -118,6 +153,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)
/*************************************************************************************
@@ -129,13 +167,18 @@ const allBtn = document.getElementById("all-btn");
const descriptionContainer = document.getElementById("description-container");
// use filter or reduce to count the number of unfunded games
-
-
+const numUnderFunded = GAMES_JSON.filter((game) => game.pledged < game.goal).length
+console.log(numUnderFunded)
// create a string that explains the number of unfunded games using the ternary operator
-
+const message = `A total of $${raisedFormatted} has been raised for ${gamesFormatted} games. Currently,
+${numUnderFunded != 0 ?
+ numUnderFunded + " games remain unfunded. We need your help to fund these amazing games!"
+ : " all games are funded!"}`
// create a new DOM element containing the template string and append it to the description container
-
+const gameMsg = document.createElement('p')
+gameMsg.innerHTML = message
+descriptionContainer.appendChild(gameMsg)
/************************************************************************************
* Challenge 7: Select & display the top 2 games
* Skills used: spread operator, destructuring, template literals, sort
@@ -149,7 +192,99 @@ const sortedGames = GAMES_JSON.sort( (item1, item2) => {
});
// use destructuring and the spread operator to grab the first and second games
-
+let [game1, game2] = sortedGames
+console.log([game1, game2])
// create a new element to hold the name of the top pledge game, then append it to the correct element
+const mostFunded = game1.name
+console.log(mostFunded)
+const mFGame = document.createElement('p')
+mFGame.innerHTML = mostFunded
+firstGameContainer.appendChild(mFGame)
+// do the same for the runner up item
+const mostFunded2 = game2.name
+console.log(mostFunded2)
+const mFGame2 = document.createElement('p')
+mFGame2.innerHTML = mostFunded2
+secondGameContainer.appendChild(mFGame2)
+
+/************************************************************************************
+ * Bonus: Add ons & UX/UI modified
+ */
+const searchInput = document.getElementById("search");
+const searchBtn = document.getElementById("search-btn");
+
+function scrollToGamesSection() {
+ const gamesSection = document.getElementById('games');
+ gamesSection.scrollIntoView({ behavior: 'smooth' });
+}
+
+function getMatchingGames(searchInput){
+ const gameCards = document.querySelectorAll('.game-card');
+ let matched = false;
+
+ gameCards.forEach(game => {
+ const gameNameEl = game.querySelector('h4');
+
+ if(gameNameEl){
+ const gameName = gameNameEl.textContent.toLowerCase();
+
+ if (gameName.includes(searchInput.toLowerCase())){
+ matched = true;
+ game.classList.add('search-highlight');
+
+ setTimeout(()=>{
+ game.classList.add('fade-out');
+ setTimeout(()=>{
+ game.classList.remove('search-highlight', 'fade-out');
+ }, 300)
+ }, 3000)
+ }
+ }
+
+ });
+ return matched;
+}
-// do the same for the runner up item
\ No newline at end of file
+function noResults(searchVal){
+ alert(`We are sorry, we could not find "${searchVal}" among our game library. Make sure to be in the all games filter when searching.`)
+}
+
+function executeSearch(){
+ const searchVal = searchInput.value.trim();
+
+ if(!searchVal){
+ alert('Nothing has been search for.');
+ return;
+ }
+
+ let foundInGames = false;
+ GAMES_JSON.forEach(game => {
+ if(game.name.toLowerCase().includes(searchVal.toLowerCase())){
+ foundInGames = true;
+ }
+ });
+
+ if (foundInGames){
+ scrollToGamesSection();
+ setTimeout(()=> {
+ const matched = getMatchingGames(searchVal);
+ if(!matched){
+ noResults(searchVal);
+ }
+ }, 500);
+ } else {
+ noResults(searchVal);
+ }
+ searchInput.value = '';
+}
+
+searchInput.addEventListener("keypress", (e) => {
+ if (e.key === "Enter"){
+ executeSearch()
+ }
+});
+
+searchBtn.addEventListener("click", (e)=>{
+ e.preventDefault();
+ executeSearch();
+});
diff --git a/style.css b/style.css
index 11303c2a7..39f59324d 100644
--- a/style.css
+++ b/style.css
@@ -1,8 +1,13 @@
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+
body {
- font-family: 'Cabin';
+ font-family: "Hanken Grotesk", sans-serif;
background-color: #758190;
+
}
#tentacles {
@@ -10,6 +15,7 @@ body {
}
.header {
+ position: sticky;
display: flex;
background-color: lightblue;
padding: 1%;
@@ -19,8 +25,101 @@ body {
margin-top: -10px;
}
+.topnav {
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: rgb(2, 60, 79);
+ padding: 1%;
+ margin-left: -10px;
+ margin-right: -10px;
+ margin-top: -10px;
+}
+
+.topnav a {
+ display: block;
+ color: black;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+}
+
+.topnav a:hover {
+ background-color: #ddd;
+ color: black;
+}
+
+.topnav a.active {
+ background-color: #2196F3;
+ color: white;
+}
+
+.topnav .search-container {
+ margin-left: auto;
+ background:rgba(181, 222, 236, 0.6);
+ width: 25%;
+ min-width: 25%;
+ padding: 5px 5px;
+ border-radius: 7px;
+
+}
+
+.search-container input{
+ background: transparent;
+ flex: 1;
+ border: 0;
+ outline: none;
+ padding: 5px 70px 5px 10px;
+ font-size: 17px;
+ font-family: "Hanken Grotesk", sans-serif;
+}
+::placeholder{
+ color:#FFFFFF;
+}
+
+.search-container button {
+ border: 0;
+ background: transparent;
+ color: #FFFFFF;
+ border-radius: 7px;
+ padding: 6px 6px;
+ font-size: 17px;
+}
+.search-container button:hover{
+ cursor: pointer;
+}
+
+.search-highlight{
+ background-color: #ffeb3b;
+ border: 2px solid #ff9800;
+ box-shadow: 0 4px 20px rgba(255, 152, 0, 0.4);
+ transform: scale(1.02);
+ transition: all 0.3s ease-in-out;
+ animation: pulse 1s ease-in-out 2;
+}
+
+.fade-out{
+ background-color: transparent;
+ border: 2px solid transparent;
+ box-shadow: none;
+ transform: scale(1);
+ transition: all 0.3s ease-in-out;
+}
+
+@keyframes pulse{
+ 0% {transform: scale(1.02);}
+ 50% {transform: scale(1.05);}
+ 100% {transform: scale(1.02);}
+}
+
+
.stats-container {
display: flex;
+ align-items: center;
}
.stats-card {
@@ -31,6 +130,10 @@ body {
width: 100%;
text-align: center;
}
+.stats-card:hover{
+ cursor: pointer;
+ box-shadow: 0 0 30px lightblue;
+}
#num-contributions, #total-raised, #num-games {
font-size: 50px;
Name: ${game.name}
+Description: ${game.description}
+Pledged: ${game.pledged}
+Goal: ${game.goal}
+Backers: ${game.backers}
+