موسوعة الأكواد والسكربتات الجاهزة

دليل الشفرات والسكربتات البرمجية المتكاملة

يتيح للزوار نسخ الأكواد أو الروابط البرمجية مباشرة إلى الحافظة:

function copyCodeSnippet(textToCopy) {
    navigator.clipboard.writeText(textToCopy).then(() => {
        alert("تم نسخ الكود بنجاح!");
    });
}

يظهر الزر تدريجياً عندما يتصفح المستخدم لأسفل الموقع ويعيده للأعلى بانسيابية:

window.onscroll = function() {
    let btn = document.getElementById("topBtn");
    btn.style.display = (window.scrollY > 300) ? "block" : "none";
};
function backToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

قالب منبثق لعرض رسائل تحذيرية أو إعلانات للمستخدمين داخل الموقع:

function openModal() {
    document.getElementById("customModal").style.display = "flex";
}
function closeModal() {
    document.getElementById("customModal").style.display = "none";
}

تصفية وعرض العناصر المطابقة فوراً حسب ما يكتبه المستخدم في الحقل:

function liveSearch() {
    let query = document.getElementById("searchField").value.toLowerCase();
    let items = document.getElementsByClassName("item-card");
    for (let i = 0; i < items.length; i++) {
        let text = items[i].innerText.toLowerCase();
        items[i].style.display = text.includes(query) ? "block" : "none";
    }
}

عرض محتويات مختلفة ضمن نفس المساحة وتنقل سلس بدون إعادة تحميل:

function showTab(evt, tabId) {
    let contents = document.getElementsByClassName("tab-content");
    for (let c of contents) c.style.display = "none";
    document.getElementById(tabId).style.display = "block";
}

إظهار شاشة تحميل مؤقتة ريثما يتم اكتمال تحميل عناصر الصفحة:

window.addEventListener("load", () => {
    let loader = document.getElementById("loader");
    loader.style.opacity = "0";
    setTimeout(() => loader.style.display = "none", 400);
});

حساب الوقت المتبقي لأي فعالية أو إطلاق مشروع قادم بالأيام والساعات:

let targetDate = new Date("Dec 31, 2026 00:00:00").getTime();
let timerInterval = setInterval(() => {
    let now = new Date().getTime();
    let diff = targetDate - now;
    let days = Math.floor(diff / (1000 * 60 * 60 * 24));
    console.log(days + " يوم متبقي");
}, 1000);

منع النقر بزر الفأرة الأيمن واختصارات لوحة المفاتيح لحماية الأكواد والمقالات:

document.addEventListener('contextmenu', e => e.preventDefault());
document.onkeydown = function(e) {
    if (e.keyCode == 123 || (e.ctrlKey && e.shiftKey && e.keyCode == 73)) return false;
};

إظهار وإخفاء شريط التنقل العلوي بشكل أنيق على الشاشات الصغيرة:

function toggleMobileMenu() {
    let nav = document.getElementById("navMenu");
    nav.classList.toggle("active-menu");
}

رسالة تنبيه عائمة تظهر أسفل الشاشة لفترة وجيزة ثم تختفي تلقائياً:

function showToast(msg) {
    let t = document.createElement("div");
    t.className = "toast-box";
    t.innerText = msg;
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 3000);
}

التأكد من أن الحقول الإجبارية غير فارغة قبل إرسال النموذج:

function validateFormInput() {
    let val = document.forms["regForm"]["username"].value;
    if (val.trim() === "") {
        alert("يرجى إدخال اسم المستخدم بشكل صحيح!");
        return false;
    }
}

إظهار وإخفاء نص الإجابة عند الضغط على السؤال:

let accTriggers = document.getElementsByClassName("accordion-btn");
for (let i = 0; i < accTriggers.length; i++) {
    accTriggers[i].addEventListener("click", function() {
        this.classList.toggle("active");
        let panel = this.nextElementSibling;
        panel.style.display = (panel.style.display === "block") ? "none" : "block";
    });
}

تكبير الصور المصغرة داخل نافذة مركزية عند النقر عليها:

function openLightbox(imgElement) {
    document.getElementById("lightboxModal").style.display = "block";
    document.getElementById("lightboxImg").src = imgElement.src;
}

الاحتفاظ بتفضيلات المستخدم (كالوضع الليلي مثلاً) حتى بعد إعادة فتح الموقع:

