https://github.com/tatyanepgoncalves/pricing-component

Projeto do Frontend Mentor.
https://github.com/tatyanepgoncalves/pricing-component

html5 js sass

Last synced: about 2 months ago
JSON representation

Projeto do Frontend Mentor.

• Host: GitHub
• URL: https://github.com/tatyanepgoncalves/pricing-component
• Owner: tatyanepgoncalves
• Created: 2024-05-31T22:23:26.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-03T22:21:15.000Z (7 months ago)
• Last Synced: 2024-06-04T00:45:20.373Z (7 months ago)
• Topics: html5, js, sass
• Language: SCSS
• Homepage: https://tatyanepgoncalves.github.io/Pricing-Component/
• Size: 247 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 
Frontend Mentor - Pricing component with toggle solution




Essa é a solução para o desafio [Pricing component with toggle challenge do Frontend Mentor](https://tatyanepgoncalves.github.io/Pricing-Component/). Os desafios do [Frontend Mentor](https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC) ajudam a melhorar habilidades de codificação através da construção de projetos realistas.

## Índice

- [Visão geral](#visão-geral)

    - [O desafio](#o-desafio)

    - [Links](#links)

- [Meu processo](#meu-processo)

    - [Construído com](#construído-com)

    - [O que aprendi](#o-que-aprendi)

    - [Desenvolvimento contínuo](#desenvolvimento-contínuo)

- [Autor](#autor)

## Visão geral

### O desafio

Os usuários são capazes de:

- Layout Responsivo;

- Estado de foco;

- Elementos Interativo;

### Links

- [Soluçao](https://tatyanepgoncalves.github.io/Pricing-Component/)

- [Repositório do GitHub](https://github.com/tatyanepgoncalves/Pricing-Component)

## Meu processo 

### Construído com 

- HTML5

- SASS

- JS

### O que aprendi

```js 

    const button = document.getElementById("trilho");

    button.addEventListener("click", showValue);

    function showValue() {

        const monthPayment = document.getElementsByTagName("h3");

        const annualPayment = document.getElementsByTagName("h4");

        var i;

        var n;

        for (i = 0; i < monthPayment.length; i++) {

            for(n = 0; n < annualPayment.length; n++) {

                if (monthPayment[i].style.display === "none") {

                    monthPayment[i].style.display = "block";

                    annualPayment[i].style.display = "none";

                    button.style.justifyContent = "flex-end";

                } else {

                    monthPayment[i].style.display = "none";

                    annualPayment[i].style.display = "block";

                    button.style.justifyContent = "flex-start";

                }

            }

        }

    }

```

### Desenvolvimento contínuo

Nesse projeto pode colocar em prática com mais facilidades os conceitos de `responsividade` e `SASS`. Além de praticar `JS`.

### Autor

- Frontend Mentor - [@tatyanepgoncalves](https://www.frontendmentor.io/profile/tatyanepgoncalves)

- LinkedIn - [@tatyanegoncalves](https://www.linkedin.com/in/tatyanegoncalves/)