-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 3.15 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>الة حاسبة</title><style>input,select,button {box-sizing:border-box;}body{background-color: rgb(0, 191, 255);font-family: Arial;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;padding: 0;box-sizing: border-box;}.calculator {width: 90%;max-width: 300px;padding: 20px;text-align: center;background-color: white;border-radius: 10px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);}.calculator label,.calculator input,.calculator select,.calculator button { width: 100%;font-size: 2rem;font-weight: 600;margin-bottom: 20px;padding: 10px;font-size: 16px;font-weight: bold;}.calculator label{text-align: left;display: block;}.calculator input,.calculator select {border: 1px solid #ccc;border-radius: 5px;}.calculator button {background-color: green;color: white;border: none;cursor: pointer;border-radius: 5px;}.calculator button:hover {background-color: darkgreen;}.result {background-color: lime;padding: 10px;border-radius: 5px;}@media (max-width:360px) {body {background-color: rgb(0, 255, 128);font-family: Arial;display:flex;justify-content: center;align-items:center;height: 100vh;margin: 0;padding: 0;box-sizing: border-box;}.calculator{width: 90%;max-width: 300px;padding: 20px;text-align: center;background-color: white;border-radius: 10px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);}html {font-size: 100%;margin: 0%;padding: 0%;}}</style></head><body><div class="calculator"><label for="num1">أدخل القيمه الاولي</label><input type="number" id="num1"><label for="num2">أدخل القيمه الثانية</label><input type="number" id="num2"><label for="operation">أختر العملية الحسابية</label><select id="operation"><option value="">أختر العملية الحسابية</option><option value="add">جمع</option><option value="subtract">طرح</option><option value="multiply">ضرب</option><option value="divide">قسمة</option> </select> <button onclick="calculate()">حساب</button> <div class="result" id="result">الناتج = </div></div><script>function add(x, y){return x + y;}function subtract(x, y){return x - y;}function multiply(x, y){return x * y;}function divide(x, y) {if (y != 0) {return x / y;}else {return "خطأ: القسمة على الصفر";}}function calculate(){var num1 = parseFloat(document.getElementById('num1').value);var num2 = parseFloat(document.getElementById('num2').value);var operation = document.getElementById('operation').value;var result;if (isNaN(num1) || isNaN(num2)) { alert("الرجاء إدخال ألارقام ");return;}switch (operation) {case '':alert("الرجاء اختيار العملية الحسابية");return;case 'add':result = add(num1, num2);break;case 'subtract':result = subtract(num1, num2);break;case 'multiply':result = multiply(num1, num2);break;case 'divide':result = divide(num1, num2);break;}if (typeof result === 'string') {alert(result);} else {document.getElementById('result').innerText = 'الناتج = ' + result + ' جنية ';alert('الناتج = ' + result + ' جنية ');}}</script></body></html>