-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.js
85 lines (74 loc) · 2.55 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// local reviews data
const reviews = [
{
id: 1,
name: 'susan smith',
job: 'web developer',
img: 'https://www.course-api.com/images/people/person-1.jpeg',
text: "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",
},
{
id: 2,
name: 'anna johnson',
job: 'web designer',
img: 'https://www.course-api.com/images/people/person-2.jpeg',
text: '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.',
},
{
id: 3,
name: 'peter jones',
job: 'intern',
img: 'https://www.course-api.com/images/people/person-4.jpeg',
text: '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.',
},
{
id: 4,
name: 'bill anderson',
job: 'the boss',
img: 'https://www.course-api.com/images/people/person-3.jpeg',
text: '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 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 item
let currentItem = 0;
// load initial item
window.addEventListener('DOMContentLoaded',function(){
showPerson()
});
///person based on item
function showPerson(){
const item=reviews[currentItem]
img.src=item.img;
author.textContent=item.name;
job.textContent=item.job;
info.textContent=item.text;
console.log(person)
}
///show next person
nextBtn.addEventListener('click',function(){
currentItem++
if(currentItem ==reviews.length){
currentItem=0
}
showPerson()
})
prevBtn.addEventListener('click',function(){
currentItem--
if(currentItem < 0){
currentItem=reviews.length-1
}
showPerson()
})
///random profile
randomBtn.addEventListener('click',function(){
currentItem=Math.floor(Math.random()*reviews.length +1)
showPerson()
})