js_homeworks/main.js

function getRndInteger(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function ShowResult(text,points) {
    let showResultinHtml = document.createElement("p");
    showResultinHtml.innerHTML = `${text} ${points}`;
    document.body.appendChild(showResultinHtml);
}
/* login function for saying result about login on the form */
function LoginOnsystem() {

    let credentials = {
        login: 'admin',
        password: 'qwerty'
    }
    let loginFromInput = document.getElementById('login').value;
    let passwordFromInput = document.getElementById('password').value;
    /* let divFromForm = document.getElementsByClassName("form-class"); */
    /* let backgroundRed = divFromForm.style.backgroundColor = 'red';
    let backgroundGreen = divFromForm.style.backgroundColor = 'green'; */
    if (credentials.login === loginFromInput && credentials.password === passwordFromInput) {
            document.getElementsByClassName("form-login")[0].style.background = "green";
    } else {
        document.getElementsByClassName("form-login")[0].style.background = "red";
        alert("wrong login or password");
    }
     /* ? backgroundGreen : backgroundRed; */
     /* (credentials.login === loginFromInput && credentials.password === passwordFromInput) ? document.getElementsByClassName("form-login")[0].style.background = "green" :  document.getElementsByClassName("form-login")[0].style.background = "red"; */

    /* 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}`);

ShowResult('Points earned after game :', pointsEarnedAfterGame);
/* let pointsEarnedResult = document.createElement("p");
pointsEarnedResult.innerHTML = `Points earned after game : ${pointsEarnedAfterGame}`;
document.body.appendChild(pointsEarnedResult); */



let pointsNeedForBuyNewCharacter = getRndInteger(10000, 25000); 
console.log(`Points need for new character : ${pointsNeedForBuyNewCharacter}`);

/* let pointsNeedForBuyNewCharacterResult = document.createElement("p");
pointsNeedForBuyNewCharacterResult.innerHTML = `Points need for new character : ${pointsNeedForBuyNewCharacter}`;
document.body.appendChild(pointsNeedForBuyNewCharacterResult); */

ShowResult('Points need for new character :', pointsNeedForBuyNewCharacter);
let howManyGamesNeedPlayed = Math.floor(pointsNeedForBuyNewCharacter/ pointsEarnedAfterGame);
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; */


/* 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;
        })
    }