diff --git a/calculator.js b/calculator.js
new file mode 100644
index 0000000..2250302
--- /dev/null
+++ b/calculator.js
@@ -0,0 +1,298 @@
+// Append number to input field
+function appendNumber(number) {
+    const input = document.getElementById('result-input');
+    input.value += number;
+    // No need to focus on the input field
+}
+
+// Append negative sign
+function appendNegative() {
+    const input = document.getElementById('result-input');
+    if (!input.value.includes('-')) {
+        input.value = '-' + input.value;
+    }
+    // No need to focus on the input field
+}
+
+// Backspace function
+function backspace() {
+    const input = document.getElementById('result-input');
+    input.value = input.value.slice(0, -1);
+    // No need to focus on the input field sss
+}
+  
+  // Clear input field
+  function clearResult() {
+    document.getElementById('result-input').value = '';
+    document.getElementById('message').textContent = '';
+  }
+  
+  // Check result on 'Enter' button click
+  function checkResult() {
+    const random1 = parseInt(document.getElementById('random1').textContent);
+    const random2 = parseInt(document.getElementById('random2').textContent);
+    const operation = document.getElementById('operation').textContent;
+    const userResult = parseInt(document.getElementById('result-input').value);
+    let correctResult;
+  
+    if (isNaN(random1) || isNaN(random2)) {
+      document.getElementById('message').textContent = 'Please generate numbers first!';
+      return;
+    }
+  
+    try {
+      if (operation === '+') {
+        correctResult = random1 + random2;
+      } else if (operation === '-') {
+        correctResult = random1 - random2;
+      } else if (operation === 'x') {
+        correctResult = random1 * random2;
+      }
+  
+      if (userResult === correctResult) {
+        document.getElementById('message').textContent = 'Bravo!';
+        generateRandomNumbers(); // Generate new numbers after a correct answer
+        clearResult();
+      } else {
+        document.getElementById('message').textContent = 'Wrong! Try again.';
+      }
+    } catch (error) {
+      console.error("Error calculating result:", error);
+    }
+  }
+  
+  // Allow keyboard input without duplicating numbers
+  document.addEventListener('keydown', function(event) {
+    const input = document.getElementById('result-input');
+    const allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-', 'Backspace', 'Enter'];
+  
+    if (allowedKeys.includes(event.key)) {
+      event.preventDefault();  // Prevent default action to avoid duplicating the input
+      if (event.key >= '0' && event.key <= '9') {
+        input.value += event.key;
+      } else if (event.key === '-') {
+        appendNegative();
+      } else if (event.key === 'Backspace') {
+        backspace();
+      } else if (event.key === 'Enter') {
+        checkResult();
+      }
+      input.focus();
+    }
+  });
+  
+  // Generate random numbers and display them
+  function generateRandomNumbers() {
+    try {
+      const random1 = getRandomNumber();
+      const random2 = getRandomNumber();
+      const operation = document.getElementById('operation-select').value;
+  
+      // If numbers are successfully generated, display them
+      document.getElementById('random1').textContent = random1 || '';
+      document.getElementById('random2').textContent = random2 || '';
+      document.getElementById('operation').textContent = operation || '';
+    } catch (error) {
+      console.error("Error generating random numbers:", error);
+    }
+  }
+  
+  // Get a random number based on user selection
+  function getRandomNumber() {
+    const range = document.getElementById('range-select').value;
+    const allowNegative = document.getElementById('allow-negative').checked;
+    const [min, max] = range.split('-').map(Number);
+  
+    let number = Math.floor(Math.random() * (max - min + 1)) + min;
+    if (allowNegative && Math.random() > 0.5) {
+      number = -number;
+    }
+  
+    return number;
+  }
+
+  function checkResult() {
+    const random1 = parseInt(document.getElementById('random1').textContent);
+    const random2 = parseInt(document.getElementById('random2').textContent);
+    const operation = document.getElementById('operation').textContent;
+    const userResult = parseInt(document.getElementById('result-input').value);
+    let correctResult;
+
+    if (isNaN(random1) || isNaN(random2)) {
+        return;
+    }
+
+    try {
+        if (operation === '+') {
+            correctResult = random1 + random2;
+        } else if (operation === '-') {
+            correctResult = random1 - random2;
+        } else if (operation === 'x') {
+            correctResult = random1 * random2;
+        }
+
+        const resultInput = document.getElementById('result-input');
+        const showAnswerBtn = document.getElementById('show-answer-btn');
+        const correctAnswerDisplay = document.getElementById('correct-answer');
+
+        if (userResult === correctResult) {
+            resultInput.classList.remove('wrong'); // Yanlış ise kaldır
+            generateRandomNumbers();
+            clearResult();
+            showAnswerBtn.style.display = 'none'; // Cevabı gör butonunu sakla
+            correctAnswerDisplay.style.display = 'none'; // Doğru cevabı sakla
+        } else {
+            resultInput.classList.add('wrong'); // Kırmızı border ve titreme efekti
+            showAnswerBtn.style.display = 'flex'; // Cevabı gör butonunu göster
+            resultInput.value = ''; // Yanıtı temizle
+        }
+
+        // Doğru cevabı sakla
+        correctAnswerDisplay.textContent = `Doğru Cevap: ${correctResult}`;
+    } catch (error) {
+        console.error("Error calculating result:", error);
+    }
+}
+
+// Doğru cevabı saklamak için bir değişken tanımlayın
+let correctResult = null;
+
+// Kullanıcı sonuçları kontrol eder
+function checkResult() {
+    const random1 = parseInt(document.getElementById('random1').textContent);
+    const random2 = parseInt(document.getElementById('random2').textContent);
+    const operation = document.getElementById('operation').textContent;
+    const userResult = parseInt(document.getElementById('result-input').value);
+
+    // Rastgele sayıları kontrol et
+    if (isNaN(random1) || isNaN(random2)) {
+        return;
+    }
+
+    try {
+        // Doğru sonucu hesapla
+        if (operation === '+') {
+            correctResult = random1 + random2;
+        } else if (operation === '-') {
+            correctResult = random1 - random2;
+        } else if (operation === 'x') {
+            correctResult = random1 * random2;
+        }
+
+        const resultInput = document.getElementById('result-input');
+        const showAnswerBtn = document.getElementById('show-answer-btn');
+        const correctAnswerDisplay = document.getElementById('correct-answer');
+
+        // Kullanıcı doğru yanıt verirse
+        if (userResult === correctResult) {
+            resultInput.classList.remove('wrong'); // Yanlış mesajı kaldır
+            generateRandomNumbers(); // Yeni sayılar oluştur
+            clearResult(); // Giriş alanını temizle
+            showAnswerBtn.style.display = 'none'; // Cevabı gör butonunu gizle
+            correctAnswerDisplay.style.display = 'none'; // Doğru cevabı gizle
+        } else {
+            resultInput.classList.add('wrong'); // Kırmızı border ve titreme efekti
+            showAnswerBtn.style.display = 'flex'; // Cevabı gör butonunu göster
+            resultInput.value = ''; // Yanıtı temizle
+        }
+
+        // Doğru cevabı sakla
+        correctAnswerDisplay.textContent = `Doğru Cevap: ${correctResult}`;
+    } catch (error) {
+        console.error("Error calculating result:", error);
+    }
+}
+
+// Cevabı gösteren butona tıklandığında
+function showAnswer() {
+    const correctAnswerDisplay = document.getElementById('correct-answer');
+    correctAnswerDisplay.style.display = 'block'; // Doğru cevabı göster
+    correctAnswerDisplay.textContent = `Doğru Cevap: ${correctResult}`; // Doğru cevabı ayarla
+}
+
+// Cevabı gör butonuna click event ekle
+document.getElementById('show-answer-btn').addEventListener('click', showAnswer);
+
+// Yeni rastgele sayılar oluştur
+function generateRandomNumbers() {
+  const random1 = getRandomNumber();
+  const random2 = getRandomNumber();
+  const operation = document.getElementById('operation-select').value;
+
+  document.getElementById('random1').textContent = random1 || '';
+  document.getElementById('random2').textContent = random2 || '';
+  document.getElementById('operation').textContent = operation || ''; // İşlem butonunu güncelle
+
+  // Butonları başlangıçta sakla
+  document.getElementById('show-answer-btn').style.display = 'none';
+  document.getElementById('correct-answer').style.display = 'none';
+}
+
+// İşlemler için bir dizi tanımlayın
+const operations = ['+', '-', 'x']; // Kullanıcı tarafından tanımlanan işlemler
+let currentOperationIndex = 0; // Mevcut işlem indexi
+
+// İşlem butonuna tıklandığında çağrılan fonksiyon
+function changeOperation() {
+    currentOperationIndex = (currentOperationIndex + 1) % operations.length; // Sıradaki işleme geç
+    const operationButton = document.getElementById('operation');
+    const operationSelect = document.getElementById('operation-select');
+
+    // Yeni işlemi butona ve seçim alanına yerleştir
+    operationButton.textContent = operations[currentOperationIndex]; 
+    operationSelect.value = operations[currentOperationIndex]; // Seçim alanındaki değeri güncelle
+}
+
+// İşlem butonuna tıklandığında değiştir
+document.getElementById('operation').addEventListener('click', changeOperation);
+
+// Kullanıcı sonuçları kontrol eder
+function checkResult() {
+    const random1 = parseInt(document.getElementById('random1').textContent);
+    const random2 = parseInt(document.getElementById('random2').textContent);
+    const operation = operations[currentOperationIndex]; // Güncel işlemi al
+    const userResult = parseInt(document.getElementById('result-input').value);
+    let correctResult;
+
+    // Rastgele sayıları kontrol et
+    if (isNaN(random1) || isNaN(random2)) {
+        return;
+    }
+
+    try {
+        // Doğru sonucu hesapla
+        if (operation === '+') {
+            correctResult = random1 + random2;
+        } else if (operation === '-') {
+            correctResult = random1 - random2;
+        } else if (operation === 'x') {
+            correctResult = random1 * random2;
+        }
+
+        const resultInput = document.getElementById('result-input');
+        const showAnswerBtn = document.getElementById('show-answer-btn');
+        const correctAnswerDisplay = document.getElementById('correct-answer');
+
+        // Kullanıcı doğru yanıt verirse
+        if (userResult === correctResult) {
+            resultInput.classList.remove('wrong'); // Yanlış mesajı kaldır
+            generateRandomNumbers(); // Yeni sayılar oluştur
+            clearResult(); // Giriş alanını temizle
+            showAnswerBtn.style.display = 'none'; // Cevabı gör butonunu gizle
+            correctAnswerDisplay.style.display = 'none'; // Doğru cevabı gizle
+        } else {
+            resultInput.classList.add('wrong'); // Kırmızı border ve titreme efekti
+            showAnswerBtn.style.display = 'flex'; // Cevabı gör butonunu göster
+            resultInput.value = ''; // Yanıtı temizle
+        }
+
+        // Doğru cevabı sakla
+        correctAnswerDisplay.textContent = `Doğru Cevap: ${correctResult}`;
+    } catch (error) {
+        console.error("Error calculating result:", error);
+    }
+}
+
+  // Initialize the calculator
+  window.onload = generateRandomNumbers;
+  
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9a4b5cc
--- /dev/null
+++ b/index.html
@@ -0,0 +1,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>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..75ab6ad
--- /dev/null
+++ b/style.css
@@ -0,0 +1,188 @@
+/* General Styles */
+.calculator-container {
+  max-width: 350px;
+  margin: 20px auto;
+  text-align: center;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f8f9fa;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.settings {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.dropdown-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 48%;
+}
+
+.label {
+  font-size: 14px;
+  margin-bottom: 8px;
+  text-align: left;
+  width: 100%;
+}
+
+.dropdown {
+  padding: 12px;
+  font-size: 16px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  width: 100%;
+  background-color: #ffffff;
+  color: #495057;
+}
+
+.colorful {
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  color: #495057;
+}
+
+.checkbox-container {
+  font-size: 16px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Softer green tone for buttons */
+.green-btn {
+  width: 100%; /* Butonları tam genişlikte yap */
+  padding: 15px;
+  font-size: 24px;
+  background-color: green; /* Sade yeşil ton */
+  color: white;
+  border: none;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+
+.green-btn:hover {
+  background-color: darkgreen; /* Hover için daha koyu yeşil ton */
+}
+
+/* Random values and operation */
+.random-values-row {
+  display: flex;
+  justify-content: space-between; /* Butonlar arasında boşluk bırak */
+  margin-bottom: 30px;
+}
+
+.random-values-row .btn {
+  width: 30%; /* Her bir butonun genişliği */
+  padding: 15px; /* Butonların içindeki boşluk */
+  font-size: 24px; /* Buton yazı boyutu */
+  border-radius: 8px; /* Butonların kenar yuvarlama */
+}
+
+
+/* Result Input and Submit Button */
+.result-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.result {
+  padding: 15px;
+  background-color: #e9f7ef;
+  font-size: 22px;
+  text-align: right;
+  border: 2px solid #7bc96f; /* Başlangıçta yeşil kenarlık */
+  border-radius: 8px;
+  width: 100%; /* Genişliği tam genişlik olacak */
+  margin-bottom: 12px;
+  transition: border-color 0.3s ease; /* Kenarlık rengi geçişi */
+}
+
+/* Kırmızı border ve titreme efekti */
+.result.wrong {
+  border-color: red; /* Kırmızı kenarlık */
+  animation: shake 0.3s; /* Titreme efekti */
+}
+
+@keyframes shake {
+  0% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  50% { transform: translateX(5px); }
+  75% { transform: translateX(-5px); }
+  100% { transform: translateX(0); }
+}
+
+/* Cevabı gör butonu ve göz ikonu */
+#show-answer-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #495057;
+  margin-top: 10px;
+  cursor: pointer;
+}
+
+#show-answer-btn i {
+  margin-left: 5px; /* Göz ikonunun sağında boşluk */
+}
+
+#correct-answer {
+  display: none;
+  font-size: 16px;
+  color: green;
+  margin-top: 5px;
+}
+
+/* Keypad Styles */
+.keypad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 3 sütunlu ızgara yapısı */
+  grid-gap: 10px; /* Butonlar arasındaki boşluk */
+}
+
+.btn {
+  background-color: #e57373; /* Daha soft kırmızı ton */
+  color: white;
+  padding: 15px; /* Butonların içindeki boşluk */
+  font-size: 24px; /* Buton yazı boyutu */
+  border-radius: 8px; /* Butonların kenar yuvarlama */
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease; /* Buton üzerine gelindiğinde rengi değişim */
+}
+
+.btn:hover {
+  background-color: #d84343; /* Hover için hafif daha koyu ton */
+}
+
+.zero {
+  grid-column: span 3; /* 0 butonunu 3 sütun boyunca yay */
+}
+
+.message {
+  color: #ff073a;
+  font-weight: bold;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+  .settings {
+      flex-direction: column;
+      align-items: center;
+  }
+  .result {
+      font-size: 20px;
+  }
+  #enter-btn {
+      font-size: 20px;
+  }
+}