أقسام الوصول السريع (مربع البحث)

برمجة8 تطبيقات8 شرح12 html8
📁 آخر الأخبار
0

مثال عملي باستخدام HTML وCSSوJavaScript لإنشاء نموذج عكس الكلمات #7

kroom87 kroom87

في هذا الدليل، سنتعلم كيفية إنشاء صفحة ويب تحتوي على نموذج لإدخال النص، وزر لعكس النص المدخل، وزر آخر لنسخ النص المعكوس إلى الحافظة. سنقوم بمحاذاة النص من اليمين إلى اليسار لجعل الصفحة مناسبة للغات التي تكتب من اليمين إلى اليسار مثل العربية.


المتطلبات الأساسية

  • محرر نصوص (مثل Notepad أو Visual Studio Code)
  • متصفح ويب (مثل Google Chrome أو Firefox)

خطوات العمل

  1. إنشاء ملف HTML
  2. كتابة كود CSS لتنسيق الصفحة
  3. إضافة كود JavaScript لعكس النص ونسخه إلى الحافظة
  4. عرض الملف في المتصفح

الكود الكامل

ملف HTML

قم بإنشاء ملف جديد واحفظه باسم index.html. انسخ الكود التالي والصقه في الملف:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عكس النص ونسخه</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            direction: rtl;
            text-align: right;
        }
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h1, label, p {
            margin: 10px 0;
        }
        input[type="text"],
        button {
            width: calc(100% - 22px); /* تعديل العرض لتناسب الحاوية */
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            width: 100%; /* عرض الزر بنسبة 100% */
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>عكس النص ونسخه</h1>
        <label for="inputText">أدخل النص هنا:</label>
        <input type="text" id="inputText" placeholder="اكتب هنا">
        <button onclick="reverseText()">عكس النص</button>
        <p>النص المعكوس:</p>
        <p id="outputText" style="background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc; border-radius: 4px;"></p>
        <button onclick="copyToClipboard()">نسخ النص المعكوس</button>
    </div>
    <script>
        function reverseText() {
            var inputText = document.getElementById("inputText").value;
            var reversedText = inputText.split('').reverse().join('');
            document.getElementById("outputText").textContent = reversedText;
        }
        function copyToClipboard() {
            var textToCopy = document.getElementById("outputText").textContent;
            navigator.clipboard.writeText(textToCopy).then(function() {
                alert('تم نسخ النص المعكوس إلى الحافظة');
            }, function() {
                alert('فشل في نسخ النص إلى الحافظة');
            });
        }
    </script>
</body>
</html>

شرح الكود

ملف HTML

  • <html lang="ar">: يحدد لغة الصفحة كالعربية، مما يساعد المتصفح على فهم اتجاه النص.
  • <meta charset="UTF-8">: يحدد مجموعة الأحرف المستخدمة كـ UTF-8 لضمان عرض النصوص بشكل صحيح.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: يضمن أن عرض الصفحة يتناسب مع عرض الجهاز المستخدم لعرضها.
  • <title>: يحدد عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح.

CSS

  • body: يحتوي على أنماط لتنسيق الصفحة ككل:

    • direction: rtl;: يحدد اتجاه النص والمحتوى من اليمين إلى اليسار.
    • text-align: right;: يحاذي النصوص إلى اليمين.
    • display: flex;, justify-content: center;, align-items: center;: يجعل المحتوى في وسط الصفحة عموديًا وأفقيًا.
    • height: 100vh;: يحدد ارتفاع الصفحة لملء النافذة بالكامل.
    • margin: 0;: يزيل الهوامش الافتراضية.

  • .container: يحدد أنماط لتنسيق الحاوية:

    • background-color: #fff;: يحدد لون الخلفية للحاوية.
    • padding: 20px;: يضيف حشوة داخل الحاوية.
    • border-radius: 8px;: يجعل زوايا الحاوية مستديرة.
    • box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);: يضيف ظلًا خفيفًا حول الحاوية.
    • width: 300px;: يحدد عرض الحاوية.

  • h1, label, p: يحدد أنماط للعناوين والتسميات والفقرات:

    • margin: 10px 0;: يضيف هوامش أعلى وأسفل النصوص.

  • input[type="text"], button: يحدد أنماط لمربعات الإدخال والأزرار:

    • width: calc(100% - 22px);: يجعل العناصر تملأ العرض الكامل للحاوية مع احتساب الحواف الداخلية.
    • padding: 10px;: يضيف حشوة داخل العناصر.
    • margin: 5px 0;: يضيف هوامش حول العناصر.
    • border: 1px solid #ccc;: يحدد حدود العناصر.
    • border-radius: 4px;: يجعل زوايا العناصر مستديرة.

  • button: يحدد أنماط إضافية للأزرار:

    • background-color: #007bff;: يحدد لون الخلفية.
    • color: #fff;: يحدد لون النص.
    • border: none;: يزيل الحدود الافتراضية.
    • cursor: pointer;: يغير المؤشر عند المرور فوق الزر.

  • button:hover: يحدد أنماط للزر عند التمرير فوقه:

    • background-color: #0056b3;: يغير لون الخلفية عند التمرير.

JavaScript

  • function reverseText(): دالة JavaScript لعكس النص.

    • var inputText = document.getElementById("inputText").value;: يأخذ النص المدخل من مربع الإدخال.
    • var reversedText = inputText.split('').reverse().join('');: يعكس النص عن طريق تحويله إلى مصفوفة، ثم عكس ترتيب العناصر، ثم جمع العناصر في سلسلة نصية مرة أخرى.
    • document.getElementById("outputText").textContent = reversedText;: يعرض النص المعكوس داخل عنصر p بالمعرف id الخاص به.

  • function copyToClipboard(): دالة JavaScript لنسخ النص إلى الحافظة.

    • var textToCopy = document.getElementById("outputText").textContent;: يأخذ النص المعروض في العنصر outputText.
    • navigator.clipboard.writeText(textToCopy).then(function() { alert('تم نسخ النص المعكوس إلى الحافظة'); }, function() { alert('فشل في نسخ النص إلى الحافظة'); });: ينسخ النص إلى الحافظة ويعرض رسالة تأكيد.

عرض الملف في المتصفح

  1. فتح الملف في المتصفح:
    • افتح المجلد الذي يحتوي على ملف index.html.
    • انقر بزر الفأرة الأيمن على الملف واختر "فتح باستخدام" (Open With) ثم اختر المتصفح الذي تفضله (مثل Google Chrome أو Firefox).

النتيجة

عند فتح الملف في المتصفح، سترى صفحة تحتوي على مربع إدخال وزر لعكس النص، حيث تتلاءم جميع العناصر بشكل جيد مع عرض الحاوية. عند إدخال نص في المربع والنقر على الزر "عكس النص"، سيتم عرض النص المعكوس أسفل الزر. يمكنك بعد ذلك النقر على الزر "نسخ النص المعكوس" لنسخ النص المعكوس إلى الحافظة.

إذا كان لديك أي استفسارات أو تحتاج إلى مزيد من المساعدة، فلا تتردد في طرحها!

kroom87
kroom87

مقالات قد تهمك

تعليقات