Frontend Mentor | Indira's profile

All comments

@RicardoColladoRothschildSubmitted about 1 year ago

Interactive Rating Component [JS & SASS]

@indy-stackPosted about 1 year ago

Hello Ricardo, I've been looking at your solution since the use of SCSS got my attention because I want to learn it.

Something that caught my attention was the JS for this project. I'm not sure if you wanted to purposely hard code the solution,

for instance you have something like this in your code:

const circle_1 = document.querySelector('.circle1');
const circle_2 = document.querySelector('.circle2');
const circle_3 = document.querySelector('.circle3');
const circle_4 = document.querySelector('.circle4');
const circle_5 = document.querySelector('.circle5');

...

//events
circle_1.addEventListener('click',function(){
    ratePicker(1);
    
});

circle_2.addEventListener('click',function(){
    ratePicker(2);
    
});

circle_3.addEventListener('click',function(){
    ratePicker(3);
    
});

circle_4.addEventListener('click',function(){
    ratePicker(4);
    
});

circle_5.addEventListener('click',function(){
    ratePicker(5);

It seems like you are manually adding an event listener to each circle. I feel like your code can be improved if you use a forEach() loop to add an event listener, and instead of using a variable for each circle you can use the "circle" class and select all circles with a querySelectorAll(). This is what I mean :

const circleEls = document.querySelectorAll(".circle");
...
//add a click event listener to all circles
circleEls.forEach( function(circle) {
    circle.addEventListener("click", function()  {
         //code here
    });
});

Let me know if you have any questions or comments with my suggestions, and hope this helps :)

Marked as helpful

Indira•120

@indy-stackSubmitted about 1 year ago

Any feedback is more than welcome.

I struggled a little bit with the hover effect for the active state since I was not sure on the colors that were used but I did my best and got as close as possible to the design.

Responsive newsletter sign up form with success message

Indira•120

@indy-stackPosted about 1 year ago

Found a few bugs I need to fix after I submitted the solution.

Beatriz Gonçalves•60

@beatrizvsgoncalvesSubmitted about 1 year ago

I had a hard time getting the image and text next to each other.
Please give me suggestions on what I should improve.
And in my tests everything was fine, but on the hosted site the mobile image is not showing up and I couldn't identify the cause.

Product preview card component

Indira•120

@indy-stackPosted about 1 year ago

If you are having issues with the images it is probably because of the relative path since you are using gitHub pages try adding ./ to the image path like this hope it helps :):

Marked as helpful