Skip to content

challenge from one to three #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

challenge from one to three #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 46 additions & 54 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,114 +2,109 @@
* 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


// 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

// 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 game = document.createElement("div");
// add the class game-card to the list
game.classList.add("game-card");
// set the inner HTML using a template literal to display some info
// about each game
game.innerHTML = `
<img src="${games[i].img}" class="game-img" alt="${games[i].name}"/>
<br/>
<br/>
<h2>${games[i].name}</h2>
<br/>
<p>${games[i].description}</p>
<br/>
<p>Backers: ${games[i].backers}</p>
`;

// append the game to the games-container
gamesContainer.append(game);
}
// TIP: if your images are not displaying, make sure there is space
}

// 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");

// 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

deleteChildElements(gamesContainer);

// use the function we previously created to add the unfunded games to the DOM
// 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);
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
// 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
deleteChildElements(gamesContainer);

// add all games from the JSON data to the DOM
}

// select each button in the "Our Games" section
Expand All @@ -119,37 +114,34 @@ 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
* 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

// 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
// do the same for the runner up item
89 changes: 48 additions & 41 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,82 @@
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap");

body {
font-family: 'Cabin';
background-color: #758190;
font-family: "Cabin";
background-color: #758190;
}

#tentacles {
width: 50px;
width: 50px;
}

.header {
display: flex;
background-color: lightblue;
padding: 1%;
align-items: center;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
display: flex;
background-color: lightblue;
padding: 1%;
align-items: center;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
}

.stats-container {
display: flex;
display: flex;
align-items: center;
}
.stats-container:hover {
cursor: pointer;
box-shadow: 0 0 30px lightblue;
}

.stats-card {
background-color: #a8b0bc;
border-radius: 7px;
padding: 1%;
margin: 1%;
width: 100%;
text-align: center;
background-color: #a8b0bc;
border-radius: 7px;
padding: 1%;
margin: 1%;
width: 100%;
text-align: center;
}

#num-contributions, #total-raised, #num-games {
font-size: 50px;
#num-contributions,
#total-raised,
#num-games {
font-size: 50px;
}

#games-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.game-img {
width: 100%;
border-radius: 5px;
box-shadow: 0 0 10px #FFFFFF;
width: 100%;
border-radius: 5px;
box-shadow: 0 0 10px #ffffff;
}

.game-card {
background-color: #FFFFFF;
padding: 1%;
margin: 1%;
width: 300px;
text-align: center;
border-radius: 7px;
background-color: #ffffff;
padding: 1%;
margin: 1%;
width: 300px;
text-align: center;
border-radius: 7px;
}

.game-card:hover {
cursor: pointer;
box-shadow: 0 0 30px lightblue;
cursor: pointer;
box-shadow: 0 0 30px lightblue;
}

#button-container {
text-align: center;
text-align: center;
}

button {
font-family: 'Cabin';
border: none;
padding: 1%;
margin: 1%;
border-radius: 7px;
}
font-family: "Cabin";
border: none;
padding: 1%;
margin: 1%;
border-radius: 7px;
}