Countdown/time widget

CREDIT!! PLEASE PUT THIS SOMEWHERE IN YOUR THEME!!! THANK YOU! :)


<!----



                 widget 1 countdown & time
                 1 2 0 4 p x . t u m b l r . c o m
                 © 2017. all rights reserved



--->



STEP 1)
place the following code somewhere after <style type="text/css"> but still before </style>

#time_box {
width:120px;
height:88px;
padding:20px;
padding-left:30px;
background:white;
border-radius:0px 0px 3px 3px;
border:1px solid #eeeeee;
left:40px;
box-shadow:0px 2px 3px rgba(0,0,0,.10);
top:30px;
text-align:left;
position:fixed;
}
#time_box b {
font-weight:600;
font-size:10px;
letter-spacing:0px;
text-transform:uppercase;
font-family: 'khula', sans-serif;
}
#clock{
text-align:left;
letter-spacing:1px;
font-size:9px;
font-weight:600;
color:#444444;
font-family: 'khula', sans-serif;
}
#clock_wrap {
display:inline-block;
position:fixed;
font-size:10px;
margin-top:10px;
margin-left:0px;
text-align:left;
}
#countdown {
font-family:'khula', sans-serif;
text-transform:uppercase;
letter-spacing:1px;
font-size:9px;
color:#444444;
font-weight:600;
}
#time_box span {
padding-top:5px;
font-size:7px;
}



STEP 2)
place the following code right beneath </style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- BELOW IS THE CURRENT TIME SCRIPT: here you don't have to edit anything! do not touch it! -->
<script>
function updateClock() {
            var currentTime = new Date();
            var currentHours = currentTime.getHours();
            var currentMinutes = currentTime.getMinutes();
            var currentSeconds = currentTime.getSeconds();

            var currentDate = currentTime.toDateString();
            var currentWeekday = currentDate.substring(0, 3);
            var currentMonth = currentDate.substring(4, 8);
            var currentYear = currentTime.getFullYear();
            var currentDay = currentTime.getDate();


            // Pad the minutes and seconds with leading zeros, if required
            currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
            currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

            // Choose either "AM" or "PM" as appropriate
            var timeOfDay = (currentHours < 12) ? "AM" : "PM";

            // Convert the hours component to 12-hour format if needed
            currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

            // Convert an hours component of "0" to "12"
            currentHours = (currentHours == 0) ? 12 : currentHours;







            // Compose the string for display
            var currentTimeString = + currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;


            $("#clock").html(currentTimeString);

        }

       $(document).ready(function($) {


                setInterval('updateClock()', 1000);
            });
</script>
<!-- BELOW IS THE COUNTDOWN SCRIPT: to edit the countdown, just put the date where your countdown will end. For example, here it's the 24th October 2017. Replace this date with your date! -->
<script>
var countDownDate = new Date("Oct 24, 2017 10:20:00").getTime();


var x = setInterval(function() {


  var now = new Date().getTime();


  var distance = countDownDate - now;


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


  document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";


  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "EXPIRED";
  }
}, 1000);
</script>





STEP 3)
place the following code right after </head><body>

<div id="time_box">
<div id="clock_wrap">
<b><span class="sf sf-chevron-right"></span> Current time:</b> <div id="clock"></div></br>
<b><span class="sf sf-chevron-right"></span> USA trip in:</b>
<div id="countdown">
</div>
</div></div>