Adventskalender
Guten Morgen,
ich hänge gerade fest. Mit HTML habe ich bereits geschrieben, was passiert, wenn man einen Button klickt. per CSS habe ich ein Bild geladen und die Buttons verteilt. Es soll ein Adventskalender werden. Nun möchte ich, dass der jeweilige Button erst an einem bestimmen Datum geklickt werden kann, oder wenn das Datum in der Vergangenheit liegt.
Ein Beispiel Tür 21:
Wenn es der 20.12.20220 ist, soll nur eine Meldung kommen, "bitte nicht schummeln :) ".
Am 21., 22., 23.,24. öffnet sich in einem anderen Fenster das Türchen.
Wie kann ich das machen, das der Button nur dann ausgelöst wird?
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
main{
display:flex;
flex-wrap:wrap;
width:100%;
}
main div{
width:calc(25% - 2px);
border:1px solid red;
height:24vw;
text-align:center;
line-height:24vw;
font-size:40px;
cursor:pointer;
position:relative;
color:white;
background:#123456;
}
main div:before{
font-size:50px;
display:block;
text-align:center;
line-height:24vw;
content:attr(data-id);
position:absolute;
width:100%;
height:100%;
transition:500ms all;
background:green;
}
div.before:before{
font-size:50px;
display:block;
content:'';
position:absolute;
width:0%;
height:100%;
transition:500ms width;
background:green;
}
div.err:before{
font-size:20px;
display:block;
content:'Verboten';
position:absolute;
width:100%;
height:100%;
transition:500ms width;
background:red;
}
</style>
<main>
</main>
<script>
tag=4;
mai= document.getElementsByTagName('main')[0];
for(a=1;a<=24;a++){
ele=document.createElement('div');
ele.id="fenster"+a
ele.innerHTML='open';
ele.setAttribute('data-id',a);
mai.appendChild(ele);
}
di=document.querySelectorAll('div');
di.forEach(function(v){
v.addEventListener('click',function(){
if(this.getAttribute('data-id')>tag){
if(this.getAttribute('data-id')==24){
alert('Du klickst zu früh\nAber trotzdem wünsche ich ein Frohes Fest .\nBitte an die Corana Regeln denken,nicht mehr als 5 Personen aus 2 Haushalten.')
}else{
alert('nicht schummeln')
}
this.className='err';
}else{
this.className='before';
}
})
})
</script>