Click button to add time to my countdown with javascript , help

p {
  text-align: center;
  font-size: 60px;
}
</style>
</head>
<body>

<p id="demo"></p>
<br>
<br>
<button>yup</button>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2018 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    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);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + " day " + hours + ": "
    + minutes + ": " + seconds;
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>

Please remember to properly format your code for posts. All code must be preceded by a line of three backticks (key below the ESC ) and followed by a line of three backticks. Otherwise it will not be readable.

Can you describe what should happen when you click the button? All you said was add time. You want to add a second, a minute, an hour, a day, a week, a month, a year? Are you going to create a text field where anything can be typed or have a dropdown menu with set amounts to be added?

The more detail you can give, the more responses you will receive. Also, it is a much better learning experience for you if you attempt to create the code to accomplish the task. That way, we can see the direction you are heading.

i want to be able to add hours and days,a “7 days” button and “12 hours” button.
imagine an offer on a website, and there is deadline for that offer which is ticking " counting down to the deadline", but I wanna give my users ability to add more time if they like the offer(“12 hours” button) and even more time if they share that offer on social media(“7 days” button) + couple hours on every minute a user spent opening that offer and looking at it.
so we have to results, more like and shares, more time add to the countdown and more time it stays on my website if no more visitors interact with the offer it will be self-deleted after the deadline is up !

OK, here you go. I modified your html and css to make it more presentable.

<!-- <!DOCTYPE html> -->
<html>
<head>
  <style>
    span {
      text-align: center;
      font-size: 60px;
    }
    #buttons {
      margin-top: 20px;
      position: relative;
    }
    button {
      margin: 0 5px;
    }
    #main {
      width: 100%;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="main">
    <span id="count-down"></span>
    <div id="buttons">
      <button id="12hours" data-days="0.5">Add 12 Hours</button>
      <button id="7days" data-days="7">Add 7 Days</button>
    </div>
  </div>
  <script>
    function Timer(endDate) {
      function updateTimer() {
        // Get todays date and time
        var now = new Date().getTime();
        // Find the distance between now an the count down date
        var diff = countDownDate.getTime() - now;
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours = Math.floor(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
        var minutes = Math.floor(diff % (1000 * 60 * 60) / (1000 * 60));
        var seconds = Math.floor(diff % (1000 * 60) / 1000);
        // If the count down is over, write some text
        var dayText = days === 1 ? "day" : "days";
        var dateString = days + " " + dayText + " " + leadingZero(hours) + 
            ":" + leadingZero(minutes) + ":" + leadingZero(seconds); 
        if (diff < 0) {
          clearInterval(x);
          document.getElementById("count-down").innerHTML = "EXPIRED";
          return;
        }
        document.getElementById("count-down").innerHTML = dateString;   
      }
    
      var countDownDate = new Date(endDate);
    
      this.addDays = function(numDays) {
        countDownDate.setTime(
          countDownDate.getTime() + numDays * 24 * 60 * 60 * 1000
        );
        updateTimer();
      };
 				   
      updateTimer();
      var x = setInterval(function() {
        updateTimer();
      }, 1000);
    }

    function leadingZero(n) {
      return n < 10 ? "0" + n : n;
    }
    
    // adds numbers of days (0.5 or 7) depending on which button pressed
    function addMoreDays() {
      myTimer.addDays(this.getAttribute("data-days"));
    }
    
    // Only change the endDate variable below
    var endDate = "August 14, 2017 01:56:00"; // original end date
    // Only change the endDate variable above
    
    var myTimer = new Timer(endDate);
    document.getElementById("12hours").addEventListener("click", addMoreDays);
    document.getElementById("7days").addEventListener("click", addMoreDays);
  </script>
</body>
</html>