You probably dont give a shit but if you guys are stoned like me during the covid times you can stream all the latest movies and series on instaflixxer. Been streaming with my brother for the last months =)
You deserve millions of subs. I accidently found this channel but the content is golden so I'm staying :) Thanks and keep up the good work. Superb content and presenting format.
Just found your videos and I love them! your videos are short-ish and well explained, these are good things. 12 hour react course is just a bit much from others lol
Wow! Amazing video Tyler ! Thank you so much for sharing. Is it another video explaining how is the process if I want to create more flashcards ? Like 100 for example. I would like to create flashcards to study. Thank you in advance. !
Lovely tutorial , keep on the hard work, it would be nicer to have your server window open on the side , this helps understand better the process and notice changes at ones it happens 👏👏
That's because we only target 1 card using querySelector if you want to select multiple you need to use querySelectorAll then loop through the results and apply the event listeners
@@TylerPotts The markup & css is simple enough to easily understand the mechanics behind it. However I still don't know how the css "knows" which html elements to use for card front and back sides. Is it because you set "transform-style:preserve-3d;" on an HTML element which MUST have exactly 2 children of which the first will be displayed on default and the second after the transformation? The mechanic goes hidden behind the scenes and I'd like to understand what's happening. Thanks again! 🙂
Would someone happen to know why the back of the card is in the correct color but the side with all the content is a light gray? This is from me trying to learn and follow along I dont see what I messed up
Hello! Thanks for this great tutorial. Im not much of a programmer so I have one problem. When I copy whole div with class card to have 2 cards with diferent descriptions, one/first can flip and the other cant. What should I change in js to have both cards flip?
i know its been two years but now i am here and i actually followed the whole video and fix some of my mistakes but i cannot seem to figure out why my p tag is taking a limited amount of text and whenever its exceed and number of lines it all crashes and scramble into each other , like its a total mess. Please help.
Instead of selecting one card you'd need to select multiple with something like "querySelectorAll" then loop through and apply the same code - I hope that helps.
This is fantastic, but how come I can't copy it & make more than one? When I try to make a second card & either try to add a ".card__inner2" for example to the Javascript, It doesn't work, or if I copy & make a completely new JavaScript code & add ".card__inner2" to it's own version of the Javacode, it makes both cards stop working. I know this is 3 years old but I would love to know why.
@@TylerPotts yeah so thanks for answering so fast. I know, that I have to use querySelctorAll and I already tried it but somehow my code doesn't work. And btw. great tutorial My code: let card = document.querySelectorAll(".card__inner"); card.forEach((link) => { card.addEventListener('click', function(e) { this.classList.toggle('is-flipped'); }); });
Hi, if u replace the js code for this one, it will work ´´const card = document.querySelectorAll(".card__inner"); function flipCard() { this.classList.toggle('is-flipped'); } card.forEach((card) => card.addEventListener("click", flipCard));´´
Hi, this tutorial was really helpful!! everything seems to work perfectly using chrome, but... using Safari instead, the property -webkit-backface-visibility: hidden; seems to work only on the front face of the card, while when the card is flipped i can see through the back face and i dont know how to fix that. is there any solution to this weird problem? :/
i want to make 6 cards on the same page but just copy and paste the code does not work i tried some other things but none of them worked, how can i do ?
Hey Paul, It's hard to explain over text but you need to check the click path to check what was clicked and if it was a link return / stop propagation... If you need further help feel free to join the discord I can help more there.
Hi, if u replace the js code for this one, it will work ´´const card = document.querySelectorAll(".card__inner"); function flipCard() { this.classList.toggle('is-flipped'); } card.forEach((card) => card.addEventListener("click", flipCard));´´
nyc tutorial !, can u pls tell me how to flip the page from the other side, like it is getting flipped from the side at which it is written card front, but I want it to get flipped from the other side where it is written the information.... Please reply !, I want to know
I used this as a base to make an ionic vue simple card game. Thank you
Excellent!
Javascript doesn't stop to amaze me
It's awesome!
I really laughed when I found we got the same theme, cool video btw
Did anyone else get overlapping text on the card when you used "Lorem" or any other longer text in the tag?
More of this, really like these easy tutorials..so good for inspiration
Thank you! Will do!
You probably dont give a shit but if you guys are stoned like me during the covid times you can stream all the latest movies and series on instaflixxer. Been streaming with my brother for the last months =)
@Abdullah Boston Definitely, have been watching on InstaFlixxer for since november myself :)
You deserve millions of subs. I accidently found this channel but the content is golden so I'm staying :)
Thanks and keep up the good work.
Superb content and presenting format.
Wow, thanks!
This was a really great vid. It was clear and easy to follow and sort of set a lot of things in place. Thanks for the help and great work!
Great video! That was exactly what I was looking for. Thanks!
Glad it was helpful!
i stumbled on this video and i have to subscribe
Thank you so much!! Using this technic I'm gonna make prettier websites!
Greetings from Chile!!
Awesome!!! :D
Awesome buddy!!!! I used it for my Ecommerce Website.....Loved this.....Well explained
looked on alot of these videos and liked this the most. Thanks man for a really good tutorial.
Glad you liked it!
Just found your videos and I love them! your videos are short-ish and well explained, these are good things. 12 hour react course is just a bit much from others lol
Wow! Amazing video Tyler ! Thank you so much for sharing. Is it another video explaining how is the process if I want to create more flashcards ? Like 100 for example. I would like to create flashcards to study. Thank you in advance. !
Hey E.B, a lot of people have asked for this so I'm going to create another video explaining how you can create multiple flip cards on a single page!
@@TylerPotts That's will be great Tyler! Thank you so much :)
Tyler, this tutorial is so awesome. You are awesome!!!
Glad you think so!
I love it! thank you. Greetings from Argentina
Thank you for watching! Hello in Argentina!
Thanks a lot for this video! It was really helpful. Very simple and straightforward.
Thanks for this, learn so much
Glad it was helpful!
Lovely tutorial , keep on the hard work, it would be nicer to have your server window open on the side , this helps understand better the process and notice changes at ones it happens 👏👏
Thanks, will do!
A very good tutorial, everything is very clear. Thanks a lot!!!
Glad it helped!
Thanks a lot!
Freaking great! Crystal clear! Thank you !!
I want more............ Thank you so much.
Working on it!! :D
OutStanding!
Thank you
Great vid! Thank you so much. This is perfect for the project I'm working on
Brilliant tutorial
Thanks!
Great vid, I do appreciate. Just what I needed to see...
Glad it helped
excellent code... very useful... thank you very much
I love it. Thanks 👌
i love u, thx!!! i need this
Nice video, everything works! Thanks a lot ;)
You're welcome!
Loved this
Awesome! :D
Thanks a lot, brother but can you please let me know How I can add multiple cards on a single page.
Good job Tyler. I would also suggest adding...
body { overflow: hidden; }
.card { margin-top:50px; }
Also thank you...
On the site, you need to turn over 8 different cards, but it works only on the very first one. Why?
That's because we only target 1 card using querySelector if you want to select multiple you need to use querySelectorAll then loop through the results and apply the event listeners
@@TylerPotts thx)
How can I put multiple cards in row? Next to each other?
You need to select all elements and not just thebone
Thanks, this was very helpfull ♥
Hey great video, thank you!
Would it be possible to flip the card clicking a button instead of tapping the card?
Great video!
Easy and effective! I used it for my interview work! Thanks a lot!
Glad it helped!
@@TylerPotts The markup & css is simple enough to easily understand the mechanics behind it. However I still don't know how the css "knows" which html elements to use for card front and back sides.
Is it because you set "transform-style:preserve-3d;" on an HTML element which MUST have exactly 2 children of which the first will be displayed on default and the second after the transformation?
The mechanic goes hidden behind the scenes and I'd like to understand what's happening.
Thanks again! 🙂
plz tell a tutorial about html and css to learn from basic
tnx
Wow 👍
🤗
Would someone happen to know why the back of the card is in the correct color but the side with all the content is a light gray? This is from me trying to learn and follow along I dont see what I messed up
Hello! Thanks for this great tutorial. Im not much of a programmer so I have one problem. When I copy whole div with class card to have 2 cards with diferent descriptions, one/first can flip and the other cant. What should I change in js to have both cards flip?
I'm having the exact issue. I was hoping there'd be a reply.
@@thomassavino3813 use for each in javascript
i know its been two years but now i am here and i actually followed the whole video and fix some of my mistakes but i cannot seem to figure out why my p tag is taking a limited amount of text and whenever its exceed and number of lines it all crashes and scramble into each other , like its a total mess. Please help.
I keep getting cannot read properties of null (reading 'addeventlistener')
Hey, how would I make this work for more than one card?
Instead of selecting one card you'd need to select multiple with something like "querySelectorAll" then loop through and apply the same code - I hope that helps.
Could anyone explain me where is_flipped is declared as class in html., because he is calling it in css and also added it in JS. Please explain
It gets applied to the ".card__inner" div via javascript but is not declared in the HTML it is only set via JavaScript.
Hey cool ☺ Any chance to start the flip when you toggle a switch? (e.g. monthly to yearly)
is there a way to make the container thicker on the side view when flipped?
This is fantastic, but how come I can't copy it & make more than one? When I try to make a second card & either try to add a ".card__inner2" for example to the Javascript, It doesn't work, or if I copy & make a completely new JavaScript code & add ".card__inner2" to it's own version of the Javacode, it makes both cards stop working. I know this is 3 years old but I would love to know why.
Muito bom o vídeo parabéns
Hey! Sorry for asking, but i have a short question. How do i change the js, so that multiple cards would work?
It's hard to explain over text but you need to use a querySelectorAll and loop through each one then apply the events
@@TylerPotts yeah so thanks for answering so fast. I know, that I have to use querySelctorAll and I already tried it but somehow my code doesn't work.
And btw. great tutorial
My code:
let card = document.querySelectorAll(".card__inner");
card.forEach((link) => {
card.addEventListener('click', function(e) {
this.classList.toggle('is-flipped');
});
});
Instead of card.addevent try link.addevent your still referencing the list of cards instead of the individual one!
@@TylerPotts Oh finally it works! I literally can't say thank you enough
Hi, if u replace the js code for this one, it will work
´´const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));´´
Hi, this tutorial was really helpful!! everything seems to work perfectly using chrome, but... using Safari instead, the property -webkit-backface-visibility: hidden; seems to work only on the front face of the card, while when the card is flipped i can see through the back face and i dont know how to fix that. is there any solution to this weird problem? :/
I'm unsure I'd have to take a further look. Sorry.
i want to make 6 cards on the same page but just copy and paste the code does not work i tried some other things but none of them worked, how can i do ?
hi thanks for the tutorial
if I add another card it doesn't work it please help XD
You would need to change the document.querySelector to document.querySelectorAll and then loop through the results...
const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));
thx works XD
@@romannovak375 Woo happy you understood what you said! My comment wasn't very clear :)
How to stop backface to rotate if there is a link?
Hey Paul, did you find the answer to this??
@@IspittingFactzz no
Hey Paul, It's hard to explain over text but you need to check the click path to check what was clicked and if it was a link return / stop propagation... If you need further help feel free to join the discord I can help more there.
@@TylerPotts Hey. Thanks. Yepp its allready made.
@@paulmoldovan9518 Did you get it to work?
how to change image in this code? please help meeeeeeeeeeeeeeeeeeeeeeeeee
12:37 line.76 can you please elaborate more on the " .card__header::after "
What do you want me to explain?
not wroking for multiple cards
Is there a way to do this without the code? Like an app or a beginner friendly version?
Umm I only ever work with code so I don't know
its not working on me can u help?
on call or something
How can I do to place 2 or more cards?
I've been asked multiple times for this so I will probably create a revised video :)
Hi, if u replace the js code for this one, it will work
´´const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));´´
@@vitoriaaguiar3379 Thanks.😁
@@vitoriaaguiar3379 I LOVE YOU YOU SAVED MY LIFE :')
@@vitoriaaguiar3379 Thank you! Thank you! Thank you!
can you please provide code files? I want to use them as for my reference bro.
The link is in the description ? :)
😍🤗
nyc tutorial !, can u pls tell me how to flip the page from the other side, like it is getting flipped from the side at which it is written card front, but I want it to get flipped from the other side where it is written the information....
Please reply !, I want to know
how can i rotate in 1 direction?
I'm not sure what you mean! If you need help feel free to join the discord and as there :)
Advice: instead of focusing more on styling, try to explain more about the Crux, the flipping effect, and the backface and stuff.
Thanks for the feedback. I'll keep that in mind for future videos
Would be nice if the tutorial showed only the flipping animation. We have to skip through the whole video just to get to the part we came to learn
Thank you so much!
You're welcome!