Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaplanh/country-app
https://github.com/kaplanh/country-app
api-server async-await bootstrap5 css3 fetch-api html5 javascript
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kaplanh/country-app
- Owner: kaplanh
- Created: 2023-06-17T20:49:49.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-02T22:11:53.000Z (10 months ago)
- Last Synced: 2024-02-03T13:44:39.745Z (10 months ago)
- Topics: api-server, async-await, bootstrap5, css3, fetch-api, html5, javascript
- Language: JavaScript
- Homepage: https://kaplanh.github.io/country-app/
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Countries App
**How does my project look**
[Live link!](https://kaplanh.github.io/country-app/)
**What's used in this app ?** | **How to run ?** | **Author** |
|----------|---------|------------
|Api-Server | Once you clone the project|[Take a look at my portfolio](https://kaplanh.github.io/Portfolio_with_CssFlex/)|
|Html| open index.html with Go Live in vs cod|[Visit me on Linkedin](https://www.linkedin.com/in/kaplan-h/)|
|Css||
|Javascript | |
|Bootstrap ||
**What is this project about ?**
- In this project user can get any current country detail from certain api-server and can find a link which takes the user google map.
## Project Skeleton
```
country-app(folder)
|
|----readme.md
|----index.html
|----img (folder)
|----style.css
|----app.js
|----img (folder)
```
### At the end of the project, the following topics are to be covered;
- API's
- [Rest Countries_API](https://restcountries.com/v3.1/all)
- HTML
- CSS
- !importat
~~~css
li{
padding: 10px !important ;
}
~~~
- JS
- window.addEventListener()
```
window.addEventListener("load", () => {
getData();
});
```
- async-await
```
let ülkeler; //?datayi globale cekmek icin
const getData = async () => {
try {
const URL = "https://restcountries.com/v3.1/all";
const res = await fetch(URL);
if (!res.ok) {
throw new Error();
}
const data = await res.json();
ülkeler = data; //?datayi countries e aktararak globale cektim
// console.log(ülkeler);
nameSelect(data);
// console.log(data);
} catch (error) {
// console.log(error);
renderError(error);
}
};
```
- DOM Manipulations
- innerHTML
- DOM Selectors
- Events
- click
- load
- String Methods
- sort()
```
const nameSelect = (data) => {
ülkeler.forEach((element) => {
// console.log(element);
ülkeler = data; //?datayi countries e aktararak globale cektim
ülkeler.sort((a, b) => {
const nameA = a.name.common.toUpperCase();
const nameB = b.name.common.toUpperCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
// ! Yukarda ulkeleri siralayarak çalıştırılıyoruz
select.innerHTML += `${element.name.common}`;
});
// domaYaz(data)
};
```
- Array Methods
- forEach() & filter()
```
const showUsers = (users) => {
console.log(users);
const usersDiv = document.getElementById("users");
users.forEach((user) => {
// console.log(user.login)
usersDiv.innerHTML += `
`;
});
};
```
- Nested object destructuring
```
const domaYaz = (y) => {
const {
flags: { png }, //?nested objectlerde destructuring
name: { common }, //?nested objectlerde destructuring
region,
capital,
languages,
currencies,
population,
borders,
maps: { googleMaps }, //?nested objectlerde destructuring
} = y;
const cardSection = document.getElementById("cards");
cardSection.innerHTML = `
${common}
```
- object methods
- Object.values(objectName)
- Object.keys(objectName)
- Object.entries(objectName)
```
${Object.values(languages)}
Object.values(currencies)[0].name //?Object.values() metodunun ciktisi array dir
}, ${Object.values(currencies)[0].symbol}
```
## Feedback and Collaboration
I 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.
I'm always open to collaboration and welcome the opportunity to work on exciting projects together.
Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!
⌛ Happy Coding ✍
Rest-Countries App
What's used in this app ?
How to run ?
Author
Javascript
Css
Bootstrap
Html
Api-Server
Once you clone the project
1) open index.html with Go Live in vs code
Take a look at my other projects
Visit me on Linkedin
What is this project about ?
In this project user can get any current country detail from certain api-server and can find a link which takes the user google map.
How does my project look
[Live Link](https://kaplanh.github.io/country-app/)
Feedback and Collaboration
I 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.
I'm always open to collaboration and welcome the opportunity to work on exciting projects together.
Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!
⌛ Happy Coding ✍
# Checkout_Page
[Click Me!](https://kaplanh.github.io/Checkout_Page/)
## Description
The project aims to create a Checkout App using JS and Bootstrap.
## Problem Statement
- Your company has recently started on a project that aims to create a Checkout Page. So you and your colleagues have started to work on the project.
## Project Skeleton
```
Checkout Page (folder)
|
|----readme.md
|----index.html
|----checkout.js
|----img (folder)
|----css (folder)
|----index.css
|----checkout.css
|----universal.css
```
### At the end of the project, the following topics are to be covered;
- HTML
- select
- strong
- del
```
- CSS
- Nested CSS
- text-decoration: line-through
```
.nav__list--btn {
color: orangered;
font-size: 14px;
cursor: pointer;
& i:hover {
color: white;
border-radius: 50%;
background-color: #ff7623;
}
}
.line-through {
text-decoration: line-through;
}
```
- JS
- DOM Manipulations
- innerHTML
- innerText
- textContent
- DOM Selectors
- querySelector
- querySelectorAll
- const productList = document.querySelector("div.main__product-painel"); //?basina div yazarak belirtirsek performans acisindan daha hizli olur
- Events
- click
- load
-e.target & e.currentTarget
```
e.currentTarget.firstElementChild.innerText = "My Cart";
//? NOT:e.target tiklanan elementi verirken e.currentTarget sabittir ve addEventListener in tanimlandigi elemandir burda navbarList ve daha hizlidir
```
- Capturing & Bubbling
- DOM Traversing
- nextElementSibling
- e.target.closest(".main__product-info"
- if (e.target.classList.contains("fa-plus"))
- e.target.previousElementSibling.innerText++;
- firstElementChild
- children
- localStorage & sessionStorage
- Array Methods
- forEach() & reduce()
```
productTotalPriceDivs.forEach(eachProductTotalPriceDiv => {
subtotal += parseFloat(eachProductTotalPriceDiv.innerText)
});
```
```
reduce()
const subTotalAlternatif = [...productPriceDivs]; //reduce icin array a dönüstürmeliyiz
let subtotal = subTotalAlternatif.reduce((acc, curr) => {
return acc + parseFloat(curr.innerText); //parseFloat stringten float yapar
}, 0);
```
- parseFloat
```
const taxPrice = parseFloat(subtotal * localStorage.getItem("taxRate")); parseFloat stringten float yapar
```
- if else - if - else conditions
- Ternary
```
let shipping = (subtotal > 0 ? parseFloat(localStorage.getItem("shippingPrice")) : 0);
```
- String Methods( toFixed() )
```
productTotalPriceDiv.innerText = (productQuantity * productPrice).toFixed(2);
```
### At the end of the project, developers will be able to;
- improve coding skills within HTML, CSS and JS
- use git commands (push, pull, commit, add etc.) and Github as a Version Control System.
## Notes
- You can use HTML, CSS and JS to complete this project.