@@ -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
@@ -288,28 +302,40 @@ const sampleProjects = [
288302 // Make handleUpvote globally available
289303 window . handleUpvote = handleUpvote ;
290304
291- // Start the app
292- document . addEventListener ( 'DOMContentLoaded' , init ) ;
305+ // Start the app
306+ document . addEventListener ( "DOMContentLoaded" , init ) ;
307+ // Adding m own version and also added a feature where the input field will get clear on clicking the send message button
308+ function validateForm ( ) {
309+ const name = document . getElementById ( "name" ) . value . trim ( ) ;
310+ const lastname = document . getElementById ( "lastname" ) . value . trim ( ) ;
311+ const email = document . getElementById ( "email" ) . value . trim ( ) ;
312+ const message = document . getElementById ( "message" ) . value . trim ( ) ;
313+ if ( ! name || ! lastname || ! email || ! message ) {
314+ alert ( "Please fill in all fields." ) ;
315+ return false ;
316+ }
317+ const emailPattern = / ^ [ ^ ] + @ [ ^ ] + \. [ a - z ] { 2 , 3 } $ / ;
318+ if ( ! email . match ( emailPattern ) ) {
319+ alert ( "Please enter a valid email." ) ;
320+ return false ;
321+ }
293322
294- function validateForm ( ) {
295- const name = document . getElementById ( "name" ) . value . trim ( ) ;
296- const email = document . getElementById ( "email" ) . value . trim ( ) ;
297- const message = document . getElementById ( "message" ) . value . trim ( ) ;
298-
299- if ( ! name || ! email || ! message ) {
300- alert ( "Please fill in all fields." ) ;
301- return false ;
302- }
303-
304- const emailPattern = / ^ [ ^ ] + @ [ ^ ] + \. [ a - z ] { 2 , 3 } $ / ;
305- if ( ! email . match ( emailPattern ) ) {
306- alert ( "Please enter a valid email." ) ;
307- return false ;
308- }
309-
310- document . getElementById ( "form-status" ) . style . display = "block" ;
311- return false ; // Prevent actual submission
312- }
323+ // Show the overlay
324+ const overlay = document . getElementById ( "message-overlay" ) ;
325+ overlay . style . opacity = "1" ;
326+ overlay . style . pointerEvents = "auto" ;
327+
328+ // Hide the overlay after 3 seconds
329+ setTimeout ( ( ) => {
330+ overlay . style . opacity = "0" ;
331+ overlay . style . pointerEvents = "none" ;
332+ } , 3000 ) ;
333+
334+ // Clear form
335+ document . getElementById ( "contact-form" ) . reset ( ) ;
336+
337+ return false ; // Prevent actual form submission
338+ }
313339
314340 const toggle = document . getElementById ( 'darkModeToggle' ) ;
315341 const body = document . body ;
@@ -331,4 +357,24 @@ const sampleProjects = [
331357
332358 // Update icon
333359 icon . textContent = theme === 'dark' ? '☀️' : '🌙' ;
334- } ) ;
360+ } ) ;
361+
362+ //Review Section JS
363+ const swiper = new Swiper ( ".review-swiper" , {
364+ loop : true ,
365+ slidesPerView : 1 ,
366+ spaceBetween : 20 ,
367+ navigation : {
368+ nextEl : ".swiper-button-next" ,
369+ prevEl : ".swiper-button-prev" ,
370+ } ,
371+ keyboard : {
372+ enabled : true ,
373+ } ,
374+ mousewheel : {
375+ forceToAxis : true ,
376+ } ,
377+ grabCursor : true ,
378+ speed : 600 ,
379+ } ) ;
380+
0 commit comments