scott.schaffer scott.schaffer - 13 days ago 9
CSS Question

styling a JS variable

This is some code I found, and it works fine. My question is how to style the one part of it that says 'Christmas!'. Say I want to make it red or green, while the rest of the countdown has the style from the css 'input' below.



//change the text below to reflect your own,
var before = "Christmas!"
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")

function countdown(yr, m, d) {
theyear = yr;
themonth = m;
theday = d
var today = new Date()
var todayy = today.getYear()
if (todayy < 1000)
todayy += 1900
var todaym = today.getMonth()
var todayd = today.getDate()
var todayh = today.getHours()
var todaymin = today.getMinutes()
var todaysec = today.getSeconds()
var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
futurestring = montharray[m - 1] + " " + d + ", " + yr
dd = Date.parse(futurestring) - Date.parse(todaystring)
dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
document.forms.count.count2.value = current
return
} else
document.forms.count.count2.value = "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
setTimeout("countdown(theyear,themonth,theday)", 1000)
}
//enter the count down date using the format year/month/day
countdown(2016, 12, 25)

input {
position: absolute;
top: 135px;
width: 1000px;
text-align: center;
color: #21247A;
border: none;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
background-color: rgba(255, 255, 255, 0.0);
}

<div class="countdown">
<form name="count">
<input type="text" size="69" name="count2">
</form>
</div>




Answer

Unless otherwise required, I would move it out of an <input> and into a <div>. Which is what I've done, along with wrapping Christmas! in a span and styling.

//change the text below to reflect your own,
var before = '<span class="day">Christmas!</span>'
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
var container = document.querySelector('.countdown');

function countdown(yr, m, d) {
    theyear = yr;
    themonth = m;
    theday = d
    var today = new Date()
    var todayy = today.getYear()
    if (todayy < 1000)
      todayy += 1900
    var todaym = today.getMonth()
    var todayd = today.getDate()
    var todayh = today.getHours()
    var todaymin = today.getMinutes()
    var todaysec = today.getSeconds()
    var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
    futurestring = montharray[m - 1] + " " + d + ", " + yr
    dd = Date.parse(futurestring) - Date.parse(todaystring)
    dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
    dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
    dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
    dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
    if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
      container.innerHTML = current
      return
    } else
      container.innerHTML = "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
    setTimeout( function () {
      countdown( theyear, themonth, theday );
    }, 1000)
  }
  //enter the count down date using the format year/month/day
countdown(2016, 12, 25)
.countdown {
  position: absolute;
  top: 135px;
  width: 1000px;
  text-align: center;
  color: #21247A;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.0);
}
.countdown .day {
  color: green;
}
<div class="countdown"></div>