Skip to content

Commit ab2678b

Browse files
tamannasghtamannasgh
authored
Merge pull request tamannasgh#25 from Oussamaosman02/daynight
Day and night Switch
2 parents 259c4c4 + 78d5d20 commit ab2678b

File tree

4 files changed

+156
-0
lines changed

4 files changed

+156
-0
lines changed

‎basic-projects/OussamaOsman02-DayNightSwitch/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
## Day and Night switch mode
3+
4+
Simple day and night switch made with vanilla js
5+
6+
7+
8+
https://user-images.githubusercontent.com/109099115/193632191-bd5909a0-f71a-4414-9d75-cc13d2b7025e.mp4
9+

‎basic-projects/OussamaOsman02-DayNightSwitch/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Day-Night Mode</title>
9+
</head>
10+
11+
<body>
12+
<main id="main">
13+
<h1>Day and Night Mode</h1>
14+
<div>
15+
<button onclick="setBlack()" id="button2">
16+
.
17+
</button>
18+
<button onclick="setWhite()" id="button">
19+
.
20+
</button>
21+
</div>
22+
<section>
23+
<article>
24+
<h2>Lorem</h2>
25+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
26+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
27+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
28+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
29+
culpa qui officia deserunt mollit anim id est laborum.</p>
30+
</article>
31+
<article>
32+
<h2>Ipsum</h2>
33+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
34+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
35+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
36+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
37+
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur
38+
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
39+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
40+
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
41+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
42+
est laborum.</p>
43+
</article>
44+
</section>
45+
</main>
46+
<script src="main.js"></script>
47+
</body>
48+
49+
</html>

‎basic-projects/OussamaOsman02-DayNightSwitch/main.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const $ = (s) => document.getElementById(s);
2+
const but = $("button").style;
3+
const main = $("main").style;
4+
function setWhite() {
5+
but.zIndex = "1";
6+
main.backgroundColor = "#fff";
7+
main.color = "#000";
8+
}
9+
function setBlack() {
10+
but.zIndex = "100";
11+
main.backgroundColor = "#000";
12+
main.color = "#fff";
13+
}

‎basic-projects/OussamaOsman02-DayNightSwitch/style.css

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
width: 100vw;
8+
height: 100vh;
9+
}
10+
main {
11+
width: 100%;
12+
background-color: white;
13+
color: black;
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
h1 {
20+
width: 100%;
21+
text-align: center;
22+
}
23+
div {
24+
position: relative;
25+
height: 10vh;
26+
}
27+
section {
28+
width: 50%;
29+
margin: 1vw auto;
30+
}
31+
section article {
32+
border: 1px navy solid;
33+
width: 80%;
34+
margin: 1vh auto;
35+
padding: 1px;
36+
}
37+
section article h2 {
38+
width: 100%;
39+
text-align: center;
40+
}
41+
section article p {
42+
width: 80%;
43+
margin: 1vh auto;
44+
padding: 5px;
45+
}
46+
div button {
47+
position: absolute;
48+
background-color: black;
49+
color: white;
50+
text-align: left;
51+
border: none;
52+
font-size: 7vw;
53+
transform: rotateZ(90deg);
54+
border: 1px solid navy;
55+
}
56+
div button:nth-child(even) {
57+
z-index: 100;
58+
color: black;
59+
background-color: white;
60+
transform: rotateZ(-90deg);
61+
}
62+
div button:nth-child(odd) {
63+
z-index: 10;
64+
}
65+
@media screen and (max-width: 600px) {
66+
section {
67+
width: 90%;
68+
margin: 1vw auto;
69+
}
70+
section article {
71+
border: 1px navy solid;
72+
width: 90%;
73+
margin: 1vh auto;
74+
padding: 1px;
75+
}
76+
section article h2 {
77+
width: 100%;
78+
text-align: center;
79+
}
80+
section article p {
81+
width: 90%;
82+
margin: 1vh auto;
83+
padding: 5px;
84+
}
85+
}

0 commit comments

Comments
 (0)