FrankenBuilds

Code Below...

View Live Site

HTML

                            
                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style/style.css">
    <title>Star Wars App | Built by FrankenBuilds.com</title>
</head>
<body>
    <div class="header">
        <div id="api">
            <h4>api</h4>
            <h1>STAR</h1>
            <h2>WARS</h2>
        </div>
        
    </div>
    <div class="main-div-container">
        
    </div>
    <h3>Thanks for finding the bottom of the page! :)</h3>
    <script src="./js/app.js"></script>
</body>
</html>

CSS

                            
                                    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Goldman;
    }
    
    body::-webkit-scrollbar {
        width: 0.5rem;
    }
    
    body::-webkit-scrollbar-thumb {
        background-color: #2f2c2c;
        outline: none;
    }
    
    body{
        background-color: rgb(20, 20, 20);
    }
    
    .header{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 10rem;
        width: 100%;
        background-color: rgb(12, 12, 12);
        color: yellow;
    }
    
        #api{
            position: relative;
        }
    
            #api h4{
                position: absolute;
                bottom: -10%;
                right: -8%;
                transform-origin: center;
                animation: rotate 0.8s ease-in-out alternate infinite;
                font-size: 2.5rem;
                color: #c33333;
            }
    
            #api h1{
                font-size: 6rem;
                line-height: 4rem;
                letter-spacing: 0.8rem;
            }
        
            #api h2{
                font-size: 6rem;
                line-height: 4rem;
            }
    
    .main-div-container{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        padding-top: 10vh;
        width: 80%;
        margin: auto;
        row-gap: 2rem;
        column-gap: 1.5rem;
    }
    
    .character{
        width: 400px;
        height: 500px;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        position: relative;
    }
    
        .main{
            background-color: rgb(15, 15, 15);
            border-radius: 20px;
            height: 500px;
            border: 2px solid rgb(0, 0, 0);
        }
    
            .top{
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 16px 16px 0 0;
                background-color: #c33333;
                box-shadow: 0 4px 4px #c33333d5;
            }
    
                .top h1{
                    color: white;
                    font-size: 1.5rem;
                }
    
            .bottom{
                padding: 0 1rem 1rem 1rem;
                display: flex;
                flex-direction: column;
                height: 400px;
                justify-content: center;
            }
    
                .info{
                    padding: 0.7rem 1rem;
                    display: flex;
                    justify-content: space-between;
                    font-weight: 400;
                }
    
                    .info p{
                        color: white;
                    }
    
                .button{
                    border: none;
                    background-color: #c33333;
                    border-radius: 5px;
                    width: 80%;
                    text-decoration: none;
                    padding: 0.5rem 1.5rem;
                    margin: 0 1rem;
                    text-align: center;
                    color: white;
                    cursor: pointer;
                }
    
        .extra{
            position: absolute;
            width: 100%;
            height: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 2rem;
            background-color: rgb(12, 12, 12);
            border-radius: 20px;
            z-index: -1;
        }
    
            .name-area{
                flex: 20%;
                display: flex;
                align-items: center;
            }
    
                .name{
                    color: yellow;
                    font-size: 1.5rem;
                }
    
            .info-area{
                flex: 80%;
                width: 100%;
            }
    
    .close-btn{
        position: absolute;
        width: 30px;
        height: 30px;
        cursor: pointer;
        opacity: 0;
        top: 55px;
        left: 5px;
    }
    
        .close-btn-vis{
            animation-duration: 3s;
            animation-fill-mode: forwards;
            animation-name: fadeIn;
        }
    
    h3{
        width: 100%;
        margin-top: 2rem;
        text-align: center;
        color: white;
        font-weight: 400;
    }
    
    
    .peekIn{
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-name: peekIn;
    }
    
    .peekOut{
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-name: peekOut;
    }
    
    .extra-open{
        animation-duration: 1.3s;
        animation-fill-mode: forwards;
        animation-name: extraHightlightIn;
    }
    
    .extra-close{
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-name: extraHightlightOut;
    }
    
    @keyframes peekIn{
        from{
            box-shadow: 0px 0px 0px rgba(19, 19, 19, 0);
            transform: translateY(0px);
        }
        to{
            box-shadow: 4px 14px 6px rgb(0, 0, 0);
            transform: translateY(-450px);
        }
    }
    
    @keyframes peekOut{
        from{
            box-shadow: 4px 14px 6px rgb(0, 0, 0);
            transform: translateY(-450px);
        }
        to{
            box-shadow: 0px 0px 0px rgba(19, 19, 19, 0);
            transform: translateY(0px);
        }
    }
    
    @keyframes fadeIn{
        from{
            opacity: 0;;
        }
        to{
            opacity: 100;
        }
    }
    
    @keyframes extraHightlightIn{
        from{
            border: 2px solid rgba(255, 255, 0, 0);
        }
        to{
            border: 2px solid rgba(255, 255, 0, 0.7);
        }
    }
    
    @keyframes extraHightlightOut{
        from{
            border: 2px solid rgba(255, 255, 0, 0.7);
        }
        to{
            border: 2px solid rgba(255, 255, 0, 0);
        }
    }
    
    @keyframes rotate {
        from{
            transform: rotate(-10deg);
        }
        to{
            transform: rotate(20deg);
        }
    }
    
    /* Media Queries*/
    @media only screen and (max-width: 1024px) {
        .main-div-container{
            padding-top: 2vh;
        }
    }
    
    
    @media only screen and (max-width: 768px) {
        .main-div-container{
            width: 50%;
        }
    }
    
    @media only screen and (max-width: 375px) {
        #api{
            position: relative;
            width: 100%;
            text-align: center;
        }
    
            #api h4{
                bottom: 0;
                right: 11%;
                font-size: 1.8rem;
            }
    
            #api h1{
                font-size: 4rem;
                line-height: 2rem;
                letter-spacing: 0.7rem;
            }
        
            #api h2{
                font-size: 4rem;
                line-height: 4rem;
            }
        
        .main-div-container{
            width: 90%;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
    
        .character{
            width: 100%;
    
        }
    
        .button{
            width: 60%;
            margin: 0 0.2rem;
        }
    }

                        
                                const heightCal = 30.48;
    const weightCal = 2.205;
    
    const mainGrid = document.querySelector(".main-div-container");
    
    const imageLinkExt = "&source=lnms&tbm=isch";
    
    let currentCharacter = 0;
    
    let currentJsonCount = 0;
    
    let canLoad = true;
    
    let allChara;
    let allCharaExtra;
    let closeBtns;
    
    pullData(`https://swapi.dev/api/people/`);
    
    function results(){
        for (let i = 0; i < currentCharaJson.results.length; i++) {
        const character = document.createElement("div");
            character.classList.add("character");
            character.innerHTML = `
            <img class="close-btn" src="./img/close.png" onclick="closeBtn()">
            <div class="main">
                <div class="top">
                    <h1>${currentCharaJson.results[i].name}</h1>
                </div>
                <div class="bottom">
                    <div class="info">
                            <p>Height</p>
                            <p>${(currentCharaJson.results[i].height / heightCal).toFixed(1).replace(".", "ft ").concat("in")}</p>
                    </div>
                    <div class="info">
                            <p>Weight</p>
                            <p>${(currentCharaJson.results[i].mass * weightCal).toFixed(0).concat("(lbs)")}</p>
                    </div>
                    <div class="info">
                            <p>Hair Color</p>
                            <p>${currentCharaJson.results[i].hair_color}</p>
                    </div>
                    <div class="info">
                            <p>Skin Color</p>
                            <p>${currentCharaJson.results[i].skin_color}</p>
                    </div>
                    <div class="info">
                            <p>Eye Color</p>
                            <p>${currentCharaJson.results[i].eye_color}</p>
                    </div>
                    <div class="info">
                            <p>Birth Year</p>
                            <p>${currentCharaJson.results[i].birth_year}</p>
                    </div>
                    <div class="info">
                            <p>Gender</p>
                            <p>${currentCharaJson.results[i].gender}</p>
                    </div>
                    <div class="info">
                            <input class="button" type="submit" value="Home World" onclick="homeWorldDetails(${currentJsonCount}, ${"\'" + currentCharaJson.results[i].name + "\'"}, ${"\'" + currentCharaJson.results[i].homeworld + "\'"})" />
                            
                            <input class="button" type="submit" value="Pictures" onclick="viewPictures(${"\'" + currentCharaJson.results[i].name + "\'"})" />
                    </div>
                </div>
            </div>
            <div class="extra">
                <div class="name-area">
                    <h1 class="name"></h1>
                </div>
                <div class="info-area">
                    <div class="info info-extra">
                        <p>Planet</p>
                        <p class="planet"></p>
                    </div>
                    <div class="info info-extra">
                        <p>Rotation Period</p>
                        <p class="rotation"></p>
                    </div>
                    <div class="info info-extra">
                        <p>Orbital Period</p>
                        <p class="orbit"></p>
                    </div>
                    <div class="info info-extra">
                        <p>Diameter</p>
                        <p class="diameter"></p>
                    </div>
                    <div class="info info-extra">
                        <p>Climate</p>
                        <p class="climate"></p>
                    </div>
                    <div class="info info-extra">
                        <p>Gravity</p>
                        <p class="gravity"></p>
                    </div>
                    <div class="info info-extra">
                        <p>Terrain</p>
                        <p class="terrain"></p>
                    </div>
                    <div class="info info-extra">
                        <p>Surface Water</p>
                        <p class="surface-water"></p>
                    </div>
                    <div class="info info-extra">
                        <p>Population</p>
                        <p class="population"></p>
                    </div>
                    
                </div>
            </div>`;
            currentJsonCount++;
            mainGrid.appendChild(character);
        }
    }
    
    function grabFields(){
        allChara = document.querySelectorAll(".main");
        allCharaExtra = document.querySelectorAll(".extra");
        closeBtns = document.querySelectorAll(".close-btn");
    }
    
    function homeWorldDetails(pos, name, homeWorld){
        fetch(homeWorld)
            .then(response => response.json())
            .then(data => {
                allCharaExtra[pos].children[0].children[0].innerHTML = name;
                allCharaExtra[pos].children[1].children[0].children[1].innerHTML = data.name;
                allCharaExtra[pos].children[1].children[1].children[1].innerHTML = data.rotation_period;
                allCharaExtra[pos].children[1].children[2].children[1].innerHTML = data.orbital_period;
                allCharaExtra[pos].children[1].children[3].children[1].innerHTML = data.diameter;
                allCharaExtra[pos].children[1].children[4].children[1].innerHTML = data.climate;
                allCharaExtra[pos].children[1].children[5].children[1].innerHTML = data.gravity;
                allCharaExtra[pos].children[1].children[6].children[1].innerHTML = data.terrain;
                allCharaExtra[pos].children[1].children[7].children[1].innerHTML = data.surface_water;
                allCharaExtra[pos].children[1].children[8].children[1].innerHTML = data.population;
            });
    
        closeAnyOpen();
    
        allCharaExtra[pos].classList.add("extra-open");
        allCharaExtra[pos].classList.remove("extra-close");
        allChara[pos].classList.add("peekIn");
        allChara[pos].classList.remove("peekOut");
        closeBtns[pos].classList.add("close-btn-vis");
        currentCharacter = pos;
    }
    
    function closeBtn(){
        allCharaExtra[currentCharacter].classList.remove("extra-open");
        allCharaExtra[currentCharacter].classList.add("extra-close");
        allChara[currentCharacter].classList.remove("peekIn");
        allChara[currentCharacter].classList.add("peekOut");
        closeBtns[currentCharacter].classList.remove("close-btn-vis");
    }
    
    function closeAnyOpen(){
        if(allChara[currentCharacter].classList.contains("peekIn")){
            allCharaExtra[currentCharacter].classList.remove("extra-open");
            allCharaExtra[currentCharacter].classList.add("extra-close");
            allChara[currentCharacter].classList.remove("peekIn");
            allChara[currentCharacter].classList.add("peekOut");
        }
    }
    
    function viewPictures(name){
        if(name.contains == " "){
            name.replace(" ", "+");
            window.open('https://www.google.com/search?q='+ name + imageLinkExt, "_blank");
        }else{
            window.open('https://www.google.com/search?q='+ name + imageLinkExt, "_blank");
        }
    }
    
    function pullData(url){
        fetch(url)
            .then(response => response.json())
            .then(data => {
                currentCharaJson = data;
                results();
                grabFields();
                canLoad = true;
            });
    }
    
    addEventListener('wheel', () => {
        window.onscroll = function (ev) {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 50) {
                if (currentCharaJson.next != "null" && canLoad) {
                    pullData(currentCharaJson.next);
                    console.log(currentCharaJson.next);
                    canLoad = false;
                }else{
                    //Nothing more to see here :(
                }
            }
        };
    });

Code Display

Code Below...

Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.

If you would like to try and build this yourself then you can download the assets here.

If you download the files and build this site please share your build with me at @FrankenBuilds. I would love to see how great you did!

Code Below...

**Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.**

If you would like to try and build this yourself then you can download the assets here.

If you download the files and build this site please share your build with me at @FrankenBuilds. I would love to see how great you did!

Remember this is not "THE" way to build this site. Just merely FrankenBuilds way.