Skip to content

Commit 898fdd2

Browse files
KellyGlennITKellyGlennIT
committedJul 31, 2023
post
0 parents  commit 898fdd2

File tree

4 files changed

+415
-0
lines changed

4 files changed

+415
-0
lines changed
 

‎app.js

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

‎index.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Starter</title>
7+
<!-- font-awesome -->
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
11+
/>
12+
13+
<!-- styles -->
14+
<link rel="stylesheet" href="styles.css" />
15+
</head>
16+
<body>
17+
<main>
18+
<section class="container">
19+
<!--title-->
20+
<div class="title">
21+
<h2>Our reviews</h2>
22+
<div class="underline"></div>
23+
24+
</div>
25+
<!--review--------------------->
26+
<article class="review">
27+
<div class="img-container">
28+
<image src="person-1.jpeg"
29+
id="person-img" alt>
30+
</div>
31+
<h4 id="author">sara jones</h4>
32+
<p id="job">UX designer</p>
33+
<p id="info">
34+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nulla cumque ex ratione, veniam illum illo, modi nisi libero officia architecto quo laudantium consectetur rem, aperiam culpa molestias id explicabo?
35+
</p>
36+
<!------next review btn-->
37+
<div class="button-container">
38+
<button class="prev-btn">
39+
<i class="fas fa-chevron-left" ><</i>
40+
</button>
41+
42+
<button class="next-btn">
43+
<i class="fas fa-chevron-right" >></i>
44+
</button>
45+
</div>
46+
<!---random button-->
47+
<button class="random-btn">Surprise Me</button>
48+
49+
50+
</article>
51+
</section>
52+
</main>
53+
54+
55+
<!-- javascript -->
56+
<script src="app.js"></script>
57+
</body>
58+
</html>

‎person-1.jpeg

64.9 KB
Loading

‎styles.css

