Looking to hire developers?
@gmagnenat
@Cinquantesix
Submitted
I'm not sure to understand how srcset work with mediaqueries. Is it an other way (best practicies) to add different image for different view?
I think my sass file is not the best, but, did I need to do a 7:1 architecture even for little project like that?
@gmagnenat
Posted
Hi!
I don't think you "have to" use 7:1 scss file structure if you don't need it. It's a recommendation to organise your files, components and folder when the project gets big and will help when multiple developers work on the same code base.
One way I like with srcset as @Pradeep mentioned, is the option to switch file depending on screen resolution. For example you can have a retina image with double or triple pixel density only load if the screen is retina. The network tab in your developer tools is useful to experiment and see the different files loading.
On your html file, you are adding a <main></main> then a div inside with the wrapper class. this div looks unnecessary to me. You can simple have your wrapper class to the <main> tag. Then have a <footer> tag underneath for attributions.
Marked as helpful
@Cinquantesix
Submitted
What is the best way to set a position to this kind of element ? Because without setup a specific width/height, I'm not sure if I'm using the good/right way.
@gmagnenat
Posted
Hi ! Congrats on your first challenge :)
If your question is about centering the card on the screen, I would set the position on your wrapper. Your body has a 100vh height, then you place your wrapper in the middle of it.
#wrapper {
max-width: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Good catch with the flip animation, it looks sweat. To go even further you could experiment with transform-style: preserve-3d .
Some feedback I can give you on your JavaScript.
I hope my comment helps you for your future experimentations.
Cheers 👍
Marked as helpful
@Esagecc
Submitted
I am improving my Javascript to add a voting web application .
@gmagnenat
Posted
Hi, and good job on completing the challenge !
By reading your code, I can give you a few suggestion for your html markup. You can find much better and more accessible html tags then nested divs.
etc..
I hope my comment helps you.
Cheers
@behllumt
Submitted
@gmagnenat
Posted
Good work on the challenge ! It looks very close to the original design.
To be very picky here... you can reduce the font-weight of your text under the headline to 400. Here it looks like you have the same font-weight as the title.
@Dan2204
Submitted
Never had my code reviewed so unsure how efficient my code is. In my head I"m sure it could be much tidier. Not sure if I've gone about the javascript the best way. Were list-item elements the best choice for the numbers? I also found the colours in the provided file seemed off so I used a colour picker to get as close as I could.
@gmagnenat
Posted
Hi, nice one ! I like the little animation effect you added for the thankyou state.
Regarding your concern about the javaScript, I think it's an interesting approach to keep it as generic as possible. Here you are taking the value of a selected element and you are handling your conditions based on that value. If tomorrow you want to change the rating with other values, special characters, or emojis, you'll have to write a complete different script.
For the numbers, I personally used radio buttons as inputs in a form. Is it the best practice? I don't know. I felt it was a possible choice as we select a rating and submit an answer. It make it quite generic as I can simply change the value in the inputs and keep the exact same script working.
I hope my comment helps you.
Cheers !
@GretaLi
Submitted
Hello guys! This is my first challenge here, and I enjoyed it! :D
There is something I'm unsure of: What's the common way to avoid redirection after submitting a form?
ifram tag right after form. Is this way correct?<form target="iframe_to_remain_same_page">...</form>
<iframe id="id_iframe" name="iframe_to_remain_same_page" style="display:none;">
</iframe>
:) peace!
@gmagnenat
Posted
Hello, congrats on completing the challlenge ! To avoid redirection to another page when submitting the form you can add in your submit function something to prevent the default behavior of the form. In your function, pass the event and add : event.preventDefault();
example :
const handleForm = (e) => {
e.preventDefault();
// rest of your form function
}
I hope it helps.
Marked as helpful
@EYRAM565
Submitted
I will appreciate it if i get suggestions on how to improve on the positioning of the svg on the top left and bottom right corner.
@gmagnenat
Posted
Hi, good work! A few feedback on your solution to make it closer from the original design.
For the placement of the SVG I struggled also. At the end I used background images on the body. I changed the size and position with viewport height and width on different media queries. (I don't think that's a perfectly working solution).
