Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/litvinovnikita/github-search
Github user search
https://github.com/litvinovnikita/github-search
api css github-api html javascript js theme-switcher ui-design
Last synced: 30 days ago
JSON representation
Github user search
- Host: GitHub
- URL: https://github.com/litvinovnikita/github-search
- Owner: LitvinovNikita
- Created: 2023-02-19T20:56:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-19T21:37:33.000Z (almost 2 years ago)
- Last Synced: 2024-11-06T17:27:32.272Z (3 months ago)
- Topics: api, css, github-api, html, javascript, js, theme-switcher, ui-design
- Language: HTML
- Homepage: https://litvinovnikita.github.io/Github-search/
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Github-search
The project aims to create an app that allows users to search for GitHub users by their username and view relevant information based on their search. Users should be able to view the app's layout based on their device's screen size and switch between light and dark themes. The app should display error messages and show appropriate text with transparency added if certain fields are empty or not available. Links to website, Twitter, and company information should be included, and the company link should remove the "@" symbol and link to the company page on GitHub.
## Table of contents
- [Challenge](#challenge)
- [Screenshots](#screenshots)
- [Links](#links)
- [Technologies](#technologies)
- [Author](#author)
## Challenge
The app should meet the following requirements:
- Display an optimal layout depending on the user's device screen size
- Show hover states for all interactive elements
- Allow users to search for GitHub users by username
- Show relevant user information based on the search
- Allow users to switch between light and dark themes
- Choose the correct color scheme based on the user's computer preferences
- Persist theme using localStorage
- Use the GitHub users API endpoint, which is https://api.github.com/users/:username , to retrieve user information
- Display an error message if no user is found during a new search
- Show the user's username if their name is not available, with and without the "@" symbol
- Show the text "This profile has no bio" with transparency added if the user's bio is empty
- Show the text "Not Available" with transparency added if the location, website, Twitter, or company properties are empty
- Make website, Twitter, and company information links, and remove the "@" symbol for the company link, leading to the company page on GitHub.
## Screenshots
## Links
- Live Site URL: (https://litvinovnikita.github.io/Github-search/)
- Solution URL: (https://www.frontendmentor.io/solutions/responsive-github-api-user-search-api-with-darklight-theme-switch-rqG2i-9TT)
## Technologies
- Semantic HTML5 markup: Using HTML elements to give meaning to content and structure web pages in a more accessible and SEO-friendly way.
- CSS custom properties/vars: Declaring reusable variables in CSS to make it easier to maintain and change the look and feel of a website.
- Desktop-first workflow: Designing and developing a website with a focus on the desktop version first, then adapting it for smaller screen sizes using responsive design techniques.
- Javascript: Using a programming language to add interactivity and dynamic behavior to web pages.
- Fetch API: A built-in web API in modern browsers that allows fetching resources and making HTTP requests to servers from a web page.
- GitHub API: An API provided by GitHub that allows developers to access and retrieve data related to GitHub repositories, users, and organizations.
## Author
Author: [Nikita Litvinov](https://github.com/LitvinovNikita)