Added Flashcards component by Mahmoud Ektefaie

[mektefaie]

This pull request adds a set of interactive Flashcards component to the collection. It includes styling for the component. The component is created by Mahmoud Ektefaie (GitHub: https://github.com/mektefaie) and it is inspired by teachings of Jonas Schmedtmann's in the Ultimate React course on Udemy.

[kelixirr]

Hi, good work but please update the code as in most places you have missed semicolon (;) in your code. Which is not a good practice even though the code works. Also, most of the double quotes have become single quotes in your file. This may be because of how you have setup your prettier.

Additionally, The code below is not needed in App component for every component you add. If your component looks fine without it no need to create a new div. Try to keep the App component clean so that others don't get confused. Do All css in the original component. If you need to add container do it there only. The other user has done it there because he was not aware.

<div
       style={{
          padding: '40px 20px',
          borderTop: '1px solid var(--border-color)',
          background: 'var(--background-color)',
        }}
      >

Just import your component and keep the App component clean.

---

Please update with these changes so that I can merge. Do compare your code with the original code to see the issue with double quote and semicolon. Thanks!!

[kelixirr]

Hi, it seems like your code has diverged from the main repo. Also, you have not imported Flashcards component as a result there is an error.

So, here is the thing since the main repo was updated, you were supposed to sync your repo with the main one by using git. This way you will be able to update your fork repo.
Once updated you will be able make changes.

---

Here’s how you can get the updated code from my repository into your fork:

---

Steps to Sync Your Fork with My Repository

1. Add My Repository as Upstream
   If you haven’t already added my repository, run the following command:

   git remote add upstream https://github.com/kelixirr/ReactDevs.git

   To confirm, you can check all remotes:

   git remote -v

   You should see:

   • origin → Your forked repository.
   • upstream → My repository.

2. Fetch the Latest Updates from My Repository
   Pull the latest code from my repository without merging it yet:

   git fetch upstream

3. Merge the Updates into Your Branch
   Switch to the branch you want to update (usually main):

   git checkout main

   Then merge the changes:

   git merge upstream/main

4. Handle Merge Conflicts (If Any)
   If there are conflicts:

   • Open the conflicting files and fix the conflicts manually.
   • After fixing, stage the resolved files:

     git add .

   • Commit the merge:

     git commit

5. Push the Updated Code to Your Fork
   Once everything is synced, push the changes back to your GitHub fork:

   git push origin main

---

Please do these steps before you submit.

1. Your FlashCards component is not imported in the App.js
2. Your code is not synced.

Don't copy paste the code manually!!

[mektefaie]

i am getting an error at the last step. please advise as I am quite new to Git/GitHub. Thank you for your step-by-step instructions.

[kelixirr]

i am getting an error at the last step. please advise as I am quite new to Git/GitHub. Thank you for your step-by-step instructions.

---

So, see let me explain the issue:

Your remote branch that is the repo on github has different code this means code on your computer and the github is different. To solve this issue:

using git pull origin main

This will bring your repo latest chnages to your local machine. And then you can start working. Now once you have done thing apply what I told you above in my previous reply. Let me know if this fixes.

[kelixirr]

Ok. I will be merging now but still I guess your issue with semicolon and double quotes has not yet been resolved that's mainly due to how your editor is setup. That's ok. Not a big deal.

[mektefaie]

i don't understand why, because i took your suggestions to heart and i changed the JSON settings in VSCode and turned quotes to "double-quotes" and added ";" to all statements. Under my GitHub repo, I also see double-quotes.

[kelixirr]

i don't understand why, because i took your suggestions to heart and i changed the JSON settings in VSCode and turned quotes to "double-quotes" and added ";" to all statements. Under my GitHub repo, I also see double-quotes.

Yes. it is fixed now.