Skip to content

Commit c519813

Browse files
Shreekant-04Shreekant-04
committed
some projects added
1 parent 060b466 commit c519813

File tree

22 files changed

+676
-27
lines changed

22 files changed

+676
-27
lines changed

‎3d-text-animation/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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>Upskill's Dev Club</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="box" id="animatedBox"></div>
12+
</div>
13+
<script src="script.js"></script>
14+
</body>
15+
</html>

‎3d-text-animation/script.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// JavaScript to dynamically create and insert HTML tags using a for loop
2+
const boxElement = document.getElementById('animatedBox');
3+
4+
for (let i = 1; i <= 10; i++) {
5+
const span = document.createElement('span');
6+
span.style.setProperty('--i', i);
7+
span.innerHTML = "<i>Upskill's</i> Dev <i>club</i>";
8+
boxElement.appendChild(span);
9+
}

‎3d-text-animation/style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;600&family=Poppins:wght@100;500;600;800;900&family=Lobster+Two:ital,wght@0,400;0,700;1,400&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
10+
body {
11+
background-color: #0a0a0a; /* Darker background for better contrast */
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
min-height: 100vh;
16+
overflow: hidden;
17+
}
18+
19+
.container {
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
}
24+
25+
.container .box {
26+
transform-style: preserve-3d;
27+
animation: rotateAnimation 7s linear infinite alternate;
28+
}
29+
30+
.container .box span {
31+
text-transform: uppercase;
32+
line-height: 0.76em;
33+
position: absolute;
34+
color: #ffffff; /* White text color for better contrast */
35+
font-size: 3.5em;
36+
white-space: nowrap;
37+
font-weight: bold;
38+
padding: 0px 10px;
39+
transform-style: preserve-3d;
40+
text-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
41+
transform: translate(-50%, -50%) rotateX(calc(var(--i) * 36deg))
42+
translateZ(109px);
43+
}
44+
45+
.container .box span i {
46+
font-style: normal;
47+
}
48+
49+
.container .box span i:nth-child(1) {
50+
color: #ff6f61; /* Vibrant coral color */
51+
}
52+
53+
.container .box span i:nth-child(2) {
54+
color: #4ecdc4; /* Bright turquoise color */
55+
}
56+
57+
@keyframes rotateAnimation {
58+
0% {
59+
transform: perspective(1000px) rotateX(0deg);
60+
}
61+
50% {
62+
transform: perspective(1000px) rotateX(-180deg);
63+
}
64+
65+
100% {
66+
transform: perspective(50px) rotateX(-360deg);
67+
}
68+
}

‎AudioToText/script.js‎

Whitespace-only changes.

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,5 +288,20 @@
288288
<td><a href="confetti effect">Confetti effect</a></td>
289289
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/confetti effect/">Link</a></td>
290290
</tr>
291+
<tr>
292+
<td>56</td>
293+
<td><a href="custom-Video-Player">Custom Video Playert</a></td>
294+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/custom-Video-Player/">Link</a></td>
295+
</tr>
296+
<tr>
297+
<td>57</td>
298+
<td><a href="3d-text-animation">3d Text Animation</a></td>
299+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/3d-text-animation/">Link</a></td>
300+
</tr>
301+
<tr>
302+
<td>58</td>
303+
<td><a href="3dRotation">3d Rotation</a></td>
304+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/3dRotation/">Link</a></td>
305+
</tr>
291306
</tbody>
292307
</table>

‎ToDos with local storage/1.txt‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// li.querySelector(`#task${index}`).addEventListener("change", (e) => {
2+
// task.completed = e.target.checked;
3+
// localStorage.setItem("Tasks", JSON.stringify(parsedTasks));
4+
// local();
5+
// });
6+
7+
// li.querySelector(".delete").addEventListener("click", () => {
8+
// parsedTasks.splice(index, 1);
9+
// localStorage.setItem("Tasks", JSON.stringify(parsedTasks));
10+
// local();
11+
// });

‎ToDos with local storage/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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>To-Do List</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="todo-container">
11+
<h1 class="header">My To-Do List</h1>
12+
<form class="input-container">
13+
<input type="text" placeholder="Add a new task" id="new-task" />
14+
<button id="add-task" type="submit">Add</button>
15+
</form>
16+
<ul class="todo-list">
17+
<!-- <li class="todo-item">
18+
<input type="checkbox" id="task1" />
19+
<label style="padding-right: 5px">1.</label>
20+
<label>Review JavaScript basics</label>
21+
<span class="delete">❌</span>
22+
</li> -->
23+
</ul>
24+
</div>
25+
<script src="script.js"></script>
26+
</body>
27+
</html>

