Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page using html, css and a little of javascript

@rolvera22

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first project to understand the basics of javascript and how the functions can be implemented.

Community feedback

Ivan 2,630

@isprutfromua

Posted

Hi there. You did a good job 😎

keep improving your programming skills🛠️

your solution looks great, however, if you want to improve it, you can follow these steps:

✅ Use a single variable naming style. ** submit_boton ** ** containerDos **

const submit_boton = document.querySelector ('. submit');
const containerUno = document.querySelector ('.container1');
const containerDos = document.querySelector ('.container2');
const raitingBtns = document.querySelectorAll ('. number');
const res_calificacion = document.querySelector ('.calificacion');
let calificacion_estrellas = 3

✅ Pay attention to the formatting of your code, or use automatic formatting

raitingBtns.forEach (btn => {
btn.addEventListener ('click', handleRatingBtnClick);
});

✅ Try not to place the debug code in the repository

console.log (calificacion_estrellas);

✅ Try to avoid importing fonts to css. It is better to place them in the title of the page using the link tag.

✅ css is also poorly formatted


.encabezado {
  background-color: var (- Very-blue);
  border-radius: 50%;
  width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12px;
margin-top: 12px;
}

.respuesta {

display: none;

}

I hope my feedback will be helpful. You can mark it as useful if so 👍

Good luck and fun coding 🤝⌨️

Marked as helpful

0

@rolvera22

Posted

Thank you. This will help me to improve my coding skills. Thanks for passing by!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord