porq el script no me funciona si lo paso a un archivo aparte ? ya he echo el src en el html y lo compruebo con un alert() pero no me func...

Jesus Alveiro Monsalve Zerpa

Pregunta

student•hace 4 años

porq el script no me funciona si lo paso a un archivo aparte ?

ya he echo el src en el html y lo compruebo con un alert() pero no me funciona nada así

Estefany Aguilar

teacher•hace 4 años

Veo por los comentarios que ya lo lograste solucionar ! Geniaaal 💚

Jesus Alveiro Monsalve Zerpa

student•hace 4 años

oye si, gracias el error estaba en el HTML estaba mal indexado el js, y si, efectivamente es un error al momento de pegar, pues yo suelo separar todo sino me pierdo. gracias

salu2

Luis Garcia Hernandez

student•hace 4 años

buen día podrías colocar el script en esta área antes de cerrar el body

          <!-- modal -->
            <section class="modal hidden">
                <div class="modal__content"></div>
            </section>
            <script src="script.js"></script>
        </div>
    </body>
  
</html>

y no se si se pego mal pero tienes creo todas las etiquetas pegadas con otras como en

 <sectionclass="modal hidden">
                <divclass="modal__content"></div>
            </section>

Jesus Alveiro Monsalve Zerpa

student•hace 4 años

es el mismo del video solo q en el archivo script

Jesus Alveiro Monsalve Zerpa

student•hace 4 años

en el html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
    <body>
        <div class="page">
                <!-- main contene -->
            <section class="container">
                <nav class="navbar">
                    <div class="navbar__content">
                            <img src="https://i.ibb.co/MMmDPXN/lego.png" alt="logo_lego">

                            <ul>
                                <li><a href="#">Exclusivos</a></li>
                                <li><a href="#">NUEVOS</a></li>
                                <li><a href="#">GIFT CARDS</a></li>
                                <li><a href="#">FIND A STORE</a></li>
                            </ul>
                    </div>
                </nav>

                <section class="main-content">
                    <p>Diseña tu</p>
                    <h1>SÚPER HÉROE</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, porro quidem nam reiciendis sapiente atque, voluptatibus et error dignissimos, aspernatur rerum tenetur enim! Alias, eos similique blanditiis molestiae pariatur impedit.</p>
                </section>
                
                <section class="side-content">
                    <div></div>
                    <p>Superman</p>
                    <img src="https://i.ibb.co/x16pz1x/super-man.png" alt="Superman">

                </section>

                <section class="footer">
                    <div id="button1">
                        <img src="https://i.ibb.co/tKWqw8J/spiderman.png" alt="spiderman">
                    </div>
                    <div>
                        <img src="https://i.ibb.co/Xzsdvgg/robin.png" alt="robin">
                    </div>
                    <div>
                        <img src="https://i.ibb.co/M18p91c/batman.webp" alt="batman">
                    </div>
                </section>





            </section>
            <!-- loader -->
            <section class="loader">
                <div></div>
                <div></div>
                <div></div>
            </section>



            <!-- modal -->
            <section class="modal hidden">
                <div class="modal__content"></div>
            </section>
        </div>
    </body>
  
</html>

en el js


const modal = document.querySelector('.modal');
const button1 = document.querySelector("#button1");

button1.addEventListener("click", () => {
    modal.classList.remove("hidden")
    modal.classList.add("visible")

})

en el css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;700&display=swap');

:root{
    --yellow: #ffd602;
    --red: #d5040a;
    --blue: #036cb6;
}

body{
    font-family: 'Noto Sans TC', sans-serif;
    height:100vh;
    margin: 0;
    overflow: hidden;
}

.page{
    position: relative;
    height: 100vh;

}

.container{
    position: absolute;
    z-index: 1;

    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-rows: 20% 50% 30%;
    grid-template-areas:"nav        aside"
                        "section    aside"
                        "footer     aside";
    height: 100%;
    width: 100%;                
}

.navbar {
    grid-area: nav;
    display: flex;
}

