├── .github
    └── CODEOWNERS
├── LICENSE
├── README.md
├── index.js
├── package-lock.json
├── package.json
├── src
    ├── countdown.js
    └── countdown.min.js
└── test
    ├── countdown.css
    ├── countdown.js
    └── index.html


/.github/CODEOWNERS:
--------------------------------------------------------------------------------
 1 | # This is a comment.
 2 | # Each line is a file pattern followed by one or more owners.
 3 | 
 4 | # These owners will be the default owners for everything in
 5 | # the repo. Unless a later match takes precedence,
 6 | # @global-owner1 and @global-owner2 will be requested for
 7 | # review when someone opens a pull request.
 8 |  @iqbal-web @iqbal-xs
 9 | 
10 | # Reviwer by specific folder
11 | /test 							@iqbal-web


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Iqbal Hossain
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # countdown-js
 2 | Countdown.js is a simple JavaScript library for creating countdown timers on webpages. It allows you to easily display a countdown to a specific target date and time.
 3 | 
 4 | ## Getting Started
 5 | 
 6 | ### Installation
 7 | 
 8 | You can include the Countdown.js library in your project by downloading the [`countdown.js`](countdown.js) file and including it in your HTML file:
 9 | 
10 | ```html
11 | <script src="path/to/countdown.js"></script>
12 | ```
13 | or
14 | 
15 | ```html
16 | <script src="path/to/countdown.min.js"></script>
17 | ```
18 | 
19 | 
20 | ### Using npm :
21 | 
22 | To install using npm:
23 | 
24 | ```html
25 | npm install coundowntimer-js
26 | ```
27 | npmjs : https://www.npmjs.com/package/coundowntimer-js
28 | 
29 | 
30 | ### Usage
31 | To use Countdown.js, follow these steps:
32 | 
33 | Include the Countdown.js library in your HTML file as shown above.
34 | Create an HTML element where you want the countdown to be displayed:
35 | 
36 | ```html
37 | <div id="countdown"></div>
38 | ```
39 | 
40 | Initialize the countdown by calling the Countdown.init() function with the target date and the ID of the HTML element:
41 | 
42 | ```html
43 | <script>
44 |   Countdown.init('2023-12-31', 'countdown');
45 | </script>
46 | ```
47 | 
48 | ### Frontend
49 | The frontend will be shown like this. You can modify it using css
50 | 
51 | ```html
52 | 51d 8h 37m 25s
53 | ```
54 | 
55 | ### Customization
56 | Countdown.js provides a basic countdown display format (days, hours, minutes, and seconds). You can customize the library to suit your needs by modifying the code.
57 | 
58 | ### Contributing
59 | Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or create a pull request.
60 | 
61 | ### License
62 | This project is licensed under the MIT License - see the LICENSE file for details.
63 | 
64 | 
65 | 
66 | Created by @iqbal-web.
67 | 
68 | Remember to include the actual `countdown.js` file and a `LICENSE` file (such as `LICENSE.txt`) in your repository so that users can access the code and understand the terms of use.
69 | 
70 | 
71 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./src/countdown.js');


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "coundowntimer-js",
 3 |   "version": "2.0.0",
 4 |   "lockfileVersion": 3,
 5 |   "requires": true,
 6 |   "author": "Iqbal Hossain",
 7 |   "description": "A simple countdown library for webpages.",
 8 |   "homepage": "https://github.com/iqbal-web/countdown-js",
 9 |   "keywords": [
10 |     "countdown",
11 |     "timer",
12 |     "library"
13 |   ],
14 |   "license": "MIT",
15 |   "main": "src/countdown.js",
16 |   "packages": {
17 |     "": {
18 |       "name": "coundowntimer-js",
19 |       "version": "2.0.0",
20 |       "license": "ISC"
21 |     }
22 |   },
23 |   "bugs": {
24 |     "url": "https://github.com/iqbal-web/countdown-js/issues"
25 |   },
26 |   "repository": {
27 |     "type": "git",
28 |     "url": "https://github.com/iqbal-web/countdown-js.git"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "coundowntimer-js",
 3 |   "version": "2.0.0",
 4 |   "description": "countdown",
 5 |   "main": "index.js",
 6 |   "directories": {
 7 |     "test": "test"
 8 |   },
 9 |   "scripts": {
10 |     "test": "test"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "github.com/iqbal-web/countdown-js"
15 |   },
16 |   "keywords": [
17 |     "countdown",
18 |     "timer",
19 |     "clock",
20 |     "library"
21 |   ],
22 |   "author": "iqbal-web",
23 |   "license": "ISC"
24 | }
25 | 


