-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (71 loc) · 3.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Calculator</title>
<link rel="stylesheet" href="style.css">
<!-- FontAwesome için bağlantı ekleyin -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha384-DyZQK7nB4i6HDEsJ0FeDAJ0a73SiA1WgYxQRHYh7l3P8Tt79Otu5wxWQ12gBguY0" crossorigin="anonymous" />
</head>
<body>
<div class="calculator-container">
<!-- Selection for Operation and Range -->
<div class="settings">
<div class="dropdown-container">
<label for="operation-select" class="label">İşlem Seçin</label>
<select id="operation-select" class="dropdown colorful" aria-label="Select Operation">
<option value="+">Toplama</option>
<option value="-">Çıkarma</option>
<option value="x">Çarpma</option>
</select>
</div>
<div class="dropdown-container">
<label for="range-select" class="label">Üretilecek Sayı Aralığı</label>
<select id="range-select" class="dropdown colorful" aria-label="Select Number Range">
<option value="1-10">1-10</option>
<option value="10-100">10-100</option>
</select>
</div>
</div>
<label class="checkbox-container">
<input type="checkbox" id="allow-negative" aria-label="Allow Negative Numbers"> Eksi Sayılara İzin Ver
</label>
<!-- Random numbers and operation display -->
<div class="random-values-row">
<button id="random1" class="btn green-btn" aria-label="First Random Number"></button>
<button id="operation" class="btn green-btn" aria-label="Selected Operation">+</button> <!-- Default operation -->
<button id="random2" class="btn green-btn" aria-label="Second Random Number"></button>
</div>
<!-- Result input and Enter button -->
<div class="result-area">
<input id="result-input" type="text" class="result" readonly aria-label="Result Input">
<button id="enter-btn" class="btn green-btn" onclick="checkResult()" aria-label="Submit Result">Cevapla</button>
<!-- Cevabı gör butonu ve göz ikonu -->
<div id="show-answer-btn" class="show-answer">
Cevabı Gör
<i class="fas fa-eye"></i>
</div>
<div id="correct-answer"></div> <!-- Doğru cevap burada gösterilecek -->
</div>
<!-- Keypad -->
<div class="keypad">
<button class="btn" onclick="appendNegative()" aria-label="Negative">-</button>
<button class="btn" onclick="backspace()" aria-label="Backspace">←</button>
<button class="btn" onclick="clearResult()" aria-label="Clear">C</button>
<button class="btn" onclick="appendNumber(1)" aria-label="1">1</button>
<button class="btn" onclick="appendNumber(2)" aria-label="2">2</button>
<button class="btn" onclick="appendNumber(3)" aria-label="3">3</button>
<button class="btn" onclick="appendNumber(4)" aria-label="4">4</button>
<button class="btn" onclick="appendNumber(5)" aria-label="5">5</button>
<button class="btn" onclick="appendNumber(6)" aria-label="6">6</button>
<button class="btn" onclick="appendNumber(7)" aria-label="7">7</button>
<button class="btn" onclick="appendNumber(8)" aria-label="8">8</button>
<button class="btn" onclick="appendNumber(9)" aria-label="9">9</button>
<button class="btn zero" onclick="appendNumber(0)" aria-label="0">0</button>
</div>
<div id="message"></div>
</div>
<script src="calculator.js"></script>
</body>
</html>