Skip to content

Issue #4 : Countdown Timer for 25th Jan EOD added #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
viraj200524 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Issue #4 : Countdown Timer for 25th Jan EOD added #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,28 @@ import VerticalTimeline from './Components/Timeline';
import Carousel from './Components/Carousel';
import Hero from './Components/Hero';
import Footer from "./Components/Footer"
import CountdownTimer from './Components/CountDownTimer';


const Homepage = () => {
return (
<div>

<Hero />
{/* Text Section between Hero and Carousel */}
<CountdownTimer />
{/* Text Section between Hero and Carousel */}
<div className="text-center py-8 px-4 md:px-12 bg-opacity-10 text-white">

<h2 className="text-4xl font-semibold mb-4">Welcome to Project X</h2>
<p className="text-xl">
We are an exclusive club at Veermata Jijabai Technological Institute, Mumbai. We provide a collaborative environment for students to learn, grow, and build projects together under mentorship. Explore our achievements, past projects, and upcoming events!
</p>
</div>

{/* Countdown Timer */}


{/* Carousel Section */}
<div>
<Carousel />
</div>
Expand All @@ -38,7 +46,6 @@ const Homepage = () => {




function App() {
return (
<div className='bgC'>
Expand Down
162 changes: 162 additions & 0 deletions src/Components/CountDownTimer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
import React, { useState, useEffect } from 'react';

const CountdownTimer = () => {
const targetDate = new Date('2025-01-25T23:59:59').getTime();
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

function calculateTimeLeft() {
const now = new Date().getTime();
const difference = targetDate - now;

if (difference > 0) {
return {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((difference % (1000 * 60)) / 1000),
};
}

return { days: 0, hours: 0, minutes: 0, seconds: 0 };
}

useEffect(() => {
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);

return () => clearInterval(timer);
}, []);

const calculateProgress = (value, max) => {
return (value / max) * 100;
};

return (
<div className="flex items-center justify-center bg-transparent font-sans text-white">
<div className="text-center">
<h3 className="text-3xl font-bold mb-4 pb-2">Event Ends In</h3> {/* Larger text */}
<div className="flex justify-center space-x-6"> {/* Increased spacing */}
{/* Days */}
<div className="flex flex-col items-center">
<div className="relative w-24 h-24"> {/* Larger circle */}
<svg className="w-full h-full" viewBox="0 0 36 36">
<path
className="text-gray-800 stroke-current" // Dark background
strokeWidth="4" // Increased thickness
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
className="text-blue-400 stroke-current" // Progress color
strokeWidth="4" // Increased thickness
strokeDasharray={`${calculateProgress(timeLeft.days, 365)}, 100`}
strokeLinecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<span className="absolute inset-0 flex items-center justify-center text-2xl font-bold"> {/* Larger text */}
{timeLeft.days}
</span>
</div>
<span className="text-lg mt-2 text-gray-300">Days</span> {/* Larger label */}
</div>
{/* Hours */}
<div className="flex flex-col items-center">
<div className="relative w-24 h-24"> {/* Larger circle */}
<svg className="w-full h-full" viewBox="0 0 36 36">
<path
className="text-gray-800 stroke-current" // Dark background
strokeWidth="4" // Increased thickness
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
className="text-blue-500 stroke-current" // Progress color
strokeWidth="4" // Increased thickness
strokeDasharray={`${calculateProgress(timeLeft.hours, 24)}, 100`}
strokeLinecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<span className="absolute inset-0 flex items-center justify-center text-2xl font-bold"> {/* Larger text */}
{timeLeft.hours}
</span>
</div>
<span className="text-lg mt-2 text-gray-300">Hours</span> {/* Larger label */}
</div>
{/* Minutes */}
<div className="flex flex-col items-center">
<div className="relative w-24 h-24"> {/* Larger circle */}
<svg className="w-full h-full" viewBox="0 0 36 36">
<path
className="text-gray-800 stroke-current" // Dark background
strokeWidth="4" // Increased thickness
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
className="text-blue-600 stroke-current" // Progress color
strokeWidth="4" // Increased thickness
strokeDasharray={`${calculateProgress(timeLeft.minutes, 60)}, 100`}
strokeLinecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<span className="absolute inset-0 flex items-center justify-center text-2xl font-bold"> {/* Larger text */}
{timeLeft.minutes}
</span>
</div>
<span className="text-lg mt-2 text-gray-300">Minutes</span> {/* Larger label */}
</div>
{/* Seconds */}
<div className="flex flex-col items-center">
<div className="relative w-24 h-24"> {/* Larger circle */}
<svg className="w-full h-full" viewBox="0 0 36 36">
<path
className="text-gray-800 stroke-current" // Dark background
strokeWidth="4" // Increased thickness
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
className="text-blue-700 stroke-current" // Progress color
strokeWidth="4" // Increased thickness
strokeDasharray={`${calculateProgress(timeLeft.seconds, 60)}, 100`}
strokeLinecap="round"
fill="none"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<span className="absolute inset-0 flex items-center justify-center text-2xl font-bold"> {/* Larger text */}
{timeLeft.seconds}
</span>
</div>
<span className="text-lg mt-2 text-gray-300">Seconds</span> {/* Larger label */}
</div>
</div>
</div>
</div>
);
};

export default CountdownTimer;