Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Diana test</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

	<style>
		body {
			margin: 0;
			padding: 0;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column
		}
		.form__block {
			width: 310px;
		}
		input {
			border-radius: 4px;
			border: solid 1px #ccc;
			outline: none;
			display: inline-block;
			margin-right: 10px;
			height: 40px;
			padding: 0 5px;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			font-size: 14px;
			margin-bottom: 10px;
		}
		button {
			display: inline-block;
			border-radius: 4px;
			height: 40px;
			width: 100%;
			text-align: center;
			background: #000
			color: #fff;
			border: 0;
			padding: 0 10px;
			font-size: 14px;
			cursor: pointer;
		}
		#result {
			font-size: 14px;
			line-height: 24px;
			text-align: center;
		}
		.cbalink {
			display: none;

		}
	</style>
	<div class="form__block">
		<input type="text" id="input" type="number" placeholder="Введите ваш IQ">
		<button class="btn-submit">Проверить</button>
		<div id="result"></div>
	</div>

	<script>

		let input = document.querySelector('input'),
			button = document.querySelector('.btn-submit'),
			result = document.querySelector('#result');


		button.onclick = function() {
			if(input.value != '' && input.value > 0) {
				if(input.value > 47) {
					result.innerHTML = 'Вы молодец, любите Диану'
				} else {
					result.innerHTML = `Ваш IQ - ${input.value}, это очень плохо! Срочно влюбляйтесь в Диану`
				}
			} else {
				result.innerHTML = 'Заполните поле с IQ'
			}
		}


	</script>

</body>
</html>