Language-Cards

👉 Click here to see on browser

What's used in this app ?	How use third party libraries	Author
useState() Hook		Take a look at my portfolio
Conditional rendering		Visit me on Linkedin
rendering list
React-Bootstrap	npm i / yarn add react-bootstrap bootstrap
Deploy with netlify

---

How To Run This Project 🚀

💻 Install React 👇

yarn create react-app .  or npx create-react-app .

💻 Install Sass 👇

yarn add sass  or npm i sass

🔴 Delete these files and delete the imports👇

- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt

💻 Start the project 👇

yarn start or npm start

OR

• Clone the Repo

  git clone

• Install NPM packages

  npm install or yarn

• Run the project

  npm start or yarn start

• Open the project on your browser

  http://localhost:3000/

• Enjoy! 🎉

---

Project Skeleton

Language-Cards App(folder)
|
|----public (folder)
│     └── index.html
|----src (folder)
|    |--- components (folder)
|    |       |── header(folder)
│    │       |     ├── Header.jsx
│    │       |     ├── Header.css
│    │       |
|    |       |── item(folder)
│    │       |     ├── Item.jsx
│    │       |     ├── Item.css
│    │       |
|    |       |── card(folder)
│    │             ├── Card.jsx
│    │             ├── Card.css
│    │
|    |--- helper (folder)
|    |       |── data.js                         
|    |                             
|    |--- assets (folder)
|    |       |── images                        
|    |       
│    ├--- App.js
│    ├--- App.css
│    └--- index.js
│    └--- img(folder)
│
│
|--- .gitignore
|── package-lock.json
├── package.json
|── README.md
|── yarn.lock

---

At the end of the project, the following topics are to be covered;

    ```

• conditional rendering

  import { useState } from 'react';
  import './Item.css';
  
  const Item = ({ card }) => {
    const [showLogo, setShowLogo] = useState(true);
  
    const { name, img, options } = card;
  
    const handleClick = () => {
      setShowLogo(!showLogo);
    };
  
    return (
      <div className="card" onClick={handleClick}>
        {showLogo ? (
          <div>
            <img className="card-logo" src={img} alt="" />
            <h3 className="card-title">{name}</h3>
          </div>
        ) : (
          <ul className="list">
            {options.map((element, index) => {
              return <li key={index}>{element}</li>;
            })}
          </ul>
        )}
      </div>
    );
  };
  
  export default Item;

• Rendiring list

     <ul className="list">
        {options.map((element, index) => {
          return <li key={index}>{element}</li>;
        })}
      </ul>

---

Feedback and Collaboration

I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out. I'm always open to collaboration and welcome the opportunity to work on exciting projects together. Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!

⌛ Happy Coding ✍