Skip to content

Reviews #3

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

Merged
cedis81 merged 2 commits into from
May 3, 2021
Merged

Reviews #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf7bcd8
Complete basic reviews project
cedis81 May 3, 2021
4965bc4
Improve functionality of random button
cedis81 May 3, 2021
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
55 changes: 55 additions & 0 deletions 03-reviews/setup/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,58 @@ const reviews = [
"Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ",
},
];

// select DOM items
const img = document.getElementById('person-img');
const author = document.getElementById('author');
const job = document.getElementById('job');
const info = document.getElementById('info');

const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const randomBtn = document.querySelector('.random-btn');

// set starting array index value
let currentIndex = 0;

// load initial item
window.addEventListener('DOMContentLoaded', function() {
updateUser(currentIndex);
})

// update user info based on index
const updateUser = (index) => {
const reviewData = reviews[index];
img.src = reviewData.img;
author.textContent = reviewData.name;
job.textContent = reviewData.job;
info.textContent = reviewData.text;
}

// Button event listeners
prevBtn.addEventListener('click', function(){
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = reviews.length - 1;
}
updateUser(currentIndex);
})

nextBtn.addEventListener('click', function(){
if (currentIndex < reviews.length - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateUser(currentIndex);
})

randomBtn.addEventListener('click', function(){
let randomNewIndex = Math.floor(Math.random() * reviews.length);
while (currentIndex === randomNewIndex) {
randomNewIndex = Math.floor(Math.random() * reviews.length);
}
currentIndex = randomNewIndex
updateUser(currentIndex);
})
43 changes: 42 additions & 1 deletion 03-reviews/setup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,48 @@
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>review project</h1>
<main>
<section class="container">

<!-- title -->
<div class="title">
<h2>Reviews</h2>
<div class="underline">

</div>
</div>

<!-- review -->
<article class="review">
<div class="img-container">
<img src="" id="person-img" alt="">
</div>
<h4 id="author"></h4>
<p id="job"></p>
<p id="info">

</p>

<!-- prev and next buttons -->
<div class="button-container">
<button class="prev-btn">
<i class="fas fa-chevron-left"></i>
</button>
<button class="next-btn">
<i class="fas fa-chevron-right"></i>
</button>
</div>

<!-- random button -->
<div>
<button class="random-btn">
surprise me!
</button>
</div>
</article>

</section>
</main>
<!-- javascript -->
<script src="app.js"></script>
</body>
Expand Down