ClockLayout

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="30"/>
  <title>QLOCK TWO</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="container">
  <h1></h1>
  <p> 
	<em id="lae">E</em> <em id="ese">S</em><em id="son"> O N </em> E <em id="lala">L A</em><em id="las"> S</em> <em id="una"> U N A</em> </br>
 <em id="dos">D O S</em> I <em id="tres">T R E S</em> O A M </br>
<em id="cuatro"> C U A T R O</em> <em id="cinco">C I N C O </em></br>
 <em id="seis">S E I S</em> A <em id="siete">S I E T E</em> N </br>
 <em id="ocho">O C H O</em> <em id="nueve">N U E V E</em> P M </br>
 L A <em id="diez">D I E Z</em> S <em id = "once">O N C E</em> </br>
 <em id="doce">D O C E </em>L <em id="y">Y</em> <em id="menos">M E N O S </em></br>
 O <em id="veinte">V E I N T E</em> <em id="diezhr">D I E Z </em></br>
<em id="veinti"> V E I N T I</em> <em id="cincohr">C I N C O </em></br>
 <EM id="media">M E D I A </EM><em id="cuarto">C U A R T O <em></br>

<script src="script.js"></script>

</body>
</html>

@charset "UTF-8";

body {
  font-family: monaco;
  font-size: 1.4em;
  color: #331111;
  background: #beeffe;
}
em {
	color: #331111; 
	font-style: normal; 
}
window.addEventListener('load', function() {
document.querySelector('h1').innerHTML = 'QLOCK TWO';
}, false);

var colorActive = "#cc0011"

var d = new Date();
var hr = d.getHours();
var mn = d.getMinutes();


//Define if past or before half hour
if (mn<=30&&mn>1)
{
document.getElementById("y").style.color = colorActive;
}
else if (mn>30)
{
document.getElementById("menos").style.color = colorActive;
hr=hr+1; //For the "hora menos..."
}

//Change later deppending on "una"
if (hr=1)
{
document.getElementById("lae").style.color = colorActive; 
document.getElementById("ese").style.color = colorActive; 
document.getElementById("lala").style.color = colorActive; 
}
else
{
document.getElementById("ese").style.color = colorActive; 
document.getElementById("son").style.color = colorActive; 
document.getElementById("lala").style.color = colorActive; 
document.getElementById("las").style.color = colorActive; 
}

//Get hour
switch(hr) {
  case 0: 	document.getElementById("doce").style.color = colorActive;
    break;
  case 1:
document.getElementById("una").style.color = colorActive;
    break;
  case 2:
document.getElementById("dos").style.color = colorActive;
    break;
  case 3:
    document.getElementById("tres").style.color = colorActive;
    break;
  case 4:
    document.getElementById("cuatro").style.color = colorActive;
    break;
  case 5:
    document.getElementById("cinco").style.color = colorActive;
    break;
  case 6:
    document.getElementById("seis").style.color = colorActive;
    break;
  case 7:
    document.getElementById("siete").style.color = colorActive;
    break;
  case 8:
    document.getElementById("ocho").style.color = colorActive;
    break;
  case 9:
    document.getElementById("nueve").style.color = colorActive;
    break;
  case 10:
    document.getElementById("diez").style.color = colorActive;
    break;
  case 11:
    document.getElementById("once").style.color = colorActive;
    break;
  case 12:
    document.getElementById("doce").style.color = colorActive;
    break;
  case 13:
    document.getElementById("una").style.color = colorActive;
    break;
  case 14:
    document.getElementById("dos").style.color = colorActive;
    break;
  case 15:
    document.getElementById("tres").style.color = colorActive;
    break;
  case 16:
    document.getElementById("cuatro").style.color = colorActive;
    break;
  case 17:
    document.getElementById("cinco").style.color = colorActive;
    break;
  case 18:
    document.getElementById("seis").style.color = colorActive;
    break;
  case 19:
    document.getElementById("siete").style.color = colorActive;
    break;
  case 20:
    document.getElementById("ocho").style.color = colorActive;
    break;
  case 21:
    document.getElementById("nueve").style.color = colorActive;
    break;
  case 22:
    document.getElementById("diez").style.color = colorActive;
    break;
  case 23:
document.getElementById("once").style.color = colorActive;
    break;
  case 24:
    document.getElementById("doce").style.color = colorActive;
    break;
  default:
    ;
}
// Set minutes 
if(mn>0 && mn<2) 
 { mntext = ' EN PUNTO';}
 else if(mn>=54 && mn<59 || mn>=2 && mn<9) 
{ document.getElementById("cincohr").style.color = colorActive;}
 else if(mn>=49 && mn<54 || mn>=9 && mn<14) 
{ document.getElementById("diezhr").style.color = colorActive;}
 else if(mn>=44 && mn<49 || mn>=14 && mn<19) 
{ document.getElementById("cuarto").style.color = colorActive;}
 else if(mn>=39 && mn<44 || mn>=19 && mn<24) 
{ document.getElementById("veinte").style.color = colorActive;}
 else if((mn>31 && mn<39)||(mn>23 && mn<29)) 
{ document.getElementById("veinti").style.color = colorActive;
document.getElementById("cincohr").style.color = colorActive;}
 else if(mn>=29 && mn<31 ) 
{ document.getElementById("media").style.color = colorActive;}

// Other section
Full page Open in App

5 months ago

The time with words (spanish version)

Pages


comments powered by Disqus