01yildizmustafa/deneme.php

## deneme.php
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: lightgray;
        }

        .container {
            width: 700px;
            height: 500px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            flex-direction: column;
        }

        .numbers {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        label {
            width: 100px;
            height: 100px;
            background-color: indigo;
            color: white;
            cursor: pointer;
            transition: 100ms ease-in;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            font-weight: 700;
        }

        label input {
            cursor: pointer;
            /* margin-right: -30px; */
            /* opacity: 0; */
        }

        .active {
            background-color: white;
        }

        button {
            width: 500px;
            height: 70px;
            background: red;
            font-size: 25px;
            border: none;
            font-weight: 700;
            letter-spacing: 5px;
            text-transform: uppercase;
            cursor: pointer;
        }

        button:active {
            transform: scale(.97);
        }
    </style>
</head>

<body>
    <div class="container" id="container">

        <div class="numbers">

            <label name="label" id="1">
                <input type="radio" class="radio" name="radio" value="1">
                1
            </label>

            <label name="label" id="2">
                <input type="radio" class="radio" name="radio" value="2">
                2
            </label>
            <label name="label" id="3">
                <input type="radio" class="radio" name="radio" value="3">
                3
            </label>

            <label name="label" id="4">
                <input type="radio" class="radio" name="radio" value="4">
                4
            </label>

            <label name="label" id="5">
                <input type="radio" class="radio" name="radio" value="5">
                5
            </label>

        </div>
    </div>

    <script>
        var labels = document.querySelectorAll("label");

        labels.forEach(function(label) {

            label.addEventListener("click", function() {
                label.style.backgroundColor = "orange";
            })
        })
    </script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	}

	body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: lightgray;
	}

	.container {
	width: 700px;
	height: 500px;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
	}

	.numbers {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	}

	label {
	width: 100px;
	height: 100px;
	background-color: indigo;
	color: white;
	cursor: pointer;
	transition: 100ms ease-in;
	text-align: center;
	line-height: 100px;
	font-size: 30px;
	font-weight: 700;
	}

	label input {
	cursor: pointer;
	/* margin-right: -30px; */
	/* opacity: 0; */
	}

	.active {
	background-color: white;
	}

	button {
	width: 500px;
	height: 70px;
	background: red;
	font-size: 25px;
	border: none;
	font-weight: 700;
	letter-spacing: 5px;
	text-transform: uppercase;
	cursor: pointer;
	}

	button:active {
	transform: scale(.97);
	}
	</style>
	</head>

	<body>
	<div class="container" id="container">

	<div class="numbers">

	<label name="label" id="1">
	<input type="radio" class="radio" name="radio" value="1">
	1
	</label>

	<label name="label" id="2">
	<input type="radio" class="radio" name="radio" value="2">
	2
	</label>
	<label name="label" id="3">
	<input type="radio" class="radio" name="radio" value="3">
	3
	</label>

	<label name="label" id="4">
	<input type="radio" class="radio" name="radio" value="4">
	4
	</label>

	<label name="label" id="5">
	<input type="radio" class="radio" name="radio" value="5">
	5
	</label>

	</div>
	</div>

	<script>
	var labels = document.querySelectorAll("label");

	labels.forEach(function(label) {

	label.addEventListener("click", function() {
	label.style.backgroundColor = "orange";
	})
	})
	</script>

	</body>

	</html>