Calculator Tools Calculator Tools
Create

RecordTV ou Record

Jan 2, 2024

About this app

An app to watch RecordTV shows and episodes

RecordTV ou Record

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>RecordTV ou Record</title>
<meta name="description" content="An app to watch RecordTV shows and episodes">
<meta name="keywords" content="RecordTV, Record, TV, shows, episodes">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Fetch and display RecordTV shows and episodes
fetchShows();
});

// Function to fetch RecordTV shows and episodes
function fetchShows() {
$.ajax({
url: "https://api.recordtv.com.br/shows",
method: "GET",
success: function(response) {
// Display shows and episodes
displayShows(response);
},
error: function(error) {
console.log("Error: " + error);
}
});
}

// Function to display shows and episodes
function displayShows(shows) {
var mainContainer = document.getElementById("main-container");

// Iterate through each show
shows.forEach(function(show) {
// Create show card
var card = document.createElement("div");
card.classList.add("card");
card.style.width = "18rem";

// Create show image
var image = document.createElement("img");
image.src = show.image;
image.classList.add("card-img-top");
image.alt = show.title;

// Create show card body
var cardBody = document.createElement("div");
cardBody.classList.add("card-body");

// Create show title
var title = document.createElement("h5");
title.classList.add("card-title");
title.textContent = show.title;

// Create show description
var description = document.createElement("p");
description.classList.add("card-text");
description.textContent = show.description;

// Append elements to card body
cardBody.appendChild(title);
cardBody.appendChild(description);

// Append elements to card
card.appendChild(image);
card.appendChild(cardBody);

// Append card to main container
mainContainer.appendChild(card);
});
}

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
#main-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 20px;
}

.card {
width: 18rem;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
</div>
</body>
</html>