kottans · OleksiyRudenko · Sep 7, 2022 · Jun 21, 2021 · Jun 22, 2021 · Jul 19, 2021
diff --git a/submissions/DaniaB24/js-dom/index.html b/submissions/DaniaB24/js-dom/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" type="text/css" href="style/style.css" />
+  <title>DOM_PRACTICE</title>
+</head>
+
+<body>
+  <header class="header-of-page">
+    <h1 class="header-name">Персонажи из игры dota 2</h1>
+  </header>
+  <section class="list-of-creatures">
+    <ul id="list-of-creatures">
+      <li class="creature-dota" id="pudge">Pudge</li>
+      <li class="creature-dota" id="bristleback">Bristleback</li>
+      <li class="creature-dota" id="shadowFiend">Shadow Fiend</li>
+      <li class="creature-dota" id="queenOfpain">Queen of Pain</li>
+    </ul>
+  </section>
+  <aside class="content-block">
+
+  </aside>
+  <script src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/submissions/DaniaB24/js-dom/js/main.js b/submissions/DaniaB24/js-dom/js/main.js
@@ -0,0 +1,49 @@
+const container = document.querySelector(".content-block");
+const listOfCreatures = document.querySelector("#list-of-creatures");
+
+const dotaHeroes = [
+  {
+    id: "pudge",
+    name: "Pudge",
+    image: "/img/pudge.png",
+    description:
+      "Pudge — это герой с ближним типом атаки, основным атрибутом которого является сила.Его первая способность,  Meat Hook, бросает окровавленный крюк в определенную область или юнита. Крюк зацепится за первого юнита, в которого попадет, притащит его к Pudge и нанесет урон, если это враг. Вторая способность,  Rot, токсичное облако, вызванное из-за гноения, постоянно наносит урон и замедляет противников, ранит не только вражеских юнитов, но и самого Pudge. Пассивная способность,  Flesh Heap, дает Pudge дополнительное сопротивление магии, а также дополнительную силу, которая увеличивается, когда Pudge убивает вражеского героя, или тот умирает поблизости. Способность начинает накапливать заряды уже до того, как будет выучена, но получить силу герой сможет, только изучив ее. Ультимативной способностью,  Dismember, Pudge начинает заживо пожирать вражеского юнита, обездвиживая его и нанося периодический урон. ",
+  },
+  {
+    id: "bristleback",
+    name: "Bristleback",
+    image: "/img/brist.png",
+    description:
+      "Bristleback — это герой с ближним типом атаки, основным атрибутом которого является сила.Герой известен своим набором синергичных, упрощенных, и в то же время эффективных заклинаний с низкими затратами маны и временем перезарядки. Хотя каждое произнесение его заклинаний само по себе имеет относительно слабую силу, их применения имеют кумулятивный эффект, что делает Bristleback тем более смертоносным, чем дольше он остается живым в бою; это напрямую отражается в его ультимативной способности,  Warpath, которая увеличивает скорость передвижения и урон от атак героя в зависимости от количества заклинаний, которые он недавно использовал. Герой может по нарастанию замедлять своих врагов и уменьшать их броню с помощью  Viscous Nasal Goo и поражать их шквалом  Quill Spray, что делает его эффективным преследователем при ганках. Из-за его низкого прироста силы он, на первый взгляд, кажется менее живучим, чем большинство героев класса Strength attribute symbol.png сила, но его фирменная пассивная способность  Bristleback существенно снижает весь урон, который герой получает с боков и особенно со спины, что делает его очень сложной целью для убийства, если он отвернут от своих врагов.",
+  },
+  {
+    id: "shadowFiend",
+    name: "Shadow Fiend",
+    image: "/img/Sf.png",
+    description:
+      "Shadow Fiend — это герой с дальним типом атаки, основным атрибутом которого является Ловкость. Первые три способности,  Shadowraze, разрывают участок земли перед Shadow Fiend, нанося урон всем врагам в зоне действия. Разница между этими способностями заключается в дальности применения. Первая пассивная способность,  Necromastery, крадет душу каждого убитого врага, давая бонус к урону атак. После смерти половина из них теряется. Вторая пассивная способность,  Presence of the Dark Lord, снижает броню ближайших врагов. Ультимативная способность,  Requiem of Souls, выпускает собранные души, которые наносят урон всем существам вокруг, также они снижают наносимый ими урон и накладывают эффект страха. Если Shadow Fiend погибает, то способность автоматически срабатывает вне зависимости от ее готовности, но не применяет страх и действует вполсилы.",
+  },
+  {
+    id: "queenOfPain",
+    name: "Queen of Pain",
+    image: "/img/Qp.png",
+    description:
+      "Queen of Pain — герой с дальним типом атаки и основным атрибутом интеллект. Она использует свои способности, чтобы приблизиться к врагам и нанести им огромный урон по области. Благодаря этой возможности, а также умению легко преследовать одиночные цели, обычно стоит на средней линии и играет роль ганкер и полу-фарм.  Blink — это основа набора способностей героини. Именно он позволяет ей врываться в драки и избегать их. Заняв атакующую позицию, Акаша со  Scream of Pain и  Sonic Wave способна сразу сокрушить целую команду. Погоня за блуждающими врагами — ещё одна сильная сторона Queen of Pain: с  Shadow Strike она никому не оставит шанса убежать. Акаша очень ловко совершает убийства в ранней игре, и при правильной сборке превращается в отличного героя полу-фарм.",
+  },
+];
+
+function createCard(hero) {
+  container.innerHTML = `
+  <div class="contentBlock">
+    <h2 class="name-of-hero">${hero.name}</h2>
+    <img src="${hero.image}"class="hero-image">
+    <p class="hero-description">${hero.description}</p>
+  </div>
+  `;
+}
+function handleHeroClick(e) {
+  dotaHeroes.forEach((hero) => {
+    if (e.target.id === hero.id) createCard(hero);
+  });
+}
+listOfCreatures.addEventListener("click", handleHeroClick);
diff --git a/submissions/DaniaB24/js-dom/style/style.css b/submissions/DaniaB24/js-dom/style/style.css
@@ -0,0 +1,145 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: lightblue;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+header {
+  width: 100%;
+}
+section {
+  width: 25%;
+}
+aside {
+  width: 65%;
+}
+.header-name {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 0px 0px 30px 0px;
+  padding: 21px;
+  font-size: 37px;
+  font-family: cursive;
+  background-color: mediumpurple;
+}
+
+#list-of-creatures {
+  flex-direction: column;
+}
+
+.creature-dota {
+  padding: 15px 0px 15px 0px;
+  box-shadow: 5px 5px 5px #842695;
+  text-align: center;
+  width: 75%;
+  border-radius: 5px;
+  margin: 40px 20px 0px 22px;
+  font-size: 20px;
+  background-color: mediumpurple;
+  font-family: cursive;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.content-block {
+  display: flex;
+  justify-content: flex-end;
+
+}
+
+.contentBlock {
+  background-color: mediumpurple;
+  width: 80%;
+  box-shadow: 5px 5px 5px #842695;
+  border-radius: 8px;
+  margin: 30px 30px 0 90px;
+  padding: 5px 30px 15px 30px;
+}
+
+.name-of-hero {
+  display: flex;
+  justify-content: center;
+  margin: 15px auto 20px auto;
+  font-size: 27px;
+  font-family: cursive;
+}
+
+.hero-image {
+  width: 200px;
+  height: 200px;
+  float: left;
+  margin: 0 5px 5px 0;
+  border-radius: 10px;
+}
+
+.hero-description {
+  margin: 0px 0px 5px 0px;
+  font-size: 22px;
+  text-align: justify;
+}
+
+@media (max-width: 750px) {
+  .content-block {
+    display: flex;
+    width: 60%;
+    margin: 0 auto;
+
+  }
+  .list-of-creatures {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    margin: 0 auto;
+  }
+  .header-name {
+    font-size: 25px;
+  }
+  .hero-description {
+    font-size: 15px;
+    text-align: justify;
+  }
+  .creature-dota {
+    padding: 15px;
+    font-size: 17px;
+  }
+  #list-of-creatures {
+    display: flex;
+    flex-direction: row;
+    margin: 0 auto;
+    padding: 0;
+  }
+  .name-of-hero {
+    font-size: 18px;
+  }
+  .hero-image {
+    width: 160px;
+    height: 160px;
+  }
+  .hero-description {
+    font-size: 17px;
+  }
+
+  .contentBlock {
+    margin: 60px auto;
+    padding: 5px 30px 15px 30px;
+  }
+}
+@media (max-width: 540px) {
+  .header-name {
+    font-size: 18px;
+  }
+  .hero-description {
+    font-size: 13px;
+  }
+  .creature-dota {
+    padding: 10px;
+    font-size: 13px;
+  }
+  .contentBlock {
+    margin: 60px auto;
+    padding: 5px 30px 15px 30px;
+  }
+}