Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaplanh/synchronous-asynchronous-programming
https://github.com/kaplanh/synchronous-asynchronous-programming
async-await calbackhell fetch-api html-css-javascript promise then-catch try-catch
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/kaplanh/synchronous-asynchronous-programming
- Owner: kaplanh
- Created: 2024-01-31T23:31:24.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-02-03T20:04:16.000Z (11 months ago)
- Last Synced: 2024-02-04T00:38:07.554Z (11 months ago)
- Topics: async-await, calbackhell, fetch-api, html-css-javascript, promise, then-catch, try-catch
- Language: JavaScript
- Homepage: https://kaplanh.github.io/Synchronous-Asynchronous-Programming/
- Size: 223 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Followers Synchronous-Asynchronous Programming Example
**How does my project look**
[Live link!](https://kaplanh.github.io/Synchronous-Asynchronous-Programming/)
**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
```
Synchronous-Asynchronous-Programming(folder)
|
|----readme.md
|----index.html
|----img (folder)
|----style.css
|----1-intro.js
|----2-promise.js
|----3-fetchAPI.js
|----4-async-await.js
```
### At the end of the project, the following topics are to be covered;
- API's
- [Github followers API](https://api.github.com/users)
- [newsAPI](https://newsapi.org/)
- HTML
- CSS
- Nested CSS
~~~css
.card {
& img {
transition: 0.5s;
}
& img:hover {
rotate: 10deg;
scale: 1.02;
}
& .btn {
transition: scale 0.2s;
}
& .btn:hover {
scale: 1.03;
}
}
~~~
- JS
- senkron programing
```
console.log("Hello")
alert("Blocked") //? Blocking
console.time("gecikme")
delay(4000) //? blocking code - senkron
console.timeEnd("gecikme")
console.log("hi")
```
- Asenkron (setTimeout()) programing
```
setTimeout(() => {
console.log("I am fine")
console.timeEnd("timer")
}, 1000)
setTimeout(() => {
console.log("Whats up?")
console.timeEnd("timer")
}, 1000)
console.log("start")
console.time("timer")
```
- Asenkron (setInterval, clearInterval) programing
```
/? setInterval periyodik zaman araligi oluşturmak icin kullanilabilir.
//? clearInterval yardımıyla surekli devam interval pasif hale getirilir.
let count = 0
const sec1 = setInterval(() => {
console.log(++count)
if (count > 9) {
clearInterval(sec1)
}
}, 1000)
```
- Callback Hell (nested ve birbirine bagli callback'ler)
```
setTimeout(() => {
console.log("john:Hi");
setTimeout(() => {
console.log("Sarah: Hello");
setTimeout(() => {
console.log("John: How Are you?");
setTimeout(() => {
console.log("Sarah:Fine and you?");
}, 1000);
}, 1000);
}, 1000);
}, 1000);
```
- Promise()
```
const networkReq = new Promise((resolve, reject) => {
const data = { a: 1, b: 2 };
const success = Math.floor(Math.random() * 5); //? (0,1,2,3,4)
if (success) {
console.log("Data fetched");
resolve(data);
} else {
reject("Ohh no there is network error");
}
});
networkReq
.then((response) => console.log(response))
.then(() => console.log("2. then"))
.catch((err) => document.write(err))
.finally(() => console.log("Her zaman calisir"));
```
- fetch API
```
let veri = "";
fetch("https://api.github.com/users")
.then((res) => {
//! Error handling
if (!res.ok) {
throw new Error("Something went wrong", res.status);
// console.log("Something went wrong")
} else {
return res.json();
}
})
.then((data) => {
// veri = data
// console.log(veri)
showUsers(data);
})
.catch((err) => {
console.log(err);
const usersDiv = document.getElementById("users");
usersDiv.innerHTML = `
${err}
`;
});
// console.log(veri)
const showUsers = (users) => {
console.log(users);
const usersDiv = document.getElementById("users");
users.forEach((user) => {
// console.log(user.login)
usersDiv.innerHTML += `
`;
});
};
```
- async-await
```
const getNews = async () => {
const API_KEY = "2108f1dba8114b89b4a326fc6f71a5a8";
const URL = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${API_KEY}`;
try {
const res = await fetch(URL);
// console.log(res);
//?Error handling
if (!res.ok) {
throw new Error("News can not be fetched");
}
const data = await res.json();
renderNews(data.articles);
} catch (err) {
// console.log(error);
renderError(err);
}
};
const renderNews = (news) => {
const newsDiv = document.getElementById("news");
news.map((item) => {
const { title, content, url, urlToImage } = item; //? destructure
newsDiv.innerHTML += `
`;
});
};
const renderError = (err) => {
const newsDiv = document.getElementById("news");
newsDiv.innerHTML = `
${err}
`;
};
window.addEventListener("load", () => {
getNews();
});```
- DOM Manipulations
- innerHTML
- innerText
- textContent
- DOM Selectors
- Events
- click
- load
- Array Methods
- forEach() & map()
```
const showUsers = (users) => {
console.log(users);
const usersDiv = document.getElementById("users");
users.forEach((user) => {
// console.log(user.login)
usersDiv.innerHTML += `
`;
});
};
```
```
const renderNews = (news) => {
const newsDiv = document.getElementById("news");
news.map((item) => {
const { title, content, url, urlToImage } = item; //? destructure
newsDiv.innerHTML += `
`;
});
};
});
```
## 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 ✍