add fetch query with out calculating, thinking about how to make search function

index.html

@@ -14,6 +14,11 @@
         <input type="password" placeholder="Input your password" id="password">
     <button type="button" onclick="LoginOnsystem()">Login</button>
     </div>
+    <div class="counting_results"></div>
+
+    <div class="container" id="container">
+        <div class="card-wrap" id="card"></div>
+    </div>
 <script src="main.js"></script>
 </body>
 </html>

main.js

@@ -8,7 +8,7 @@ function ShowResult(text,points) {
     showResultinHtml.innerHTML = `${text} ${points}`;
     document.body.appendChild(showResultinHtml);
 }
-
+/* login function for saying result about login on the form */
 function LoginOnsystem() {
 
     let credentials = {
@@ -32,7 +32,7 @@ function LoginOnsystem() {
     /* console.log(`Your login ; ${loginFromInput} Your password: ${passwordFromInput}`); */
 }
 
-
+/* some actions for sequential calculation */
 
 let pointsEarnedAfterGame =  getRndInteger(225, 500);
 console.log(`Points earned after game : ${pointsEarnedAfterGame}`);
@@ -56,4 +56,95 @@ let howManyGamesNeedPlayed = Math.floor(pointsNeedForBuyNewCharacter/ pointsEarn
 console.log(`Games need to play for bought new character :  ${howManyGamesNeedPlayed}`);
 ShowResult('Games need to play for bought new character :', howManyGamesNeedPlayed);
 /* Math.floor(Math.random() * 500)+150; */
-/* Math.floor(Math.random() * 25000) + 10000; */
+/* Math.floor(Math.random() * 25000) + 10000; */
+
+
+/* fetch works */
+
+
+/* https://api.jikan.moe/v3/search/anime?q=naruto  fetch query*/
+
+
+/* async function getAnime() {
+    let url = 'https://api.jikan.moe/v3/search/anime?q=evangelion';
+        try{
+            let res = await fetch(url);
+            return await res.json();
+        } catch (err) {
+            console.log(err);
+        }
+} */
+   
+/* async function renderAnime() {
+    let anime = await getAnime();
+    let html = '';
+    (anime).forEach(anime => {
+        let htmlSegment = `<div class="anime-card">
+                            <img src="${anime.image_url}">
+                            <h2>${anime.title}</h2>
+                            <h3>${anime.score}</h3>
+                            <p>${anime.synopsis}</p>
+
+                        </div>`;
+        html += htmlSegment;
+    });
+
+    let container = document.querySelector('.container');
+    container.innerHTML = html;
+}
+
+renderAnime(); */
+
+/* const api_url = "https://api.jikan.moe/v3/search/anime?q=evangelion";
+
+async function getApi(url) {
+    const response = await fetch(url);
+
+    let data = await response.json();
+    console.log(data);
+    show(data);
+}
+
+getApi(api_url);
+
+function show(data) {
+   let htmlSegment = `<div class="anime-card">
+                            <img src="" alt="img">
+                            <h2>title</h2>
+                            <h3>score</h3>
+                            <p>synopsis</p>
+
+                        </div>`;
+    for (let anime of data.result) {
+        htmlSegment+= `
+                            <div class="anime-card">
+                            <img src="${anime.image_url}">
+                            <h2>${anime.title}</h2>
+                            <h3>${anime.score}</h3>
+                            <p>${anime.synopsis}</p>
+
+                        </div>`;
+    }
+    document.getElementsByClassName(".container")[0].innerHTML = htmlSegment;
+                    
+} */
+
+fetch('https://api.jikan.moe/v3/search/anime?q=berserk')
+    .then(response => response.json())
+    .then(anime => showAnime(anime.results));
+
+    showAnime = anime => {
+        let html = '';
+        anime.forEach(anime => {
+            html += `
+            
+                <div class="card">
+                <img src=${anime.image_url}>
+                <h2>${anime.title}</h2>
+                <h3>${anime.score}</h3>
+                <p>${anime.synopsis}</p>
+                </div>
+            `
+            document.getElementById('card').innerHTML = html;
+        })
+    }

style.css

@@ -1,7 +1,30 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 .form-login {
     width: 300px;
     align-items: center;
 }
 .form-login input {
     margin-bottom: 10px;
+}
+
+
+.container {
+    
+    max-width: 1500px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.card-wrap {
+    
+    display: flex;
+    flex-wrap: wrap;
+}
+.card {
+    max-width: 250px;
+    /* padding-right: 2rem; */
 }