.navbar__content{

    display: flex;
    align-items: center;
    width: 100%;
    padding-left:80px;
    opacity: 0;
    animation: 2s navbar 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; 
}
@keyframes navbar {
0% {transform: translateY(-200px); opacity: 1;}
100% {transform: translateY(0px); opacity: 1;}    
}
.navbar__content img{
    width: 50px;
}
.navbar__content ul{
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    padding: 0;
    width: 28rem;
}

.navbar__content ul li a{
    color: var(--red);
    text-decoration: none;
    font-weight:100;
}

.main-content {
    grid-area: section;
    padding-left: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    animation: 2.2s main-content 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
@keyframes main-content {
    0% {transform: translateY(-700px);opacity: 1;}
    100% {transform: translateY(0px); opacity: 1;}    
    }
.main-content p:first-child{
font-size: 36px;
font-weight: 300;
margin: 0 0 -14px 44px;
}
.main-content h1{
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 28px 0;
}

.main-content p:last-child{
    font-weight: 100;
    margin: 0px;
    width: 60%;
}



.side-content{
    grid-area: aside;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
}

.side-content p{
    transform: rotate(-90deg);
    font-size: 36px;
    grid-row: 1/2;
    grid-column: 1/2;
    opacity: 0%;
    animation-name: side-content-text;
    animation-duration: 1s;
    animation-delay: 2.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes side-content-text {
    0%{ opacity: 0;}

    100%{opacity: 1;}
}

    .side-content img{
        width: 100%;
        grid-row: 1/2;
        grid-column: 2/6;
        opacity: 0;
        animation: 2s main-content-img 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    }
    @keyframes main-content-img {
        0% {transform: translatex(700px);opacity: 1;}
        100% {transform: translatex(0px); opacity: 1;}    
        }

        .side-content div{
            height: 100%;
            background-color: var(--yellow);
            grid-row: 1/2;
            grid-column: 4/7;
            border-radius: 10% 0 0 10%;
        }

        .footer{
            display: flex;
            justify-content: space-evenly;
            align-items: flex-end;
            grid-area: footer;
            background-color: var(--yellow);
            border-radius: 0 50px 0 0;
            opacity: 0;
            animation: 2s footer 0.5s ease-in-out forwards;
        }
        @keyframes footer {
            0% {transform: translateY(700px);opacity: 1;}
            100% {transform: translateY(0px); opacity: 1;}    
            }
            
        .footer div{
            background-color: var(--blue);
            width: 130px;
            height: 50%;
            border-radius: 20px 20px 0 0;
            display: flex;
            justify-content: center;
        }

        .footer div img{
            width: 160px;
            position: absolute;
            bottom: 30px;
            transform: translateY(0px) scale(1);
            transition: transform 0.5s ease-in-out;
        
        }

        .footer div:hover img{
            cursor: pointer;
            transform: translateY(-20px) scale(1.1);
            transition: transform 0.3s ease-in-out;
        }


    .loader{
    background:var(--red);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;
    animation: loader 2s linear forwards;
    }

    @keyframes loader{
    0%{ opacity: 1; visibility: visible;}
    85%{opacity: 1; visibility: visible;}
    100%{opacity: 0; visibility: hidden;}
    }

    .loader div{
        background: gray;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        margin: 1rem;

        animation: scaling 2s ease-in-out infinite;    
    }
    @keyframes scaling {
    0%, 100%{transform: scale(0.2);}
    40%{transform:scale(1);}
    50%{transform:scale(1);}
    }

    .loader div:nth-child(2) {
        animation-delay: 0.4s;
    }

    .loader div:nth-child(3) {
        animation-delay: 0.6s;
    }

    .modal{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        z-index: 4;
        display: grid;
        place-items: center;
    }

    .modal__content{
        background: white;
        width: 50% ;
        height: 50%;
    }
    .hidden{display: none;}
    .visible{display: grid;}

Luis Garcia Hernandez

student•hace 4 años

buen día, podrías mostrar tu código para poder analizarlo

porq el script no me funciona si lo paso a un archivo aparte ? ya he echo el src en el html y lo compruebo con un alert() pero no me func...

Curso de Maquetación y Animaciones con CSS

Curso de Maquetación y Animaciones con CSS