Merge branch 'master' into car-game · nirUpma52/30DaysOfJavaScript@e4c788b · GitHub
Skip to content

Commit e4c788b

Browse files
swapnilsparshswapnilsparsh
authored
Merge branch 'master' into car-game
2 parents b078312 + 6529058 commit e4c788b

20 files changed

Lines changed: 1158 additions & 59 deletions

File tree

‎30DaysOfJavaScript/.DS_Store‎

-6 KB
Binary file not shown.

‎30DaysOfJavaScript/assets/.DS_Store‎

-10 KB
Binary file not shown.

‎30DaysOfJavaScript/assets/70.png‎

11.4 KB
Loading

‎30DaysOfJavaScript/script.js‎

Lines changed: 15 additions & 0 deletions

‎30DaysOfJavaScript/style.css‎

Lines changed: 73 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,34 +18,51 @@ body.dark-mode {
1818
background-color: #111;
1919
color: #eee;
2020
}
21+
2122
body.dark-mode a {
2223
color: #111;
2324
}
25+
2426
body.dark-mode button {
2527
background-color: #eee;
2628
color: #111;
2729
}
28-
body.dark-mode h4 {
30+
31+
body.dark-mode h4 {
2932
color: #eee;
3033
}
31-
body.dark-mode svg {
34+
35+
body.dark-mode svg {
3236
fill: #fff;
3337
color: #151513;
3438
}
39+
40+
body.dark-mode input {
41+
color: white;
42+
}
43+
44+
body.light-mode input {
45+
color: #111;
46+
}
47+
3548
body.light-mode {
3649
background-color: #eee;
3750
color: #111;
3851
}
52+
3953
body.light-mode a {
4054
color: #111;
4155
}
56+
4257
body.light-mode button {
4358
background-color: #111;
4459
color: #eee;
4560
}
61+
4662
body.light-mode h4 {
4763
color: #111;
4864
}
65+
4966
body.light-mode svg {
5067
fill: #151513;
5168
color: #fff;
@@ -56,30 +73,36 @@ body.light-mode svg {
5673
.github-corner:hover .octo-arm {
5774
animation: octocat-wave 560ms ease-in-out;
5875
}
76+
5977
@keyframes octocat-wave {
78+
6079
0%,
6180
100% {
6281
transform: rotate(0);
6382
}
83+
6484
20%,
6585
60% {
6686
transform: rotate(-25deg);
6787
}
88+
6889
40%,
6990
80% {
7091
transform: rotate(10deg);
7192
}
7293
}
94+
7395
@media (max-width: 500px) {
7496
.github-corner:hover .octo-arm {
7597
animation: none;
7698
}
99+
77100
.github-corner .octo-arm {
78101
animation: octocat-wave 560ms ease-in-out;
79102
}
80103
}
81104

82-
.toggleButton{
105+
.toggleButton {
83106
position: absolute;
84107
top: 0;
85108
margin: 10px 3px 3px 10px;
@@ -106,8 +129,8 @@ h1 {
106129
@media only screen and (max-width: 658px) {
107130

108131
h1 {
109-
font-size: 1.8em;
110-
padding: 32px 40px;
132+
font-size: 1.8em;
133+
padding: 32px 40px;
111134
}
112135

113136
}
@@ -141,33 +164,33 @@ a:visited {
141164
width: 90%;
142165
height: 100%;
143166
background-color: rgba(0, 0, 0, 0.4);
144-
box-shadow: 0 0 transparent,0 0 transparent,0 0 transparent,0 0 transparent, 0 2px 3px 0 rgba(0,0,0,0.15),0 1px 2px 0 rgba(0,0,0,0.06);
167+
box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
145168
border-radius: 10px;
146169
transition: transform .3s ease-in-out 0s;
147170
}
148171

149-
.item:hover{
172+
.item:hover {
150173
transform: scale3d(1.05, 1.05, 1);
151174
/* border: 1px solid #ffffff; */
152175
filter: drop-shadow(10px);
153176
filter: contrast(110%);
154177
}
155178

156-
.item h4{
179+
.item h4 {
157180
font-size: 1.3rem;
158181
text-align: center;
159182
}
160183

161-
.main{
184+
.main {
162185
width: 90vw;
163186
display: grid;
164-
grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
187+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
165188
grid-gap: 24px;
166189
row-gap: 24px;
167190
margin: auto;
168191
}
169192

170-
.main a{
193+
.main a {
171194
text-decoration: none;
172195
}
173196

@@ -197,24 +220,47 @@ footer a:visited {
197220
}
198221

199222
.scrollToTop {
200-
position:fixed;
201-
right:10px;
202-
bottom:10px;
203-
cursor:pointer;
204-
width:40px;
205-
height:40px;
206-
background-color:#5520b6;
207-
border-radius:50%;
223+
position: fixed;
224+
right: 10px;
225+
bottom: 10px;
226+
cursor: pointer;
227+
width: 40px;
228+
height: 40px;
229+
background-color: #5520b6;
230+
border-radius: 50%;
208231
}
232+
209233
.scrollToTop span {
210-
position:absolute;
211-
top:50%;
212-
left:50%;
213-
margin-left:-8px;
214-
margin-top:-12px;
215-
border:8px solid transparent;
216-
border-bottom-color:white;
234+
position: absolute;
235+
top: 50%;
236+
left: 50%;
237+
margin-left: -8px;
238+
margin-top: -12px;
239+
border: 8px solid transparent;
240+
border-bottom-color: white;
217241
}
242+
218243
.scrollToTop:hover {
219-
background-color:#5836D8;
244+
background-color: #5836D8;
220245
}
246+
247+
input {
248+
border-radius: 3rem;
249+
padding: 10px;
250+
border-color: grey;
251+
width: 15%;
252+
position: absolute;
253+
top: 6.5%;
254+
right: 7%;
255+
background: transparent;
256+
}
257+
258+
@media(max-width:1000px) {
259+
input {
260+
position: relative;
261+
align-items: center;
262+
margin-bottom: 3%;
263+
left: 35%;
264+
width: 25%
265+
}
266+
}

‎70-Transpose-Matrix-Calculator/index.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Transpose-Matrix Calculator</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body id="body">
13+
<div class="container">
14+
<h1>Transpose-Matrix Calculator</h1>
15+
<div id="matrix" class="matrixClass">
16+
<table>
17+
<thead>
18+
<tr>
19+
<th>A1</th>
20+
<th>A2</th>
21+
<th>A3</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
<tr>
26+
<td>
27+
<input type="text" name="array[]" value="" title="[1,1]">
28+
</td>
29+
<td>
30+
<input type="text" name="array[]" value="" title="[1,2]">
31+
</td>
32+
<td>
33+
<input type="text" name="array[]" value="" title="[1,3]">
34+
</td>
35+
</tr>
36+
<tr>
37+
<td>
38+
<input type="text" name="array[]" value="" title="[2,1]">
39+
</td>
40+
<td>
41+
<input type="text" name="array[]" value="" title="[2,2]">
42+
</td>
43+
<td>
44+
<input type="text" name="array[]" value="" title="[2,3]">
45+
</td>
46+
</tr>
47+
<tr>
48+
<td>
49+
<input type="text" name="array[]" value="" title="[3,1]">
50+
</td>
51+
<td>
52+
<input type="text" name="array[]" value="" title="[3,2]">
53+
</td>
54+
<td>
55+
<input type="text" name="array[]" value="" title="[3,3]">
56+
</td>
57+
</tr>
58+
</tbody>
59+
</table>
60+
61+
</div>
62+
<button id="button">Get</button>
63+
</div>
64+
</body>
65+
<script src="script.js"></script>
66+
67+
</html>

‎70-Transpose-Matrix-Calculator/script.js‎

Lines changed: 79 additions & 0 deletions

0 commit comments

Comments
 (0)