Skip to content

Commit

Permalink
added diwali wisher
Browse files Browse the repository at this point in the history
  • Loading branch information
ankitjhagithub21 committed Nov 11, 2023
1 parent 1f656bc commit 06178a8
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 12 deletions.
33 changes: 21 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,30 @@
<div class="container text-center">
<audio src="music.mp3" id="audio"></audio>

<div id="home">
<img src="diya.gif" alt="diya">
<h1 class="display-5 mt-2">Wishing You Sparking festival of lights, Happy Diwali !!</h1>
<button class="btn btn-dark mt-3" onclick="playAudio()">Click Me</button>
<div class="d-flex gap-2 align-items-center justify-content-center mt-4">
<button class="btn btn-dark" onclick="playAudio()">Click Me</button>
<button class="btn btn-dark" onclick="displayWisher()">Diwali Wisher</button>
</div>
</div>


<div id="wish-box">
<h1>Diwali Wish Generator</h1>
<div id="wish-container">
<textarea id="random-wish" rows="5" class="form-control mt-3" placeholder="Click the button to generate a random Diwali wish." disabled ></textarea>
</div>
<div class="mt-4">
<button id="generate-wish" class="btn btn-light">Generate Wish</button>
<button id="copy-wish" class="btn btn-light">Copy Wish</button>
<button class="btn btn-light" onclick="window.location.reload()">Home</button>
</div>
</div>
</div>
<script>
var audio = document.getElementById('audio')
function playAudio() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
}
</script>

<script src="script.js"></script>
</body>

</html>
46 changes: 46 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@

var audio = document.getElementById('audio')
function playAudio() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
}

const diwaliWishes = [
"Wishing you a Diwali full of joy and prosperity!",
"May the Festival of Lights brighten your life with happiness and success.",
"May this Diwali bring good health, wealth, and happiness to you and your family.",
"Wishing you a year filled with love, light, and laughter. Happy Diwali!",
"May the divine light of Diwali spread into your life peace, prosperity, happiness, and good health.",
"Wishing you a sparkling Diwali and a year filled with warmth and love.",
"May the beauty of Diwali fill your home with happiness, and may the coming year provide you with everything you've been searching for."
];

const wishContainer = document.getElementById("random-wish");
const generateButton = document.getElementById("generate-wish");
const copyButton = document.getElementById("copy-wish");
const wishBox = document.getElementById('wish-box')
const home = document.getElementById('home')

generateButton.addEventListener("click", () => {
const randomIndex = Math.floor(Math.random() * diwaliWishes.length);
const randomWish = diwaliWishes[randomIndex];
wishContainer.textContent = randomWish;

});

copyButton.addEventListener("click", () => {
var copyText = wishContainer.value;
navigator.clipboard.writeText(copyText).then(() => {
alert("Wish copied to clipboard!");
});

});

function displayWisher(){
home.style.display="none"
wishBox.style.display="block"
}
3 changes: 3 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,6 @@ h1,h2{
}


#wish-box{
display: none;
}

0 comments on commit 06178a8

Please sign in to comment.