Skip to content

Commit

Permalink
js code & move start game button inside of form and styles changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sputnikccy
Sputnikccy committed Oct 3, 2022
1 parent 50c9193 commit f2b814d
Show file tree
Hide file tree
Showing 6 changed files with 234 additions and 126 deletions.
223 changes: 151 additions & 72 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,108 +5,187 @@ const zeldaApp = {};
zeldaApp.url = 'https://botw-compendium.herokuapp.com/api/v2/category/creatures';

//creat a method to get data from URL
zeldaApp.getInfo=()=>{
zeldaApp.getInfo = () => {
//AJAX request

const appUrl=new URL(zeldaApp.url);
const appUrl = new URL(zeldaApp.url);
// console.log(appUrl)

//fetch data
fetch(appUrl)
.then((apiPromise)=>{
.then((apiPromise) => {
return apiPromise.json()
})
.then((data)=>{
.then((data) => {
console.log(data)
})
zeldaApp.displayCard(data)
})
}


//Change style visibility of question and answer sections-display:none


//Click a button “Start Game” to display question section
// event listener for the submitted value that has been selected in drop down menu (option)
// create variable for selected value = const selectValue
// create variable method for const random Generator [Math.floor(Math.random( 10 * selectedValue.length))]

const startGame = document.querySelector('.startGame');
const questionSection = document.querySelector('.question')
startGame.addEventListener('click', (e) => {
e.preventDefault();
questionSection.style.display = 'block'
})

// event listener for the submitted value that has been selected in drop down menu (option)


const formElement = document.querySelector('form');
const selectElement = document.getElementById('creatureQuestion');
const showMe = document.querySelector('.showMe');
const answerSection = document.querySelector('.answer')


zeldaApp.getOption = () => {
formElement.addEventListener('submit', (e) => {
// add in prevent default of default event on clicking "Show me" button
// if user selects "food"
// then random generate from food array (36 items) = food.length
// if user selects "non food"
// then random generate from non_food array (47 items) = non_food.length
// if user selects "whatever"
// then random generate from food or non-food array (36 index + 47 index) = combined.length
//OPTIONS
// 1: ARRAY METHOD
// create an combine array variable
// .push the food and non_food array in the combine array
// random generate a value from the answer from the array
// then alert "select a preference"
// 2: CREATE A NEW OBJECT
// create a new empty obj named newObj
// grab the content in the food & non_food arrays
// loop through newObj
// random generate a value from the answer from the newObj


// else user selects a submit value as an empty value "pick you preference" because an answer is required

//create a variable to store the creature index that was randomly generated
//const randomIndex

// Store randomly generator creature in a variable
// const creatureHero = data.food[randomIndex]

//When users finish the question, click a button “Show me” then display answer section

// event listener for the show me button
// match selected value with object data's key name(food & non_food &combination of food & non_food)
// loop through food, non_food and the combination
// create 3 <p> tags inside cardContentContainer(ul>li>p) with separate class name: name, common_location and description; and 1 <img> tag inside imgContainer with class name of image
e.preventDefault();
// console.log('abc')

// Display card with:
// Img: append a creatureHero.image to imgContainer
// <img src ="" alt="name">
// Name: append a creatureHero.name
// .name
// Location
// append a creatureHero.common_locations
// .location
// description
// append a creatureHero.description
// .description
// create variable for selected value = const selectValue
const selectValue = selectElement.value;


//init method
zeldaApp.init = ()=>{
zeldaApp.getInfo()
// selectElement.addEventListener('change', () => {

// const selectValue = selectElement.value;

// });
console.log(selectValue);

if (selectValue == 'title') {
alert('Please select your preference!')
}
// // When users finish the question, click a button “Show me” then display answer section
else if (selectValue == 'food' || selectValue == 'nonFood' || selectValue == 'whatever') {
answerSection.style.display = 'block'
}


zeldaApp.displayCard.helpGetSelectValue.userOption(selectValue)

})
}
//call init
zeldaApp.init()


// - Click a button “Start Game” to display a multiple choice question for users to choose:
// One answer of the question leads to the food category and another leads to the nonfood category.
// If = Selected // Food = random generate creature under food
// Else if = Selected // Non-Food = random generate creature under food
// Else = A third answer “Whatever” leads to a random character regardless of food/non food category.
zeldaApp.displayCard = (card) => {
console.log(card.data);



zeldaApp.displayCard.helpGetSelectValue = {
userOption: function (selectValue) {
console.log(selectValue)

const imageTag = document.querySelector('.image')
const nameTag = document.querySelector('.name');
const locationTag = document.querySelector('.location');
const descriptionTag = document.querySelector('.description')

// match selected value with object data's key name(food & non_food &combination of food & non_food)

// - When users finish the question, click a button “You’re…” then randomly generate a character form the category they chose. [Array method .filter()]
// Display create card with:
// Img
// Name
// if user selects "food"
if (selectValue == 'food') {
// then random generate from food array (36 items) = food.length
const randomIndex = Math.floor(Math.random() * card.data.food.length);
console.log(randomIndex);

// Store randomly generator creature in a variable
const creatureHero = card.data.food[randomIndex];
// console.log(creatureHero)

//Display card
nameTag.innerHTML = creatureHero.name;
locationTag.innerHTML = creatureHero.common_locations;
descriptionTag.innerHTML = creatureHero.description;
imageTag.src = creatureHero.image;
imageTag.alt = creatureHero.name


}

// if user selects "non_food"
else if (selectValue == 'nonFood') {
// then random generate from non_food array (47 items) = non_food.length
const randomIndex = Math.floor(Math.random() * card.data.non_food.length);
console.log(randomIndex);

// Store randomly generator creature in a variable
const creatureHero = card.data.non_food[randomIndex];
// console.log(creatureHero)

//Display card
nameTag.innerHTML = creatureHero.name;
locationTag.innerHTML = creatureHero.common_locations;
descriptionTag.innerHTML = creatureHero.description;
imageTag.src = creatureHero.image;
imageTag.alt = creatureHero.name

}

// if user selects "whatever"
else if (selectValue == 'whatever') {
//combine food and non_food into one array
card.data.whatever = card.data.food.concat(card.data.non_food)
console.log(card.data.whatever)

// then random generate from food or non-food array (36 index + 47 index) = combined.length
const randomIndex = Math.floor(Math.random() * card.data.whatever.length);
console.log(randomIndex)

// Store randomly generator creature in a variable
const creatureHero = card.data.whatever[randomIndex];
// console.log(creatureHero)

//Display card
nameTag.innerHTML = creatureHero.name;
locationTag.innerHTML = creatureHero.common_locations;
descriptionTag.innerHTML = creatureHero.description;
imageTag.src = creatureHero.image;
imageTag.alt = creatureHero.name

}
}
}


}

// loop through food, non_food and the combination
// create 3 <p> tags inside cardContentContainer(ul>li>p) with separate class name: name, common_location and description; and 1 <img> tag inside imgContainer with class name of image

// Display card with:
// Img: append a creatureHero.image to imgContainer
// <img src ="" alt="name">
// Name: append a creatureHero.name
// .name
// Location
// description
// append a creatureHero.common_locations
// .location
// description
// append a creatureHero.description
// .description


// - Create an app object (zeldaApp)//Namespace for app.
//init method
zeldaApp.init = () => {
zeldaApp.getInfo();
zeldaApp.getOption();

// - Store input information in a variable inside a method.
}
//call init
zeldaApp.init()

// - Create a method to get data from API(zeldaApp.getCharacter), and a if statement to make a validation to prevent submitting form without input(s).



// - When API call is successful, display the a card info with character by looping through each result, rendering * HTML elements for character name, picture, common locations, description.



Expand Down
62 changes: 32 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h2>Hello Zelda Lovers!</h2>
<h1>Welcome to Hyrule!</h1>
<h3>Find out what creature you are</h3>
<div class="buttonContainer">
<button>Start Game</button>
<button class="startGame">Start Game</button>
</div> <!-- buttonContainer end -->
</div> <!-- headingContainer end -->
</div> <!-- flexContainer wrapper end -->
Expand All @@ -34,49 +34,51 @@ <h3>Find out what creature you are</h3>
<fieldset>
<label for="creatureQuestion" class="sr-only">Pick your preference</label>
<select name="creatureQuestion" id="creatureQuestion">
<option value="title" selected>Pick your preference</option>
<option value="title" selected disabled="disabled">Pick your preference</option>
<option value="food">Food</option>
<option value="nonFood">NonFood</option>
<option value="whatever">Whatever</option>
</select>


<button class="showMe">Show me</button>

</fieldset>
</form>
</div>
<div class="buttonContainer">
<button>Show me</button>
</div>

</div> <!-- flexContainer end -->
</section> <!-- form end -->


<!-- answer start -->
<div class="answer">
<div class="flexContainer wrapper">
<div class="contentContainer">
<h2>Your Zelda Creature is:</h2>
</div>
<div class="cardContainer">
<div class="imgContainer">
<!-- <img src="./assets/48053.gif" alt=""> -->
<!-- answer start -->
<div class="answer">
<div class="flexContainer wrapper">
<div class="contentContainer">
<h2>Your Zelda Creature is:</h2>
</div>
<div class="cardContentContainer">
<ul>
<li class="name">
<!-- <p>Creature Name</p> -->
</li> <!-- name end -->
<li class="location">
<!-- <p>Location</p> -->
</li> <!-- location end -->
<li class="decription">
<!-- <p>Description: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptas! Iste
<div class="cardContainer">
<div class="imgContainer">
<img src="" alt="" class="image">
</div>
<div class="cardContentContainer">
<ul>
<li class="nameContainer">
<p class="name">Creature Name</p>
</li> <!-- name end -->
<li class="locationContainer">
<p class="location">Location</p>
</li> <!-- location end -->
<li class="decriptionContainer">
<p class="description">Description: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptas! Iste
tenetur facilis perspiciatis! Adipisci modi exercitationem at dolores quod officia
consectetur ex laboriosam delectus assumenda distinctio et, perferendis eaque?</p> -->
</li> <!-- decription end -->
</ul>
</div> <!-- cardContentContainer end -->
consectetur ex laboriosam delectus assumenda distinctio et, perferendis eaque?</p>
</li> <!-- decription end -->
</ul>
</div> <!-- cardContentContainer end -->
</div>
</div>
</div>
</div> <!-- answer end -->
</div> <!-- answer end -->

<footer>
<p>
Expand Down
7 changes: 4 additions & 3 deletions styles/partials/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ header .flexContainer {

h1,
h2,
h3,
button {
h3
{
margin-bottom: 4rem;
}
}

Loading

0 comments on commit f2b814d

Please sign in to comment.