مدونة أحمد زعـــــــــكان

بدأت فكرة مواقع الويب في أواخر الثمانينات عندما اقترح تيم بيرنرز لي، عالم الكمبيوتر البريطاني، نظامًا لتبادل المعلومات عبر الإنترنت. كان الهدف هو تسهيل الوصول إلى المعلومات وتبادلها بين الباحثين. في عام 1990، أنشأ بيرنرز لي أول موقع ويب في العالم، والذي كان عبارة عن صفحة نصية بسيطة تحتوي على روابط تشعبية. هذا الموقع كان نقطة البداية لعصر جديد من التواصل الرقمي. مع مرور الوقت، تطورت تقنيات الويب وأصبحت المواقع أكثر تفاعلية وجاذبية. في منتصف التسعينات، ظهرت متصفحات الويب مثل Netscape Navigator وInternet Explorer، مما ساهم في انتشار استخدام الإنترنت. في أواخر التسعينات وأوائل الألفية الجديدة، شهدت مواقع الويب تطورًا كبيرًا مع ظهور تقنيات مثل HTML، CSS، وJavaScript. هذه التقنيات سمحت بإنشاء مواقع أكثر تعقيدًا وتفاعلية. مع تطور تقنيات الويب، ظهرت منصات إدارة المحتوى مثل WordPress وJoomla، مما جعل إنشاء وإدارة المواقع أسهل وأكثر فعالية. هذه المنصات ساعدت في نشر الويب بين المستخدمين غير التقنيين. في العقد الأخير، شهدت مواقع الويب تطورًا هائلًا مع ظهور تقنيات مثل HTML5 وCSS3، والتي سمحت بإنشاء...

تطبيق درجة الحرارة باستخدام React مقدمة: هل تساءلت يومًا عن كيفية بناء واجهة تفاعلية تعرض درجة الحرارة وتسمح للمستخدم بزيادة أو تقليل درجة الحرارة بشكل ديناميكي؟ في هذا المقال، سنستعرض مشروعًا بسيطًا وممتعًا يستخدم مكتبة React لتحقيق هذا الهدف. يعرض التطبيق درجة الحرارة الحالية ويسمح للمستخدم بتغييرها عبر الضغط على أزرار محددة. مكونات المشروع: المشروع يعتمد على مجموعة من المكونات الأساسية في React، ونستخدم مكتبة Bootstrap لتوفير تنسيقات أنيقة وسهلة الاستخدام. المكونات الرئيسية في هذا المشروع هي: Title , Button , و Tempreature . الكود ومكوناته: App.js : الملف الرئيسي الذي يجمع مكونات التطبيق. import React, { useState } from 'react' ; import Title from '../Title' ; import './tempreature.css' ; import Button from '../Button' ; export default function Tempreature () {   const [degre, setDegre] = useState( 0 );   function increaseDegre () {     setDegre( c => c + 1 ); // زيادة القيمة بمقدار 1   }   function decreaseDegre () {     setDe...

  إذا كنت تبحث عن طريقة متميزة لإضافة تنبيهات تفاعلية إلى تطبيقك، فإن هذا المشروع يقدم لك الحل المثالي. يعتمد هذا المشروع على مكتبة React ويستفيد من مكتبة Bootstrap لتوفير تنسيقات جاهزة وأنيقة. دعونا نستعرض كيفية بناء هذا التطبيق خطوة بخطوة. مقدمة تطبيق التنبيهات هو مكون بسيط ولكنه فعال في تحسين تجربة المستخدم من خلال عرض رسائل تنبيهية يمكن إغلاقها يدويًا أو تختفي تلقائيًا بعد مدة زمنية محددة. يمكن تخصيص التنبيهات لتظهر بأنواع مختلفة مثل "Primary"، "Secondary"، و "Success"، مما يوفر مرونة في الاستخدام. المكونات الرئيسية App.js : يقوم باستيراد ملفات التنسيق والمكونات الأساسية مثل AlertApp . يعرض مكون AlertApp في الصفحة الرئيسية للتطبيق. Title.js : مكون يعرض عنوان النص الممرر إليه، مع قيمة افتراضية "Title" إذا لم يتم تمرير أي نص. Button.js : مكون يعرض زر مع أيقونة ونص، مع إمكانية تمرير دالة تنفذ عند الضغط على الزر. AlertApp.js : المكون الرئيسي الذي يعرض مجموعة من التنبيهات المختلفة. يستخدم مكونات Title و Alert لعرض العنوان والتنبيهات على التوالي...

import React from 'react' ; // استيراد مكتبة React import Title from '../Title' ; // استيراد مكون Title من ملف آخر // مكون RandomColor لتغيير ألوان الخلفية عند النقر على الأزرار export default function RandomColor () {   // دالة handleClick لتغيير لون الخلفية ولون الزر الذي تم النقر عليه   function handleClick ( e ) {     console .log(getRandomColo()); // طباعة اللون العشوائي في الكونسول     let body = document .querySelector( "body" ); // الحصول على عنصر الجسم في الصفحة     body.style.background = getRandomColo(); // تعيين لون الخلفية للجسم بلون عشوائي     e.target.style.background = getRandomColo(); // تعيين لون خلفية الزر الذي تم النقر عليه بلون عشوائي   }   // دالة getRandomColo لتوليد لون عشوائي   function getRandomColo () {     let letters = '0123456789ABCDEF' ; // حروف وأرقام اللون الست عشري     let color = "#" ; // بداية الكود اللوني     for ( let i = 0 ; i < 6 ; i++) ...