Skip to content

Commit 50132e9

Browse files
ssamko0911ssamko0911
committed
Icons changed & Modal windows logic added.
1 parent 4523917 commit 50132e9

File tree

8 files changed

+126
-16
lines changed

8 files changed

+126
-16
lines changed

‎app/script.js

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,47 @@
1-
const imageDark = 'icons/mode-dark.png';
2-
const imageLight = 'icons/mode-white.png';
1+
const imageDark = 'icons/mode-dark.gif';
2+
const imageLight = 'icons/mode-white.gif';
33

4-
const toggleMode = function () {
5-
const bodyElement = document.body;
6-
const imageElement = document.querySelector('#btn-img');
7-
const buttonElement = document.querySelector('#btn-mode')
4+
const bodyElement = document.body;
5+
const imageElement = document.querySelector('#btn-img');
6+
const modal = document.querySelector('.modal');
7+
const overlay = document.querySelector('.overlay');
8+
const btn = document.querySelector('.btn');
9+
const btnCloseModal = document.querySelector('.close-modal');
810

11+
const toggleMode = function () {
912
bodyElement.classList.toggle('dark-mode');
1013

1114
if (bodyElement.className === 'dark-mode') {
1215
imageElement.src = imageLight;
1316
imageElement.title = 'Light mode';
17+
btn.style.color = '#FF2D20';
18+
1419
} else {
1520
imageElement.src = imageDark;
1621
imageElement.title = 'Dark mode';
1722
}
18-
}
23+
}
24+
25+
const openModal = function () {
26+
modal.classList.remove('hidden');
27+
overlay.classList.remove('hidden');
28+
}
29+
30+
const closeModal = function () {
31+
modal.classList.add('hidden');
32+
overlay.classList.add('hidden');
33+
}
34+
35+
// btn open/close logic;
36+
btn.addEventListener('click', openModal);
37+
btnCloseModal.addEventListener('click', closeModal);
38+
39+
// overlay close logic;
40+
overlay.addEventListener('click', closeModal);
41+
42+
// key Esc pressed logic;
43+
document.addEventListener('keydown', function (event) {
44+
if (event.key === 'Escape' && !modal.classList.contains('hidden')) {
45+
closeModal();
46+
}
47+
});

‎icons/mode-dark.gif

7.17 KB
Loading

‎icons/mode-dark.png

-1009 Bytes
Binary file not shown.

‎icons/mode-white.gif

7.64 KB
Loading

‎icons/mode-white.png

-1.25 KB
Binary file not shown.

‎img/serhii.jpeg

108 KB
Loading

‎index.html

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,42 @@
1010
<title>Serhii Samko</title>
1111
</head>
1212
<body>
13-
<h1>Serhii Samko</h1>
14-
<p>
15-
This is portfolio project in development stage
16-
</p>
1713
<button id="btn-mode">
1814
<img id="btn-img"
19-
src="icons/mode-dark.png"
15+
src="icons/mode-dark.gif"
2016
width="50px"
2117
height="50px"
2218
alt="White or Dark Mode"
2319
title="Dark mode"
2420
onclick="toggleMode()">
2521
</button>
22+
<br/>
23+
<h1>Serhii Samko</h1>
24+
<img class="my-picture"
25+
src="img/serhii.jpeg"
26+
width="200"
27+
>
28+
<p>
29+
This is portfolio project in development stage
30+
</p>
31+
<button class="btn">Hard Skills</button>
32+
<button class="btn">Soft Skills</button>
33+
<button class="btn">My achievements</button>
34+
35+
<div class="modal hidden">
36+
<button class="close-modal">&times;</button>
37+
<h1>I'm a modal window 😍</h1>
38+
<p>
39+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
40+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
41+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
42+
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
43+
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
44+
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
45+
mollit anim id est laborum.
46+
</p>
47+
</div>
48+
<div class="overlay hidden"></div>
2649
<script src="app/script.js"></script>
2750
</body>
2851
</html>

‎style/css.css

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,82 @@
11
:root {
2-
--black: black;
2+
--black: #171923;
33
--white: white;
4-
--blueviolet: #e89aff;
4+
--blueviolet: #FF2D20;
55
}
66

77
body {
8-
background-color: var(--white);
8+
background-color: darkseagreen;
9+
/*background-color: var(--white);*/
910
transition: background-color 2.0s ease;
1011
color: var(--black);
12+
text-align: center;
1113
font-size: 25px;
1214
}
1315

14-
button {
16+
#btn-mode {
1517
cursor: pointer;
1618
border-color: black;
1719
border-radius: 10px;
20+
float: right;
1821
}
1922

2023
.dark-mode {
2124
background-color: var(--black);
2225
transition: background-color 0.5s ease;
2326
color: var(--blueviolet);
2427
}
28+
29+
.hidden {
30+
display: none;
31+
}
32+
33+
.modal {
34+
position: absolute;
35+
top: 30%;
36+
left: 50%;
37+
transform: translate(-50%, -50%);
38+
width: 40%;
39+
40+
background-color: gray;
41+
padding: 50px;
42+
border-radius: 5px;
43+
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
44+
z-index: 10;
45+
}
46+
47+
.overlay {
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
width: 100%;
52+
height: 100%;
53+
background-color: rgba(0, 0, 0, 0.6);
54+
backdrop-filter: blur(3px);
55+
z-index: 5;
56+
}
57+
58+
.btn {
59+
color: var(--black);
60+
background-color: darkgray;
61+
padding: 10px 15px;
62+
border: 1px solid white;
63+
border-radius: 10px;
64+
cursor: pointer;
65+
font-size: 25px;
66+
}
67+
68+
.close-modal {
69+
position: absolute;
70+
top: 1.2rem;
71+
right: 2rem;
72+
font-size: 3rem;
73+
color: #333;
74+
cursor: pointer;
75+
border: none;
76+
background: none;
77+
}
78+
79+
.my-picture {
80+
border-radius: 50%;
81+
/*border: 5px solid var(--white);*/
82+
}

0 commit comments

Comments
 (0)