ввожу в поиск слово, снизу появляется информация о репозитории. после добавления 4 карточки нужно сделать чтобы серый блок увеличивался по высоте под содержимое 5 и так далее карточек. пробовал это
overflow:auto;
min-height:...;
CSS:
body {
background-color: #e5e5e5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
width: 661px;
height: 763px;
background-color: #c4c4c4;
margin: 0px auto;
margin-top: 100px;
box-shadow: 0px 5px 10px;
}
.content {
position: relative;
width: 500px;
/* height: 60px; */
margin: 0px auto;
padding-top: 62px;
}
.input {
/* position: absolute; */
/* margin-top: 62px; */
width: 500px;
height: 60px;
font-size: 30px;
outline: none;
}
li {
background-color: #e3e3e3;
border: 1px solid grey;
list-style-type: none;
height: 44px;
font-size: 25px;
padding-top: 5px;
padding-left: 10px;
}
li:hover {
background-color: #65cdf9;
}
.users {
position: absolute;
width: 500px;
top: 337px;
}
.users_item {
position: relative;
display: flex;
flex-direction: column;
vertical-align: middle;
height: 100px;
width: 500px;
background-color: #e27beb;
border: 1px solid grey;
margin-top: 5px;
}
span {
display: inline-block;
margin-top: 6px;
margin-left: 20px;
font-size: 20px;
}
.delete-button {
background-image: url("/4.3.7ApiGitHub/image/aaa.png");
background-color: transparent;
height: 62px;
width: 66px;
position: relative;
top: -68px;
left: 414px;
background-repeat: no-repeat;
border: none;
}
JS:
// let image = document.querySelectorAll(".image");
let wrapper = document.createElement("div");
wrapper.className = "wrapper";
document.body.append(wrapper);
let content = document.createElement("div");
content.className = "content";
wrapper.append(content);
let input = document.createElement("input");
input.placeholder = "Enter the name of the repository...";
input.className = "input";
content.append(input);
let users = document.createElement("div");
users.className = "users";
content.append(users);
let links = document.createElement("div");
links.className = "links";
content.append(links);
input.addEventListener(
"keyup",
debounce(async (e) => {
const response = await fetch(
`https://api.github.com/search/repositories?q=${e.target.value}&per_page=5`
);
if (response.ok) {
let data = await response.json();
let arr = data.items.map((item) => {
return item.name;
});
links.innerHTML = "";
for (let i = 0; i < arr.length; i++) {
links.append(createLinks(arr[i]));
// setTimeout(() => {
// e.target.value = "";
// }, 5000);
}
links.addEventListener("click", (e) => {
for (let i = 0; i < data.items.length; i++) {
if (e.target.innerText == data.items[i].name) {
users.append(createCards(data.items[i]));
e.target.innerText = "";
links.innerHTML = "";
}
}
input.value = "";
});
} else {
console.log("Пользователь не найден");
}
}, 100)
);
function createLinks(data) {
let userLink = document.createElement("div");
userLink.innerHTML = `
<li>${data}</li>
`;
userLink.addEventListener("click", () => {});
return userLink;
}
function createCards(data) {
let userItem = document.createElement("div");
userItem.className = "users_item";
userItem.innerHTML = `
<span>Name:${data.name}</span>
<span>Owner:${data.owner["login"]}</span >
<span>Stars:${data.stargazers_count}</span>
`;
userItem.append(createDeleteBtnEl());
function createDeleteBtnEl() {
const element = document.createElement("button");
element.classList.add("delete-button");
element.innerText = `\n\n\n\n\n`;
element.addEventListener("click", () => {
userItem.remove();
});
return element;
}
return userItem;
}
function createDeleteBtnEl() {
const element = document.createElement("button");
// element.classList.add("delete-button");
element.innerText = "Удалить";
element.addEventListener("click", (e) => {
userItem.innerHTML = "";
console.log("1");
});
return element;
}
function debounce(fn, ms) {
let timer;
return function () {
const fnCall = () => {
fn.apply(this, arguments);
};
clearTimeout(timer);
timer = setTimeout(fnCall, ms);
};
}
display: inline-block;
?