‎ToDos with local storage/script.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
console.log("hello");
2+
3+
const add = (e) => {
4+
e.preventDefault();
5+
6+
let savedTasks = JSON.parse(localStorage.getItem("Tasks")) || [];
7+
let todo = document.querySelector("#new-task");
8+
if (todo.value) {
9+
let obj = { task: todo.value, completed: false };
10+
savedTasks.push(obj);
11+
localStorage.setItem("Tasks", JSON.stringify(savedTasks));
12+
todo.value = "";
13+
populate();
14+
}
15+
};
16+
17+
function populate() {
18+
const list = document.querySelector(".todo-list");
19+
list.innerHTML = "";
20+
21+
const parsedTasks = JSON.parse(localStorage.getItem("Tasks")) || [];
22+
parsedTasks.forEach((task, index) => {
23+
let li = document.createElement("li");
24+
li.classList.add("todo-item");
25+
26+
li.innerHTML = `
27+
<input type="checkbox" id="task${index}" ${
28+
task.completed ? "checked" : ""
29+
}/>
30+
<span for="n" style="padding-right: 5px">${index + 1}.</span>
31+
<span for="n" class="${task.completed ? "completed" : ""}">${
32+
task.task
33+
}</span>
34+
<span class="delete">❌</span>
35+
`;
36+
37+
li.querySelector(`#task${index}`).addEventListener("change", (e) => {
38+
task.completed = e.target.checked;
39+
localStorage.setItem("Tasks", JSON.stringify(parsedTasks));
40+
populate();
41+
});
42+
43+
li.querySelector(".delete").addEventListener("click", () => {
44+
parsedTasks.splice(index, 1);
45+
localStorage.setItem("Tasks", JSON.stringify(parsedTasks));
46+
populate();
47+
});
48+
49+
list.appendChild(li);
50+
});
51+
// events();
52+
}
53+
54+
// function events() {
55+
// let checkboxes = document.querySelectorAll("input[type='checkbox']");
56+
// let deleteBtns = document.querySelectorAll(".delete");
57+
58+
// checkboxes.forEach((box, index) => {
59+
// box.addEventListener("change", (e) => {
60+
// let isCheck = e.target.checked;
61+
// const parsedTasks = JSON.parse(localStorage.getItem("Tasks"));
62+
// parsedTasks[index].completed = isCheck;
63+
// localStorage.setItem("Tasks", JSON.stringify(parsedTasks));
64+
// populate();
65+
// });
66+
// });
67+
68+
// deleteBtns.forEach((btn, index) => {
69+
// btn.addEventListener("click", () => {
70+
// const parsedTasks = JSON.parse(localStorage.getItem("Tasks"));
71+
// parsedTasks.splice(index, 1);
72+
// localStorage.setItem("Tasks", JSON.stringify(parsedTasks));
73+
// populate();
74+
// });
75+
// });
76+
// }
77+
78+
const form = document.querySelector(".input-container");
79+
form.addEventListener("submit", add);
80+
populate();
81+
82+
83+
84+
85+
// splice(start, deleteCount, item1)

‎ToDos with local storage/style.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
body {
2+
font-family: "Poppins", sans-serif;
3+
background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%);
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
width: 100vw;
11+
overflow: hidden;
12+
}
13+
14+
.todo-container {
15+
background-color: #fff;
16+
border-radius: 16px;
17+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
18+
width: 40%;
19+
height: 70%;
20+
padding: 30px;
21+
text-align: center;
22+
animation: fadeIn 1s ease-in-out;
23+
}
24+
25+
.header {
26+
margin-bottom: 10px;
27+
color: #333;
28+
font-size: 2em;
29+
font-weight: bold;
30+
}
31+
32+
.todo-list {
33+
list-style: none;
34+
padding: 10px;
35+
margin: 0;
36+
height: 60%;
37+
overflow-y: auto;
38+
text-align: left;
39+
scrollbar-width: thin;
40+
}
41+
42+
.todo-item {
43+
display: flex;
44+
align-items: center;
45+
margin-bottom: 15px;
46+
background-color: #e0f7fa;
47+
padding: 15px;
48+
border-radius: 12px;
49+
transition: transform 0.2s ease-in-out;
50+
}
51+
52+
.todo-item:hover {
53+
transform: translateY(-5px);
54+
}
55+
56+
.completed {
57+
text-decoration: line-through;
58+
font-weight: bold;
59+
color: #999;
60+
}
61+
62+
.delete {
63+
margin-left: auto;
64+
cursor: pointer;
65+
}
66+
67+
68+
69+
.todo-item input[type="checkbox"] {
70+
margin-right: 15px;
71+
transform: scale(1.2);
72+
}
73+
74+
.todo-item span {
75+
font-size: 1.2em;
76+
color: #555;
77+
}
78+
79+
.input-container {
80+
display: flex;
81+
padding: 10px;
82+
}
83+
84+
.input-container input[type="text"] {
85+
flex: 1;
86+
padding: 15px;
87+
border: 1px solid #ddd;
88+
border-radius: 8px;
89+
font-size: 1em;
90+
outline: none;
91+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
92+
}
93+
94+
.input-container button {
95+
padding: 15px 20px;
96+
border: none;
97+
background-color: #1abc9c;
98+
color: #fff;
99+
border-radius: 8px;
100+
margin-left: 10px;
101+
cursor: pointer;
102+
font-size: 1em;
103+
transition: background-color 0.3s ease;
104+
}
105+
input[type="checkbox"] {
106+
cursor: pointer;
107+
}
108+
109+
.input-container button:hover {
110+
background-color: #16a085;
111+
}
112+
113+
114+
@keyframes fadeIn {
115+
from {
116+
opacity: 0;
117+
transform: scale(0.8);
118+
}
119+
to {
120+
opacity: 1;
121+
transform: scale(1);
122+
}
123+
}

confetti effect/index.html renamed to confetti-effect/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
</head>
1111
<body>
1212
<div class="wrapper">
13-
<button onclick="launchConfetti()">Celebrate with Fruits!</button>
13+
<!-- <button onclick="launchConfetti()">Celebrate with Fruits!</button>
1414
<button onclick="launchConfetti2()">Celebrate with Stars</button>
15-
<button onclick="launchConfetti3()">Celebrate </button>
15+
<button onclick="launchConfetti3()">Celebrate </button> -->
1616
<button onclick="fireworks()">Fireworks</button>
1717
</div>
1818
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/[email protected]/tsparticles.confetti.bundle.min.js"></script>

0 commit comments

Comments
 (0)