Asmaa Elfatayry
@asmaa-elfatayryAll comments
- @ValverdeLucasSubmitted 9 months ago@asmaa-elfatayryPosted 9 months ago
Hi Lucas, Great start, but don't give the container height let him fit the content and change just the padding to get a better design. Keep going
0 - @asmaa-elfatayrySubmitted over 1 year ago@asmaa-elfatayryPosted over 1 year ago
@OUSSAMAACHICHE Thanks and good luck to you too π
1 - @krish3957Submitted almost 2 years ago
As we are making this only for mobo and desktop device, when we resize our window to some width between this to it become very weird and do not look good.
@asmaa-elfatayryPosted almost 2 years agoHI Krish, you really did a great job. to remove the warning, you should add all the content of the body in the <main></main> tag.
to make the design responsive you should change the flex in small screen like this: flex-direction:column;
hope this can help you: https://www.youtube.com/watch?v=zqSXT4pHD9g https://www.youtube.com/watch?v=S0a7PEOi0do
Or you can use grid too: https://www.youtube.com/watch?v=rg7Fvvl3taU
Marked as helpful1 - @Have-SamuelSubmitted about 2 years ago
The Responsiveness was quite challenge, any reference will do me good. Thanks
@asmaa-elfatayryPosted about 2 years agoI hope this helps you
https://youtu.be/srvUrASNj0s
Marked as helpful0 - @Abhishekv-vSubmitted about 2 years ago@asmaa-elfatayryPosted about 2 years ago
Hi, Abhishek you should update all the URL paths it should be dot then / like this./ before the path of the image to get out from the CSS file first with . then enter the images folder with /
Marked as helpful1 - @rox-stahlSubmitted about 2 years ago
Updating the selected/rating script into inner HTML. I got it working, then I worked on some CSS and it went away. I tried multiple ways to manipulate, but have gotten stuck. I would love your suggestions!
~Thanks so much π«ΆπΌ
@asmaa-elfatayryPosted about 2 years agoto resolve the Accessibility error
- you should put all the content of body in <main></main> tag
https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/main.html
https://www.tatianeaguirres.com/blog/2020-10-30-8-landmark-roles-that-every-front-end-should-know/
hope this helps you
Marked as helpful0 - @rox-stahlSubmitted about 2 years ago
Updating the selected/rating script into inner HTML. I got it working, then I worked on some CSS and it went away. I tried multiple ways to manipulate, but have gotten stuck. I would love your suggestions!
~Thanks so much π«ΆπΌ
@asmaa-elfatayryPosted about 2 years agoHi Roxanne,
you did a great job but You only have two simple problems
first, you should make this loop block : ratings.forEach((rating)) outside the addEventListener function Parentheses after this : submitButton.addEventListener("click",()=>{})
second, you don't need these two lines
let rateId = e.target.id; const numberBtn = document.getElementById(rateId);
you can just do this:- const numberBtn=e.target; and it will work you don't need access to id after e.target this syntax makes an error
finally, don't forget add the e in Parentheses of addEventListener like this ("click", (e) => {})
0 - @thullyoufrnSubmitted about 2 years ago
Hello Everyone! π
I'm very happy to finish my second challenge here at Frontend Mentor! π
During development I was able to practice my CSS skills a lot. It was really nice to learn more and get used to coding in this language, which is essential for the frontend stack.
Well, I have a few questions to ask you guys:
- How can I make a parent the same height as the child?
- How can I vertically center elements inside a inline-block div?
I thank you for the attention!
@asmaa-elfatayryPosted about 2 years agoHi, Tullio
congratulation to finish the challenge
1- I think you should give the width to the parent first and then give the child width:100% to take the same width as the parent
2- to center elements vertically there are many ways :
https://www.w3docs.com/snippets/css/how-to-vertically-align-inline-inline-block-elements.html
https://tahsch.industrialmill.com/frequently-asked-questions/how-do-i-center-an-inline-block-element-in-css
0 - @FherAmableRicseSubmitted about 2 years ago
is it possible to change placeholder(input) color in js?
@asmaa-elfatayryPosted about 2 years agoyes to change the placeholder color using js you can use :
document.getElementById('the-id-name').style.placeholderColor = newColor;
or you can change it directly using CSS
https://www.geeksforgeeks.org/change-an-html5-input-placeholder-color-with-css/
to solve the Accessibility error you should put all the content of the body in the <main></main> tag
https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/main.html#:~:text=The%20main%20landmark%20should%20be%20a%20top-level%20landmark.,main%20landmark%2C%20each%20should%20have%20a%20unique%20label.
Marked as helpful1 - @Clement1kalu-okerekeSubmitted about 2 years ago
I found the grid template areas very difficult can anyone recommend articles or videos to learn it?
@asmaa-elfatayryPosted about 2 years agohere are some sources I hope help you
https://www.geeksforgeeks.org/comparison-between-css-grid-css-flexbox/
https://www.youtube.com/watch?v=-Wlt8NRtOpo
https://www.youtube.com/watch?v=t6CBKf8K_Ac
https://www.w3schools.com/css/css_grid.asp
and to resolve the ACCESSIBILITY ISSUES :
put all the content of body in <main> </main> tag
The page should contain a level-one heading so you should make the main title in <h1></h1> tag not h3
1 - @r0mankeysSubmitted about 2 years ago
I unfortunately was unable to complete this challenge exactly perfectly (the eye svg activated when hovered) and would greatly appreciate feedback on my code and how others who have tried this managed to make it happen with plain CSS
@asmaa-elfatayryPosted about 2 years agoHi, Roman
you do a great job to make the eye SVG when you hover you simply can make a div and put the SVG image or icon give the style with position or any style you want and finally make the div display none and when hover the display will be block
I will leave you some sources I hope the sources will clarify for you more:
https://www.geeksforgeeks.org/how-to-create-image-overlay-hover-using-html-css/
https://tutorialdeep.com/knowhow/create-image-hover-overlay-effect-css/#:~:text=The%20short%20answer%20is%3A%20use%20the%20CSS%20property,Create%20Image%20Hover%20Overlay%20Effect%20Transparent%20Using%20CSS
0 - @mcdulingmSubmitted over 2 years ago
I started this a while back but at least I'm finally posting it. Any feedback will be appreciated. :)