Skip to content

Commit 81c7654

Browse files
Tejas-SandsTejas-Sands
committed
Merge remote-tracking branch 'upstream/main'
it is important and updating the forked repo
2 parents 8ff7dd6 + 80d2278 commit 81c7654

196 files changed

Lines changed: 6915 additions & 30440 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.

‎.DS_Store‎

8 KB
Binary file not shown.

‎Projects/Advice Generator/images/bg.jpg‎

351 KB
Loading

‎Projects/Advice Generator/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
<!-- fonts -->
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<!-- css stylesheet -->
14+
<link rel="stylesheet" href="styles.css" />
15+
<!-- title -->
16+
<title>Advice generator app</title>
17+
</head>
18+
<body>
19+
<div id="heading"></div>
20+
21+
<div id="date"></div>
22+
23+
<div id="time"></div>
24+
25+
<div class="container">
26+
<div class="row">
27+
<div class="col">
28+
<div class="advice">
29+
<h1 id="advice"></h1>
30+
</div>
31+
<button id="random" class="btn" type="button" name="button">
32+
More
33+
</button>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<footer>
39+
<div class="attribution">
40+
Made with ❤️ by
41+
<a href="https://github.com/WebdevShefali" target="_blank">Shefali</a>.
42+
</div>
43+
</footer>
44+
<script src="index.js" charset="utf-8"></script>
45+
</body>
46+
</html>

‎Projects/Advice Generator/index.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const API = "https://api.adviceslip.com/advice";
2+
random = document.getElementById("random");
3+
4+
function getAdvice(API) {
5+
fetch(API)
6+
.then((response) => {
7+
return response.json();
8+
})
9+
.then((data) => {
10+
let advice = data.slip["advice"];
11+
document.getElementById("advice").innerText = "“" + advice + "”";
12+
});
13+
}
14+
15+
//To initialize the Advice
16+
window.addEventListener("load", () => {
17+
getAdvice(API);
18+
getTime();
19+
});
20+
21+
random.addEventListener("click", () => {
22+
getAdvice(API);
23+
});
24+
const getTime = () => {
25+
var today = new Date();
26+
var date =
27+
today.getFullYear() + "." + today.getMonth() + "." + today.getDate();
28+
29+
var hr = today.getHours();
30+
var m = today.getMinutes();
31+
var s = today.getSeconds();
32+
m = checkTime(m);
33+
s = checkTime(s);
34+
var time = hr + ":" + m + ":" + s;
35+
36+
if (hr >= 0 && hr < 12) {
37+
document.getElementById("heading").textContent = "Good Morning!";
38+
} else if (hr == 12) {
39+
document.getElementById("heading").textContent = "Good Noon!";
40+
} else if (hr >= 12 && hr <= 17) {
41+
document.getElementById("heading").textContent = "Good Afternoon!";
42+
} else {
43+
document.getElementById("heading").textContent = "Good Evening!";
44+
}
45+
document.getElementById("date").innerText = date;
46+
document.getElementById("time").innerText = time;
47+
setTimeout(getTime, 1000);
48+
};
49+
function checkTime(i) {
50+
if (i < 10) {
51+
i = "0" + i;
52+
} // add zero in front of numbers < 10
53+
return i;
54+
}

‎Projects/Advice Generator/styles.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-weight: 800;
8+
background-image: url(images/bg.jpg);
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
overflow: hidden;
12+
}
13+
button:focus {
14+
outline: none !important;
15+
}
16+
17+
body,
18+
.attribution a {
19+
color: #446a46;
20+
}
21+
22+
body,
23+
.btn {
24+
font-family: "Dancing Script", cursive;
25+
}
26+
27+
h1 {
28+
font-size: 2rem;
29+
}
30+
31+
.advice {
32+
height: 100px;
33+
}
34+
35+
#heading {
36+
font-size: 3rem;
37+
margin-top: 1%;
38+
margin-left: 2%;
39+
}
40+
41+
#time,
42+
#date {
43+
margin-top: 0.5%;
44+
font-size: 1.5rem;
45+
margin-left: 5%;
46+
}
47+
48+
.container {
49+
margin-top: 1%;
50+
height: 70vh;
51+
}
52+
53+
.btn {
54+
border-radius: 20px;
55+
border: none;
56+
padding-top: 3px;
57+
margin-top: 35px;
58+
height: 40px;
59+
width: 100px;
60+
color: #fff;
61+
background-color: #446a46;
62+
cursor: pointer;
63+
}
64+
65+
.btn,
66+
footer {
67+
font-size: 20px;
68+
}
69+
70+
footer {
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
}
75+
76+
footer,
77+
.container {
78+
text-align: center;
79+
}

