{"id":19598528,"url":"https://github.com/kaplanh/language-cards","last_synced_at":"2026-05-15T04:04:55.920Z","repository":{"id":153794053,"uuid":"513550993","full_name":"kaplanh/Language-Cards","owner":"kaplanh","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-10T23:22:03.000Z","size":1018,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-09T07:47:49.457Z","etag":null,"topics":["conditional-rendering","react","rendering-list","usestate-hook"],"latest_commit_sha":null,"homepage":"https://kaplan-react-language-card.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaplanh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-07-13T14:20:49.000Z","updated_at":"2024-02-10T23:23:48.000Z","dependencies_parsed_at":"2023-09-03T23:10:03.992Z","dependency_job_id":null,"html_url":"https://github.com/kaplanh/Language-Cards","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FLanguage-Cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FLanguage-Cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FLanguage-Cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FLanguage-Cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaplanh","download_url":"https://codeload.github.com/kaplanh/Language-Cards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240876855,"owners_count":19871903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conditional-rendering","react","rendering-list","usestate-hook"],"created_at":"2024-11-11T09:06:35.109Z","updated_at":"2026-05-15T04:04:50.882Z","avatar_url":"https://github.com/kaplanh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Language-Cards\n\n![language-cards](https://user-images.githubusercontent.com/101884444/178757500-e555b28e-e40e-4961-8da6-f43e237c5efa.gif)\n\n[:point_right: Click here to see on browser](https://kaplan-react-language-card.netlify.app/)\n---\n\n| **What's used in this app ?**                                                | **How use third party libraries**          | **Author**                                                                       |\n| ---------------------------------------------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------- |\n|  [useState() Hook](https://react.dev/learn#using-hooks)|                                            | [Take a look at my portfolio](https://kaplanh.github.io/Portfolio_with_CssFlex/) |\n|  [Conditional rendering](https://react.dev/learn#conditional-rendering)   |                                  | [Visit me on Linkedin](https://www.linkedin.com/in/kaplan-h/)                    |\n|  [rendering list](https://react.dev/learn#rendering-lists)                                                       |                                            |                                                                                  |\n| [React-Bootstrap](https://react-bootstrap.netlify.app/)                      | npm i / yarn add react-bootstrap bootstrap |                                                                                  |\n| Deploy with [netlify](https://app.netlify.com/teams/kaplanh/overview)                           |                                            |                                                                                  |\n\n---\n\n## How To Run This Project 🚀\n\n\u003cbr/\u003e\n\n### 💻 Install React 👇\n\n```bash\nyarn create react-app .  or npx create-react-app .\n```\n\n### 💻 Install Sass 👇\n\n```bash\nyarn add sass  or npm i sass\n```\n\n## 🔴 Delete these files and delete the imports👇\n\n    - App.test.js\n    - reportWebVitals.js\n    - setupTests.js\n    - favicon.ico\n    - logo192.png\n    - logo512.png\n    - manifest.json\n    - robots.txt\n\n### 💻 Start the project 👇\n\n```bash\nyarn start or npm start\n```\n\nOR\n\n-   \u003cstrong\u003eClone the Repo\u003c/strong\u003e\n\n    ```sh\n    git clone\n    ```\n\n-   \u003cstrong\u003eInstall NPM packages\u003c/strong\u003e\n\n    ```sh\n    npm install or yarn\n    ```\n\n-   \u003cstrong\u003eRun the project\u003c/strong\u003e\n\n    ```sh\n    npm start or yarn start\n    ```\n\n-   \u003cstrong\u003eOpen the project on your browser\u003c/strong\u003e\n\n    ```sh\n    http://localhost:3000/\n    ```\n\n-   ### \u003cstrong\u003eEnjoy! 🎉\u003c/strong\u003e\n\n---\n\n## Project Skeleton\n\n```\nLanguage-Cards App(folder)\n|\n|----public (folder)\n│     └── index.html\n|----src (folder)\n|    |--- components (folder)\n|    |       |── header(folder)\n│    │       |     ├── Header.jsx\n│    │       |     ├── Header.css\n│    │       |\n|    |       |── item(folder)\n│    │       |     ├── Item.jsx\n│    │       |     ├── Item.css\n│    │       |\n|    |       |── card(folder)\n│    │             ├── Card.jsx\n│    │             ├── Card.css\n│    │\n|    |--- helper (folder)\n|    |       |── data.js                         \n|    |                             \n|    |--- assets (folder)\n|    |       |── images                        \n|    |       \n│    ├--- App.js\n│    ├--- App.css\n│    └--- index.js\n│    └--- img(folder)\n│\n│\n|--- .gitignore\n|── package-lock.json\n├── package.json\n|── README.md\n|── yarn.lock\n\n\n\n```\n\n---\n\n### At the end of the project, the following topics are to be covered;\n\n\n        ```\n\n-   conditional rendering\n\n    ```jsx\n    import { useState } from 'react';\n    import './Item.css';\n    \n    const Item = ({ card }) =\u003e {\n      const [showLogo, setShowLogo] = useState(true);\n    \n      const { name, img, options } = card;\n    \n      const handleClick = () =\u003e {\n        setShowLogo(!showLogo);\n      };\n    \n      return (\n        \u003cdiv className=\"card\" onClick={handleClick}\u003e\n          {showLogo ? (\n            \u003cdiv\u003e\n              \u003cimg className=\"card-logo\" src={img} alt=\"\" /\u003e\n              \u003ch3 className=\"card-title\"\u003e{name}\u003c/h3\u003e\n            \u003c/div\u003e\n          ) : (\n            \u003cul className=\"list\"\u003e\n              {options.map((element, index) =\u003e {\n                return \u003cli key={index}\u003e{element}\u003c/li\u003e;\n              })}\n            \u003c/ul\u003e\n          )}\n        \u003c/div\u003e\n      );\n    };\n    \n    export default Item;\n    ```\n\n-   Rendiring list\n\n    ```jsx\n       \u003cul className=\"list\"\u003e\n          {options.map((element, index) =\u003e {\n            return \u003cli key={index}\u003e{element}\u003c/li\u003e;\n          })}\n        \u003c/ul\u003e\n    ```\n\n\n---\n\n## Feedback and Collaboration\n\nI 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.\nI'm always open to collaboration and welcome the opportunity to work on exciting projects together.\nThank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!\n\n\u003cp align=\"center\"\u003e ⌛\u003cstrong\u003e Happy Coding \u003c/strong\u003e ✍ \u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Flanguage-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaplanh%2Flanguage-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Flanguage-cards/lists"}