https://github.com/musayar9/country-filter-application
Filtering by entered dollar exchange rate. Grouping data filtered by dollar exchange rate according to the entered number value. Filtering by country group value.
https://github.com/musayar9/country-filter-application
graphql react-context reactjs tailwind-css
Last synced: 2 months ago
JSON representation
Filtering by entered dollar exchange rate. Grouping data filtered by dollar exchange rate according to the entered number value. Filtering by country group value.
- Host: GitHub
- URL: https://github.com/musayar9/country-filter-application
- Owner: musayar9
- Created: 2024-02-06T08:03:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-10T10:18:41.000Z (over 2 years ago)
- Last Synced: 2025-01-14T01:25:10.394Z (over 1 year ago)
- Topics: graphql, react-context, reactjs, tailwind-css
- Language: JavaScript
- Homepage: https://country-filter-application.vercel.app
- Size: 1000 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Ülke Filtreleme Uygulaması - [Live Demo](https://country-filter-application.vercel.app/)
Projeyi oluştururken javascript'in **React** framework'unu kullandık. Proje'nin tasarımını ise **Tailwindcss** kütüphanesiniz kullanarak yaptık. Graphql üzerinden de appolo kütüphanesini kullanarak verileri kendi localimiz çektik.
Projede state yönetimini React Context yapısını kullanarak yaptık. Context içinde tanımladığımız değişken ve fonksiyonları farklı bileşenler (components) içinde kullandık.
Bu projede girilen para birimine ve seçilen değere göre bir filteleme ve gruplama işlemi yapılıyor.
Sayfa ilk yüklendiğinde veriler gelirken bize bir yükleme(loading) animasyonu gösteriliyor. Veriler yüklendikten sonra animasyon kalkıyor ve yüklenen veriler bize bir tabloda sunuluyor.
Filtreleme işlemleri yapmak içinde 2 farklı input alanı ve bir tanede secenek (select) alanı oluşturduk. Bu input alanına girilen verilere göre bir filtreleme işlemi yapılacak. Secenek alanında ise seçilen değer göre gruplanmış ve filtrelenmiş veriler gelecek.
Sayfa ilk yüklendiğinde bize 10. eleman seçilmiş olarak gelecek ve arka plan rengi diğer elemanlardan farklı olacaktır. Biz herhangi bir elemana seçtiğimizde seçtiğimiz elemanın arka plan rengi otamatik olarak değişecektir. Sadece bir tane eleman seçebiliyoruz. Birden fazla eleman seçemiyoruz.
Para birimine (Currency Value) göre filtreleme işlemi yaptığımızda filtrelenmiş olan verinin en son elemanı seçilmiş ve arka plan rengi değişmiş olarak gelecek.
- **1. Birinci input(Currency Value):** Bu input alanına herhangi bir ülkenin para birimini girdiğimizde bize para birimine göre filtrelenmiş veriler gelecek. Eğer filtrelenmiş herhangi bir veri yok ise biz hata mesajı gösterilecek.
|  |  |
| -------------------------- | -------------------------- |
- **2. İkinci input(Group Size):** Bu input içine de verileri kaçlı olarak gruplamak istiyorsak ona göre bir number değer giriyoruz. Örneğin **eur** para birimine göre bir filtreleme işlemi yaptığımızı ve bize 35 tane veri geldiğini varsayalım. Biz bu 35 veriyi üçerli gruplar halinde gruplamak istersek groupSize inputu içine 3 değerini girmemiz yeterli. Girilen 3 değeri sonucunda biz toplam 12 tane üçerli bir gruplama işlemi yapacak ve biz gruplar arasında ileri geri tuşları ile dolaşabileceğiz.
`return list` butonuna tıkladığımız da bizi bütün verilerin olduğu tabloya yönlendirecek.
|  |  |  |
| -------------------------- | -------------------------- | -------------------------- |
- **3. Secenek Alanı(Select Value):** Bu alanda ise bize verilen secenekler arasından seçtiğimiz değer durumuna göre bize filtreleme gruplama işelemi yapılacak.Filtrelenen değerleri bize altta gruplanmış şekilde gelecek.
|  |  |
| -------------------------- | -------------------------- |
- Yukarıdaki resimlerde mavi dikdörtgen içinde belirtilen `return list` butonuna tıkladığımız da bizi bütün verilerin olduğu tabloya yönlendirecektir.
#### Api Kaynaklı Hata Mesajı
|  |
| -------------------------- |
Veri çekme işlemi sırasında api'den kaynaklı bir hata meydana geldiğinde bize hata mesaj erkanda gösterilecektir.
### Developer
- Developer - [Musa Sayar]
### İletişim
