Skip to content

Commit 9933b24

Browse files
github-actions[bot]github-actions[bot]
authored
Merge pull request #2 from john-smilga/master
Fork Sync
2 parents 45be18c + d79ed50 commit 9933b24

9,902 files changed

Lines changed: 1067 additions & 651387 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎1-color-flipper/final/hex.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Color Flipper || Hex</title>
7+
78
<!-- styles -->
89
<link rel="stylesheet" href="styles.css" />
910
</head>

‎1-color-flipper/final/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Color Flipper || Simple</title>
7+
78
<!-- styles -->
89
<link rel="stylesheet" href="styles.css" />
910
</head>

‎1-color-flipper/final/styles.css‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Variables
3636
--clr-grey-7: hsl(211, 27%, 70%);
3737
--clr-grey-8: hsl(210, 31%, 80%);
3838
--clr-grey-9: hsl(212, 33%, 89%);
39-
--clr-grey-10: hsl(206, 33%, 96%);
39+
--clr-grey-10: hsl(210, 36%, 96%);
4040
--clr-white: #fff;
4141
--clr-red-dark: hsl(360, 67%, 44%);
4242
--clr-red-light: hsl(360, 71%, 66%);
@@ -46,8 +46,8 @@ Variables
4646
--ff-primary: "Roboto", sans-serif;
4747
--ff-secondary: "Open Sans", sans-serif;
4848
--transition: all 0.3s linear;
49-
--spacing: 0.25rem;
50-
--radius: 0.5rem;
49+
--spacing: 0.1rem;
50+
--radius: 0.25rem;
5151
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
5252
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
5353
--max-width: 1170px;
@@ -79,11 +79,6 @@ ul {
7979
a {
8080
text-decoration: none;
8181
}
82-
img:not(.nav-logo) {
83-
width: 100%;
84-
display: block;
85-
}
86-
8782
h1,
8883
h2,
8984
h3,
@@ -135,30 +130,6 @@ p {
135130
}
136131
/* global classes */
137132

138-
.btn {
139-
font-family: var(--ff-primary);
140-
text-transform: uppercase;
141-
background: transparent;
142-
color: var(--clr-black);
143-
padding: 0.375rem 0.75rem;
144-
letter-spacing: var(--spacing);
145-
display: inline-block;
146-
font-weight: 700;
147-
transition: var(--transition);
148-
font-size: 0.875rem;
149-
border: 2px solid var(--clr-black);
150-
cursor: pointer;
151-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
152-
border-radius: var(--radius);
153-
}
154-
.btn:hover {
155-
color: var(--clr-white);
156-
background: var(--clr-black);
157-
}
158-
.btn-hero {
159-
font-size: 1rem;
160-
padding: 0.75rem 1.25rem;
161-
}
162133
/* section */
163134
.section {
164135
padding: 5rem 0;
@@ -174,6 +145,12 @@ p {
174145
width: 95vw;
175146
}
176147
}
148+
main {
149+
min-height: 100vh;
150+
display: grid;
151+
place-items: center;
152+
}
153+
177154
/*
178155
===============
179156
Nav
@@ -235,3 +212,23 @@ main {
235212
.color {
236213
color: var(--clr-primary-5);
237214
}
215+
.btn-hero {
216+
font-family: var(--ff-primary);
217+
text-transform: uppercase;
218+
background: transparent;
219+
color: var(--clr-black);
220+
letter-spacing: var(--spacing);
221+
display: inline-block;
222+
font-weight: 700;
223+
transition: var(--transition);
224+
border: 2px solid var(--clr-black);
225+
cursor: pointer;
226+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
227+
border-radius: var(--radius);
228+
font-size: 1rem;
229+
padding: 0.75rem 1.25rem;
230+
}
231+
.btn-hero:hover {
232+
color: var(--clr-white);
233+
background: var(--clr-black);
234+
}

‎1-color-flipper/setup/hex.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>
77
Color Flipper || Simple
88
</title>
9+
910
<!-- styles -->
1011
<link rel="stylesheet" href="styles.css" />
1112
</head>

‎1-color-flipper/setup/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Color Flipper || Simple</title>
7+
78
<!-- styles -->
89
<link rel="stylesheet" href="styles.css" />
910
</head>

‎1-color-flipper/setup/styles.css‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Variables
3636
--clr-grey-7: hsl(211, 27%, 70%);
3737
--clr-grey-8: hsl(210, 31%, 80%);
3838
--clr-grey-9: hsl(212, 33%, 89%);
39-
--clr-grey-10: hsl(206, 33%, 96%);
39+
--clr-grey-10: hsl(210, 36%, 96%);
4040
--clr-white: #fff;
4141
--clr-red-dark: hsl(360, 67%, 44%);
4242
--clr-red-light: hsl(360, 71%, 66%);
@@ -46,8 +46,8 @@ Variables
4646
--ff-primary: "Roboto", sans-serif;
4747
--ff-secondary: "Open Sans", sans-serif;
4848
--transition: all 0.3s linear;
49-
--spacing: 0.25rem;
50-
--radius: 0.5rem;
49+
--spacing: 0.1rem;
50+
--radius: 0.25rem;
5151
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
5252
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
5353
--max-width: 1170px;
@@ -79,11 +79,6 @@ ul {
7979
a {
8080
text-decoration: none;
8181
}
82-
img:not(.nav-logo) {
83-
width: 100%;
84-
display: block;
85-
}
86-
8782
h1,
8883
h2,
8984
h3,
@@ -135,30 +130,6 @@ p {
135130
}
136131
/* global classes */
137132

138-
.btn {
139-
font-family: var(--ff-primary);
140-
text-transform: uppercase;
141-
background: transparent;
142-
color: var(--clr-black);
143-
padding: 0.375rem 0.75rem;
144-
letter-spacing: var(--spacing);
145-
display: inline-block;
146-
font-weight: 700;
147-
transition: var(--transition);
148-
font-size: 0.875rem;
149-
border: 2px solid var(--clr-black);
150-
cursor: pointer;
151-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
152-
border-radius: var(--radius);
153-
}
154-
.btn:hover {
155-
color: var(--clr-white);
156-
background: var(--clr-black);
157-
}
158-
.btn-hero {
159-
font-size: 1rem;
160-
padding: 0.75rem 1.25rem;
161-
}
162133
/* section */
163134
.section {
164135
padding: 5rem 0;
@@ -174,6 +145,12 @@ p {
174145
width: 95vw;
175146
}
176147
}
148+
main {
149+
min-height: 100vh;
150+
display: grid;
151+
place-items: center;
152+
}
153+
177154
/*
178155
===============
179156
Nav
@@ -235,3 +212,23 @@ main {
235212
.color {
236213
color: var(--clr-primary-5);
237214
}
215+
.btn-hero {
216+
font-family: var(--ff-primary);
217+
text-transform: uppercase;
218+
background: transparent;
219+
color: var(--clr-black);
220+
letter-spacing: var(--spacing);
221+
display: inline-block;
222+
font-weight: 700;
223+
transition: var(--transition);
224+
border: 2px solid var(--clr-black);
225+
cursor: pointer;
226+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
227+
border-radius: var(--radius);
228+
font-size: 1rem;
229+
padding: 0.75rem 1.25rem;
230+
}
231+
.btn-hero:hover {
232+
color: var(--clr-white);
233+
background: var(--clr-black);
234+
}

‎16-ES6-slider/final/app.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import data from "./data.js";
2+
const container = document.querySelector(".slide-container");
3+
const nextBtn = document.querySelector(".next-btn");
4+
const prevBtn = document.querySelector(".prev-btn");
5+
// if length is 1 hide buttons
6+
if (data.length === 1) {
7+
nextBtn.style.display = "none";
8+
prevBtn.style.display = "none";
9+
}
10+
// if length is 2, add copies of slides
11+
let people = [...data];
12+
if (data.length === 2) {
13+
people = [...data, ...data];
14+
}
15+
container.innerHTML = people
16+
.map((person, slideIndex) => {
17+
const { img, name, job, text } = person;
18+
let position = "next";
19+
if (slideIndex === 0) {
20+
position = "active";
21+
}
22+
if (slideIndex === people.length - 1) {
23+
position = "last";
24+
}
25+
if (data.length <= 1) {
26+
position = "active";
27+
}
28+
return `<article class="slide ${position}">
29+
<img src=${img} class="img" alt="${name}"/>
30+
<h4>${name}</h4>
31+
<p class="title">${job}</p>
32+
<p class="text">
33+
${text}
34+
</p>
35+
<div class="quote-icon">
36+
<i class="fas fa-quote-right"></i>
37+
</div>
38+
</article>`;
39+
})
40+
.join("");
41+
42+
const startSlider = (type) => {
43+
// get all three slides active,last next
44+
const active = document.querySelector(".active");
45+
const last = document.querySelector(".last");
46+
let next = active.nextElementSibling;
47+
if (!next) {
48+
next = container.firstElementChild;
49+
}
50+
active.classList.remove(["active"]);
51+
last.classList.remove(["last"]);
52+
next.classList.remove(["next"]);
53+
54+
if (type === "prev") {
55+
active.classList.add("next");
56+
last.classList.add("active");
57+
next = last.previousElementSibling;
58+
if (!next) {
59+
next = container.lastElementChild;
60+
}
61+
next.classList.remove(["next"]);
62+
next.classList.add("last");
63+
return;
64+
}
65+
active.classList.add("last");
66+
last.classList.add("next");
67+
next.classList.add("active");
68+
};
69+
nextBtn.addEventListener("click", () => {
70+
startSlider();
71+
});
72+
prevBtn.addEventListener("click", () => {
73+
startSlider("prev");
74+
});

‎16-ES6-slider/final/data.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const people = [
2+
{
3+
img:
4+
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959121/person-1_aufeoq.jpg",
5+
name: "peter doe",
6+
job: "product manager",
7+
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis? `,
8+
},
9+
{
10+
img:
11+
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-2_ipcjws.jpg",
12+
name: "susan doe",
13+
job: "developer",
14+
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
15+
},
16+
{
17+
img:
18+
"https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-3_rxtqvi.jpg",
19+
name: "emma doe",
20+
job: "designer",
21+
text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
22+
},
23+
];
24+
25+
export default people;

‎16-ES6-slider/final/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>ES6 Slider</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+
<!-- stylesheet -->
14+
<link rel="stylesheet" href="styles.css" />
15+
</head>
16+
<body>
17+
<section class="slider">
18+
<div class="reviews">
19+
<h2><span>/</span>reviews</h2>
20+
</div>
21+
<div class="slide-container">
22+
<!-- <article class="slide">
23+
<img
24+
src="https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959121/person-1_aufeoq.jpg"
25+
class="img"
26+
alt="peter doe"
27+
/>
28+
<h4>peter doe</h4>
29+
<p class="title">product designer</p>
30+
<p class="text">
31+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quo
32+
eius recusandae officia voluptas sint deserunt dicta nihil nam
33+
omnis?
34+
</p>
35+
<div class="quote-icon">
36+
<i class="fas fa-quote-right"></i>
37+
</div>
38+
</article> -->
39+
</div>
40+
<!-- buttons -->
41+
<!-- prev btn -->
42+
<button class="btn prev-btn">
43+
<i class="fas fa-chevron-left"></i>
44+
</button>
45+
<!-- next button -->
46+
<button class="btn next-btn">
47+
<i class="fas fa-chevron-right"></i>
48+
</button>
49+
</section>
50+
<script type="module" src="app.js"></script>
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)