very proud of acheiving the layout, It looked deceptively simple at first.
What challenges did you encounter, and how did you overcome them?I was forced to understand flexbox properties, especially the 'flex-shrink'
What specific areas of your project would you like help with?Any feedback is welcome!!!!
Looks like you forgot to add the color to the number headers at the bottom.
:) Another deceptively simple project, I am proud of sticking to accessibility principles and limiting myself to as few aria- attributes as possible. I stuck to aria-invalid and aria-describeby for the error messages so that screen readers can read with the proper context.
What challenges did you encounter, and how did you overcome them?Sticking with accessibility was a pain but I persevered
What specific areas of your project would you like help with?My js file might be a little cluttered, any help there is welcome!!! also any feedback on any other section is helpful!!!
You can use form.checkValidity() directly instead of checking all the individual elements.
Beginning the project with accessibility in mind introduced me to the details and summary tag which made the whole project easier
proud of this html for a single accordion
What is Frontend Mentor, and how will it help me?
Frontend Mentor offers realistic coding challenges to help developers improve their
frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for
all levels and ideal for portfolio building.
and the associated css
details > summary {
list-style: none;
cursor: pointer;
font-size: var(--summary-size);
font-weight: 600;
color: var(--heading-color);
display: flex;
justify-content: space-between;
gap: 1rem;
}
details > summary:hover {
color: var(--summay-hover-color);
}
.summary-icon {
width: var(--summary-icon-dimension);
height: var(--summary-icon-dimension);
background-image: url(./assets/images/icon-plus.svg);
background-repeat: no-repeat;
background-size: contain;
flex-shrink: 0;
}
details[open] > summary .summary-icon {
background-image: url(./assets/images/icon-minus.svg);
}
details > p {
margin-top: 1.5rem;
font-size: var(--details-size);
color: var(--details-color);
line-height: var(--details-line-height);
}
Nothing much
What specific areas of your project would you like help with?Any feedback is welcome!!!
I think you forgot to change the background color for the star image.
N/A
What challenges did you encounter, and how did you overcome them?I wasn't sure how I should deal with the image change when making the screen smaller.
What specific areas of your project would you like help with?Any General feedback is welcomed.
forgot to uncomment width size for card, I'm out of new screenshots for the month.
Making the card responsive.
What challenges did you encounter, and how did you overcome them?The box with the annual plan was a bit tough to position with all the children item.
What specific areas of your project would you like help with?Any general feedback is welcomed, but I was wondering how to make those box-shadow under the card and process paymen button. I wasn't sure how I could get the exact color and how to get the same blur and spread.
I fixed the image and the price color but I am out of screenshots for the month.
I am happy with the speed in which I completed the challenge. I also am happy with how I though through the problem/applied CSS strategies that I learned based off of a previous challenge.
What challenges did you encounter, and how did you overcome them?My biggest challenge was probably centering the entire card - I had to think through how to go about centering a section within the body of an html page.
What specific areas of your project would you like help with?So I'm not able to see the image on the live site for some reason and I'm not sure why. I would also love to know whether or not the way I styled the page and structured the HTML is in line with best practices/accessibilty.
try changing it to ./images/image-qr-code.png the difference is adding "." at the start of the image path.
Creating a useful and functional JavaScript app.
What challenges did you encounter, and how did you overcome them?Initially I thought the app would be quite straight forward but there was more to code than initially expected. Important to plan how the code will be implemented.
What specific areas of your project would you like help with?The JavaScript code and how it might be improved.
Looks good, for the javascript you usually you want to use let instead of var as it prevents you from accessing the variable before it has been declared because var is hoisted to the top. And use const when you are getting values by reference like elements from your html and variables you aren't directly changing. Here is more info abour var.
Whew!
What challenges did you encounter, and how did you overcome them?Alot of challenges
What specific areas of your project would you like help with?Loading Live Data, never worked with json before
Looks good, I would look into JSON.stringfy and JSON.parse. These two methods will save you a lot time and coding.
mostly proud of my JS
What challenges did you encounter, and how did you overcome them?The responsiveness was a little challenging but using docs I was able to overcome it
What specific areas of your project would you like help with?Nothing really
looks good, I would take a look at semantic html and I think you forgot to implement the validation for the email input.
I wanted to animate the popup thing... But, I forgot how to and I ended up just fiddling around and got to nothing~ T_T
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
looks good, looking at your code has given me ideas on how to use grid.
