Skip to content

Commit 496aa3e

Browse files
Jay-TopherJay-Topher
committed
3 done
1 parent 133c642 commit 496aa3e

2 files changed

Lines changed: 110 additions & 37 deletions

File tree

‎3-reviews/setup/app.js‎

Lines changed: 81 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,84 @@
11
// local reviews data
22
const reviews = [
3-
{
4-
id: 1,
5-
name: "susan smith",
6-
job: "web developer",
7-
img:
8-
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
9-
text:
10-
"I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
11-
},
12-
{
13-
id: 2,
14-
name: "anna johnson",
15-
job: "web designer",
16-
img:
17-
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
18-
text:
19-
"Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.",
20-
},
21-
{
22-
id: 3,
23-
name: "peter jones",
24-
job: "intern",
25-
img:
26-
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
27-
text:
28-
"Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.",
29-
},
30-
{
31-
id: 4,
32-
name: "bill anderson",
33-
job: "the boss",
34-
img:
35-
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg",
36-
text:
37-
"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. ",
38-
},
3+
{
4+
id: 1,
5+
name: "susan smith",
6+
job: "web developer",
7+
img:
8+
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
9+
text:
10+
"I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
11+
},
12+
{
13+
id: 2,
14+
name: "anna johnson",
15+
job: "web designer",
16+
img:
17+
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
18+
text:
19+
"Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.",
20+
},
21+
{
22+
id: 3,
23+
name: "peter jones",
24+
job: "intern",
25+
img:
26+
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
27+
text:
28+
"Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.",
29+
},
30+
{
31+
id: 4,
32+
name: "bill anderson",
33+
job: "the boss",
34+
img:
35+
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg",
36+
text:
37+
"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. ",
38+
},
3939
];
40+
41+
// Get elements
42+
const img = document.getElementById("person-img");
43+
const author = document.getElementById("author");
44+
const job = document.getElementById("job");
45+
const info = document.getElementById("info");
46+
47+
const prevBtn = document.querySelector(".prev-btn");
48+
const nextBtn = document.querySelector(".next-btn");
49+
const randomBtn = document.querySelector(".random-btn");
50+
51+
let currentPerson = 0;
52+
53+
function loadPerson(person) {
54+
const item = reviews[person];
55+
img.src = item.img;
56+
author.textContent = item.name;
57+
job.textContent = item.job;
58+
info.textContent = item.text;
59+
}
60+
61+
window.addEventListener("DOMContentLoaded", function () {
62+
loadPerson(currentPerson);
63+
});
64+
65+
prevBtn.addEventListener("click", function () {
66+
currentPerson--;
67+
if (currentPerson < 0) {
68+
currentPerson = reviews.length - 1;
69+
}
70+
71+
loadPerson(currentPerson);
72+
});
73+
nextBtn.addEventListener("click", function () {
74+
currentPerson++;
75+
if (currentPerson > reviews.length - 1) {
76+
currentPerson = 0;
77+
}
78+
loadPerson(currentPerson);
79+
});
80+
81+
randomBtn.addEventListener("click", function () {
82+
const randomPerson = Math.floor(Math.random() * reviews.length);
83+
loadPerson(randomPerson);
84+
});

‎3-reviews/setup/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,35 @@
1414
<link rel="stylesheet" href="styles.css" />
1515
</head>
1616
<body>
17-
<h1>review project</h1>
17+
<main>
18+
<section class="container">
19+
<!-- title -->
20+
<div class="title">
21+
<h2>Our Reviews</h2>
22+
<div class="underline"></div>
23+
</div>
24+
25+
<!-- review -->
26+
<article class="review">
27+
<div class="img-container">
28+
<img src="./person-1.jpeg" id="person-img" alt="" />
29+
</div>
30+
<h4 id="author">Sara jones</h4>
31+
<p id="job">UX designer</p>
32+
<p id="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere maxime quos inventore et totam veniam doloremque? Corporis modi blanditiis nostrum!</p>
33+
<!-- prev next -->
34+
<div class="button-container">
35+
<button class="prev-btn">
36+
<i class="fas fa-chevron-left"></i>
37+
</button>
38+
<button class="next-btn">
39+
<i class="fas fa-chevron-right"></i>
40+
</button>
41+
</div>
42+
<button class="random-btn">suprise me</button>
43+
</article>
44+
</section>
45+
</main>
1846
<!-- javascript -->
1947
<script src="app.js"></script>
2048
</body>

0 commit comments

Comments
 (0)