--------------------------------------------------------------------------------
/src/countdown.js:
--------------------------------------------------------------------------------
 1 | var Countdown = (function() {
 2 | 	var targetDate, targetElement;
 3 |   
 4 | 	function getTimeRemaining(endTime) {
 5 | 		var totalSeconds = Math.max(Math.floor((endTime - Date.now()) / 1000), 0),
 6 | 			days = Math.floor(totalSeconds / (60 * 60 * 24)),
 7 | 			hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)),
 8 | 			minutes = Math.floor((totalSeconds % (60 * 60)) / 60),
 9 | 			seconds = totalSeconds % 60;
10 | 		return {
11 | 			days: days,
12 | 			hours: hours,
13 | 			minutes: minutes,
14 | 			seconds: seconds
15 | 		};
16 | 	}
17 |   
18 | 	function updateCountdown() {
19 | 		var time = getTimeRemaining(targetDate),
20 | 			countdownWrap = targetElement.querySelector('.countdown-wrap');
21 | 
22 | 		if (!countdownWrap) {
23 | 			countdownWrap = document.createElement('div');
24 | 			countdownWrap.className = 'countdown-wrap';
25 | 			targetElement.appendChild(countdownWrap);
26 | 		}
27 | 	
28 | 		countdownWrap.innerHTML = `
29 | 			<div class="days">${time.days}d</div>
30 | 			<div class="hours">${time.hours}h</div>
31 | 			<div class="minutes">${time.minutes}m</div>
32 | 			<div class="seconds">${time.seconds}s</div>
33 | 		`;
34 | 	}
35 | 
36 | 	function init(targetDateString, targetElementId) {
37 | 		targetDate = new Date(targetDateString).getTime();
38 | 		targetElement = document.getElementById(targetElementId);
39 | 		if (!targetElement) {
40 | 		console.error("Target element not found.");
41 | 		return;
42 | 		}
43 | 		updateCountdown();
44 | 		setInterval(updateCountdown, 1000);
45 | 	}
46 | 
47 | 	return {
48 | 		init: init
49 | 	};
50 | })();


--------------------------------------------------------------------------------
/src/countdown.min.js:
--------------------------------------------------------------------------------
1 | var Countdown=function(){var t,n;function e(){var e,o,s=(e=t,o=Math.max(Math.floor((e-Date.now())/1e3),0),{days:Math.floor(o/86400),hours:Math.floor(o%86400/3600),minutes:Math.floor(o%3600/60),seconds:o%60}),a=n.querySelector(".countdown-wrap");a||((a=document.createElement("div")).className="countdown-wrap",n.appendChild(a)),a.innerHTML=`\n\t\t\t<div class="days">${s.days}d</div>\n\t\t\t<div class="hours">${s.hours}h</div>\n\t\t\t<div class="minutes">${s.minutes}m</div>\n\t\t\t<div class="seconds">${s.seconds}s</div>\n\t\t`}return{init:function(o,s){t=new Date(o).getTime(),(n=document.getElementById(s))?(e(),setInterval(e,1e3)):console.error("Target element not found.")}}}();


