coder618/timer

## timer
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>time</title>
</head>
<style>
    h2{
        width: 400px;

    }
    .box{
        height: 2px;
        background-color : red;
        width: 200px;
        transition : width 1s ;
    }


</style>
<body>
    <h1>time</h1>

    <h2 id="lol"></h2>
    <div class="box"></div>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <script>
        var remain_sec = 30;
        var main_width = 200;
        var width_setp =   main_width / remain_sec;
        var current_width = main_width;


        console.log("got it");
        var x = setInterval(function(){

            // console.log('invoke');
            // console.log(remain_sec);
            remain_sec = remain_sec - 1 ;
            $("#lol").text(remain_sec);

            current_width = current_width - width_setp;
            $(".box").css( 'width', current_width + 'px' );


            console.log(current_width)


            if( remain_sec < 0 ){
                clearInterval(x);
                $("#lol").text("Kicked");
            }


        }, 1000);


    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>time</title>
	</head>
	<style>
	h2{
	width: 400px;

	}
	.box{
	height: 2px;
	background-color : red;
	width: 200px;
	transition : width 1s ;
	}


	</style>
	<body>
	<h1>time</h1>

	<h2 id="lol"></h2>
	<div class="box"></div>



	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

	<script>
	var remain_sec = 30;
	var main_width = 200;
	var width_setp = main_width / remain_sec;
	var current_width = main_width;


	console.log("got it");
	var x = setInterval(function(){

	// console.log('invoke');
	// console.log(remain_sec);
	remain_sec = remain_sec - 1 ;
	$("#lol").text(remain_sec);

	current_width = current_width - width_setp;
	$(".box").css( 'width', current_width + 'px' );


	console.log(current_width)




	if( remain_sec < 0 ){
	clearInterval(x);
	$("#lol").text("Kicked");
	}



	}, 1000);






	</script>

	</body>
	</html>