I am currently working on creating multiple boxes or templates (5 on each row) from a movie API. I have successfully retrieved all the necessary data and do not require a responsive design.
https://i.sstatic.net/CNz9R.png
The issue arises when I attempt to apply my CSS class to my section "
<section id="raiz"></section>var $movies = $.ajax({
url: "http://api.tvmaze.com/shows",
dataType: "json",
method: "GET",
cache: false,
success: function(data) {
console.log(data);
for (var i = 0; i < data.length; i++) {
//root
var root = document.getElementById("raiz");
//Elements
var hyperlink = document.createElement("a");
var img = document.createElement("img");
var rating = document.createElement("span");
var title = document.createElement("h2");
var genres = document.createElement("p");
hyperlink.href = data[i].url;
img.src = data[i].image.medium;
rating.innerHTML = data[i].rating.average;
title.innerHTML = data[i].name;
genres.innerHTML = data[i].genres;
raiz.appendChild(title);
raiz.appendChild(genres);
hyperlink.appendChild(img);
raiz.appendChild(hyperlink);
raiz.appendChild(rating);
}
},
error: function(data) {
console.log("Error");
}
});.box {
float: left;
height: 300px;
width: 250px;
background-color: lavender;
border: solid 1px silver;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header></header>
<main>
<section id="raiz"></section>
</main>
<footer></footer>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>If anyone has suggestions on what I should do next, please let me know!