اسکریپت برنامه جدول تناوبی  با کد منبع با استفاده از HTML، CSS و جاوا اسکریپت

دانلود اسکریپت برنامه جدول تناوبی با کد منبع با استفاده از HTML، CSS و جاوا اسکریپت

امروز در این پست برای شما کاربران عزیز وبسایت فایل سحرآمیز یک اسکریپت برنامه جدول تناوبی با کد منبع با استفاده از HTML، CSS و جاوا اسکریپت را آماده دانلود قرار داده ایم.

به برنامه جدول تناوبی خوش آمدید - راهنمای تعاملی شما برای کاوش در عناصر شیمیایی! این برنامه وب مدرن، جدول تناوبی را با طراحی تمیز و بصری زنده می کند که یادگیری شیمی را جذاب و بدون دردسر می کند. این برنامه که با HTML، CSS و جاوا اسکریپت ساخته شده است ، به شما امکان می دهد تمام 118 عنصر را مرور کنید، ویژگی های دقیق را مشاهده کنید و بر اساس دسته بندی هایی مانند فلزات، هالوژن ها و گازهای نجیب فیلتر کنید. چه دانش آموز، معلم یا علاقه مندان به علم باشید، این ابزار راهی پویا برای کشف ساختارهای اتمی، ویژگی های فیزیکی و اکتشافات تاریخی ارائه می دهد.

با ویژگی‌هایی مانند جستجوی فوری، انتخاب تصادفی عناصر، و طراحی واکنش‌گرا که به‌خوبی در هر دستگاهی کار می‌کند، در یک تجربه کاربری یکپارچه غوطه‌ور شوید. هر کارت عنصر اطلاعات کلیدی را در یک نگاه نشان می دهد، در حالی که مودال دقیق، بینش عمیق تری در مورد پیکربندی الکترون، نقاط ذوب و موارد دیگر ارائه می دهد. طرح بندی رنگی و انیمیشن های روان، ناوبری را بهبود می بخشد و درک داده های پیچیده را آسان می کند. اکنون کاوش را شروع کنید تا ببینید چگونه بلوک های سازنده جهان ما به هم متصل می شوند!

نمونه تصاویر در زمان اجرا

ویژگی های کلیدی:

• جدول تناوبی تعاملی - برای مشاهده اطلاعات دقیق روی هر عنصر کلیک کنید.
• عملکرد جستجو - عناصر را بر اساس نام، نماد یا عدد اتمی جستجو کنید. فیلتر طبقه بندی
• عناصر را بر اساس گروه فیلتر کنید (به عنوان مثال، فلزات قلیایی، هالوژن ها، گازهای نجیب).
• عناصر تصادفی - یک عنصر تصادفی را با یک کلیک کشف کنید.
• طراحی UI مدرن – چیدمان تمیز و پاسخگو با انیمیشن های زیبا.
• دسته بندی های رنگی - به راحتی گروه های عنصر را بر اساس رنگ شناسایی کنید.
• داده های جزئی عنصر – شامل جرم اتمی، نقطه ذوب/جوش، الکترونگاتیوی و غیره است.
• سازگار با موبایل – کاملاً برای استفاده از دسکتاپ و موبایل پاسخگو است.

فناوری های مورد استفاده:

HTML5 - ساختار برنامه را ارائه می دهد.
CSS3 - استایل، انیمیشن ها و پاسخگویی را کنترل می کند.
جاوا اسکریپت (ES6+) - تعامل و محتوای پویا را تقویت می کند.
طراحی واکنشگرا - تجربه یکپارچه را در همه دستگاه ها تضمین می کند.

نحوه استفاده

1. جدول تناوبی را مرور کنید

   • شبکه کامل عناصر را مشاهده کنید.

   • ماوس را روی عناصر نگه دارید تا جلوه ارتفاعی ظریف را ببینید.

2. جستجو برای عناصر

   • از نوار جستجو برای یافتن عناصر بر اساس نام ، نماد یا عدد اتمی استفاده کنید .

3. فیلتر بر اساس دسته

   • روی دکمه‌های دسته‌بندی (به عنوان مثال، هالوژن‌ها ، گازهای نجیب ) کلیک کنید تا فقط عناصر آن گروه نمایش داده شوند.

4. مشاهده اطلاعات تفصیلی

   • برای باز کردن یک نمایش مدال روی هر عنصر کلیک کنید:

     • جزئیات اصلی (عدد اتمی، نماد، نام)

     • خواص فیزیکی (نقاط ذوب/جوش، چگالی)

     • خواص اتمی (پیکربندی الکترون، الکترونگاتیوی)

     • اطلاعات کشف (کاشف، سال کشف)

5. یک عنصر تصادفی تولید کنید

   • روی "عنصر تصادفی" کلیک کنید تا اطلاعات یک عنصر تصادفی بلافاصله نمایش داده شود.

6. Modal را ببندید

   • روی دکمه "×" کلیک کنید یا خارج از مدال کلیک کنید تا بسته شود.

نحوه اجرا

• فایل زیپ کد منبع ارائه شده را دانلود کنید .
• فایل فشرده دانلود شده را اکسترکت کنید .
• فایل html را باز کنید و اکنون آماده هستید!

برای شما کاربران عزیز پیشنهاد دانلود داده می شود.