مشروع قائمة المهام

-

 



تطبيق المهام

تطبيق المهام  هو أداة لتنظيم وإدارة المهام اليومية. يتيح للمستخدمين إضافة المهام، تعديلها، حذفها، وتصنيفها إلى مهام منجزة وغير منجزة.



الخصائص الرئيسية

  1. إضافة المهام: يمكن للمستخدم إدخال وصف المهمة في حقل النص والضغط على زر "إضافة" لإضافتها إلى القائمة.

  2. حذف المهام: يمكن للمستخدم حذف المهام عن طريق النقر على أيقونة الحذف.

  3. تعديل المهام: يمكن للمستخدم تعديل وصف المهمة عن طريق النقر على أيقونة التعديل، تعديل الوصف، وحفظ التعديلات.

  4. تصنيف المهام: يتم تصنيف المهام إلى "جميع المهام"، "المهام المنجزة"، و"المهام غير المنجزة". يمكن للمستخدم التبديل بين التصنيفات باستخدام أزرار التبديل.

  5. إشعارات التوست: يتم عرض رسائل توست لإعلام المستخدم عند إضافة، تعديل، أو حذف مهمة بنجاح.




المكونات الرئيسية

  1. Notes: المكون الرئيسي الذي يحتوي على جميع المكونات الأخرى. يضم أيضًا دوال معالجة لإضافة، تعديل، وحذف المهام.

  2. Ideas: مكون فرعي يعرض المهام الفردية مع أيقونات التعديل والحذف.




التنسيقات

  1. TextField: لإدخال وصف المهمة. يتم تنسيقه ليكون متناسقًا مع جميع الشاشات، بخلفية بيضاء وظلال خفيفة.

  2. Button: زر الإضافة مع خلفية بيضاء ونص أسود وحدود سوداء، يتغير عند التمرير وحالة التعطيل.

  3. ToggleButtonGroup: أزرار التبديل لتصنيف المهام مع أيقونات تدل على كل نوع من المهام.

  4. List: لعرض المهام مع خطوط فاصلة بين العناصر وظلال خفيفة حول القسم.




الأدوات والمكتبات المستخدمة

  1. React: لبناء واجهة المستخدم.

  2. Material-UI: لمكونات واجهة المستخدم مثل الأزرار وحقول النصوص.

  3. React Context: لإدارة حالة التطبيق وإشعارات التوست.

  4. CSS: لتنسيق المكونات والعناصر.




كيفية العمل

  • بدء التطبيق: قم بتشغيل التطبيق باستخدام npm start وسترى قائمة المهام.

  • إضافة المهام: اكتب وصف المهمة في حقل النص وانقر على "إضافة".

  • تعديل المهام: انقر على أيقونة التعديل بجانب المهمة، قم بتعديل النص، ثم احفظ التعديلات.

  • حذف المهام: انقر على أيقونة الحذف بجانب المهمة.

  • تصنيف المهام: استخدم أزرار التبديل للتبديل بين جميع المهام، المهام المنجزة، والمهام غير المنجزة.



تعليقات

إرسال تعليق

المشاركات الشائعة

ما هو JSX في React؟

-
  ما هو JSX في React؟ JSX  (JavaScript XML) هو امتداد لصياغة JavaScript يسمح لك بكتابة عناصر شبيهة بـ HTML داخل JavaScript. يتم تحويل JSX إلى استدعاءات دوال JavaScript بواسطة أدوات مثل Babel، مما يجعل كتابة واجهات المستخدم أكثر سهولة ووضوحًا. كيفية استخدام JSX إليك مثال بسيط لاستخدام JSX: const element = <h1> مرحبًا، عالم! </h1> ; في هذا المثال،   element   هو عنصر React يتم إنشاؤه باستخدام صياغة JSX. يمكن تضمين تعابير JavaScript داخل JSX باستخدام الأقواس المعقوفة   {} : const name = 'علي' ; const element = <h1> مرحبًا، {name}! </h1> ; فوائد استخدام JSX وضوح الكود : يجعل الكود أكثر وضوحًا وسهولة في القراءة، حيث يمكنك رؤية هيكلية HTML مباشرة داخل JavaScript. قوة JavaScript : يمكنك استخدام تعابير JavaScript داخل JSX، مما يمنحك مرونة كبيرة في بناء واجهات المستخدم. أخطاء أقل : يساعدك JSX على اكتشاف الأخطاء في وقت مبكر بفضل الرسائل التحذيرية المفيدة التي يوفرها. امتداد الملفات: js أو jsx؟ .js : يمكن استخدام هذا الامتداد لملفات JavaScript ال...
قراءة المزيد

المكونات (Components) في React

