CODEWITHSUNDEEP
javascripthtml
user2167761
user2167761

Reputation: 1

Text on one line

I really have very little programming experience, but, I'm willing to learn - I found code for a countdown clock, but the text is not arranged the way I want it. I'd like it to be:

         Only
       **1905**
Days Until June 1, 2018

and then have it all centered. It's centered, but the last part of the counter stacks itself. Here is the code I am using:

<center>
    <font color="Turquoise"size="5">
    <b>
    Only
    <font color="red"size="6">
    <SCRIPT LANGUAGE = "JavaScript">
        var now = new Date();
        // set this value to the countdown date.
        var then = new Date("June 1, 2018");
        var gap = then.getTime() - now.getTime();
        gap = Math.floor(gap / (1000 * 60 * 60 * 24));
        document.write(gap); 
    </SCRIPT>
    <font color="turquoise"size="5">
    Days Until 
    <font color="6600FF"size="5">
    <br>June 1, 2018 </b>
</center>
</font>

Upvotes: 0

Views: 68

Answers (2)

eburgos
eburgos

Reputation: 2053

Try this:

<div style='text-align: center'>
    <div>Only</div>
    <div><span>**</span><span id='countdown'></span><span>**</span></div>
    <div><span>Days Until </span><span id='targetDate'></span></div>
</div>
<script type='text/javascript'>
    var countNode, targetDateNode, now, then, gap, monthNames;
monthNames = [];
monthNames.push('January');
monthNames.push('February');
monthNames.push('March');
monthNames.push('April');
monthNames.push('May');
monthNames.push('June');
monthNames.push('July');
monthNames.push('August');
monthNames.push('September');
monthNames.push('October');
monthNames.push('November');
monthNames.push('December');
countNode = document.getElementById('countdown');
targetDateNode = document.getElementById('targetDate');

now = new Date();
// set this value to the countdown date.
then = new Date('June 1, 2018');
gap = then.getTime() - now.getTime();
gap = Math.floor(gap / (1000 * 60 * 60 * 24));
countNode.innerHTML = gap;
targetDateNode.innerHTML = monthNames[then.getMonth()] + ' ' + then.getDay() + ', ' + then.getFullYear();
</script>

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71384

That code you found it is obviously ancient, but the problem is the <br> tag at the line:

<br>June 1, 2018 </b>

This is an HTML line break. Remove it and the line will not break.

Upvotes: 2

Related Questions