https://github.com/jack970/search-country-api
Live Site:
https://github.com/jack970/search-country-api
Last synced: over 1 year ago
JSON representation
Live Site:
- Host: GitHub
- URL: https://github.com/jack970/search-country-api
- Owner: jack970
- Created: 2021-09-14T06:56:11.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-02T11:33:56.000Z (almost 5 years ago)
- Last Synced: 2025-01-28T14:21:47.366Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://search-country-api.netlify.app/index.html
- Size: 793 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 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
- [Frontend Mentor - REST Countries API solution](#frontend-mentor---rest-countries-api-solution)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [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
- Live Site Here: [search-country-api](https://search-country-api.netlify.app/index.html)
- Solution Here: [Image Site](https://prnt.sc/1s5525n)
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- API Fetch
### What I learned
These functions check the value by Theme in Local Storage. If the value by Theme be equal dark-mode, the tag ```html``` will have an class dark-mode.
```html
```
If Theme value in local storage is empty, the class in the tag will be empty.
```html
```
See below the code:
```js
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
// function to toggle between light and dark theme
function toggleTheme() {
if (localStorage.getItem('theme') === 'dark-mode'){
setTheme('');
} else {
setTheme('dark-mode');
}
}
// Immediately invoked function to set the theme on initial load
(function () {
if (localStorage.getItem('theme') === 'dark-mode') {
setTheme('dark-mode');
} else {
setTheme("");
}
})();
```
## Author
- Website - [search-country-api](https://search-country-api.netlify.app/index.html)
- Frontend Mentor - [@jack970](https://www.frontendmentor.io/profile/yourusername)