Single Grid Component (Vanilla CSS + Easter Egg)

Salve lucas! Cara ficou ótimo ahahhahaha

Observei que você fez duas paginas para mudar os textos e emojis! Para simplificar mais poderiamos fazer com js, existem algumas formas de fazer isso, mas usaremos uma função no botão de mudar tema!

Primeiro adicionemos a propriedade on click, chamando a função cada vez que o usuário clicar nele.

<a class="btn-2" onclick="change()">👽 Change Color</a>

Agora criaremos a nossa funçaõ no js, mas primeiros adicionaremos alguns ids nos elementos que queremos manipular via js.

<li> <span id="emoji">👽</span> <span id="text">Tutorials by industry experts</span></li>

Com esses elementos conseguimos já conseguimos ter uma noção do que está acontecendo!

Para fazer a mudança dos textos e emojis usaremos a propriedade innerHTML que basicamente funciona assim:

text.innerHTML = "ira mudar o conteudo que aparece no html, para o conteudo que estiver aqui dentro"

vai ficar assim:

let text = document.getElementById("text")
let emoji = document.getElementById("emoji")

function change() {
    document.body.classList.toggle("light-theme")
    if (document.body.classList.contains("light-theme")) {
        emoji.innerHTML = "😔"
        text.innerHTML = "Oi né"
    } else {
        text.innerHTML = "Testeeeeee"
        emoji.innerHTML = "😁"
    }
}

adicionei isso no css:

.light-theme {
    --cyan-1: rgb(16, 22, 22);
    --cyan-2: rgb(82, 77, 9);
    --cyan-3: rgb(187, 77, 44);
}

espero que ajude man 👍

Great one 😆

Everything is well coded and looks great. What I can suggest to you for your future projects is to try making changes of website without refreshing the page. Probably the best way is to use JavaScript and change every text content or image source of targeted image, but I don't know how is your coding in JavaScript. It can also be done using :target CSS selector (I think I used it in my QR Code solution). You could also manipulate text using some pseudoclasses and content property.

I recommend learning some type of naming convention (BEM, Cube CSS). Personally I prefer BEM. It would help you in making your projects scale better. Using generic tags like h1 or ul might become hard in your future projects. And it's easy to pick up and start using it.

Once again great job! Have a nice day and happy coding 😎

Hi Lucas,

This is awesome ⭐⭐⭐

I had done this challenge a few months before and struggled greatly during the progress. Instead of making more projects, I felt I should improve the foundation of HTML and CSS by looking at some good examples in Frontend Mentor. Luckily, I came across yours and learnt a lot from it.

Just wondering, how do you practice your HTML and CSS and become so good at it? And do you need to fully commit to HTML and CSS first before learning about JS?

Best, CK from Canada