+272
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
/*
2+
===============
3+
Fonts
4+
===============
5+
*/
6+
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
7+
8+
/*
9+
===============
10+
Variables
11+
===============
12+
*/
13+
14+
:root {
15+
/* dark shades of primary color*/
16+
--clr-primary-1: hsl(205, 86%, 17%);
17+
--clr-primary-2: hsl(205, 77%, 27%);
18+
--clr-primary-3: hsl(205, 72%, 37%);
19+
--clr-primary-4: hsl(205, 63%, 48%);
20+
/* primary/main color */
21+
--clr-primary-5: hsl(205, 78%, 60%);
22+
/* lighter shades of primary color */
23+
--clr-primary-6: hsl(205, 89%, 70%);
24+
--clr-primary-7: hsl(205, 90%, 76%);
25+
--clr-primary-8: hsl(205, 86%, 81%);
26+
--clr-primary-9: hsl(205, 90%, 88%);
27+
--clr-primary-10: hsl(205, 100%, 96%);
28+
/* darkest grey - used for headings */
29+
--clr-grey-1: hsl(209, 61%, 16%);
30+
--clr-grey-2: hsl(211, 39%, 23%);
31+
--clr-grey-3: hsl(209, 34%, 30%);
32+
--clr-grey-4: hsl(209, 28%, 39%);
33+
/* grey used for paragraphs */
34+
--clr-grey-5: hsl(210, 22%, 49%);
35+
--clr-grey-6: hsl(209, 23%, 60%);
36+
--clr-grey-7: hsl(211, 27%, 70%);
37+
--clr-grey-8: hsl(210, 31%, 80%);
38+
--clr-grey-9: hsl(212, 33%, 89%);
39+
--clr-grey-10: hsl(210, 36%, 96%);
40+
--clr-white: #fff;
41+
--clr-red-dark: hsl(360, 67%, 44%);
42+
--clr-red-light: hsl(360, 71%, 66%);
43+
--clr-green-dark: hsl(125, 67%, 44%);
44+
--clr-green-light: hsl(125, 71%, 66%);
45+
--clr-black: #222;
46+
--ff-primary: "Roboto", sans-serif;
47+
--ff-secondary: "Open Sans", sans-serif;
48+
--transition: all 0.3s linear;
49+
--spacing: 0.1rem;
50+
--radius: 0.25rem;
51+
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
52+
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
53+
--max-width: 1170px;
54+
--fixed-width: 620px;
55+
}
56+
/*
57+
===============
58+
Global Styles
59+
===============
60+
*/
61+
62+
*,
63+
::after,
64+
::before {
65+
margin: 0;
66+
padding: 0;
67+
box-sizing: border-box;
68+
}
69+
body {
70+
font-family: var(--ff-secondary);
71+
background: var(--clr-grey-10);
72+
color: var(--clr-grey-1);
73+
line-height: 1.5;
74+
font-size: 0.875rem;
75+
}
76+
ul {
77+
list-style-type: none;
78+
}
79+
a {
80+
text-decoration: none;
81+
}
82+
h1,
83+
h2,
84+
h3,
85+
h4 {
86+
letter-spacing: var(--spacing);
87+
text-transform: capitalize;
88+
line-height: 1.25;
89+
margin-bottom: 0.75rem;
90+
font-family: var(--ff-primary);
91+
}
92+
h1 {
93+
font-size: 3rem;
94+
}
95+
h2 {
96+
font-size: 2rem;
97+
}
98+
h3 {
99+
font-size: 1.25rem;
100+
}
101+
h4 {
102+
font-size: 0.875rem;
103+
}
104+
p {
105+
margin-bottom: 1.25rem;
106+
color: var(--clr-grey-5);
107+
}
108+
@media screen and (min-width: 800px) {
109+
h1 {
110+
font-size: 4rem;
111+
}
112+
h2 {
113+
font-size: 2.5rem;
114+
}
115+
h3 {
116+
font-size: 1.75rem;
117+
}
118+
h4 {
119+
font-size: 1rem;
120+
}
121+
body {
122+
font-size: 1rem;
123+
}
124+
h1,
125+
h2,
126+
h3,
127+
h4 {
128+
line-height: 1;
129+
}
130+
}
131+
/* global classes */
132+
133+
/* section */
134+
.section {
135+
padding: 5rem 0;
136+
}
137+
138+
.section-center {
139+
width: 90vw;
140+
margin: 0 auto;
141+
max-width: 1170px;
142+
}
143+
@media screen and (min-width: 992px) {
144+
.section-center {
145+
width: 95vw;
146+
}
147+
}
148+
main {
149+
min-height: 100vh;
150+
display: grid;
151+
place-items: center;
152+
}
153+
154+
/*
155+
===============
156+
Reviews
157+
===============
158+
*/
159+
main {
160+
min-height: 100vh;
161+
display: grid;
162+
place-items: center;
163+
}
164+
.title {
165+
text-align: center;
166+
margin-bottom: 4rem;
167+
}
168+
.underline {
169+
height: 0.25rem;
170+
width: 5rem;
171+
background: var(--clr-primary-5);
172+
margin-left: auto;
173+
margin-right: auto;
174+
}
175+
.container {
176+
width: 80vw;
177+
max-width: var(--fixed-width);
178+
}
179+
.review {
180+
background: var(--clr-white);
181+
padding: 1.5rem 2rem;
182+
border-radius: var(--radius);
183+
box-shadow: var(--light-shadow);
184+
transition: var(--transition);
185+
text-align: center;
186+
}
187+
.review:hover {
188+
box-shadow: var(--dark-shadow);
189+
}
190+
.img-container {
191+
position: relative;
192+
width: 150px;
193+
height: 150px;
194+
border-radius: 50%;
195+
margin: 0 auto;
196+
margin-bottom: 1.5rem;
197+
}
198+
#person-img {
199+
width: 100%;
200+
display: block;
201+
height: 100%;
202+
object-fit: cover;
203+
border-radius: 50%;
204+
position: relative;
205+
}
206+
.img-container::after {
207+
font-family: "Font Awesome 5 Free";
208+
font-weight: 900;
209+
content: "\f10e";
210+
position: absolute;
211+
top: 0;
212+
left: 0;
213+
width: 2.5rem;
214+
height: 2.5rem;
215+
display: grid;
216+
place-items: center;
217+
border-radius: 50%;
218+
transform: translateY(25%);
219+
background: var(--clr-primary-5);
220+
color: var(--clr-white);
221+
}
222+
.img-container::before {
223+
content: "";
224+
width: 100%;
225+
height: 100%;
226+
background: var(--clr-primary-5);
227+
position: absolute;
228+
top: -0.25rem;
229+
right: -0.5rem;
230+
border-radius: 50%;
231+
}
232+
#author {
233+
margin-bottom: 0.25rem;
234+
}
235+
#job {
236+
margin-bottom: 0.5rem;
237+
text-transform: uppercase;
238+
color: var(--clr-primary-5);
239+
font-size: 0.85rem;
240+
}
241+
#info {
242+
margin-bottom: 0.75rem;
243+
}
244+
.prev-btn,
245+
.next-btn {
246+
color: var(--clr-primary-7);
247+
font-size: 1.25rem;
248+
background: transparent;
249+
border-color: transparent;
250+
margin: 0 0.5rem;
251+
transition: var(--transition);
252+
cursor: pointer;
253+
}
254+
.prev-btn:hover,
255+
.next-btn:hover {
256+
color: var(--clr-primary-5);
257+
}
258+
.random-btn {
259+
margin-top: 0.5rem;
260+
background: var(--clr-primary-10);
261+
color: var(--clr-primary-5);
262+
padding: 0.25rem 0.5rem;
263+
text-transform: capitalize;
264+
border-radius: var(--radius);
265+
transition: var(--transition);
266+
border-color: var(--clr-primary-5);
267+
cursor: pointer;
268+
}
269+
.random-btn:hover {
270+
background: var(--clr-primary-5);
271+
color: var(--clr-primary-1);
272+
}

0 commit comments

Comments
 (0)
Please sign in to comment.