How to Make Countdown and Input Form Using JavaScript and PHP

In this tutorial i will show you How to Make Countdown and Input Form Using JavaScript and PHP. You can see demo on click below button and also available source code.

Demo Download

Step to Make Countdown and Input Form Using JavaScript and PHP

To make countdown and input form using JavaScript and PHP, we need to follow below all steps

  1. Write an HTML
  2. Write CSS
  3. Javascripts
  4. Create Database

1. Write an HTML Markup

First we need to create an index.php file and paste the following HTML markup in it.

	<div class="container">
		<form action="" method="post" class="countdown">
			<h2>COSTUMIZE TIME</h2>
			<h4><?php echo $restdatee; ?></h4>

			<div class="txt">
				<input type="text" id="num1" name="num1" value="<?php echo $count_day; ?>">
				<span data-placeholder="Day (1-31)"></span>
			</div>

			<div class="txt">
				<input type="text" id="num2" name="num2" value="<?php echo $count_month; ?>">
				<span data-placeholder="Month (1-12)"></span>
			</div>

			<div class="txt">
				<input type="text" id="num3" name="num3" value="<?php echo $count_year; ?>">
				<span data-placeholder="Year (2019 - ~)"></span>
			</div>

			<input type="submit" class="resetbtn" name="submit" value="Set Time">

<?php
if(isset($_POST['submit'])){
	$num1 = $_POST['num1'];
	$num2 = $_POST['num2'];
	$num3 = $_POST['num3'];
      
$query = "UPDATE `027_countdown` SET `count_day` = '$num1', `count_month` = '$num2', `count_year` = '$num3' WHERE `id` = '1'";
$result = mysqli_query($conn, $query);
	if($result==true){
		echo "<h3>Updated.....! & Refresh Page</h3>";
	}else{
		echo "<h3>Updation Failed</h3>";
}
}
?>

			<div class="time">
				<span id="days"></span>
				<span id="hours"></span>
				<span id="minutes"></span>
				<span id="seconds"></span>
			</div>
			<div class="content">
				<span>Days</span>
				<span>Hours</span>
				<span>Minutes</span>
				<span>Seconds</span>
			</div>
		</form>
	</div>

In above code we use to multiple div and input form for reset date according to your event.

2. Write CSS

Now we need to Style for Reset form, paste the following styles in CSS either in head section or you can also include external style sheet.

*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	box-sizing: border-box;
}
.container{
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(180deg,#bad1f5,#ffcec2);
}
.countdown{
	width: 360px;
	background: #f1f1f1;
	height: 680px;
	padding: 80px 40px;
	border-radius: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.countdown h2{
	text-align: center;
	margin-bottom: 10px;
}
.countdown h4{
	text-align: center;
	margin-bottom: 20px;
}
.txt{
	border-bottom: 2px solid #adadad;
	position: relative;
	margin: 30px 0;
}
.txt input{
	font-size: 15px;
	color: #333;
	border: none;
	width: 100%;
	outline: none;
	background: none;
	padding: 0 5px;
	height: 40px;
}
.txt span::before{
	content: attr(data-placeholder);
	position: absolute;
	top: -10px;
	left: 5px;
	color: #adadad;
	z-index: -1;
	transition: .5s;
}
.txt span::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -2px;
	left: 0;
	background: linear-gradient(180deg,#bad1f5,#ffcec2);
	transition: .5s;
}
.resetbtn{
	display: block;
	width: 100%;
	height: 50px;
	border: none;
	border-radius: 20px;
	background: linear-gradient(120deg,#bad1f5,#ffcec2,#bad1f5);
	background-size: 200%;
	color: #fff;
	outline: none;
	cursor: pointer;
	transition: .5s;
}
.resetbtn:hover{
	background-position: right;
}

.time{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 40px;
	padding: 0;
	display: flex;
	cursor: pointer;
}
.time span{
	list-style: none;
	width: 80px;
	height: 80px;
	background: green;
	font-size: 25px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(120deg,#bad1f5,#ffcec2,#bad1f5);
	background-size: 200%;
	transition: .5s;
}
.time span:hover{
	background-position: right;
}
.content{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 120px;
	padding: 0;
	display: flex;
}
.content span{
	list-style: none;
	width: 80px;
	height: 20px;
	background: green;
	font-size: 15px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(120deg,#bad1f5,#ffcec2,#bad1f5);
}

As you see in above code i make style for reset form and display remaining time to event.

3. Write Javascripts

Now we need to javascripts for our both form, copy the following code and paste in HTML file in end of body section.

	<script type="text/javascript">
		var count1 = document.getElementById('num1').value;
		var count2 = document.getElementById('num2').value;
		var count3 = document.getElementById('num3').value;
		var space = " ";
		var comma = ",";
		var countt = count2 + space + count1 + comma + count3;
		var	count = new Date(countt).getTime();
		var x = setInterval(function() {
			var now = new Date().getTime();
			var d = count - now;

			var days = Math.floor(d/(1000*60*60*24));
			var hours = Math.floor((d%(1000*60*60*24))/(1000*60*60));
			var minutes = Math.floor((d%(1000*60*60))/(1000*60));
			var seconds = Math.floor((d%(1000*60))/1000);

			document.getElementById('days').innerHTML = days;
			document.getElementById('hours').innerHTML = hours;
			document.getElementById('minutes').innerHTML = minutes;
			document.getElementById('seconds').innerHTML = seconds;

			if (d <= 0) {
				clearInterval(x);
			}

		},1000);
	</script>

Above JavaScript code for display remaining time.

4. Write Database Connection

Now we need to database connection for connect to database server, copy the following code and paste in db.php file.

<?php
$servername="localhost";
$dbname="teswesmc_demo_teswesm";
$username="teswesmc_demo_teswesm";
$password="password";

$conn = mysqli_connect($servername,$username,$password,$dbname);

if($conn)
{
	echo "";
}
else
{
	die ("Connection failed because ".mysqli_connect_error());
}

?>

In db.php file, write database name and password as per your database connection.

Conclusion

Today we learnt how to make countdown and input form using JavaScript and PHP , you can add multiple form on your website.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *