JSON and AJAX exercise
How do I make an json and ajax exercise?
What is a json and ajax exercise? How do you make a json and ajax exercise? This script and codes were developed by Marina Marques on 01 October 2022, Saturday.
JSON and AJAX exercise - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JSON and AJAX exercise</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>JSON and AJAX</h1> <button id="btn" class="btn btn-primary btn-large">Fetch Info for 3 New Animals</button>
</header>
<div id="animal-info">
</div> <script src="js/index.js"></script>
</body>
</html>
JSON and AJAX exercise - Script Codes CSS Codes
header { margin-top: 30px; margin-left: 200px;
}
h1 { float: left;
}
.btn { margin-top: 5px; margin-left: 20px; background-color: tomato; border: tomato;
}
.btn:hover { background-color: firebrick;
}
#animal-info { margin-top: 30px; margin-left: 200px;
}
.hide-me { visibility: hidden;
}
JSON and AJAX exercise - Script Codes JS Codes
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() { var ourRequest = new XMLHttpRequest(); ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-' + pageCounter + '.json'); ourRequest.onload = function() { if(ourRequest.status >= 200 && ourRequest.status < 400) { var ourData = JSON.parse(ourRequest.responseText); renderHTML(ourData); } else { console.log("Connection error"); } }; ourRequest.onerror = function() { console.log("Connection error"); }; ourRequest.send(); pageCounter++; if(pageCounter > 3){ btn.classList.add("hide-me"); }
});
function renderHTML(data) { var htmlString = ""; for (i = 0; i < data.length; i++) { htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat "; for (y = 0; y < data[i].foods.likes.length; y++) { if(y == 0) { htmlString += data[i].foods.likes[y]; } else { htmlString += " and " + data[i].foods.likes[y]; } } htmlString += " and dislikes "; for (y = 0; y < data[i].foods.dislikes.length; y++) { if(y == 0) { htmlString += data[i].foods.dislikes[y]; } else { htmlString += " and " + data[i].foods.dislikes[y]; } } htmlString += ".</p>"; } animalContainer.insertAdjacentHTML("beforeend", htmlString);
}
Developer | Marina Marques |
Username | shvvffle |
Uploaded | October 01, 2022 |
Rating | 3 |
Size | 2,591 Kb |
Views | 20,240 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
UI Browser | 3,239 Kb |
Hover Button | 1,811 Kb |
Contact Form | 4,649 Kb |
Stats counter | 2,403 Kb |
Space Profile | 3,007 Kb |
About me minimalist page | 2,788 Kb |
Dura Mater Card | 2,735 Kb |
Minimalist Contact Landing Page | 3,098 Kb |
UI Twitter Profile Card | 2,932 Kb |
A Pen by Marina Marques | 2,171 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Console fun | Dviate | 1,500 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!