0

ввожу в поиск слово, снизу появляется информация о репозитории. после добавления 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);
  };
}
4
  • Пробовали display: inline-block;?
    – ΝNL993
    16 янв в 16:43
  • @ΝNL993, да, для wrapper, не помогло 16 янв в 16:50
  • Можете, пожалуйста, опубликовать код в Stack Overflow (В виде текста, а не изображения)? CodePen не даёт зайти :)
    – ΝNL993
    16 янв в 16:54
  • @ΝNL993, извиняюсь, не знал что ссылки не работают, исправил 16 янв в 17:05

1 ответ 1

1

Вот пример кода где .wrapper подстраивается под кол-во ответов (изменил на 4 для наглядности), если вас не устраивает стандартная высота, то задайте её используя min-height.

// 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=4`
    );
    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);
  };
}
body {
  background-color: #e5e5e5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  width: 661px;
  background-color: #c4c4c4;
  margin: 0px auto;
  margin-top: 100px;
  box-shadow: 0px 5px 10px;
  display: inline-block;
}

.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;
}

Как это работает?

Из-за того что у вас была фиксированная высота (высота указанная в пискелях), inline-block не работал, поэтому я убрал пропорцию height, и теперь блок сам подстраивается под кол-во запросов.

4
  • но розовые карточки все равно вылезают за его границы 16 янв в 17:33
  • @ИванВалучев Если у вас какая-то другая проблема, не обозначенная в вопросе, то, пожалуйста, задайте новый вопрос.
    – ΝNL993
    16 янв в 19:12
  • @ИванВалучев, но всё равно, не понимаю, о каких таких розовых карточках идёт речь? В коде даже намёка на розовый нет, а уж тем более, то что какой-то блок вылезает за границы. Можете объяснить, пожалуйста?
    – ΝNL993
    16 янв в 19:14
  • разобрался) спасибо, помогли!) 17 янв в 10:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.