@@ -5,13 +5,13 @@ const sampleProjects = [
55 id : 1 ,
66 title : 'Analog Clock Web App' ,
77 description : 'A beautifully designed analog clock that updates in real-time using vanilla JavaScript, HTML, and CSS. Perfect for understanding basic DOM manipulation and CSS transformations.' ,
8- repoUrl : 'https://github.com/Varshitha713/analog-clock-web-app ' ,
9- demoUrl : 'https://varshitha713 .github.io/analog-clock-web-app /' ,
8+ repoUrl : 'https://github.com/snehhhcodes/Analog-Clock-Web-App ' ,
9+ demoUrl : 'https://snehhhcodes .github.io/Analog-Clock-Web-App /' ,
1010 difficulty : 'beginner' ,
1111 upvotes : 15 ,
1212 hasDemo : true ,
1313 hasReadme : true ,
14- previewImage : 'https://github.com/user-attachments/ assets/091946a3-d98d-42dc-a22a-90eaefc8b1b1 ' ,
14+ previewImage : 'assets/Preview.png ' ,
1515 tags : [ 'JavaScript' , 'CSS' , 'HTML' , 'DOM' ]
1616 } ,
1717 {
@@ -79,6 +79,20 @@ const sampleProjects = [
7979 previewImage : "assets/image.png" ,
8080 tags : [ "REACT" , "Tailwind CSS" , "Responsive" , "React-Router DOM" ] ,
8181 } ,
82+ {
83+ id : 7 ,
84+ title : 'PassWord Generator' ,
85+ description : 'Enable user to create password with specified length and character (uppercase, lowercase , special character and numbers) to meet diverse securing requirements.' ,
86+ repoUrl : 'https://github.com/Sitaram8472/Generate-password' ,
87+ demoUrl : 'https://password-generator021.netlify.app/' ,
88+ difficulty : 'advanced' ,
89+ upvotes : 42 ,
90+ hasDemo : true ,
91+ hasReadme : true ,
92+ previewImage : "assets/GeneratePassword.png" ,
93+ tags : [ 'HTML' , 'CSS' , 'JavaScript' , 'Responsive' ]
94+ } ,
95+
8296 ] ;
8397
8498 // Store the current projects array
@@ -294,28 +308,40 @@ const sampleProjects = [
294308 // Make handleUpvote globally available
295309 window . handleUpvote = handleUpvote ;
296310
297- // Start the app
298- document . addEventListener ( 'DOMContentLoaded' , init ) ;
299-
300- function validateForm ( ) {
301- const name = document . getElementById ( "name" ) . value . trim ( ) ;
302- const email = document . getElementById ( "email" ) . value . trim ( ) ;
303- const message = document . getElementById ( "message" ) . value . trim ( ) ;
304-
305- if ( ! name || ! email || ! message ) {
306- alert ( "Please fill in all fields." ) ;
307- return false ;
308- }
309-
310- const emailPattern = / ^ [ ^ ] + @ [ ^ ] + \. [ a - z ] { 2 , 3 } $ / ;
311- if ( ! email . match ( emailPattern ) ) {
312- alert ( "Please enter a valid email." ) ;
313- return false ;
314- }
315-
316- document . getElementById ( "form-status" ) . style . display = "block" ;
317- return false ; // Prevent actual submission
318- }
311+ // Start the app
312+ document . addEventListener ( "DOMContentLoaded" , init ) ;
313+ // Adding m own version and also added a feature where the input field will get clear on clicking the send message button
314+ function validateForm ( ) {
315+ const name = document . getElementById ( "name" ) . value . trim ( ) ;
316+ const lastname = document . getElementById ( "lastname" ) . value . trim ( ) ;
317+ const email = document . getElementById ( "email" ) . value . trim ( ) ;
318+ const message = document . getElementById ( "message" ) . value . trim ( ) ;
319+ if ( ! name || ! lastname || ! email || ! message ) {
320+ alert ( "Please fill in all fields." ) ;
321+ return false ;
322+ }
323+ const emailPattern = / ^ [ ^ ] + @ [ ^ ] + \. [ a - z ] { 2 , 3 } $ / ;
324+ if ( ! email . match ( emailPattern ) ) {
325+ alert ( "Please enter a valid email." ) ;
326+ return false ;
327+ }
328+
329+ // Show the overlay
330+ const overlay = document . getElementById ( "message-overlay" ) ;
331+ overlay . style . opacity = "1" ;
332+ overlay . style . pointerEvents = "auto" ;
333+
334+ // Hide the overlay after 3 seconds
335+ setTimeout ( ( ) => {
336+ overlay . style . opacity = "0" ;
337+ overlay . style . pointerEvents = "none" ;
338+ } , 3000 ) ;
339+
340+ // Clear form
341+ document . getElementById ( "contact-form" ) . reset ( ) ;
342+
343+ return false ; // Prevent actual form submission
344+ }
319345
320346 const toggle = document . getElementById ( 'darkModeToggle' ) ;
321347 const body = document . body ;
@@ -337,4 +363,24 @@ const sampleProjects = [
337363
338364 // Update icon
339365 icon . textContent = theme === 'dark' ? '☀️' : '🌙' ;
340- } ) ;
366+ } ) ;
367+
368+ //Review Section JS
369+ const swiper = new Swiper ( ".review-swiper" , {
370+ loop : true ,
371+ slidesPerView : 1 ,
372+ spaceBetween : 20 ,
373+ navigation : {
374+ nextEl : ".swiper-button-next" ,
375+ prevEl : ".swiper-button-prev" ,
376+ } ,
377+ keyboard : {
378+ enabled : true ,
379+ } ,
380+ mousewheel : {
381+ forceToAxis : true ,
382+ } ,
383+ grabCursor : true ,
384+ speed : 600 ,
385+ } ) ;
386+
0 commit comments