👾 Hello, Frontend Mentor coding community . This is my solution for the Interactive rating component .
Feel free to leave any feedback and help me improve my solution or make the code clean!✨❤️
I would appreciate any feedback, thank you in advance!
@AdarshRai0, how are you, buddy?
You've done a great job at converting the design to code.
When i select a rating, the selected rating persist after i refresh the page. If it's not how you coded it to be; then after the user has submitted the rating, you could iterate over all inputs and turn their checked property to false.
I wrote a small codepen demo that demonstrate this. Have a look and read/modify the code and i hope its helpful to you. Please feel free to reach me, if any improvement can be made to codepen or you need help understanding something. https://codepen.io/pradeeps4ini/pen/OJvZGev.
A nice little project. I spent some time to figure out how to do the hover effect (color and icon) on the image. I found the solution with opacity. The code can still be cleaner and simpler.
Hello, @homoki76. How are you?
You don't need the <div class="wrapper"> element. <main> is working as a wrapper here.
You have given fixed widths to the .wrapper and .container elements, which is blocking the responsiveness of the container. You should only put a max-width: value; on the wrapper element and let the children adjust themselves to the wrapper elements.
These're changes i'd do in your exisiting code...
.wrapper {
max-width: 100%;
padding: .5rem 1rem;
}
.container {
max-width: 100%; // want the container to be 100% width of the wrapper
}
.image-container, .bg-image-container {
width: 100%; // want the image container to be 100% width of container.
}
I wrote a little demo to demonstrate how you could create the overlay effect using pseudo elements. You can read the code in demo for a different perspective. https://codepen.io/pradeeps4ini/pen/yLKbRqB
I'm having difficulty with some things. First, I would like to save the input value on click, but I couldn't, so I did it with the num attribute in the function.
Also, I would like to display an alert for when the submit button is clicked without choosing a number. Initially the variable btn has the value undefined. I tried as follows: function onSubmit() { if (btn == undefined){ alert('') } else { state1.style.display = 'none' state2.style.display = 'flex' } }
But the function never enters the else, the value of btn changes to the value of num when the onRating function is called, but soon after it returns to the value undefined. I can't solve this, could someone help me? :(
Hi, @thaiscode. How are you?
First, I would like to save the input value on click, but I couldn't, so I did it with the num attribute in the function.
You can get the input value using the "value" property of the input. When you click on the radio button. In the JS using the click eventListener, you can get the value using e.target.value and save it in a variable.
Also, I would like to display an alert for when the submit button is clicked without choosing a number. Initially the variable btn has the value undefined. I tried as follows: function onSubmit() { if (btn == undefined){ alert('') } else { state1.style.display = 'none' state2.style.display = 'flex' } }
You can create a global variable in the JS to store the rating value. When the submit button is clicked, check if the rating variable has the rating value. If it doesn't have, it means no rating was selected.
btn==undefined because you're declaring btn in a different function. btn is a local scope variable inside the onRating function and not a global scope. If you'll declare it outside of onRating function and use inside onRating and onSubmit function. It will work.
I have written this little demo to show, how you can write the rating part of the code. Read and modify it and learn from it. If you don't understand something, feel free to reach me. https://codepen.io/pradeeps4ini/pen/OJvZGev
You don't have to use min-width: 375px on the body. It adjust itself according to the content in it. You're using max-width: 90vh on the <main>, which makes its size too wide at few points when i resize the window. You should use a fixed value here. For example: max-width: 550px.
You can create utilities classes for properties, you're using on multiple elements. For example:
.flex {
display: flex;
}
and use class="flex", on elements where you want to use flexbox.
You have done a good job implementing the design. Have fun and keep learning.:)
Feedback and any tips on how to improve my code are highly appreciated. Also, I'm having the challenge of unchecking a previous rating if I choose another. Thank you😁.
Hi, @Olumide2596. How are you?
You did an awesome job at implementing the design.
To learn how to uncheck the previous rating, you can read this little demo code i wrote. Play with it, modify it and if you don't understand someting. Feel free to reach me. https://codepen.io/pradeeps4ini/pen/OJvZGev
Some suggestions to improve the code:
You should use <main> element only to wrap the main content of the page. You should keep the attribution content in a <footer> element and out of the <main> element. These are semantic elements and used to structure the page. You can read more about them here...https://www.freecodecamp.org/news/semantic-html5-elements/.
Instead of using min-width: 400px, use max-width: 400px. And remove width: 50%, you won't need it, with max-width: 400px. This will make your container more responsive.
In the ratings section, we are interacting with the rating elements. Therefore you should use either <buttons> or <input type="radio">. I prefer <input type="radio">. This is much better for accessibility and readability. Read the page i linked above about semantic elements. You'd get a better understanding of how and for what purpose to use an element.
It was overwhelming when I started learning JS like what are these symbols, syntax and functions. All of that made me into frustrated with big eyebags person. And now as a newbie, I am starting to understand JS and feeling more excited to learn more.
Hi, @Fahatmah. How are you?
<ul>
<li><input type="radio" name="rating" value="1">1</li>
<li><input type="radio" name="rating" value="2">2</li>
</ul>
Check out this little demo i wrote to show how you could've written the markup for rating. https://codepen.io/pradeeps4ini/pen/OJvZGev
Hi, @Tammy-Ajoko. How are you?
I'd like to give some suggestions, if you don't mind.
display: flex; property on multiple elements. To not write it again and again, you can code a css class....flex {
display: flex;
}
and use it on the elements where you want to use flexbox.
We use alt texts to provide information about the image to the users of screen reader. We don't have to provide it on decorative images. For example: music icon. It's decorative image. It doesn't need alt text. You can leave it empty.
In the section2, you should give an inline-padding to the section and change the width of payment div from 270px to 100%. This way the buttons will be same as the other content in the section.
Have a fun day.:)
Hi everyone, Working on a newbie project after a while is refreshing to me. If anyone finds some mistake please let me know.
Hi, @DekiDex. How are you, buddy?
box-sizing: border-box; }
and then
* , *::after, *::before{
box-sizing: inherit;
}
When you use *, it means it applies to all the elements of the page. You could have only used *, *::after, *::before {box-sizing: border-box;}.
You're using "background-image" and media queries to interchange the desktop and mobile images. You could do that with <picture> element in HTML only. Learn more here....
Using background-image for the image which convey information to user is bad for accessibility. You can provide an alt text using <img> element, which is useful for screen reader users.
One page should contain only one <h1> element. <h1> is used for the main heading of the page. You should change the <h1> in the "price" container, to <p>.
When i resize the screen below 280px. The image of the perfume bottle is gone. This is happening because you've used @media (min-width: 280px). You should remove it.
All feedback would be appreciated, struggled alot with the desktop view, also what parent etc to put flex on.
so any tips on layout is welcome
Hey, @svimen86.
To center the <span> in the price <p>, you can use the property "vertical-align: middle;" on the <span>.
You should use <footer> for the footer of the page. <footer> is the semantic element to use to write HTML for footer of the page. It is better for readability and accessibility.
Have fun working through more projects.:)
Another day, another challenge done. The most difficult part was trying to create the overlay effect. Had to research a ton before finally getting the result.
Any feedback is appreciated for best practice or an easier way to create the overlay effect. Thanks!!
Hi, @CornflakesPlus. You did a great job converting the design to code.
I would like to offer a different perspective on making the overlay for the image. You can use pseudo elements to achieve it. I wrote this little demo to show how it can be achieved. You can read and modify it. https://codepen.io/pradeeps4ini/pen/yLKbRqB
When i resize the window below 350px, the image size stays same while the card width shrink. You can fix it, by setting the property "max-width: 100%" on the image.
Have fun doing more projects.:)
Hi! This is my solution for the challenge. I wanted to pratice styling with a design system in CSS so feedback on how I wrote the code is welcome :) Also: the border radius of the top right corner seems to turn into a right angle corner at 453px (viewport), which is too soon - so if you have an idea on how I could fix it, suggestions are welcome. Thank you!
Hi, @Ax-cd. How are you?
You've done an awesome job implementing the design.
You can fix the image border angle turning into a right angle by removing the radius property from image and setting the overflow: hidden, property on the ".card" element. When you set overflow:hidden, the image overflowing from the corners of the card is hidden and the curved angle of the card is shown.
In the CSS reset, you've already written "margin: 0;". You don't need it in this style declaration after that.
body, h1, h2, h3, h4, h5, h6, p, figure, picture { margin: 0; }
For the prices section, you've used <span>. You use <span> for the text when you don't have any other semantic element available. Instead of <span>, i'd use <li> element there.
You've done a great job working with utilities. I like how how wrote your css.
Like any project that i do i always start of great with the HTML and CSS but the moment i start thinking about responsive design i crumble like a cookie.
When writing the HTML i see the design preview and play out the layout in my head with how i would place the divs and sections to accomodate the content but once i start going from mobile to desktop i start doubting my decisions and start thinking "ohh maybe i should've added a div there, but then if i add it there i need to rework the mobile version" etc. So i need to get better at planning the HTML for both mobile and desktop, but i guess this is something il get better with time.
Hello, @DrRuski.
Like any project that i do i always start of great with the HTML and CSS but the moment i start thinking about responsive design i crumble like a cookie.
To make it responsive think in terms of semantic structure and blocks. Analyze your design and see what moves in the transition between desktop to mobile and vice versa. For example: In the design of this project, there are two main transitions happening. First the hero image moves from left to the top and second the navigation in header turns into a drop down menu. Plan your page from these cues.
You could structure your page like this:
<body>
<header>
<img src="logo">
<nav>
<div class="left-part">
</div>
<div class="right-part">
</div>
</nav>
</header>
<main>
<section class="content">
</section>
<picture class="hero-img">
</picture>
</main>
</body>
You can use <picture> element to change the different size image respective to the width of the viewport. You won't have to rely on CSS and media queries. It keeps the code simple and readable.
You can create utility classes to not repeat your CSS. For example: you can create a flex class which you can use on element where you want to use flexbox.
.flex {
display: flex;
}
Hello again Frontend Mentors!
My friend and I decided to give this one a crack together (look forward to his solution soon!) There was some surprising challenges to this one, mainly to do with absolute positioning and mistakes on my part, which resulted in some hair-pulling until I figured out where I went wrong (not giving position relative on a parent container 😩)
As usual, I welcome any feedback and critiques on where I can improve code!
Thanks! 🎉🎉
hello, @ChrisAndrewsDev. Well done on implementing the design.
You don't use min() function on min-width property. You use it on width. You give only one value to min-width and the width never goes less than the given value.
You can also use background property to set multiple backgrounds in CSS. I wrote a simple demo code here. Read it and modify it to learn. https://codepen.io/pradeeps4ini/pen/dymeEJZ
