This project was a bit difficult as this is my first time working with accordions.
The part I found most difficult was creating a program that allows only one accordion open at a time. Glad I got that fixed later on.
The part where the accordion icon toggles between "icon-plus" and "icon-minus" is where I still can't seem to fix. I will really appreciate your help on that part?
P.S Let me know if there's anyway I can make my code better.
Arigato!
Hi @iamkayleb,
I was taking a look at your code to see if I could help with your question The part where the accordion icon toggles between "icon-plus" and "icon-minus" is where I still can't seem to fix. I will really appreciate your help on that part?
One way to achieve the toggle would be to declare both icons in your HTML, and use a hidden class to show and hide the icons. So the minus icon would start with a hidden class, which would be removed when needed, when minus icon is visible the plus icon would become hidden.
There are a few different approaches to applying this method, here's some further reading
I hope this helps
Hello @AlvaroCordoba-5
Great effort putting together this solution
I was taking a look at your code and thought you might be interested,
In order to center the card in the browser, try applying these declarations to your body selector in your CSS file
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Its possible to change the background-color to 'hsl(212, 45%, 89%)' too, in order to better match the design.
I hope this helps,
Above all, your solution looks great!
Hi @rahulkumarpahwa,
Great work getting this solution built!
I was taking a look at your code and found something you might be interested in
In order to center the card in the middle of the screen, try including this code in your CSS file.
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh
}
Remove the margin top on the .main selector for this to work optimally.
I hope this helps
Above all, your solution is looking great.
Just finished my first website using HTML, CSS, and JS. It works well on both computers and phones, thanks to the mobile-first approach. Curious to hear what you think!
Hey @Enayut,
Great work getting this solution submitted
I was just taking a look at your code and noticed something you might be interested in.
The background images are not loading due to a small error in the syntax.
Your code:
function changeImg(){
let width = window.innerWidth
console.log(width)
if (width > 700) {
img.setAttribute("src","/assets/images/background-pattern-desktop.svg");
} else {
img.setAttribute("src","/assets/images/background-pattern-mobile.svg");
}
try adding a . in-front of the first / when declaring the image paths.
Try checking the syntax for the icons too
I hope this helps
Great effort building this solution
Created this cool order summary component challenge, please check it out and give some feedback!
I have a problem with the bottom background image, I can't flip it upside down? Please tell me how I can do this?
Hi @sami09876543;
Great job submitting your solution for this challenge,
I was just taking a look at your code and may have found something you might be interested in.
In the index.html file you have an inline style for the body selector, and inside the style.css you also have a body selector.
The inline style in the index.html has the highest specificity and so overrides the styles declared in the style.css file.
Check out the docs HERE for more information about specificity
Try tidying this conflict up and you should be able to get your solution closer to the design.
Above all, great effort getting this solution built
Damn it. i Can't get it to look exactly like the challange, i give up
Hey @coding-stock
I tried to take a look at your code, but the link to your code is not working.
The most challenging part for me was attempting to create the corner borders for the sections where you can see the category and the score. It was impossible for me to find the way to create them
Hi @Hags97,
What about trying to define the border-radius in pixels?
Anyways, great job with your solution
First time in months that I touched basic CSS and HTML since I've been learning backend and React. Took about 7 hours, which is 5 hours longer than I thought, I had to have a lot of reminders but it was good practice. Getting the plus buttons to the right took longer than I want to admit, as well as getting the keys to navigate the questions.
Looking for any feedback on my CSS and Javascript code!
Hi @tbeagle2,
Great job submitting this solution
I was just taking a look at your code and found something you might be interested in, really small details, but thought I'd share them
In the <body></body> element, its best practice to include a <main></main> element for screen readers and accessibility, the first ´<div></div> could be swapped for <main></main>
And just a couple of tiny detail in your CSS,
cursor: pointer; to the .question:hoverAll said, it's looking great
Hi @srjavih3,
Great effort so far with your submission
I noticed a couple of things that you might find interesting.
It is not common practice to declare height and width properties in your CSS file on both the html and body element selectors, but you're right to declare them on the body.
You've done a great job using the * selector to reset the browser defaults on box-sizing: border-box, it's possible to place margin: 0; and padding: 0 in there too instead of being in the body selector.
I hope this helps
Above all, well done, great work and keep going
Hi 🙌!
This is my 4th project, I have few small doubts, pls be kind to help:
1.how do u like a child div to its parent element?
for eg: I had set a border-radius:3%; on the card, but when I added 2 divs in it (one for the image, and the other for the description) , it doesn't inherit the border-radius I set on the parent element ie. the card. And I had to separately add border-radius to each one of them.
2.If u have seen my media query, it's quite long. Can u suggest few responsive methods to make the query short as possible?
3.why do percentage values NOT work good with buttons using border-radius? (Pls explain in simple terms, stackoverflow had a complicated answer).
4.Any other feedback is always welcome
Thank you !
Hello @Johan-Jubin,
Great effort completing and submitting this challenge
Regarding your question about inheritance, it is my understanding that some properties inherit their parents computed value, and other properties do NOT inherit the parents computed value.
A typical example of an inherited property is the color property.
A typical example of a non-inherited property is the border property.
Take a look at the documentation here for more information.
I hope this helps
Well done on your submission
Feel free to let me know what could have been better! Thank you
Hello @aristide5010
Great effort submitting this challenge
I am looking at your code are realised the layout does not respond to different sized screens.
When a user opens this site on a mobile or device with a screen smaller than say 500px wide, they will need to scroll across the screen to see all the content that is hidden off screen.
In order to improve the user experience for your project, it is possible to adapt the layout of the page to suit different sized screens by using media queries
This is described within the approach of Responsive Web design (RWD)
Check out the documentation here for more information.
I hope this helps
Above all, your solution is looking great!
Sorry for not merely completing this challenge. I need help with the following to fully finish this challenge.
I need suggestions for a logic wherein I can only open 1 accordion at a time. When 1 accordion is opened and when I open another accordion it will close the previously opened accordion and then open the newly clicked accordion.
I'm a bit new to tailwind. Can you suggest to me how to make it more animated whenever I open an accordion?
Thank you in advance for the feedback you will give.
Hi @gbtan1991
Your solution is looking great
One way to implement the logic is to
use a function to reset the state of all the accordions when any accordion is clicked.
once this is fired off, the current accordion being clicked can be opened.
I hope this helps
Above all, great job on building this solution
