https://github.com/codersuresh/rest-country-search
Search country and view details
https://github.com/codersuresh/rest-country-search
css html javascript pwa tailwindcss
Last synced: 3 months ago
JSON representation
Search country and view details
- Host: GitHub
- URL: https://github.com/codersuresh/rest-country-search
- Owner: coderSuresh
- Created: 2023-05-25T06:11:02.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-29T10:54:31.000Z (almost 2 years ago)
- Last Synced: 2025-01-07T20:11:55.389Z (5 months ago)
- Topics: css, html, javascript, pwa, tailwindcss
- Language: CSS
- Homepage: https://search-country-search.netlify.app/
- Size: 237 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - REST Countries API with color theme switcher solution
This is a solution to the [REST Countries API with color theme switcher challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- See all countries from the API on the homepage
- Search for a country using an `input` field
- Filter countries by region
- Click on a country to see more detailed information on a separate page
- Click through to the border countries on the detail page
- Toggle the color scheme between light and dark mode _(optional)_
### Screenshot
### Links
- Solution URL: [https://github.com/coderSuresh/rest-country-search](https://github.com/coderSuresh/rest-country-search)
- Live Site URL: [https://search-country-search.netlify.app/](https://search-country-search.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Tailwindcss
- Mobile-first workflow
- Vanilla JS
## What I learned
- How to use Tailwindcss
- use Tailwindcss with vanilla JS
- use extended colors in Tailwindcss
- use Tailwindcss with custom CSS
- JavaScript Set
- .add()
- .clear()
- .has()
- JavaScript Array
- .filter()
- .map()
- .join()
- .includes()
- JavaScript String
- .toLowerCase()
- .toUpperCase()
- .includes()
- .replace()
- .split()
- .slice()
- .trim()
- JavaScript fetch API
- JavaScript async/await
- Working with JSON data
- JavaScript object
- JavaScript import/export
- Working with localStorage
- .setItem()
- .getItem()
- Loading in batches to improve performance
- Toggling dark mode using CSS variables and JavaScript
- How to use Netlify to deploy a website's frontend
## Author
- Frontend Mentor - [@coderSuresh](https://www.frontendmentor.io/profile/coderSuresh)
- LinkedIn - [@coderSuresh](https://www.linkedin.com/in/codersuresh/)