function savePreference(key, val) {
    localStorage.setItem(key, val);
}
function loadPreference(key) {
    return localStorage.getItem(key);
}

توليد ألوان تدرجية عشوائية عند الضغط على زر التخصيص:

function changeRandomBackground() {
    let color1 = '#' + Math.floor(Math.random()*16777215).toString(16);
    let color2 = '#' + Math.floor(Math.random()*16777215).toString(16);
    document.body.style.background = `linear-gradient(135deg, ${color1}, ${color2})`;
}

إنشاء سلاسل آمنة تتضمن حروفاً وأرقاماً ورموزاً لاستخدامها في الأمان:

function generatePassword(length = 12) {
    let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!";
    let pass = "";
    for (let i = 0; i < length; i++) {
        pass += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return pass;
}

شريط يتحرك في أعلى الصفحة ليوضح نسبة ما أنجزه الزائر من قراءة الموضوع:

window.onscroll = function() {
    let winScroll = document.documentElement.scrollTop;
    let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrolled = (winScroll / height) * 100;
    document.getElementById("progressBar").style.width = scrolled + "%";
};

التعرف على ما إذا كان المستخدم يتصفح من هاتف محمول أو حاسوب شخصي:

function detectDeviceType() {
    if (/Mobi|Android/i.test(navigator.userAgent)) {
        return "هاتف محمول";
    }
    return "حاسوب مكتبي";
}

نقل الزائر إلى رابط أو صفحة أخرى بعد انقضاء عدد معين من الثواني:

function redirectAfterDelay(targetUrl, seconds) {
    setTimeout(() => {
        window.location.href = targetUrl;
    }, seconds * 1000);
}

زر تبديل يتيح للمستخدم رؤية الحروف المخفية في حقل كلمة السر:

function togglePasswordVisibility() {
    let inputField = document.getElementById("passwordField");
    inputField.type = (inputField.type === "password") ? "text" : "password";
}

مراقبة عدد الحروف المكتوبة في حقل الإدخال وتنبيه المستخدم عند الحد الأقصى:

function countCharacters() {
    let textLength = document.getElementById("commentBox").value.length;
    document.getElementById("charCount").innerText = textLength + " حرف";
}

استدعاء نافذة الطباعة الخاصة بالمتصفح بضغطة زر واحدة:

function printCurrentPage() {
    window.print();
}

عرض العناوين أو الترحيب بحروف تتسابق وتظهر كأن شخصاً يكتبها حياً:

let i = 0;
let txt = "أهلاً بك في منصة Smart Web الاحترافية..";
function typeWriterEffect() {
    if (i < txt.length) {
        document.getElementById("typeTarget").innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriterEffect, 50);
    }
}

تنبيه المستخدم فوراً إذا انقطع اتصال الإنترنت أو عاد للعمل لديه:

window.addEventListener('offline', () => {
    alert("تنبيه: انقطع اتصالك بالإنترنت!");
});
window.addEventListener('online', () => {
    alert("عادت التغطية والاتصال بالإنترنت بنجاح.");
});

إضافة حركة تفاعلية ناعمة للبطاقات والصور عند مرور الماوس فوقها عبر CSS:

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.25);
}

التحقق مما إذا كان نظام تشغيل المستخدم مضبوطاً تلقائياً على الوضع الداكن:

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
    console.log("المستخدم يفضل الوضع الداكن");
}

تنظيف النصوص وحذف الفراغات غير الضرورية من بدايتها ونهايتها:

function cleanUserText(str) {
    return str.trim().replace(/\s+/g, ' ');
}

قفل زر الإرسال فور الضغط عليه لمنع إرسال نفس الطلب مرتين بالخطأ:

function disableButtonTemporarily(btn) {
    btn.disabled = true;
    btn.innerText = "جاري المعالجة...";
    setTimeout(() => {
        btn.disabled = false;
        btn.innerText = "إرسال الطلب";
    }, 3000);
}

جلب وقت وواريخ تحديث الصفحة وبرمجتها لتظهر للزوار أسفل الموقع:

function displayLastModifiedDate() {
    let modDate = document.lastModified;
    document.getElementById("updateTime").innerText = "آخر تحديث: " + modDate;
}

تنزيل النصوص أو البيانات المعروضة في الموقع على شكل ملف نصي (.txt) بجهاز الزائر:

function exportTextToFile(filename, textContent) {
    let blob = new Blob([textContent], { type: 'text/plain;charset=utf-8' });
    let link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
}