 So hello guys, I'm Shawen. So basically I made this. Sorry. So basically you can beat it. But you all start with this. So you all know how radio button works, right? So basically it's two input elements. Then they all have the same name. So when you click on one, then it switches. Then with that, then you could do something like when the input is checked, then you could do something about the check, right? Maybe I should show some quota. That is number 2. Can you guys see it? So basically when input is checked, then the labels after have the content change. If you want to google this, just look for checkbox hack. You will find the templates to look for. Then we move on to the next step. We come to this mode. This is now updated. But basically... So this is how the mode is constructed. Let's give it a click. Ah, this is not needed. Okay. So you have two input radio. Then when you click on this, it's supposed to target for the one with IDC1. Which means when you click, then this will be checked. So we go on to the logic. Where is it? So when the input is checked with a mode, then the color should change to blue. And the next step would be... So we need a box for the mode to hide, right? And there's no logic here. It's just a box. So pretty simple thing. This is a box. And this is to cover the mode inside. Ya, nothing. Special. Then we come to the fifth stage. Like how to make it sure and hide. So it's basically in this part. So the mode just jumping, right? Then we put a box. Then we get a box. Then you just check all the box. If you put multiple mode, as in multiple box with mode inside, to big. Still too big. Ya, then they all stay in one line. Do you love how this is responsive? I like how this is responsive. Then when you hide a mode, ah, because they all share the same idea. But we're going to make it stop. Coming out, right? Then we can say that when it is checked, then we just say animation. Maybe not. Ya, it's gone. But then we want the next mode to come out, right? Now we have two modes. Change ID to but now it's two mode coming up together. So you can see that two mode is coming up together, right? We don't want that. We want the second mode to not coming up. Then you can do something like this. So, ah, how do I do that? Animation. So we can pause it initially. So now all mode won't come out. But then we can say that let's chart out. Is it? Ya. So, the second one is about no one moving. We then can say that ah, ya, this is the final one but I was doing what this is doing. You can actually go shallown.getup.io slash css slash mode. But there's a big hack on this. It's basically I'm using the after content but it's like it's doing input check then the score. Then I set the content to zero that's one. There's input check. To the input check. To the score. There's two. So if I need 40 then I need to do it 40 times. Ya, that's a big hack on that. Ya, you can find out more in the code if you want. So there's 10 modes. There's 10 on each box. Ya, but basically it's just do it on one box. If it won't come out anymore then you just move on. Else it's pretty hard to hit. Ya. I added a hit target just now so that it's easier to click. And that's it. Many questions. So a mode need to when you need to start the next mode the first one need to the previous one need to be hit, right? When it's not the previous one is not hit then the next one won't move. So that's how you get the randomness. At the start it all comes out No, at the start only 4 comes out but then I add a delay to each of them all. It's basically animation-delay I think. And different IDs coming out at different speeds also? There's a class called It's not a call Not fast. And each box has a speed as well Some of the boxes all of them is slow but I put not fast to some of them all. So it's all preset? Ya, it's all preset because I can't use JavaScript. More questions. So can you click on the box to get them all? So how did you So you can use Z-index to block it Like I talk about it So this is to block it You did have it wasn't working on touch I think earlier today? No, it works on touch. It's just not responsive. It's not a responsive. You just get a certain number of moles on it. But basically to make it work on mobile phones I need to if it's on 320 below then change the font size I don't need something for just on the call.html Set the input to be checked by initially Which one? Oh You mean here? So it's basically the concept that represent here So when it is not checked So So the first one is not checked So this the hello world won't come out But when it is checked plus the label then only we add the hello It's the same concept Check buses It's not necessary for the back of mall But you could do something like Maybe you don't want to use JavaScript for certain logical stuff Then you could use checkbox You've got one radio group for this entire thing, right? Not really Each mole is one Name Yeah So you could use checkbox as well It's the same I could Yeah It's just the idea is different Yeah Any other questions? I've got a few questions So You have a maximum of 14 moles, right? Yeah If there's any way you can Intermediate JavaScript JavaScript There's no JavaScript So I can't do logical stuff too much about logical stuff So So So that it comes out faster and then goes in faster Or you can just add a random map of random Hmm That will complicate the It will complicate this a lot Well There's tools out there that you can go there and then drag I mean performance wise Performance wise How? Is there a difference between different animation curves Is that what you're asking? Yeah Oh, okay Basic principles of animation Regardless of the medium that you're on is never used the built-in things if you have any idea of what you're doing You would have seen cells see you use all the defaults I've told you it was bad Basically The defaults linear is completely unnatural Easy to know Same curve Yeah, but basically There's no performance difference still animating on my or the other It's got a certain time needs to work it out You throw it to the GPU So you've done everything you can In theory if you had some really bizarre maths in your curve then you might You still attack it really There's maths is what computers do There's nothing that you can practically do and we'll say wow Practically speaking Yeah, you don't stick with the defaults but it has no difference on performance It's purely from the steady point of view And if you look at cheap Hollywood productions where you say Hey, that looks like really bad CG That's usually because I haven't taken into account stuff other than the defaults for a lot of the animation Putting that extra work in and making things feel more natural So usually when you're working on any kind of an animation project you'll get the basic thing working quickly and then you'll spend a ton of time actually making it work properly So animation is just a time drain generally unless you're doing whack-a-mole Yeah Any further questions? To show us the CSS for the final quote This is a long shot, right? Yeah So this is Controlling the box So that everything is on center these things This is controlling all the sizes There's no logical stuff here But you can play around with these things This is to enlarge target so that it's easier to hit The mole This is the one that is controlling the jumping Yeah, the fast mole and slow mole Yeah Shy mole Shy mole Just that mole Dan Yadai Demau It's amazing how much of this no JavaScript whatsoever It was brilliant Yeah You can actually have interactive elements with no scripts It's just bizarre You have to ignore the semantics of the markup, because there is none but it's whack-a-mole Yeah How are you doing the counter? Oh, the counter Yeah, the ugly That's the thing, this is old This man is a genius If you use Sass, maybe you can use a function with a mixer Or you could just use some JavaScript Yeah Just look at it on change and then upload Yeah, you can press it Yeah, this is the same pattern I started on Tuesday but I will say in total about 24 hours per month Given things like this maybe you should have spent some more This is quick I was doing Sass and Qion help me change everything to CSS We'll post the URL so if you've missed it you'll see it on the meetup group so you don't need to memorise local host or anything interesting Do you guys need this? It's not commit to the repo We'll see the end result Except for the counter Terima kasih