Skip to content

Commit 76d4895

Browse files
author
ShailRT
committedJan 30, 2022
the first
0 parents  commit 76d4895

File tree

8 files changed

+734
-0
lines changed

8 files changed

+734
-0
lines changed
 

‎color-fliper/app.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const colors = ["green", "red", "blue","black"]
2+
const btn = document.getElementById('btn')
3+
const color = document.querySelector('.color')
4+
5+
btn.addEventListener('click', function(){
6+
// get random number between 0-3
7+
const randomNumber = getRandomNumber()
8+
console.log(randomNumber)
9+
document.body.style.backgroundColor = colors[randomNumber]
10+
color.textContent = colors[randomNumber]
11+
})
12+
13+
function getRandomNumber(){
14+
return Math.floor(Math.random() * colors.length)
15+
}

‎color-fliper/hex.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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>
7+
Color Flipper || Simple
8+
</title>
9+
10+
<!-- styles -->
11+
<link rel="stylesheet" href="styles.css" />
12+
</head>
13+
14+
<body>
15+
<nav>
16+
<div class="nav-center">
17+
<h4>color flipper</h4>
18+
<ul class="nav-links">
19+
<li><a href="index.html">simple</a></li>
20+
<li><a href="hex.html">hex</a></li>
21+
</ul>
22+
</div>
23+
</nav>
24+
<main>
25+
<div class="container">
26+
<h2>background color : <span class="color">#FFFFFF</span></h2>
27+
<button class="btn btn-hero" id="btn">click me</button>
28+
</div>
29+
</main>
30+
<!-- javascript -->
31+
<script src="hex.js"></script>
32+
</body>
33+
</html>

‎color-fliper/hex.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]
2+
const btn = document.getElementById('btn')
3+
const color = document.querySelector('.color')
4+
5+
btn.addEventListener('click', function(){
6+
let hexColor = "#"
7+
for(let i = 0; i<6; i++){
8+
hexColor += hex[getRandomNumber()]
9+
}
10+
color.textContent = hexColor
11+
document.body.style.backgroundColor = hexColor
12+
})
13+
14+
function getRandomNumber(){
15+
return Math.floor(Math.random()*hex.length)
16+
}

‎color-fliper/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>Color Flipper || Simple</title>
7+
8+
<!-- styles -->
9+
<link rel="stylesheet" href="styles.css" />
10+
</head>
11+
<body>
12+
<nav>
13+
<div class="nav-center">
14+
<h4>color fliper</h4>
15+
<ul class="nav-links">
16+
<li><a href="index.html">simple</a></li>
17+
<li><a href="hex.html">hex</a></li>
18+
</ul>
19+
</div>
20+
</nav>
21+
<main>
22+
<div class="container">
23+
<h2>background color:
24+
<span class="color">White</span>
25+
</h2>
26+
<button class="btn btn-hero" id="btn">click me</button>
27+
</div>
28+
</main>
29+
<!-- javascript -->
30+
<script src="app.js"></script>
31+
</body>
32+
</html>

‎color-fliper/styles.css

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
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+
Nav
157+
===============
158+
*/
159+
nav {
160+
background: var(--clr-white);
161+
height: 3rem;
162+
display: grid;
163+
align-items: center;
164+
box-shadow: var(--dark-shadow);
165+
}
166+
.nav-center {
167+
width: 90vw;
168+
max-width: var(--fixed-width);
169+
margin: 0 auto;
170+
display: flex;
171+
align-items: center;
172+
justify-content: space-between;
173+
}
174+
.nav-center h4 {
175+
margin-bottom: 0;
176+
color: var(--clr-primary-5);
177+
}
178+
.nav-links {
179+
display: flex;
180+
}
181+
nav a {
182+
text-transform: capitalize;
183+
font-weight: 700;
184+
font-size: 1rem;
185+
color: var(--clr-primary-1);
186+
letter-spacing: var(--spacing);
187+
margin-right: 1rem;
188+
}
189+
nav a:hover {
190+
color: var(--clr-primary-5);
191+
}
192+
/*
193+
===============
194+
Container
195+
===============
196+
*/
197+
main {
198+
min-height: calc(100vh - 3rem);
199+
display: grid;
200+
place-items: center;
201+
}
202+
.container {
203+
text-align: center;
204+
}
205+
.container h2 {
206+
background: var(--clr-black);
207+
color: var(--clr-white);
208+
padding: 1rem;
209+
border-radius: var(--radius);
210+
margin-bottom: 2.5rem;
211+
}
212+
.color {
213+
color: var(--clr-primary-5);
214+
}
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+
}

‎review/app.js

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

‎review/index.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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+
<div class="title">
20+
<h2>our reviews</h2>
21+
<div class="underline"></div>
22+
</div>
23+
24+
<article class="review">
25+
<div class="img-container">
26+
<img id="person-img" src="https://raw.githubusercontent.com/john-smilga/javascript-basic-projects/master/03-reviews/setup/person-1.jpeg" alt="">
27+
</div>
28+
<h4 id="author">sara jones</h4>
29+
<p id="job">ux designer</p>
30+
<p id="info">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis dolorem voluptatum ullam repellat voluptatem porro ducimus quisquam nisi sequi et?</p>
31+
32+
<div class="button-container">
33+
<button class="prev-btn">
34+
<i class="fas fa-chevron-left"></i>
35+
</button>
36+
<button class="next-btn">
37+
<i class="fas fa-chevron-right"></i>
38+
</button>
39+
40+
</div>
41+
<button class="random-btn">
42+
suprise me
43+
</button>
44+
</article>
45+
</section>
46+
</main>
47+
48+
<!-- javascript -->
49+
<script src="app.js"></script>
50+
</body>
51+
</html>

‎review/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.