Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por André

| 52.6k xp | 3 posts

Cara Prof. @Laís e colegas, boa tarde!

Ainda estou no início deste curso mas as animações deste projeto não estão funcionando de jeito nenhum pra mim.

Já instalei o Live Server, já criei até um pequeno icon pra deixar na pasta raíz, visto que o browser estava reclamando de um favicon.ico não encontrado, mas nada está dando jeito.

A seguir copiarei meus códigos:

index.html

Animando carders!

...

script.js

import { cards } from "./cards.js"

window.onload = () => { let c = new cards() document.addEventListener('scroll', c.teste) }

cards.js

class cards { constructor() { } teste() { console.log("Rolando...") } }

export { cards }

Hierarquia de pastas

Raiz index.html css style.css javascript script.js cards.js images

Problemas que aparecem no Console do meu browser (Chrome), fora o fato de nada funcionar

Live reload enabled. DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/pinComponent.js.map: System error: net::ERR_BLOCKED_BY_CLIENT DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/analytics.js.map: System error: net::ERR_BLOCKED_BY_CLIENT DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/ga.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

Aguém? Alguma dica ou solução!?!?!?...

Desde já agradeço a todos! Grande abraço e sucesso!!!...

3 respostas

por André

| 52.6k xp | 3 posts

17/03/2023

Agora com o arquivo ### index.html ###

<html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Lato&family=Pacifico&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <section class="section-dicas">
            <h1>Animando carders!</h1>

            <div class="container-cards">
                <article class="card card-esq">
                    <svg>
                        </svg>
                        <h2>...</h2>
                        <p>...</p>
                </article>
                <article class="card card-dir">
                    <svg>
                        </svg>
                        <h2>...</h2>
                        <p>...</p>
                </article>
            </div>
        </section>

        <script type="module" src="javascript/script.js"></script>
    </body>
</html>

solução!

por André

| 52.6k xp | 3 posts

20/03/2023

Descobri!

Como eu estava fazendo uma versão minimalista e mais voltada para o problema em si então a página não tinha tamanho suficiente para ser "rolada", então eu teria de aumentar o tamanho da página verticalmente ou mudar o evento para "whell" ao invés de "scroll"...

por Lorena Garcia

| 6833k xp | 9910 posts

Alura Scuba Team Monitora

20/03/2023

Oi André, tudo bem?

Que bom que você descobriu a solução para o problema que estava enfrentando! E muito obrigada por compartilhar aqui a solução. :D

Continue explorando e aprendendo.

Um abraço e bons estudos.