Skip to content

Commit f2c86bc

Browse files
codebubbcodebubb
committed
feat: ad 07 to 09
1 parent 0482205 commit f2c86bc

14 files changed

Lines changed: 365 additions & 0 deletions

File tree

‎07-faqs/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>07 - FAQs</title>
8+
<link rel="stylesheet" href="styles.css">
9+
<script src="script.js" defer></script>
10+
</head>
11+
12+
<body>
13+
<h1>FAQs</h1>
14+
<div id="faq-container"></div>
15+
</body>
16+
</html>

‎07-faqs/script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const dataArray = [
2+
{
3+
title: 'Why is JavaScript cool?',
4+
detail: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis doloremque debitis aspernatur iusto molestias facilis itaque, perspiciatis tempore unde commodi eius. Distinctio ipsa numquam magni dolorum pariatur vel, explicabo accusantium?',
5+
},
6+
{
7+
title: 'What is JavaScript?',
8+
detail: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis doloremque debitis aspernatur iusto molestias facilis itaque, perspiciatis tempore unde commodi eius. Distinctio ipsa numquam magni dolorum pariatur vel, explicabo accusantium?',
9+
},
10+
{
11+
title: 'How do I learn JavaScript?',
12+
detail: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis doloremque debitis aspernatur iusto molestias facilis itaque, perspiciatis tempore unde commodi eius. Distinctio ipsa numquam magni dolorum pariatur vel, explicabo accusantium?',
13+
},
14+
{
15+
title: 'What are the best things about JavaScript?',
16+
detail: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis doloremque debitis aspernatur iusto molestias facilis itaque, perspiciatis tempore unde commodi eius. Distinctio ipsa numquam magni dolorum pariatur vel, explicabo accusantium?',
17+
}
18+
];
19+
20+
const makeHTML = data => {
21+
return `<details>
22+
<summary>${data.title}</summary>
23+
<p>${data.detail}</p>
24+
</details>`
25+
};
26+
27+
const container = document.getElementById('faq-container');
28+
29+
container.innerHTML = dataArray.map(data => makeHTML(data)).join('');

‎07-faqs/styles.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
body {
2+
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
3+
}
4+
5+
details {
6+
cursor: pointer;
7+
padding: 1rem;
8+
margin: .5rem 0;
9+
background-color: rgba(119, 25, 25, 0.2);;
10+
font-weight: 400;
11+
border: 2px solid red;
12+
box-shadow: 0 0 16px 8px rgba(0, 5, 5, 0.2);
13+
}
14+
15+
details p {
16+
font-size: .75rem;
17+
}
18+
19+
summary {
20+
font-weight: 700;
21+
}

‎08-testimonials/author-01.jpg‎

3.53 KB
Loading

‎08-testimonials/author-02.jpg‎

6.14 KB
Loading

‎08-testimonials/author-03.jpg‎

11.1 KB
Loading

‎08-testimonials/author-04.jpg‎

3.75 KB
Loading

‎08-testimonials/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>08 - Testimonials</title>
8+
<link rel="stylesheet" href="styles.css">
9+
<script src="script.js" defer></script>
10+
</head>
11+
12+
<body>
13+
<h1>Testimonials</h1>
14+
<div id="testimonials-container"></div>
15+
</body>
16+
17+
</html>

‎08-testimonials/script.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
const testimonials = [
2+
{
3+
author: {
4+
name: 'Gabriel Moore',
5+
image: 'author-01.jpg',
6+
},
7+
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, repellendus? Impedit mollitia nesciunt itaque optio incidunt enim quae, molestiae, accusamus ratione illum eum sapiente tempore fugiat quam, expedita vel perferendis!',
8+
date: '23rd May',
9+
},
10+
{
11+
author: {
12+
name: 'Billy Bailey',
13+
image: 'author-02.jpg',
14+
},
15+
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, repellendus? Impedit mollitia nesciunt itaque optio incidunt enim quae, molestiae, accusamus ratione illum eum sapiente tempore fugiat quam, expedita vel perferendis!',
16+
date: '25th May',
17+
},
18+
{
19+
author: {
20+
name: 'Jackie Oliver',
21+
image: 'author-03.jpg',
22+
},
23+
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, repellendus? Impedit mollitia nesciunt itaque optio incidunt enim quae, molestiae, accusamus ratione illum eum sapiente tempore fugiat quam, expedita vel perferendis!',
24+
date: '02nd June',
25+
},
26+
{
27+
author: {
28+
name: 'Pauline Carter',
29+
image: 'author-04.jpg',
30+
},
31+
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, repellendus? Impedit mollitia nesciunt itaque optio incidunt enim quae, molestiae, accusamus ratione illum eum sapiente tempore fugiat quam, expedita vel perferendis!',
32+
date: '09th June',
33+
},
34+
];
35+
36+
const makeTestimonialCard = testimonial => {
37+
return `<div class="testimonial-card">
38+
<img src="${testimonial.author.image}">
39+
<h2>${testimonial.author.name} </h2>
40+
<p>${testimonial.text}</p>
41+
<date>Written on ${testimonial.date}</date>
42+
</div>`
43+
};
44+
45+
let currentTestimonial = 0;
46+
47+
const nextTestimonial = () => {
48+
if (currentTestimonial < testimonials.length - 1) {
49+
currentTestimonial += 1;
50+
updatePage();
51+
}
52+
}
53+
const prevTestimonial = () => {
54+
if (currentTestimonial > 0) {
55+
currentTestimonial -= 1;
56+
updatePage();
57+
}
58+
}
59+
60+
const updatePage = () => {
61+
let markup = makeTestimonialCard(testimonials[currentTestimonial]);
62+
63+
if (testimonials.length > 1) {
64+
markup += `<nav>
65+
<button onclick="prevTestimonial()">Previous</button>
66+
<button onclick="nextTestimonial()">Next</button>
67+
</nav>`
68+
}
69+
70+
const container = document.getElementById('testimonials-container');
71+
72+
container.innerHTML = markup;
73+
}
74+
75+
updatePage();
76+
77+

‎08-testimonials/styles.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body {
2+
font-family: sans-serif;
3+
}
4+
#testimonials-container {
5+
width: 400px;
6+
margin: 0 auto;
7+
}
8+
9+
.testimonial-card {
10+
padding: 1rem;
11+
box-shadow: 0 0 16px 8px rgba(0,0,0, 0.1);
12+
width: 100%;
13+
border-radius: .5rem;
14+
line-height: 1.4;
15+
}
16+
17+
.testimonial-card img {
18+
border-radius: 50%;
19+
margin: 0 auto;
20+
display: block;
21+
width: 8rem;
22+
}
23+
24+
.testimonial-card h2 {
25+
text-align: center;
26+
text-transform: uppercase;
27+
}
28+
29+
.testimonial-card date {
30+
text-align: right;
31+
display: block;
32+
font-style: italic;
33+
}
34+
35+
nav {
36+
display: flex;
37+
justify-content: center;
38+
margin: 1rem 0;
39+
gap: 1rem;
40+
}
41+
42+
nav button {
43+
cursor: pointer;
44+
width: 6rem;
45+
background-color:steelblue;
46+
color: white;
47+
border: 0;
48+
padding: .5rem 1rem;
49+
}
50+
51+
nav button:hover {
52+
background-color:royalblue;
53+
}

0 commit comments

Comments
 (0)