Welcome to the Sixth Lesson in the HTML, CSS, and JavaScript Learning Series! 🎉

In this lesson, we will focus on AJAX and APIs . We will learn how to fetch data from the internet without refreshing the page using AJAX, and how to work with APIs to display dynamic data such as news or weather.

1. Quick Review

In the previous lessons, we learned:

• How to add interactivity using JavaScript.
• Creating dynamic buttons and sliders.
• Animating elements and dynamically changing styles.

Now, we will move on to AJAX and APIs to add even more dynamism!

2. What is AJAX?

A. Definition of AJAX:

AJAX (Asynchronous JavaScript and XML) is a technique that allows you to load data from the server without fully refreshing the page. It can be used to fetch JSON or XML data.

B. Benefits of AJAX:

• Updating the page without reloading it.
• Improving user experience.
• Saving resources (no need to reload the entire page).

3. How Does AJAX Work?

A. Basic Steps:

1. Create an AJAX request using XMLHttpRequest or fetch .
2. Send the request to the server.
3. Receive data from the server.
4. Display the data on the page.

B. Example Using fetch:

fetch('https://api.example.com/data')
.then(response => response.json()) // Convert the data to JSON
.then(data => {
console.log(data); // Display the data in the console
})
.catch(error => {
console.error('An error occurred:', error);
});

4. Working with APIs

A. What is an API?

An API (Application Programming Interface) is an interface that allows you to access data or services provided by another server. For example:

• Weather API.
• News API.
• Currency exchange rate API.

B. Practical Example: Fetching Weather Data Using an API

We will use a free weather API (such as OpenWeatherMap ) to fetch the current weather for a specific city.

HTML:

<div id="weather">
<h2>Current Weather</h2>
<p id="temperature"></p>
<p id="description"></p>
</div>
<button onclick="getWeather()">Get Weather</button>

JavaScript:

function getWeather() {
const apiKey = 'YOUR_API_KEY'; // Replace this with your own API key
const city = 'Cairo';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;


fetch(url)
.then(response => response.json())
.then(data => {
const temperature = data.main.temp;
const description = data.weather[0].description;
document.getElementById('temperature').textContent = `Temperature: ${temperature}°C`;
document.getElementById('description').textContent = `Condition: ${description}`;
})
.catch(error => {
console.error('An error occurred:', error);
});
}

5. Creating a Simple News Application

A. Using the News API:

You can use the News API to fetch the latest news.

HTML:

<div id="news">
<h2>Latest News</h2>
<ul id="news-list"></ul>
</div>
<button onclick="getNews()">Get News</button>

JavaScript:

function getNews() {
const apiKey = 'YOUR_NEWS_API_KEY'; // Replace this with your own API key
const url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`;


fetch(url)
.then(response => response.json())
.then(data => {
const articles = data.articles;
const newsList = document.getElementById('news-list');
newsList.innerHTML = ''; // Clear the current list


articles.forEach(article => {
const li = document.createElement('li');
li.textContent = article.title;
newsList.appendChild(li);
});
})
.catch(error => {
console.error('An error occurred:', error);
});
}

6. Practical Exercise

Try creating an HTML page that includes the following:

• Weather App :

  • When the button is clicked, display the current weather for a specific city.

• News App :

  • When the button is clicked, display the latest news headlines.

• Currency Exchange App :

  • Use a currency API to display the exchange rate of a selected currency.

7. What’s Next?

In the next lesson, we will learn:

• How to create multi-page web applications using JavaScript.
• Using Local Storage to store data locally.
• Building more complex applications using libraries like jQuery .

📌 Tip : Don’t hesitate to experiment with the code yourself and modify it to see the results. Practice is the key to mastery! 🚀