Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/raizacirne/botao-cromatico

Aplicação onde o usuário pode clicar em um botão para alterar dinamicamente a cor de fundo da página, além de exibir o nome da cor escolhida. O objetivo principal é demonstrar o uso básico de HTML, CSS e JavaScript para criar uma interação visualmente atraente e responsiva.
https://github.com/raizacirne/botao-cromatico

css html5 javascript js sass

Last synced: 11 days ago
JSON representation

Aplicação onde o usuário pode clicar em um botão para alterar dinamicamente a cor de fundo da página, além de exibir o nome da cor escolhida. O objetivo principal é demonstrar o uso básico de HTML, CSS e JavaScript para criar uma interação visualmente atraente e responsiva.

Awesome Lists containing this project

README 

        
# 📋 Indíce



- [Bem-vindo](#id01)

- [Proposta](#id02)

- [Desafio](#id03)

- [Aprendizado](#id04)

- [Prosseguimento](id05)

- [Screenshots](#id06)

- [Links](#id07)

- [Tecnologias utilizadas](#id08)

- [Pré-requisitos](#id09)

- [Procedimentos de instalação](#id010)

- [Informações](#id011)



# Bem-vindo! 👋 



**Botão Cromático**





## 🚀 Proposta 



A proposta deste projeto é oferecer uma experiência interativa ao usuário, permitindo que ele experimente diferentes cores de fundo com apenas um clique. Além disso, o projeto visa demonstrar como utilizar JavaScript para manipular elementos HTML e CSS dinamicamente, proporcionando uma interação fluída e responsiva.





## :trophy: Desafio 



O desafio principal deste projeto foi integrar corretamente as tecnologias HTML, CSS e JavaScript para criar uma aplicação funcional e esteticamente agradável. Isso incluiu a definição e estilização dos elementos HTML, a implementação da lógica de mudança de cor no JavaScript e a garantia de que a aplicação seja responsiva em diferentes dispositivos.



## :trophy: Aprendizado 



#### Construído com:



- Integração de Tecnologias: HTML, CSS e JavaScript para criar uma aplicação web interativa.



- Manipulação de Estilos com JavaScript: Manipulação de estilos CSS dinamicamente usando JavaScript para criar uma experiência de usuário mais envolvente.



- Gestão de Eventos: Gestão de eventos em JavaScript, especialmente no uso do método addEventListener para detectar e responder a eventos de clique.



- Utilização do SASS: Uso do pré-processador SASS para escrever estilos CSS de forma mais eficiente e organizada, facilitando a manutenção do código.



## :trophy: Prosseguimento 



- Realizar outros projetos utilizando o React.js



# :camera_flash: Screenshots 



## :video_camera: Video



https://github.com/RaizaCirne/botao-cromatico/assets/109912543/d0ff04f1-b3d7-4f8f-a707-f7c70a30591a



## :desktop_computer: Desktop design



![Design preview desktop](./assets/images/desktop.jpg)



## :iphone: Mobile design



![Design preview desktop](./assets/images/mobile.jpg)







# :heavy_check_mark: Links 







- Para acessar o site [Clique aqui](https://66144005db94c2194113240a--timely-kleicha-fbb8ff.netlify.app/)







# 🛠 Tecnologias utilizadas 







- JavaScript

- Git

- CSS (com SASS)

- Mixins

- Variáveis CSS

- HTML5







# ☑️ Pré-requisitos 







- [x] Editor de código de sua preferência (recomendado VS code)

- [x] Git







# 📝 Procedimentos de instalação 







Clone este repositório usando o comando:



```bash

git clone https://github.com/RaizaCirne/botao-cromatico.git

```



Baixar arquivo zip



Extrir arquivos



Abrir pasta no editor de código.







# :sunglasses: Informações 







- Personal Page - [Raíza Cirne Braz](https://66144005db94c2194113240a--timely-kleicha-fbb8ff.netlify.app/)

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

- GitHub - [RaizaCirne](https://github.com/RaizaCirne)

- LinkedIn - [Raíza Cirne Braz](https://www.linkedin.com/in/ra%C3%ADzacirne/)



**JavaScript - GIT - SASS - CSS3 - HTML5** 🚀