--------------------------------------------------------------------------------
/test/countdown.css:
--------------------------------------------------------------------------------
 1 |     /* Style the countdown wrapper */
 2 | 	.countdown-wrap {
 3 | 		display: flex;
 4 | 		justify-content: center;
 5 | 		align-items: center;
 6 | 		font-family: Arial, sans-serif;
 7 | 		font-size: 24px;
 8 | 		color: #333;
 9 | 		background-color: #f1f1f1;
10 | 		border-radius: 5px;
11 | 		padding: 10px;
12 | 		animation-duration: 10s; /* Duration of the rotation animation */
13 | 		animation-timing-function: linear; /* Linear timing */
14 | 		animation-iteration-count: infinite; /* Infinite loop */
15 | 	  }
16 | 	
17 |   
18 | 	  /* Style individual countdown elements (days, hours, minutes, seconds) */
19 | 	  .countdown-wrap div {
20 | 		margin: 0 10px;
21 | 		padding: 5px;
22 | 		background-color: #333;
23 | 		color: #fff;
24 | 		border-radius: 5px;
25 | 	  }
26 | 
27 | 
28 | 	    /* Add transition for countdown elements */
29 |   .countdown-wrap div {
30 |     transition: background-color 0.3s, transform 0.3s;
31 |   }
32 | 
33 |   /* Hover effect for countdown elements */
34 |   .countdown-wrap div:hover {
35 |     background-color: #555;
36 |     transform: scale(1.1);
37 |   }
38 | 


--------------------------------------------------------------------------------
/test/countdown.js:
--------------------------------------------------------------------------------
 1 | var Countdown = (function() {
 2 | 	var targetDate, targetElement;
 3 |   
 4 | 	function getTimeRemaining(endTime) {
 5 | 		var totalSeconds = Math.max(Math.floor((endTime - Date.now()) / 1000), 0),
 6 | 			days = Math.floor(totalSeconds / (60 * 60 * 24)),
 7 | 			hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)),
 8 | 			minutes = Math.floor((totalSeconds % (60 * 60)) / 60),
 9 | 			seconds = totalSeconds % 60;
10 | 		return {
11 | 			days: days,
12 | 			hours: hours,
13 | 			minutes: minutes,
14 | 			seconds: seconds
15 | 		};
16 | 	}
17 |   
18 | 	function updateCountdown() {
19 | 		var time = getTimeRemaining(targetDate),
20 | 			countdownWrap = targetElement.querySelector('.countdown-wrap');
21 | 
22 | 		if (!countdownWrap) {
23 | 			countdownWrap = document.createElement('div');
24 | 			countdownWrap.className = 'countdown-wrap';
25 | 			targetElement.appendChild(countdownWrap);
26 | 		}
27 | 	
28 | 		countdownWrap.innerHTML = `
29 | 			<div class="days">${time.days}d</div>
30 | 			<div class="hours">${time.hours}h</div>
31 | 			<div class="minutes">${time.minutes}m</div>
32 | 			<div class="seconds">${time.seconds}s</div>
33 | 		`;
34 | 	}
35 | 
36 | 	function init(targetDateString, targetElementId) {
37 | 		targetDate = new Date(targetDateString).getTime();
38 | 		targetElement = document.getElementById(targetElementId);
39 | 		if (!targetElement) {
40 | 		console.error("Target element not found.");
41 | 		return;
42 | 		}
43 | 		updateCountdown();
44 | 		setInterval(updateCountdown, 1000);
45 | 	}
46 | 
47 | 	return {
48 | 		init: init
49 | 	};
50 | })();


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Countdown Library</title>
 7 |   <link rel="stylesheet" href="countdown.css">
 8 | </head>
 9 | <body>
10 | 
11 |   <div id="countdown">
12 |   </div>
13 | 
14 | 
15 | 
16 |   <script src="countdown.js"></script>
17 | 
18 |   <script>
19 |     // Initialize the countdown with a target date and target element ID
20 |     Countdown.init('2028-10-10', 'countdown');
21 |   </script>
22 | 
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------