function for opening advent calendar

user_14700322 0
Viewed 157

I'm very new to html and especially javascript so I'm not very good when it comes to this stuff yet.

I've been trying to make a html page for my friend that shows a interactive advent calendar. I would like the page to only show the boxes for a certain day (So on the 12th only show the 12th box) and the previous ones.

First I hoped to get a solution to do that, but since I've been failing with it since hours I'm okay with just being able to open those now...

My problem now is that when scrolling down to the second box, it takes me to the beginning on the page (Firefox), and I'm able to open the boxes that should be locked. So I hoped someone could help me with this as this is my christmas gift to my friend who has been trying to teach me html since a bit.

My cards look like this in html

<div class="calendar">
    <div onclick="checkdate(1)">
        <div class="scene scene--card">
            <div class="card">
                <div class="card__face card__face--front i1"></div>
                <div class="card__face card__face--back">
                    <span>Header</span><br><br>Text
                </div>
            </div>
        </div>
    </div>
    <div onclick="checkdate(2)">
        <div class="scene scene--card">
            <div class="card">
                <div class="card__face card__face--front i2"></div>
                <div class="card__face card__face--back">
                    <span>Header</span><br><br>Text
                </div>
            </div>
        </div>
    </div>
</div>

And my script to find the right boxes looks like this

function checkdate(selectday) {
    var dateselect = new Date (2020, 10, selectday);
    var card = document.querySelector('.card');
    var datenow = new Date();
    if (datenow > dateselect) {
        $('.scene').select(function() {
        $(".card", this).toggleClass("is-flipped")});
    } else {
        alert ("No cheating!");
    }
}

Sorry if I forgot something or did something wrong, this is my first post. Let me know if that's the case please!

Edit 1

Here's a fiddle with everything related to the calendar!

https://jsfiddle.net/mw01shcn/

html javascript
1 Answers

Your main issue is coming from this:

When the HTML/JS is loaded you are telling a card that is clicked to flip. So any card will flip regardless of what you do in your checkDate function.

var card = document.querySelector('.card');
$('.scene').on('click', function() {
   $(".card", this).toggleClass("is-flipped");
});

I would advise getting rid of that portion of code.

Now, you need to flip the cards from the checkDate function. Here is a fix that is the most similar to how your code is currently structured:

function checkdate(selectday, card) { // TAKE ANOTHER PARAMETER OF THE CARD CLICKED
    var dateselect = new Date (2020, 10, selectday);
   // var card = document.querySelector('.card'); THIS VARIABLE WAS NEVER USED SO I COMMENTED IT OUT AND STOLE THE NAME
    var datenow = new Date();
    if (datenow > dateselect) {
          //$('.scene').select(function() { // CAN JUST GET THE CARD FROM THE VARIABLE PASSED IN
                $(card).toggleClass("is-flipped"); // USING "card" INSTEAD OF YOUR GLOBAL SELECTOR
          //});
    } else {
        alert ("No cheating!");
    }
}

You because we are now taking the card to flip as a parameter, we will need to change the html:

            <div> // I RELOCATED THE ONCLICK FUNCTION TO THE CARD ELEMENT
                <div class="scene scene--card">
                     <div class="card"  onclick="checkdate(24, this)"> // HERE IS WHERE THE CLICK WILL BE DETECTED, AND PASSING "this" WILL PASS THE CARD HTML ELEMENT INTO THE JS FUNCTION
                         <div class="card__face card__face--front i24"></div>
                         <div class="card__face card__face--back"><span style="font-size: 1.5em; text-decoration: underline">Header</span><br><br>Text here</div>
                     </div>
                </div>
            </div>

You will need to make the HTML change to all the cards.

There are many ways to go about flipping the cards, but I think this solution was the most similar to what you already had.

Again, we are no longer telling the card to flip when ever it is clicked, but instead we tell the card to flip if it is within the acceptable date range.

user_117442370
Related