Venho aprendendo JS a mais ou menos uma semana, e tive uma dificuldade inesperada para conseguir recuperar o valor dos <input type="radio">
neste desafio.
Gostaria de saber se a forma com que resolvi este desafio pode presentar algum problema ou vai contra alguma "boa pratica" da profissão.
Qualquer outro feedback também será muito bem vindo.
Obrigados a todos da comunidade !
Rodrigo Pires
@rodrigompiresAll comments
- @PedroHTellesSubmitted about 2 years ago@rodrigompiresPosted about 2 years ago
Olá Pedro. Parabéns pela solução. Bom trabalho. Quanto a sua pergunta, como você mesmo diz que está bem no inicio dos estudos de JS, você ainda não viu muitas coisas que facilitam e são melhores a utilizar. Um bom exemplo é que você poderia utilizar um laço de repetição, como o For ou melhor ainda o método nativo ForEach.
Por exemplo:
suaArray.forEach(elemento => { elemento.addEventListener('click', nome_função) });
ou
for (let i = 0; i < suaArray.length; i++) { suaArray[i].addEventListener("click", nome_função); }
Outro ponto é, não é uma boa prática declarar variáveis com VAR por questões de escopo, bugs que podem ocorrer e etc. Na maioria dos casos você usará CONST ou LET, ou seja:
VAR - Evite usar ao máximo. LET - Quando a variável precisa ter seu valor alterado. CONST - Utilize SEMPRE que possível.
Marked as helpful0 - @DonUggioniSubmitted about 2 years ago
Hello everyone,
ATTENTION: If you are checking the responsiveness of the website, please keep in mind that you need to refresh the page once you get to mobile size (as soon as the mobile menu shows up) for it to work properly, and refresh again for larger screen sizes.
Here's my solution for this challenge. It was fun, experimented a lot and learned a lot too. React is becoming one of my favorite tools to work with. I explored a few libraries like Framer Motion and Animated hamburger menu icons.
I create a home page for site, which wasn't on the design, I am not a designer at all, just thought it would look cool to have a home page.
I used React Router for the pages routing and to build the navigation bar.
There might be bugs, so any feedback is welcome.
@rodrigompiresPosted about 2 years agoHello Renan. I really liked the home screen and the whole project. Note that on reloading the home screen, a side scroll bar appears. As I still don't know React and React Router, I don't know what it could be. Congratulations on the final result. Your home screen is very beautiful. Hugs.
Marked as helpful1 - @AdrianoEscaraboteSubmitted about 2 years ago
👨💻 Hello everyone.
DAY 7/7 🎉🎊
Finally the end ahuauha, I can't describe how productive this week was, I learned a lot of new things and managed to practice a lot! Within what I learned the two most important things are:
- Bootstrap
- SASS
Plus my javascript skills have improved a lot!
Anyway, I leave a tip for those who want to improve, whether with a developer or anything else, persist! Resist the challenges that the world will put in your life, and most importantly learn from them, I guarantee you that at the end of the day all the effort will be worth it.
After this week I feel like I can learn anything, after all, it only depends on me!
I added some details:
- 👨💻 Custom menu bugger!
- 🎨 Custom colors and hover!
- 👨🎨 Dark/Light Mode!
Feel free to leave comments on how I can improve my code.
Thanks! 😊
@rodrigompiresPosted about 2 years agoHello Adriano.
Nice work, but I think there is a small detail in the mobile version in the theme change icons.
On the first click, the rotation animation occurs, but on the second click, the animation no longer occurs.
I don't know if it's on purpose, but it only comes back when clicking outside the menu.
Hugs and nice work.0 - @correlucasSubmitted about 2 years ago
👾 Hello, Frontend Mentor coding community. This is my solution for the Huddle Landing Page With Alternating Sections.
I added some features:
- 😎 I recreated the logo as a SVG (this way I could animate it).
- 👻 I added an animation on the logo (chat-box icon flip and turn).
- 👨🔬 Some custom design improvements.
Happy to hear any feedback and advice!
@rodrigompiresPosted about 2 years agoHello Lucas. I tested the responsiveness of the page, and verified that between 490px and 421px the Try it Free button is deforming it and overlapping the logo a little. Another point I noticed is that even at this screen size, the first Get Started For Free button is aligned to the left and the other elements (except the footer) are aligned to the middle. I hope it helps. Hugs.
Marked as helpful2 - @Paula-CarlechSubmitted about 2 years ago
My difficulty was about creating the chart, I cound´t find a way to change the colors and fonts so I can build something like the original design. Any suggestion are welcome.
@rodrigompiresPosted about 2 years agoHello Paula. Good job. Regarding your questions, to create the graph you can create for each column, 2 divs positioning them one inside the other. The sizes of the inner divs (bars on the chart), you can determine as per the json values. As for the colors, you can use JavaScript to add a class and style this class in CSS. If you want, see how I managed to solve this challenge. https://github.com/rodrigompires/DesafioExpensesChartComponentMain
I hope it helps you.
Marked as helpful0 - @yrpcfcpSubmitted over 2 years ago@rodrigompiresPosted over 2 years ago
Amigo, uma dica. A imagem de fundo esta "duplicando". Tente usar o background-repeat: no-repeat;
Marked as helpful0