‎Projects/Analog Clock/index.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,23 @@
77
</head>
88
<body>
99
<div class="bg"></div>
10-
1110
<div class="clock">
1211
<div class="clock-face">
1312
<div class="hand hour-hand"></div>
1413
<div class="hand min-hand"></div>
1514
<div class="hand second-hand" ></div>
15+
<div class="number number1">1</div>
16+
<div class="number number2">2</div>
17+
<div class="number number3">3</div>
18+
<div class="number number4">4</div>
19+
<div class="number number5">5</div>
20+
<div class="number number6">6</div>
21+
<div class="number number7">7</div>
22+
<div class="number number8">8</div>
23+
<div class="number number9">9</div>
24+
<div class="number number10">10</div>
25+
<div class="number number11">11</div>
26+
<div class="number number12">12</div>
1627
</div>
1728
</div>
1829
<script src="script.js"></script>

‎Projects/Analog Clock/style.css‎

Lines changed: 59 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
html {
2-
32
background-size: cover;
4-
font-family: 'helvetica neue';
3+
font-family: 'helvetica neue',sans-serif;
54
text-align: center;
65
font-size: 10px;
76
}
@@ -16,11 +15,12 @@ html {
1615
flex: 1;
1716
min-height: 100vh;
1817
align-items: center;
18+
justify-content: center;
1919
}
2020

2121
.clock {
22-
width: 60rem;
23-
height: 60rem;
22+
width: 45rem;
23+
height: 45rem;
2424
border: 20px solid white;
2525
border-radius: 50%;
2626
margin: 50px auto;
@@ -37,20 +37,67 @@ html {
3737
position: relative;
3838
width: 100%;
3939
height: 100%;
40-
transform: translateY(-3px); /* account for the height of the clock hands */
40+
transform: translateY(-3px); /*account for the height of the clock hands*/
4141
}
4242

43+
.clock-face::after {
44+
content: '';
45+
background-color: #000;
46+
width: 25px;
47+
height: 25px;
48+
position: absolute;
49+
top: 50%;
50+
left: 50%;
51+
transform: translate(-50%,-50%);
52+
border-radius: 50%;
53+
z-index: 11;
54+
}
55+
56+
.number {
57+
--rotate: 0;
58+
position: absolute;
59+
width: 100%;
60+
height: 100%;
61+
text-align: center;
62+
transform: rotate(var(--rotate));
63+
color: #fff;
64+
}
65+
66+
.number1 { --rotate: 30deg; }
67+
.number2 { --rotate: 60deg; }
68+
.number3 { --rotate: 90deg; }
69+
.number4 { --rotate: 120deg; }
70+
.number5 { --rotate: 150deg; }
71+
.number6 { --rotate: 180deg; }
72+
.number7 { --rotate: 210deg; }
73+
.number8 { --rotate: 240deg; }
74+
.number9 { --rotate: 270deg; }
75+
.number10 { --rotate: 300deg; }
76+
.number11 { --rotate: 330deg; }
77+
4378
.hand {
79+
--rotation: 0;
4480
width: 50%;
45-
height: 6px;
46-
background: black;
81+
height: 3px;
4782
position: absolute;
4883
top: 50%;
49-
transform-origin: 100%;
50-
transform: rotate(90deg);
51-
84+
left: 50%;
85+
background-color: rgb(0,0,0);
86+
transform-origin: left;
87+
transform: translateX(-50%);
88+
z-index: 10;
89+
}
90+
.hand.hour-hand {
91+
width: 40%;
92+
height: 10px;
5293
}
53-
.second-hand {
94+
95+
.hand.min-hand {
96+
width: 45%;
97+
height: 7px;
98+
}
99+
100+
.hand.second-hand {
54101
background: rgb(179, 16, 94);
55-
56102
}
103+

‎Projects/Animated Card/animated_card.css‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,24 @@ body{
112112
color: white;
113113
cursor: pointer;
114114
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
115-
}
115+
transition: 0.3s;
116+
transform: translateY(0);
117+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
118+
}
119+
120+
.card .btns button:hover {
121+
transform: translateY(-3px);
122+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.23);
123+
}
124+
125+
.card .btns button:last-child {
126+
background: transparent;
127+
color: blue;
128+
border: 2px solid blue;
129+
}
130+
131+
.card .btns button:last-child:hover {
132+
background: blue;
133+
color: white;
134+
}
135+

‎Projects/Auto Text Effect Animation/README.MD‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Description
2+
Auto Text Effect Animation
3+
4+
# Tech Stack
5+
Used : HTML, CSS AND JavaScript(Api)
6+
7+
# Website
8+
[Link of Live - project](https://riteshautotexteffect.netlify.app/)

‎Projects/Auto Text Effect Animation/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
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+
<title>Auto Text Effect Animation</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="shortcut icon" href="https://i.postimg.cc/QCy4mSnv/pic.jpg" type="image/x-icon">
10+
</head>
11+
<body>
12+
<div class="container">
13+
14+
</div>
15+
<script src="index.js"></script>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)