« طراحی سایت و گرافیک »

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: چهاردهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

410 views18:26

8:51

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: پانزدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

500 views18:28

This media is not supported in your browser

VIEW IN TELEGRAM

472 views11:17

✅ آموزش ساخت کپچا ساده با استفاده از جاوااسکریپت 👇👇

<!-- https://yangx.top/Web_Designer98 -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@Web_Designer98</title>
    <style>
      /* https://yangx.top/Web_Designer98 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        #captcha {
            font-size: 24px;
            margin: 10px;
        }
     /*  https://yangx.top/Web_Designer98 */
    </style>
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
<h2>تأیید کپچا @Web_Designer98</h2>
<div id="captcha"></div>
<input type="text" id="captchaInput" placeholder="کد را وارد کنید">
<button onclick="validateCaptcha()">تأیید</button>
<p id="result"></p>
<!-- https://yangx.top/Web_Designer98 -->
<script>
    //https://yangx.top/Web_Designer98
    function generateCaptcha() {
        const captchaLength = 5;
        let captcha = '';
        for (let i = 0; i < captchaLength; i++) {
            captcha += Math.floor(Math.random() * 10); // تولید اعداد ۰ تا ۹
        }

      //https://yangx.top/Web_Designer98 
 document.getElementById('captcha').textContent = captcha;
        return captcha;
    }

    let generatedCaptcha = generateCaptcha();

    function validateCaptcha() {
        const userInput = document.getElementById('captchaInput').value;
        const result = document.getElementById('result');
        if (userInput === generatedCaptcha) {
            result.textContent = 'کپچا موفقیت آمیز بود! ✅';
        } else {
            result.textContent = 'کپچا ناموفق بود. لطفاً دوباره امتحان کنید. ❌';
            generatedCaptcha = generateCaptcha(); // تولید دوباره کپچا
            document.getElementById('captchaInput').value = ''; // پاک کردن فیلد ورودی
        }
    }
</script>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

💢 توضیحات:
1⃣ این کد یک کپچا عددی تصادفی ایجاد می‌کند.
2⃣ کاربر باید عدد تولید شده را در فیلد ورودی وارد کند.
3⃣ وقتی کاربر روی دکمه "تأیید" کلیک می‌کند، کپچا بررسی می‌شود و نتیجه نمایش داده می‌شود.
4⃣ اگر کاربر پاسخ نادرستی وارد کند، کپچا به‌طور تصادفی دوباره تولید می‌شود.
#css #html #js

🌈 Web_Designer98.t.me

👍5

599 views11:27

« طراحی سایت و گرافیک » via @chToolsBot

🎁 لیست دوره‌ های آموزشی کانال

547 views15:03

📣 لیست پکیج ها 📣

This media is not supported in your browser

VIEW IN TELEGRAM

543 views15:04

11:35

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: شانزدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

555 views15:05

10:51

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: هفدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

418 views16:07

21:16

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: هجدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

371 views17:07

This media is not supported in your browser

VIEW IN TELEGRAM

310 views10:46

✅ آموزش ساخت Toast Message با جاوااسکریپت:

<!-- https://yangx.top/Web_Designer98 -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title> @Web_Designer98</title>
<style type="text/css">
body {
    font-family: Arial, sans-serif;
}

.toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

.toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
    from { bottom: 0; opacity: 0; }
    to { bottom: 30px; opacity: 1; }
}

@keyframes fadeout {
    from { bottom: 30px; opacity: 1; }
    to { bottom: 0; opacity: 0; }
}
</style>
<!-- https://yangx.top/Web_Designer98 -->
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
    <button onclick="showToast()">نمایش پیام</button>
    <div id="toast" class="toast">پیام شما با موفقیت ارسال شد!</div>

<!-- https://yangx.top/Web_Designer98 -->

<!-- https://yangx.top/Web_Designer98 -->
<script type="text/Javascript">
function showToast() {
    const toast = document.getElementById("toast");
    toast.classList.add("show");

    setTimeout(() => {
        toast.classList.remove("show");
    }, 3000); 
}

</script>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

🌀 توضیحات:
➕ با کلیک بر روی دکمه "نمایش پیام"، تابع showToast فراخوانی می‌شود که پیام توست را نمایش می‌دهد، پیام به مدت 3 ثانیه در صفحه باقی می‌ماند و سپس محو می‌شود.
#css #html #js

🌈 Web_Designer98.t.me

👍2

367 views10:56