-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
312 lines (283 loc) · 16.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sanket Shinde</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<h1 class="container__heading">30 Day 30 JS Projects</h1>
<div class="container__box">
<!-- one -->
<div class="box">
<img src="/img/1.png" alt="Weather">
<h3>Weather App</h3>
<p>A dynamic application displaying real-time weather information based on user location or manual input.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/1%20weather%20App" class="btn">Code</a>
<a href="/1 weather App/" class="btn">Preview</a>
</div>
<!-- two -->
<div class="box">
<img src="/img/2.png" alt="Password">
<h3>Password Generator</h3>
<p>Generate strong and secure passwords with customizable criteria to enhance online account security.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/2%20Password%20Generator" class="btn">Code</a>
<a href="/2 Password Generator/" class="btn">Preview</a>
</div>
<!-- three -->
<div class="box">
<img src="/img/3.png" alt="Age Calculator">
<h3>Age Calculator</h3>
<p>A tool that calculates age based on the entered birthdate, useful for quick age verification.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/3%20Age%20Caluculator" class="btn">Code</a>
<a href="/3 Age Caluculator/" class="btn">Preview</a>
</div>
<!-- four -->
<div class="box">
<img src="/img/4.png" alt="QR Code Generator">
<h3>QR Code Generator</h3>
<p>Easily create QR codes for links, text, or contact information, enhancing accessibility and information sharing.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/4%20Qr%20Code%20Generator" class="btn">Code</a>
<a href="/4 Qr Code Generator/" class="btn">Preview</a>
</div>
<!-- five -->
<div class="box">
<img src="/img/5.png" alt="Quote Generator">
<h3>Quote Generator</h3>
<p>Inspire and motivate users with a dynamic quote generator, offering a new quote with each visit.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/5%20Quote%20Generator" class="btn">Code</a>
<a href="/5 Quote Generator/" class="btn">Preview</a>
</div>
<!-- six -->
<div class="box">
<img src="/img/6.png" alt="Stopwatch">
<h3>Stopwatch</h3>
<p>A simple and effective stopwatch for timing various activities or events.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/6%20Stopwatch" class="btn">Code</a>
<a href="/6 Stopwatch/" class="btn">Preview</a>
</div>
<!-- seven -->
<div class="box">
<img src="/img/7.png" alt="Popup">
<h3>Popup</h3>
<p>Implement interactive popups to enhance user engagement or convey important messages.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/7%20Popup" class="btn">Code</a>
<a href="/7 Popup/" class="btn">Preview</a>
</div>
<!-- eight -->
<div class="box">
<img src="/img/8.png" alt="Toast Notification">
<h3>Toast Notification</h3>
<p>Display non-intrusive toast notifications for feedback or alerts, improving user experience.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/8%20Toast%20Notification" class="btn">Code</a>
<a href="/8 Toast Notification/" class="btn">Preview</a>
</div>
<!-- nine -->
<div class="box">
<img src="/img/9.png" alt="Password Toggle">
<h3>Password Toggle</h3>
<p>Allow users to easily toggle password visibility for improved user convenience during login.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/9%20Password%20Toggle" class="btn">Code</a>
<a href="/9 Password Toggle/" class="btn">Preview</a>
</div>
<!-- ten -->
<div class="box">
<img src="/img/10.png" alt="Drag and Drop">
<h3>Drag and Drop</h3>
<p>Create an intuitive interface with drag-and-drop functionality for seamless file or element manipulation.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/10%20drag%20and%20drop" class="btn">Code</a>
<a href="/10 Drag and Drop/" class="btn">Preview</a>
</div>
<!-- eleven -->
<div class="box">
<img src="/img/11.png" alt="Calculator">
<h3>Calculator</h3>
<p>A basic calculator for performing arithmetic operations conveniently.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/11%20Calculator" class="btn">Code</a>
<a href="/11 Calculator/" class="btn">Preview</a>
</div>
<!-- twelve -->
<div class="box">
<img src="/img/12.png" alt="Image Gallery">
<h3>Image Gallery</h3>
<p>Showcase a collection of images with a user-friendly and visually appealing gallery layout.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/12%20Image%20Gallary" class="btn">Code</a>
<a href="/12 Image Gallary/" class="btn">Preview</a>
</div>
<!-- thirteen -->
<div class="box">
<img src="/img/13.png" alt="Mini Calender">
<h3>Mini Calender</h3>
<p>A compact Calender for quick updates.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/13%20mini%20calculator" class="btn">Code</a>
<a href="/13 Mini Calculator/" class="btn">Preview</a>
</div>
<!-- fourteen -->
<div class="box">
<img src="/img/14.png" alt="Website Coming Soon">
<h3>Website Coming Soon</h3>
<p>Tease and inform visitors about an upcoming website launch with a stylish "coming soon" page.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/14%20website%20coming%20sooon" class="btn">Code</a>
<a href="/14 Website Coming Sooon/" class="btn">Preview</a>
</div>
<!-- fifteen -->
<div class="box">
<img src="/img/15.png" alt="Working Email Subscription Form">
<h3>Working Email Subscription Form</h3>
<p>Implement a functional email subscription form for users to stay updated on your content or services.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/15%20Working%20Email%20Subscription%20Form" class="btn">Code</a>
<a href="/15 Working Email Subscription Form/" class="btn">Preview</a>
</div>
<!-- sixteen -->
<div class="box">
<img src="/img/16.png" alt="Circular Progress Bar">
<h3>Circular Progress Bar</h3>
<p>Visually represent progress or loading with an aesthetically pleasing circular progress bar.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/16%20Circular%20Progress%20Bar" class="btn">Code</a>
<a href="/16 Circular Progress Bar/" class="btn">Preview</a>
</div>
<!-- seventeen -->
<div class="box">
<img src="/img/17.png" alt="Text to Voice">
<h3>Text To Voice</h3>
<p>Convert written text into spoken words, providing accessibility and a unique user experience.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/17%20Text%20to%20Voice" class="btn">Code</a>
<a href="/17 Text to Voice/" class="btn">Preview</a>
</div>
<!-- eighteen -->
<div class="box">
<img src="/img/18.png" alt="Image Animation">
<h3>Image Animation</h3>
<p>Add subtle animations to images for a more dynamic and engaging website.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/18%20img%20animation" class="btn">Code</a>
<a href="/18 img animation/" class="btn">Preview</a>
</div>
<!-- nineteen -->
<div class="box">
<img src="/img/19.png" alt="Digital Clock">
<h3>Digital Clock</h3>
<p>Display a sleek and modern digital clock with real-time updates.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/19%20Digital%20Clock" class="btn">Code</a>
<a href="/19 Digital Clock/" class="btn">Preview</a>
</div>
<!-- twenty -->
<div class="box">
<img src="/img/20.png" alt="Dropdown Modify">
<h3>Dropdown Modify</h3>
<p>Customize and modify dropdown menus for improved user interaction.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/20%20Dropdown%20Modify" class="btn">Code</a>
<a href="/20 Dropdown Modify/" class="btn">Preview</a>
</div>
<!-- twenty-one -->
<div class="box">
<img src="/img/21.png" alt="Password Strength">
<h3>Password Strength</h3>
<p>Evaluate and display the strength of entered passwords to encourage secure password practices.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/21%20Password%20Strength" class="btn">Code</a>
<a href="/21 Password Strength/" class="btn">Preview</a>
</div>
<!-- twenty-two -->
<div class="box">
<img src="/img/22.png" alt="Form Validation">
<h3>Form Validation</h3>
<p>Ensure data accuracy and completeness by implementing form validation features.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/22%20Form%20Validation" class="btn">Code</a>
<a href="/22 Form Validation/" class="btn">Preview</a>
</div>
<!-- twenty-three -->
<div class="box">
<img src="/img/23.png" alt="To-do List">
<h3>To-do List</h3>
<p>Organize tasks and boost productivity with a dynamic to-do list application.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/23%20To%20do%20List" class="btn">Code</a>
<a href="/23 To do List/" class="btn">Preview</a>
</div>
<!-- twenty-four -->
<div class="box">
<img src="/img/24.png" alt="Quiz">
<h3>Quiz</h3>
<p>Engage users with an interactive quiz, testing their knowledge on various topics.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/24%20Quiz" class="btn">Code</a>
<a href="/24 Quiz/" class="btn">Preview</a>
</div>
<!-- twenty-five -->
<div class="box">
<img src="/img/25.png" alt="Notes App">
<h3>Notes App</h3>
<p>Create, edit, and organize notes with a user-friendly and efficient note-taking application.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/25%20Notes%20app" class="btn">Code</a>
<a href="/25 Notes app/" class="btn">Preview</a>
</div>
<!-- twenty-six -->
<div class="box">
<img src="/img/26.png" alt="Music Player">
<h3>Music Player</h3>
<p>Enjoy a seamless music playback experience with a customizable and visually appealing music player.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/26%20Music%20Player" class="btn">Code</a>
<a href="/26 Music Player/" class="btn">Preview</a>
</div>
<!-- twenty-seven -->
<div class="box">
<img src="/img/27.png" alt="Img Search Engine">
<h3>Img Search Engine</h3>
<p>Implement an image search functionality to explore and discover images effortlessly.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/27%20Img%20Search%20Engine" class="btn">Code</a>
<a href="/27 Img Search Engine/" class="btn">Preview</a>
</div>
<!-- twenty-eight -->
<div class="box">
<img src="/img/28.png" alt="Dark-Light Mode">
<h3>Dark-Light Mode</h3>
<p>Enhance user experience with a toggleable dark and light mode for the website.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/28%20Dark-Light%20Mode" class="btn">Code</a>
<a href="/28 Dark-Light Mode/" class="btn">Preview</a>
</div>
<!-- twenty-nine -->
<div class="box">
<img src="/img/29.png" alt="Product Page">
<h3>Product Page</h3>
<p>Showcase and detail products in an attractive and informative product page layout.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/29%20Product%20Page" class="btn">Code</a>
<a href="/29 Product Page/" class="btn">Preview</a>
</div>
<!-- thirty -->
<div class="box">
<img src="/img/30.png" alt="Cryptocurrency Website">
<h3>Cryptocurrency Website</h3>
<p>Provide real-time information and insights into the world of cryptocurrencies through a dedicated website.</p>
<a href="https://github.com/sanketshinde3001/30days-30js-projects/tree/main/30%20Cryptocurrency%20Website" class="btn">Code</a>
<a href="/30 Cryptocurrency Website/" class="btn">Preview</a>
</div>
</div>
</div>
<footer class="footer">
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
<ul class="social-icon">
<li class="social-icon__item"><a class="social-icon__link" href="https://github.com/sanketshinde3001" target="_blank">
<ion-icon name="logo-github"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="https://twitter.com/sanketshinde04" target="_blank">
<ion-icon name="logo-twitter"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="https://www.linkedin.com/in/sanketshinde04/" target="_blank">
<ion-icon name="logo-linkedin"></ion-icon>
</a></li>
<li class="social-icon__item"><a class="social-icon__link" href="https://www.instagram.com/sanket_shinde2004?igsh=eTE3bDFtODRrdjY4" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a></li>
</ul>
<p><a id="linkyt" href="https://www.youtube.com/playlist?list=PLjwm_8O3suyOgDS_Z8AWbbq3zpCmR-WE9">GreatStack Project Playlist</a></p>
<p>©2024 Sanket Shinde | All Rights Reserved</p>
</footer>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>