SpaceX API 🍋에서 더 많은 데이터를 공유할 수 있는 Vista

Literal Strings(ES6) 클라이언트에 대한 렌더링 작업이 빠르게 진행됩니다.
Shadow Dom을 조작할 필요가 없으며 사용자 정의 요소를 만들 필요가 없습니다. 템플릿을 사용하여 기능을 수행하거나 Javascript를 직접 코드로 구현하고 HTML 요소를 포함하거나 내부 HTML을 포함하는 콘텐츠에 참여하지 않아도 됩니다.

El famoso innerHTML:

        contenedorCardsData.innerHTML += `
                            <div class="contenedorCardsItems">
                                <h4>${element.serial}</h4>
                                <div class="contenedorStatus">
                                    <span class="blue">${element.type}</span>
                                    <span class="yellow">${element.status}</span>
                                </div>

                                <div class="contenedorTextos">
                                    <p class="descripcion">${element.last_update}</p>
                                    <p class="fechaLanzamiento">Fecha de Lanzamiento</p>
                                    <p class="fechaLanzamientoContent">${element.original_launch}</p>
                                </div>
                            </div>
                            `;
    } else {

        // Pasar código para mostrar advertencia de que no existen resultados

    }
}

Siendo este un desarrollo que me tomó mas o menos 15 min crearlo, tiene muchas cosas que mejorar por lo que puedes agrear tus propias mejoras, puedes agregar filtros, de hecho el botón del filtro esta listado en la UI solo debes agregarle funcionalidad y practicar ya que el código para pasar peticiones fetch lo tienes acá:

async function busqueda() {
    var categorie = document.querySelector('#categoria').value;
    var spacexApi = await fetch(`https://api.spacexdata.com/v4/${categorie}`);
    return spacexApi;
}

Tres lineas de código que te permiten obtener la respuesta y poder manejarla como promesa para poder hacer con ella lo que quieras.

Veamos como se ve el diseño 최종 🍋

로드 요소는 아마릴로즈 티엔이 아닌 애니메이션을 로드할 때, 코드를 저장할 때입니다.

🍋 Solo se basa en un par de parametros que pasas a través de Fetch

Como siempre, trato de dejar el código de la forma mas entendible posible para que puedas reutilizar los estilos en cualquiera de tus frameworks favoritos, finalmente cuando envias la petición a través de fetch puedes manejar directamente esa respuesta, gracias a que el endpoint de SpaceX API te genera el resultado en base al query que estas haciendo y sin usar ní una sola clase.

¿Conocimiento Importantes Para el Desarrollo?

가져오기 API

:root {
    --main-bg-color: #0E0E0E;
    --secondary-bg-color: #161616;
    --blue-color: #4E54FF;
    --yellow-color: #F4E236;
    --bg-cards: rgba(255, 255, 255, 0.103);
}
}

CSS (그리드/플렉스/키프레임)

header {
    height: 200px;
    width: 100%;
    display: grid;
    grid-template-columns: 20% 30% 20% 15% 15%;
    grid-template-rows: 100px;
}

CSS/Animación previa a la búsqueda

.loading::before {
    content: "";
    width: 40px;
    height: 100%;
    background: linear-gradient(96.4deg, rgba(255, 255, 255, 0) 4.54%, rgba(255, 255, 255, 0.265283) 57.15%, rgba(255, 255, 255, 0) 94.26%);
    position: absolute;
    opacity: .4;
    animation: move 1s infinite;
}

//el keyframe
@keyframes move {
    0% {
        transform: translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateX(200px) rotate(20deg);
    }
    100% {
        transform: translateX(0px) rotate(0deg);
    }
}

CSS/목록 목록 작성

.listaSeleccion {
    display: flex;
    justify-content: center;
    align-items: center;
}

.listaSeleccion select {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    background-color: transparent;
    border: none;
    outline: none;
    font-family: Montserrat;
    font-weight: 500;
    color: var(--main-yellow);
}

.listaSeleccion select * {
    background-color: var(--main-blue);
    border: none;
    box-shadow: none;
}

.listaSeleccion select>option {
    background-color: var(--main-blue);
    border: none;
    box-shadow: none;
    color: var(--main-yellow);
}

Javascript/Manejador de eventos principal

search.addEventListener('click', function(e) {
    let select = categorie.value;
    let string = txtSearch.value;
    busqueda()
        .then(data => { return data.json() })
        .then(res => {
            // console.log(res);
            contenedorCardsData.innerHTML = "";
            if (select == "capsules") {
                res.forEach(element => {
                    busquedaCapsules(element, string);
                })
            } else if (select == "history") {
                res.forEach(element => {
                    buscarHistory(element, string);
                })
            }

        });


});

CSS/Microinteraction para el filtro

.contenedorFilter span {
    width: 25px;
    height: 2px;
    margin: 3px;
    background-color: var(--main-blue);
    transition: .4s;
    cursor: pointer;
}

.contenedorFilter:hover span {
    width: 35px;
}

.contenedorFilter:hover span:nth-child(2) {
    width: 10px;
}

.contenedorFilter span:nth-child(2) {
    width: 15px;
    height: 2px;
    margin: 3px;
    background-color: var(--main-yellow);
}

.contenedorFilter span:nth-child(3) {
    width: 10px;
    height: 2px;
    margin: 3px;
    background-color: var(--main-yellow);
}

.contenedorFilter:hover span:nth-child(3) {
    width: 5px;
}

Sí no conoces CSS, JS te costará mil veces .

Este código no ha sido testeado, por lo tanto lo puedes mejorar mil veces mas

Parte Importante de tu aprendizaje en web design, es la utilización de APIs y manejo del DOM con un enfoque en desarrollo web 2021, evita esmerarte en que tu aplicación sea compatible con IE, ya tiene una muerte anunciada así que mejorar preparate para adentrarte en del desarrollo mordenos, APIS, Frameworks, Javascript Moderno...

Es el encarga de cambiar la propiedad de display none a block y 그 반대, puedes animar la transición del elemento contenedor como práctica o simplemente dejarlo como está actualmente.

Este es mi correo profesional [email protected] , si me escribes te aseguro que tendrás una respuesta.

설명,


호세 A. 아마야

Link al repo

Link a la demo