<!DOCTYPE html>
<html lang="de" >
<head>
<meta charset="UTF-8">
<title>Klausuren Countdown Rechner</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="page-wrapper">
<h1>Wann ist deine Klausur?</h1>
<p id="msg"></p>
<input type="date" id="date" x-webkit-speech value="2018-02-09">
<button onclick="submitDate()">Bestätigen</button>
</div>
<h1>Wieviel Zeit du noch hast!</h1>
<div id="clockdiv">
<div><span class="days"></span><div class="smalltext">Tage</div></div>
<div><span class="hours"></span><div class="smalltext">Stunden</div></div>
<div><span class="minutes"></span><div class="smalltext">Minuten</div></div>
<div><span class="seconds"></span><div class="smalltext">Sekunden</div></div>
<h3 class="status-container">Status: <span class="status-output"></span></h3>
</div>
<div id="progress" class="circle">
<div class="fill">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>body{
text-align: center;
background: white;
font-family: sans-serif;
font-weight: 100;
}
h1{
color: #3B5998;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
h3{
color: #3B5998;
font-weight: 100;
font-size: 20px;
margin: 40px 0px 20px;
}
a{
display: inline-block;
color: #fff;
font-size: 20px;
padding: 20px;
background: white;
border-radius: 10px;
text-decoration: none;
}
a:hover{
background: #3B5998;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#page-wrapper {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: lightblue;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #3B5998;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
.status-output {
color: black;
}
.circle{
position: absolute;
left:50%;
transform:translateX(-50%);
width: 200px;
height: 200px;
background: #bdc3c7;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
#progress {
opacity: 0;
visibility: hidden;
transition: all 0.6s;
}
.fill{
position: absolute;
bottom: 0;
width: 100%;
height: 0%;
background: #3B5998;
transition: all 0.6s;
}
.score{
position: absolute;
width: 100%;
top: 50px;
text-align: center;
font-family: Arial, sans serif;
color: #fff;
font-size: 40pt;
line-height: 0;
font-weight: normal;
}var clock = document.getElementById('clockdiv'); // Variable clock entspricht dem Element clockdiv
//berechnet Spannweite
var days_span = clock.querySelector('.days');
var status_output = clock.querySelector('.status-output');
var hours_span = clock.querySelector('.hours'); //variable wird definiert zur Ausgabe des ersten Elements aus".hours"
var minutes_span = clock.querySelector('.minutes');
var seconds_span = clock.querySelector('.seconds');
var progressElement = document.getElementById('progress');
var timeinterval;
//time_remaining(startTime) berechnet die verbleibende Zeit für den Countdown. Dazu werden über Date.parse die Millisekunden des
// Wertes des divs "date" eingelesen. Im folgenden wird deswegen von den Millisekunden aus die Sekunden, Minuten, Stunden, Tage berechnet.
function time_remaining(startTime){
var t = Date.parse(document.getElementById("date").value) - startTime;
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds};
}
//setStatus(days) setzt den Status in Verbindung mit den verbleibenden Tagen und ordnet die Statusmeldung zu. Dazu wird aus der Konsole die Tage Anzahl ausgegeben und dann durch eine bedingte Funktion die entsprechende Meldung ausgegeben.
function setStatus(days) {
if (days < 1) {
status_output.innerHTML = 'Viel Glück und Erfolg!';
}
else if (days == 1) {
status_output.innerHTML = 'Morgen!!!!!!';
}
else if (days <= 4) {
status_output.innerHTML = 'Jetzt aber!!';
}
else if (days < 8) {
status_output.innerHTML = 'Nur noch eine Woche!';
}
else {
status_output.innerHTML = 'Alles okay';
}
}
// function submitDate updatet die Countdown Daten und gibt sie über days_span.innerHtml in dem HTML Dokument aus. Der Countdown wird mit einer bedingten Funktion beendet, damit er nicht in den Minus Bereich geht.
function submitDate() {
clearInterval(timeinterval);
timeinterval = setInterval(function update_clock(){
var t = time_remaining(Date.parse(new Date()));
// upadatet die Zahlen in der Uhr
days_span.innerHTML = t.days;
hours_span.innerHTML = ('0' + t.hours).slice(-2);
minutes_span.innerHTML = ('0' + t.minutes).slice(-2);
seconds_span.innerHTML = ('0' + t.seconds).slice(-2);
setStatus(t.days);
setProgress(t.days);
if(t.total<=0){ clearInterval(timeinterval); }
}, 1000);
}
// Funktioniert definiert den Füllstand des Status Kreises. variable dayPercent berechnet dazu den % Satz der Steigung pro Tag. progressPercent den genauen Stand pro Tag. Falls es länger als 7 Tage bis zur Klausur ist wird der Kreis versteckt.
function setProgress(days) {
var fillElement = document.getElementById('progress').querySelector('.fill');
if (days <= 7) {
var dayPercent = 100 / 7;
var progressPercent = 100 - dayPercent * days;
progressElement.style.visibility = 'visible';
progressElement.style.opacity = '1';
fillElement.style.height = progressPercent + '%';
}
else {
progressElement.style.visibility = 'hidden';
progressElement.style.opacity = '0';
fillElement.style.height = '0%';
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.