Frontend Mentor | Gem's profile

All comments

@CoconutDev13Submitted over 1 year ago

Hey there!

That is my attempt to make an interactive rating card which I think I did it! I'm pretty happy with the result. Although I feel a little bit unsure about the state management I did in javascript and the approach of hiding and revealing sections using Element#attributeToggle method.

Also I modified a little bit the user experience so I did the button disabled and chose that gray color so it might look a little bit different in first look. I think it's a little bit better that the button gets enabled after user pick any number. Also I swapped hover and selected colors because to my mind it makes more sense when selected item has the primary color and hover just a little bit offset-ed color than original

Feel free to criticize my work and suggest to me some small or huge changes in order to make my code better. Thank you in advance!

Interactive rating card using only vanilla html/css/js

Gem•120

@ladyprogrammerPosted over 1 year ago

I like your code, it's clean! You had that all working in just a few lines of code! This makes it easier to maintain and follow the code.

Yeah I think hiding and showing the sections via hidden attribute is what I also think the cleanest and most elegant solution when just trying to do the two simpler pages with plain HTML - but this is just a personal opinion. We probably would want to use a framework or library like React or Angular to actually help us on more complex approaches to really divide the page into smaller components for multi-page websites. Other approaches I have seen before is to use document.open and document.write (or similar to that) and another is the use of ajax requests to read and insert snippets of HTML pages. Not really that simple as that with just hiding and showing the sections.

There are also some issues with the validation report - but I will leave you up to it to resolve and figure that out unless you need guidance. I have a feeling you can do these on your own. :D

In real-time projects, just keep in mind that a dev should strictly follow the agreed behavior and appearance which is defined usually by the UI/UX team/site owner/product owner/other similar persons who is in charge - unless you are given that creative freedom to do so. If you think a behavior or appearance is better (which is usually subjective), it's better feel to talk with the person-in-charge of the design and behavior.

In my understanding as part of the challenge stated in the Brief section: Your challenge is to build out this interactive rating component and get it looking as close to the design as possible.

Any assumptions - if you should do one - should not impact the originally approved design and behavior.

Nice work! I have a feeling you have been coding for a while.

Marked as helpful

Ayobami Ikuewumi•850

@IkuewumiSubmitted over 1 year ago

Hi ya'll 👋. This is my solution to the credit cards form challenge. As usual, I threw a dark mode in there. And I tried to work harder on accessibility in this challenge. What I found troublesome was adding a border-gradient to the inputs. I had intended on using pseudo-elements, but they don't work. I later settled for border-image(which doesn't work with border-radius). I would like to know if there are other approaches to this.

Any comments on the code and how to better it would be greatly appreciated. Happy coding💻,

Ayobami

Credit Card Form

Gem•120

@ladyprogrammerPosted over 1 year ago

You're off to a good start! Nice attempt on the this challenge. I did mine just a couple of days ago and I find it quite a challenge as well.

I reviewed the design images and it doesn't appear to require those. They appear to be just plain colored borders. However if you are curious border gradient requires several properties added in CSS to make that work, not just one.

input {
   border: 1px solid rgba(...);
   border-radius: var(--br);     // this stopped working when border-image was used on hover
}

input:focus-visible {
   border-image-source: linear-gradient(20deg,hsl(249,99%,64%),hsl(278,94%,30%));
    border-image-slice: 1;    // need to have some value
    border-image-repeat: round;
}

I noticed that border-radius stopped working when you used border-image, so I appears they are not compatible. Also, at 1px border the gradient on focus isn't too noticeable unless you increase the px size to maybe 15px so you can actually see the gradient colors. So I am convinced this is just a solid border in one color. On checking via inspect element, the border gradient has been rendered all right - it's just not obvious because it's just 1px - so need to stress yourself out here!

I noticed that the card doesn't update in real-time - it is only updated after submission, but as per listed in the requirements:

Fill in the form and see the card details update in real-time

Which meant that the card details update as you type. Probably best add event listener "input" for every input and write a function to update the card details from there.

Other notable things to improve -

It is cleaner to use the bg-front-card.png as a CSS background for the card, so you use lesser HTML code. Same is true with the backside of the card.

style.css

.card-front {
   background: url('/images/bg-front-card/png') no-repeat;
}

index.html

<div class="card card-front">
   // remove <img >
   <span>...</span>
</div>
...

Marked as helpful

daniel•80

@retailescapeartistSubmitted over 1 year ago

I was unsure about how to size the items better. I got around most of it, but it was messy. I'm sure I'll get better with time

QR code using CSS

Gem•120

@ladyprogrammerPosted over 1 year ago

There are several techniques to center content if you look around. The most recent ones are CSS Flexbox or Grid. Among those I searched online, these two are the ones that helped most.

[CSS Flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[CSS Grid] (https://css-tricks.com/snippets/css/complete-guide-grid/)

I suggest learning CSS Flexbox first as it's easier to grasp before learning the CSS grid as flexbox is simpler.