Learn How To Code in Java !!!!!!

Introduction

These our best friends to help us make our website awesome! Let's take a look at some of great thing that we can do using them

Here is my 3 examples of how you can use them toghether and make nice things!

logo

Tutorial #2 --> What will magnet attract??

Click on items on left and see what will happen !!! :D

magnet
hammer dog frying-pan cat spoon bunny

#1 At first we need to add our img(s) to html...



#2 Then on CSS, they will be positioning absolute to make a circle...


		.tutorial01{
			position: relative;
			display: flex;
		}
		.game-sec{
			display: flex;
			margin-right: auto;
			height: 100vh;
		}
		.items{
			display: flex;
			margin-right: auto;
			width: 55%;
			height: 100vh;
		}
		.magnet img{
			position: absolute;
			top: 360px;
			left: 5px;
		}
		.items img{
			position: absolute;
		}
		.items a:nth-child(1) img{
			top: 550px;
			left: 525px;
		}
		.items a:nth-child(2) img{
			top: 220px;
			left: 440px;
		}
		.items a:nth-child(3) img{
			top: 420px;
			left: 700px;
		}
		.items a:nth-child(4) img{
			top: 260px;
			left: 925px;
		}
		.items a:nth-child(5) img{
			top: 130px;
			left: 710px;
		}
		.items a:nth-child(6) img{
			top: 540px;
			left: 880px;
		}

#3 After desining everything now it's a time for make them functional...just using a click event and animate to make them what you saw !!!


		const $items= $('.items img');
		const $iron = $('.iron');
		const $ironStick = $iron.css('left');
		$items.on("click", function(){
		    if($(this).hasClass('iron')){
		        $(this).animate({
		            left: '13%',
		            top: '350px' 
		        }, 1000);
		    }else{
		        console.log('not iron');
		        $(this).fadeOut();
		    }
		});