converter
احمد حمدي محمود
محول الوحدات الشامل
الإصدار النهائي
عنوان المشروع البرمجي:
محول الوحدات الشامل
فكرة المشروع
تطبيق متكامل لتحويل الوحدات في ثلاث فئات رئيسية: الطول، الوزن، والحجم. يتميز التطبيق بواجهة سهلة الاستخدام حيث يمكن للمستخدم اختيار نوع التحويل، ثم اختيار وحدة المصدر ووحدة الهدف، وإدخال القيمة ليقوم التطبيق بعرض النتيجة فوراً. يدعم التطبيق وحدات متعددة مثل (متر، كيلومتر، ميل، قدم، بوصة) للطول، (كيلوجرام، جرام، باوند، أونصة) للوزن، و(لتر، ملليلتر، جالون، كوب) للحجم.
SOURCE CODE
<!-- محول الوحدات الشامل - إعداد سيف علي -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>محول الوحدات الشامل</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Tajawal', 'Cairo', sans-serif;
background: linear-gradient(135deg, #0B3526 0%, #1a4d3a 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.converter-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
padding: 35px;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
max-width: 480px;
width: 100%;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,215,0,0.3);
}
h1 {
text-align: center;
color: #0B3526;
margin-bottom: 25px;
font-size: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
select, input {
width: 100%;
padding: 14px;
border: 2px solid #e0e0e0;
border-radius: 15px;
font-size: 16px;
font-family: inherit;
transition: all 0.3s ease;
}
select:focus, input:focus {
outline: none;
border-color: #D4AF37;
box-shadow: 0 0 0 3px rgba(212,175,55,0.2);
}
.convert-btn {
width: 100%;
background: linear-gradient(135deg, #0B3526, #1a4d3a);
color: white;
border: none;
padding: 15px;
border-radius: 15px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin: 20px 0;
}
.convert-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.result-box {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 25px;
border-radius: 20px;
text-align: center;
border: 1px solid #D4AF37;
}
.result-value {
font-size: 36px;
font-weight: bold;
color: #0B3526;
word-break: break-all;
}
.result-unit {
font-size: 16px;
color: #666;
margin-top: 8px;
}
.swap-btn {
background: #D4AF37;
color: #0B3526;
border: none;
padding: 8px 15px;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
margin: 10px auto;
display: inline-block;
}
@media (max-width: 500px) {
.converter-container { padding: 20px; }
.result-value { font-size: 28px; }
}
</style>
</head>
<body>
<div class="converter-container">
<h1>
<span>🔄</span>
محول الوحدات
<span>📐</span>
</h1>
<div class="form-group">
<label>📌 نوع التحويل:</label>
<select id="convertType" onchange="updateUnits()">
<option value="length">📏 الطول (Length)</option>
<option value="weight">⚖️ الوزن (Weight)</option>
<option value="volume">🧪 الحجم (Volume)</option>
</select>
</div>
<div class="form-group">
<label>📤 من:</label>
<select id="fromUnit"></select>
</div>
<div style="text-align: center;">
<button class="swap-btn" onclick="swapUnits()">🔄 تبديل</button>
</div>
<div class="form-group">
<label>📥 إلى:</label>
<select id="toUnit"></select>
</div>
<div class="form-group">
<label>✏️ أدخل القيمة:</label>
<input type="number" id="inputValue" placeholder="أدخل الرقم..." onkeypress="if(event.key==='Enter') convert()">
</div>
<button class="convert-btn" onclick="convert()">🔄 تحويل</button>
<div class="result-box">
<div class="result-value" id="resultValue">---</div>
<div class="result-unit" id="resultUnit">انتظر الإدخال</div>
</div>
</div>
<script>
const units = {
length: {
meter: { name: 'متر (m)', toBase: 1 },
kilometer: { name: 'كيلومتر (km)', toBase: 1000 },
mile: { name: 'ميل (mile)', toBase: 1609.34 },
foot: { name: 'قدم (ft)', toBase: 0.3048 },
inch: { name: 'بوصة (in)', toBase: 0.0254 }
},
weight: {
kilogram: { name: 'كيلوجرام (kg)', toBase: 1 },
gram: { name: 'جرام (g)', toBase: 0.001 },
pound: { name: 'باوند (lb)', toBase: 0.453592 },
ounce: { name: 'أونصة (oz)', toBase: 0.0283495 }
},
volume: {
liter: { name: 'لتر (L)', toBase: 1 },
milliliter: { name: 'ملليلتر (mL)', toBase: 0.001 },
gallon: { name: 'جالون (gal)', toBase: 3.78541 },
cup: { name: 'كوب (cup)', toBase: 0.236588 }
}
};
let currentType = 'length';
function updateUnits() {
currentType = document.getElementById('convertType').value;
const fromSelect = document.getElementById('fromUnit');
const toSelect = document.getElementById('toUnit');
fromSelect.innerHTML = '';
toSelect.innerHTML = '';
const unitList = units[currentType];
for (let key in unitList) {
const option1 = document.createElement('option');
option1.value = key;
option1.textContent = unitList[key].name;
fromSelect.appendChild(option1);
const option2 = document.createElement('option');
option2.value = key;
option2.textContent = unitList[key].name;
toSelect.appendChild(option2);
}
fromSelect.value = Object.keys(unitList)[0];
toSelect.value = Object.keys(unitList)[1];
}
function swapUnits() {
const fromSelect = document.getElementById('fromUnit');
const toSelect = document.getElementById('toUnit');
const temp = fromSelect.value;
fromSelect.value = toSelect.value;
toSelect.value = temp;
convert();
}
function convert() {
const inputValue = parseFloat(document.getElementById('inputValue').value);
if (isNaN(inputValue)) {
document.getElementById('resultValue').textContent = '⚠️ أدخل رقماً صحيحاً';
document.getElementById('resultUnit').textContent = 'الرجاء إدخال قيمة';
return;
}
const fromUnit = document.getElementById('fromUnit').value;
const toUnit = document.getElementById('toUnit').value;
const unitList = units[currentType];
const fromToBase = unitList[fromUnit].toBase;
const toToBase = unitList[toUnit].toBase;
const resultInBase = inputValue * fromToBase;
const result = resultInBase / toToBase;
document.getElementById('resultValue').textContent = result.toFixed(4);
document.getElementById('resultUnit').textContent = `${unitList[toUnit].name}`;
}
updateUnits();
</script>
</body>
</html>
نتيجة التنفيذ
اضغط على "تشغيل المشروع" لرؤية النتيجة
محول الوحدات - طول، وزن، حجم
تم التنفيذ والمراجعة تحت إشراف معلم أول المادة:
المهندس/ محمد محمود شاهين
مدرسة الشهيد أحمد مالك الثانوية
إدارة قلين التعليمية