-
  المكونات (Components) في React المكونات  هي اللبنات الأساسية لأي تطبيق React. يمكن اعتبارها كقطع صغيرة من واجهة المستخدم التي يمكن إعادة استخدامها وتجميعها لإنشاء واجهات مستخدم معقدة. كيفية استخدام المكونات إنشاء مكون : يمكنك إنشاء مكون كدالة أو كصف. إليك مثال لمكون كدالة: function Welcome ( props ) {   return <h1> مرحبًا، {props.name} </h1> ; } استخدام المكون : يمكنك استخدام المكون داخل مكونات أخرى: function App () {   return (     <div>       <Welcome name="علي" />       <Welcome name="فاطمة" />     </div>   ); } فوائد المكونات إعادة الاستخدام : يمكنك استخدام نفس المكون في أماكن متعددة في تطبيقك، مما يقلل من تكرار الكود. التنظيم : تقسيم واجهة المستخدم إلى مكونات صغيرة يجعل الكود أكثر تنظيماً وسهولة في الصيانة. الاختبار : يمكن اختبار كل مكون بشكل مستقل، مما يسهل اكتشاف الأخطاء وإصلاحها. الأداء : React يقوم بتحديث الأجزاء الضرورية فقط من واجهة المستخدم، مما يحسن الأداء. ا...
قراءة المزيد

مثال بسيط يوضح كيفية استخدام createContext و useContext لتمرير البيانات بين المكونات في React

-
  الخطوات الأساسية إنشاء السياق  باستخدام  createContext . توفير قيمة السياق  باستخدام  Provider . قراءة قيمة السياق  باستخدام  useContext . مثال عملي 1. إنشاء السياق أولاً، نقوم بإنشاء سياق جديد باستخدام  createContext . // ThemeContext.js import { createContext } from 'react' ; export const ThemeContext = createContext( 'light' ); 2. توفير قيمة السياق نقوم بلف المكونات في  Provider  لتوفير قيمة السياق. // App.js import React, { useState } from 'react' ; import { ThemeContext } from './ThemeContext' ; import Page from './Page' ; function App () {   const [theme, setTheme] = useState( 'dark' );   const toggleTheme = () => {     setTheme(( prevTheme ) => (prevTheme === 'dark' ? 'light' : 'dark' ));   };   return (     <ThemeContext.Provider value= {{ theme, toggleTheme }}>       <Page />     </ThemeContext.Provider>   ); } expor...
قراءة المزيد

عرض القوائم باستخدام JSX في React.

