Skip to content

Instantly share code, notes, and snippets.

@pwnall
Last active April 9, 2023 08:04
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save pwnall/05ac90f723973967758b6ac38c6e427e to your computer and use it in GitHub Desktop.
DOM manipulation and Fetch API
async function asyncSleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function onSearchClick(event) {
event.preventDefault();
const cityNameInput = document.getElementById('city-name');
const cityName = cityNameInput.value;
const resultsList = document.getElementById('search-results-list');
let resultElement = document.createElement('li');
const progressTemplateScript = document.getElementById('search-progress-template');
const progressTemplate = progressTemplateScript.textContent.trim();
resultElement.innerHTML = progressTemplate;
resultElement.querySelector('#search-query').textContent = cityName;
resultElement.querySelector('#delete-result-button').addEventListener('click', event => {
resultElement.remove();
resultElement = null;
event.preventDefault();
});
resultsList.appendChild(resultElement);
const searchUrl =
`https://api.teleport.org/api/cities/?search=${encodeURIComponent(cityName)}`;
const response = await fetch(searchUrl, {
method: 'GET', mode: 'cors', headers: {
accept: 'application/vnd.teleport.v1+json',
},
});
await asyncSleep(10 * 1000);
const resultData = await response.json();
const cityResults = resultData._embedded['city:search-results'];
const cityData = cityResults.map(cityJson => {
return {
name: cityJson.matching_full_name,
url: cityJson._links['city:item'].href,
};
});
if (resultElement === null) // The search was canceled.
return;
const resultTemplateScript = document.getElementById('search-result-template');
const resultTemplate = resultTemplateScript.textContent.trim();
resultElement.innerHTML = resultTemplate;
resultElement.querySelector('#search-query').textContent = cityName;
resultElement.querySelector('#first-result-link').textContent = cityData[0].name;
resultElement.querySelector('#first-result-link').setAttribute('href', cityData[0].url);
resultElement.querySelector('#delete-result-button').addEventListener('click', event => {
resultElement.remove();
event.preventDefault();
});
resultsList.appendChild(resultElement);
}
function initialize() {
const searchButton = document.getElementById('city-search-button');
searchButton.addEventListener('click', onSearchClick);
}
if (document.readyState === 'complete') {
initialize();
} else {
window.addEventListener('load', initialize);
}
<!doctype html>
<meta charset="utf-8">
<title>DOM playground</title>
<script src="code.js"></script>
<h1>City search form</h1>
<form>
<p><label for="city-name">City name</label></p>
<p><input type="text" id="city-name" /></p>
<p><button id="city-search-button">Search</button>
</form>
<h1>Searches</h1>
<ul id="search-results-list">
</ul>
<script type="html-template" id="search-result-template">
<p>Query: <span id="search-query"></span>.</p>
<p>First result: <a id="first-result-link"></a>.</p>
<p><button type="button" id="delete-result-button">Delete</button></p>
</script>
<script type="html-template" id="search-progress-template">
<p>Searching for <span id="search-query"></span>...</p>
<p><button type="button" id="delete-result-button">Delete</button></p>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment