Need a result popup name doesnt popup new to java and css

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">		
		<title>Shadow League (Clash Of Clans)</title>
		<style>
			*{
				box-sizing: border-box;
				padding: 0;
				margin: 0;
				outline: none;
			}
			body{
				font-family: open Sans;
				display: flex;
				justify-content: center;
				align-items: center;
				height:100vh;
				overflow: hidden;
				background: url('bar.jpg');
				background-size: cover;
			}

			.mainbox{
				position: relative;
				width:500px;
				height:500px;
			}
			.mainbox:after{
				position: absolute;
				content: '';
				width:32px;
				height:32px;
				background: url('left.png') no-repeat; 
				background-size:32px;
				right:-30px;
				top:50%;
				transform: translateY(-50%);

			}
			.box{
				width:100%;
				height:100%;
				position: relative;
				border-radius:50%;
				border:10px solid #fff;
				overflow:hidden;
				transition:all ease 5s;
			}
			span{
				width:50%;
				height:50%;
				display:inline-block;
				position:absolute;
			}
			.span1{
				clip-path: polygon(0 92%, 100% 50%, 0 8%);
				background-color: #ffeb3b;
				top:120px;
				left:0;	
			}
			.span2{
				clip-path: polygon(100% 92%, 0 50%, 100% 8%);
				background-color: #e91e63;
				top:120px;
				right:0;		
			}
			.span3{
				clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
				background-color: #4caf50;
				bottom:0;
				left:120px;
			}
			.span4{
				clip-path: polygon(50% 100%, 92% 0, 8% 0);
				background-color: #3f51b5;
				top:0;
				left:120px;
			}
			.box2{
				width:100%;
				height:100%;
				transform: rotate(-135deg);
			}
			span b{
				width:65px;
				height:65px;
				line-height:65px;
				border-radius:50%;
				font-size:26px;
				text-align: center;
				background-color: #fff;
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%, -50%);
				box-shadow: inset 0 3px 3px 0 #717171;
			}
			.spin{
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
				width:75px;
				height:75px;
				border-radius: 50%;
				border: 4px solid #fff;
				background-color: #ff5722;
				color: #fff;
				box-shadow: 0 5px 20px #000;
				font-weight: bold;
				font-size: 22px;
				cursor: pointer;
			}
			.spin:active{
				width:70px;
				height:70px;
				font-size:20px;			
			}
			.mainbox.animate:after{
				animation: animateArrow 0.7s ease-infinite;
			}
			@keyframes animateArrow{		
			}
		</style>
	</head>
	<body>
		
    			<div class="mainbox">
				<div id="box" class="box">
					<div class="box1">
						<span class="span1"><b>Killer</b></span>
						<span class="span2"><b>Yogi</b></span>
						<span class="span3"><b>Naushad</b></span>
						<span class="span4"><b>None</b></span>
					</div>
					<div class="box2">
						<span class="span1"><b>Killer</b></span>
						<span class="span2"><b>Yogi</b></span>
						<span class="span3"><b>Naushad</b></span>
						<span class="span4"><b>None</b></span>
				</div>
				<div class="popup" onclick="myfunction()">Spin
					<span class="popuptext" id="myPopup">Winner</span></div>
				
					<button class="spin" onclick="myfunction()">spin</button>
		
<script>
	//when the user clicks on <spin>, after 50000
	function myfunction() {

    var popup = document.getElementById ("box")
    popup.classList.toggle("show")
    jQuery(".spin").spin(5000);
    $("#spinWinResult").text(gameover_text);
    $(".power_controls").visibility();

    var response = "";
    if (box1.isCouponExist == "true")
    {
        response += "<p>" + box1.winResult + "</p>";
        response += "<p> Your Coupon Code is " + box.CouponCode + "</p>";
    }
    else
    {
        response += "<p>" + box.winResult + "</p>";
    }

    $("#displayprice").popup.box1(response);
    $("#displayprice").popup.box(response);
    $("#displayprice").popup.box2(response);
    $('#spin').modal('show');
    $(".reset_btn").show();
}
	function myfunction(){
		var x = 1024; //min value
		var y = 9999; //max value
		var deg = Math.floor(Math.random()*(x-y))+y;
		document.querySelector('.box').style.transform = "rotate("+deg+"deg)";
		
	}
	
</script>
</body>
</html>

You don’t appear to have loaded jQuery.

can you help me with the coding

It would help if you explain what you are trying to do here.

I also notice that you have defined the function myfunction twice.