-
  عرض القوائم باستخدام JSX في React، ستعتمد على ميزات JavaScript مثل الحلقة  for  ودالة  map()  الخاصة بالمصفوفات لعرض قوائم من المكونات. على سبيل المثال، لنفترض أن لديك مصفوفة من المنتجات: const products = [   { title: 'Cabbage' , id: 1 },   { title: 'Garlic' , id: 2 },   { title: 'Apple' , id: 3 }, ]; داخل المكون الخاص بك، استخدم دالة   map()   لتحويل مصفوفة المنتجات إلى مصفوفة من عناصر   <li> : const listItems = products.map( product =>   <li key={product.id}>     {product.title}   < /li> ); return (   <ul>{listItems}</u l> ); لاحظ كيف أن  <li>  يحتوي على خاصية  key . لكل عنصر في القائمة، يجب أن تمرر سلسلة نصية أو رقمًا يحدد هذا العنصر بشكل فريد بين إخوته. عادةً، يجب أن يأتي المفتاح من بياناتك، مثل معرف قاعدة البيانات. يستخدم React مفاتيحك لمعرفة ما حدث إذا قمت بإدراج أو حذف أو إعادة ترتيب العناصر لاحقًا. مثال كامل: const products = [   { t...
قراءة المزيد

مفهوم إعادة الاستخدام (Reusability)

-
  مفهوم   إعادة الاستخدام (Reusability)   في البرمجة يشير إلى القدرة على استخدام نفس الكود أو المكونات البرمجية في مشاريع أو تطبيقات مختلفة دون الحاجة إلى إعادة كتابتها من الصفر. هذا المفهوم يعزز الكفاءة ويقلل من التكرار والأخطاء في البرمجة. إليك بعض النقاط الرئيسية حول إعادة الاستخدام: الكفاءة والسرعة : إعادة استخدام الكود الموجود يوفر الوقت والجهد، حيث لا يحتاج المطورون إلى كتابة كل شيء من البداية في كل مرة. تقليل الأخطاء : الكود الذي يتم إعادة استخدامه يكون قد تم اختباره وتصحيحه مسبقًا، مما يقلل من احتمالية وجود أخطاء جديدة. الاتساق في التصميم : إعادة استخدام الكود يضمن أن الوظائف المتشابهة تعمل بنفس الطريقة في جميع أجزاء المشروع، مما يعزز تجربة المستخدم. توفير الموارد : إعادة استخدام الكود يوفر الموارد، حيث يمكن للمطورين الاستفادة من العمل السابق بدلاً من إعادة اختراعه. سهولة الصيانة والتحديث : عندما يتم إعادة استخدام الكود، يمكن إجراء التعديلات أو الإصلاحات في مكان واحد فقط، مما يسهل عملية الصيانة .
قراءة المزيد

إضافة الأنماط في React

-
في React، تحدد فئة CSS باستخدام  className . تعمل هذه الطريقة بنفس طريقة خاصية  class  في HTML: <img className= "avatar" /> ثم تكتب قواعد CSS الخاصة بها في ملف CSS منفصل: /* في ملف CSS الخاص بك */ .avatar {   border-radius: 50 %; }   React لا يحدد كيفية إضافة ملفات CSS. في أبسط الحالات، يمكنك إضافة وسم   <link>   إلى HTML الخاص بك. إذا كنت تستخدم أداة بناء أو إطار عمل، فاستشر وثائقها لتتعلم كيفية إضافة ملف CSS إلى مشروعك.
قراءة المزيد

الأمر npx create-react-app my-app

-
  الأمر   npx create-react-app my-app   يُستخدم لإنشاء تطبيق React جديد بسهولة وسرعة. دعني أشرح لك الخطوات والمفهوم: npx : هذه أداة تأتي مع npm (مدير حزم Node.js) بدءًا من الإصدار 5.2. تتيح لك تشغيل حزم npm دون الحاجة إلى تثبيتها عالميًا على جهازك. create-react-app : هذه حزمة تُستخدم لإنشاء تطبيقات React مع إعدادات جاهزة. توفر لك بيئة تطوير متكاملة دون الحاجة إلى إعدادات معقدة. my-app : هذا هو اسم المجلد الذي سيتم إنشاء التطبيق داخله. يمكنك اختيار أي اسم تريده. كيفية الاستخدام: افتح سطر الأوامر (Terminal). اكتب الأمر التالي واضغط Enter: npx create-react-app my-app انتظر حتى يتم إنشاء المشروع. ستلاحظ أنه تم إنشاء مجلد جديد باسم  my-app   يحتوي على جميع الملفات الضرورية لتشغيل تطبيق React. ماذا يحدث بعد ذلك؟ سيتم إنشاء هيكلية مشروع جاهزة تحتوي على ملفات مثل  index.html  و App.js  و package.json . سيتم تثبيت جميع التبعيات اللازمة مثل React وReact-DOM. يمكنك بدء تشغيل التطبيق باستخدام الأمر: cd my-app npm start لماذا يُستخدم؟ سهولة البدء : لا تحتاج إل...
قراءة المزيد

تطبيق توليد لون عشوائي للصفحة في React

-
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++) ...
قراءة المزيد

10 أمثلة على استخدام useState مع onChange في React

-
1. تحديث نص الإدخال import React, { useState } from 'react' ; const handleInputChange = ( setText ) => (event) => {   setText(event.target.value); }; const TextInput = () => {   const [text, setText] = useState( '' );   return (     <div>       <input type= "text" value= {text} onChange= {handleInputChange(setText)} />       <p> {text} </p>     </div>   ); }; export default TextInput; شرح:  هذا المثال يوضح كيفية تحديث نص الإدخال وعرضه في الوقت الحقيقي. 2. تحديث قيمة رقمية import React, { useState } from 'react' ; const handleNumberChange = ( setNumber ) => (event) => {   setNumber( Number (event.target.value)); }; const NumberInput = () => {   const [number, setNumber] = useState( 0 );   return (     <div>       <input type= "number" value= {number} onChange= {handleNumberChange(setNumber)} /> ...
قراءة المزيد

عرض البيانات باستخدام JSX في React

-
  عرض البيانات باستخدام JSX JSX يسمح لك بكتابة تعليمات HTML داخل JavaScript. الأقواس المعقوفة  {}  تسمح لك “بالعودة” إلى JavaScript بحيث يمكنك تضمين بعض المتغيرات من الكود الخاص بك وعرضها للمستخدم. على سبيل المثال، هذا الكود سيعرض  user.name : return (   <h1>     {user.name}   </h1> ); يمكنك أيضًا “العودة إلى JavaScript” من خصائص JSX، ولكن يجب عليك استخدام الأقواس المعقوفة بدلاً من علامات الاقتباس. على سبيل المثال،  className="avatar"  تمرر سلسلة النص “avatar” كفئة CSS، ولكن  src={user.imageUrl}  تقرأ قيمة المتغير  user.imageUrl  من JavaScript، ثم تمرر تلك القيمة كخاصية  src : return (   <img     className= "avatar"     src= {user.imageUrl}   /> ); يمكنك وضع تعبيرات أكثر تعقيدًا داخل الأقواس المعقوفة لـ JSX أيضًا، على سبيل المثال، دمج النصوص: const user = {   name: 'Hedy Lamarr' ,   imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg' ,   imageSize: 90 , }...
قراءة المزيد