Skip to content

Commit d52d302

Browse files
gauravsingh1281gauravsingh1281
authored
add click sound (#679)
2 parents f06f018 + 098c2e7 commit d52d302

File tree

8 files changed

+136
-258
lines changed

8 files changed

+136
-258
lines changed

‎src/assets/mixkit-mouse-click-close-1113.wav‎

237 KB
Binary file not shown.

‎src/components/Admin-Dashboard/AdminDashboard.jsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
import React from 'react';
22
import { Link, useNavigate } from "react-router-dom";
33
import './AdminDashboard.css';
4+
import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Import the sound effect
45

56
const AdminDashboard = () => {
67
const navigate = useNavigate();
78

9+
const playSound = () => {
10+
const audio = new Audio(clickSound);
11+
audio.play();
12+
};
13+
814
const handleLogout = () => {
15+
playSound(); // Play sound effect on logout
916
// Clear session data (e.g., token from localStorage)
1017
localStorage.removeItem("userToken");
1118

1219
// Redirect to login page
1320
navigate("/");
1421
};
22+
1523
return (
1624
<div className="admin-dashboard">
1725
<aside className="sidebar">
@@ -66,4 +74,4 @@ const AdminDashboard = () => {
6674
);
6775
};
6876

69-
export default AdminDashboard
77+
export default AdminDashboard;

‎src/components/Contact-section/Contact.jsx‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,18 @@ import Github from "../../assets/Social-Icons/Github.png";
66
import Insta from "../../assets/Social-Icons/instagram.png";
77
import { RiTwitterXFill } from "react-icons/ri";
88
import { FaGithub, FaInstagram, FaTwitter } from 'react-icons/fa';
9-
9+
import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav";
1010

1111
const Contact = () => {
12+
const playSound = () => {
13+
console.log("Sound button clicked"); // Log to verify the function is called
14+
const audio = new Audio(clickSound);
15+
audio.play();
16+
};
17+
1218
return (
1319
<section className="flex flex-col w-full px-[5%] gap-10 justify-center">
14-
<header id="ContactUs" className="flex justify-center align-middle mt-20">
20+
<header id="ContactUs" className="flex justify-center mt-20 align-middle">
1521
<h1 className="text-5xl font-bold tracking-wider text-text-black font-monsterrat">
1622
Contact Us
1723
</h1>
@@ -20,40 +26,36 @@ const Contact = () => {
2026
<ContactText />
2127
<ContactForm />
2228
</main>
23-
<h2 className="text-5xl text-center font-bold tracking-wider font-monsterrat ">
29+
<h2 className="text-5xl font-bold tracking-wider text-center font-monsterrat ">
2430
Connect with <span className="text-customRed">Us</span>
2531
</h2>
26-
<div className="md:flex items-center justify-between">
27-
<div className="flex items-center justify-center p-0 md:w-1/2">
32+
<div className="items-center justify-between md:flex">
33+
<div className="flex items-center justify-center p-0 md:w-1/2">
2834
<article className="flex flex-col items-center text-center ">
29-
<div className="flex gap-[27px] justify-center">
30-
35+
<div className="flex gap-[27px] justify-center">
3136
<a href="https://twitter.com/gauravsingh1281" className="group">
32-
<RiTwitterXFill className="md:h-12 h-10 w-auto transition-transform duration-300 ease-in-out transform group-hover:rotate-12 group-hover:scale-110 group-hover:shadow-lg" />
37+
<RiTwitterXFill className="w-auto h-10 transition-transform duration-300 ease-in-out transform md:h-12 group-hover:rotate-12 group-hover:scale-110 group-hover:shadow-lg" />
3338
</a>
34-
35-
36-
<a href="https://github.com/gauravsingh1281" className="group">
37-
<FaGithub
38-
className="text-6xl md:h-12 h-10 transition-transform duration-300 ease-in-out transform group-hover:rotate-12 group-hover:scale-110 group-hover:shadow-lg"
39-
/>
40-
</a>
41-
42-
<a href="https://www.instagram.com/gauravsingh1281" className="group">
43-
<img
44-
src={Insta}
45-
alt="Insta-logo"
46-
className="md:h-12 h-10 transition-transform duration-300 ease-in-out transform group-hover:rotate-12 group-hover:scale-110 group-hover:shadow-lg"
47-
/>
48-
</a>
49-
</div>
39+
<a href="https://github.com/gauravsingh1281" className="group">
40+
<FaGithub
41+
className="h-10 text-6xl transition-transform duration-300 ease-in-out transform md:h-12 group-hover:rotate-12 group-hover:scale-110 group-hover:shadow-lg"
42+
/>
43+
</a>
44+
<a href="https://www.instagram.com/gauravsingh1281" className="group">
45+
<img
46+
src={Insta}
47+
alt="Insta-logo"
48+
className="h-10 transition-transform duration-300 ease-in-out transform md:h-12 group-hover:rotate-12 group-hover:scale-110 group-hover:shadow-lg"
49+
/>
50+
</a>
51+
</div>
5052
<div className="mt-4">
5153
<p className="font-semibold">Get in touch :</p>
5254
<p>
5355
Email:
5456
<a
5557
href="mailto:support@rentalog.in"
56-
className="ml-1 font-bold text-primaryGreen underline"
58+
className="ml-1 font-bold underline text-primaryGreen"
5759
>
5860
support@rentalog.in
5961
</a>
@@ -62,7 +64,7 @@ const Contact = () => {
6264
Phone:
6365
<a
6466
href="tel:+916201577047"
65-
className="ml-1 font-bold text-primaryGreen underline"
67+
className="ml-1 font-bold underline text-primaryGreen"
6668
>
6769
+91 62015 77047
6870
</a>
@@ -71,14 +73,20 @@ const Contact = () => {
7173
Address: Shaktinagar, Sonebhadra <br /> UP, 231222
7274
</p>
7375
</div>
76+
<button
77+
className="bg-primary-green rounded-2xl w-[100px] p-3 font-semibold text-text-white mt-4"
78+
onClick={playSound}
79+
>
80+
Click Me
81+
</button>
7482
</article>
7583
</div>
76-
<div className=" md:w-1/2">
84+
<div className="md:w-1/2">
7785
<GoogleMap />
7886
</div>
7987
</div>
8088
</section>
8189
);
8290
};
8391

84-
export default Contact;
92+
export default Contact;

‎src/components/Contact-section/ContactForm.jsx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import { useForm } from "react-hook-form";
2-
<link rel="stylesheet" href="Contact-section.css" />
3-
import Github from "../../assets/Social-Icons/Github.png";
4-
import Insta from "../../assets/Social-Icons/instagram.png";
5-
import Twitter from "../../assets/Social-Icons/Twitter.png";
2+
import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Importing the sound file
63

74
const ContactForm = () => {
85
const {
@@ -12,26 +9,30 @@ const ContactForm = () => {
129
reset,
1310
} = useForm();
1411

12+
const playSound = () => {
13+
const audio = new Audio(clickSound);
14+
audio.play(); // Play the sound
15+
};
16+
1517
const onSubmit = (data) => {
18+
playSound(); // Play sound on submit
1619
alert("Message sent successfully");
1720
console.log(data);
1821
reset(); // reset form fields after submission
1922
};
2023

2124
return (
2225
<>
23-
<section className="flex flex-col md:flex-row gap-y-10 my-20">
24-
{/* Left hand side of the form */}
25-
{/* Right hand side of the form */}
26-
<article className="flex flex-1 justify-center p-5 md:p-0 md:mr-24">
27-
<form onSubmit={handleSubmit(onSubmit)} className="gap-x-5 w-full">
28-
<div className="flex flex-col md:flex-row mb-6 justify-between">
26+
<section className="flex flex-col my-20 md:flex-row gap-y-10">
27+
<article className="flex justify-center flex-1 p-5 md:p-0 md:mr-24">
28+
<form onSubmit={handleSubmit(onSubmit)} className="w-full gap-x-5">
29+
<div className="flex flex-col justify-between mb-6 md:flex-row">
2930
<div className="flex flex-col md:w-6/12">
3031
<input
3132
{...register("firstName", {
3233
required: "First name is required",
3334
})}
34-
className="border-2 border-green rounded-lg text-green-dark h-16 mb-6 md:mb-0 placeholder-textBlack p-2"
35+
className="h-16 p-2 mb-6 border-2 rounded-lg border-green text-green-dark md:mb-0 placeholder-textBlack"
3536
placeholder="First name"
3637
style={{ marginRight: "5px" }}
3738
/>
@@ -44,15 +45,15 @@ const ContactForm = () => {
4445
{...register("lastName", {
4546
required: "Last name is required",
4647
})}
47-
className="border-2 border-green rounded-lg h-16 text-green-dark placeholder-textBlack p-2"
48+
className="h-16 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
4849
placeholder="Last name"
4950
/>
5051
<span className="pl-4 text-[#ff0000] text-sm">
5152
{errors.lastName && errors.lastName.message}
5253
</span>
5354
</div>
5455
</div>
55-
<div className="flex flex-col md:flex-row mb-6 justify-between">
56+
<div className="flex flex-col justify-between mb-6 md:flex-row">
5657
<div className="flex flex-col w-full">
5758
<input
5859
{...register("email", {
@@ -62,7 +63,7 @@ const ContactForm = () => {
6263
message: "Email is not valid",
6364
},
6465
})}
65-
className="border-2 border-green rounded-lg h-16 text-green-dark placeholder-textBlack p-2"
66+
className="h-16 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
6667
placeholder="Email"
6768
/>
6869
<span className="pl-4 text-[#ff0000] text-sm">
@@ -75,7 +76,7 @@ const ContactForm = () => {
7576
{...register("message", {
7677
required: "Message is required",
7778
})}
78-
className="border-2 border-green rounded-lg w-full h-40 text-green-dark placeholder-textBlack p-2"
79+
className="w-full h-40 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
7980
placeholder="Your message here"
8081
/>
8182
<span className="pl-4 text-[#ff0000] text-sm">

‎src/components/Header-section/Header.jsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
import "../Header-section/Header-section.css";
22
import { Link } from "react-router-dom";
33
import Navbar from "./Navbar";
4-
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
4+
import "react-responsive-carousel/lib/styles/carousel.min.css";
55
import { Carousel } from 'react-responsive-carousel';
66
import carImg1 from "../../assets/Images/red-house.png"
77
import carImg2 from "../../assets/Images/carousel2.png"
88
import carImg3 from "../../assets/Images/carousel3.png"
9+
import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav";
10+
911
const Header = () => {
12+
const playSound = () => {
13+
const audio = new Audio(clickSound);
14+
audio.play();
15+
};
16+
1017
return (
1118
<>
1219
<div className="header-section mb-[80px]">
1320
<Navbar />
1421

1522
<div id="home"></div>
16-
<Carousel autoPlay = {true} infiniteLoop = {true} showStatus = {false} showThumbs = {false} stopOnHover ={false} swipeable = {false} animationHandler="fade">
23+
<Carousel autoPlay={true} infiniteLoop={true} showStatus={false} showThumbs={false} stopOnHover={false} swipeable={false} animationHandler="fade">
1724
<div>
18-
<img src={carImg1} className="h-screen object-cover"/>
19-
25+
<img src={carImg1} className="h-screen object-cover" />
2026
</div>
2127
<div>
22-
<img src={carImg2} className="h-screen object-cover"/>
23-
28+
<img src={carImg2} className="h-screen object-cover" />
2429
</div>
2530
<div>
26-
<img src={carImg3} className="h-screen object-cover"/>
27-
31+
<img src={carImg3} className="h-screen object-cover" />
2832
</div>
2933
</Carousel>
3034
<div className="header-text top-[15%] sm:top-[23%] absolute">
@@ -37,11 +41,12 @@ const Header = () => {
3741
details, their payment history, and much more with ease.
3842
</p>
3943
<Link to="/register">
40-
<button className="btn getBtn">Get Started</button>
44+
<button className="btn getBtn" onClick={playSound}>Get Started</button>
4145
</Link>
4246
</div>
4347
</div>
4448
</>
4549
);
4650
};
51+
4752
export default Header;

0 commit comments

Comments
 (0)