@KuzukaniSubmitted 4 days ago
What specific areas of your project would you like help with?
i have issue here that when it come to dark theme. i dont know how to make logo text become white. appreciate the answer
Latest solutions
Job listings with filtering using React
#reactPSubmitted 10 months agoAlthough this demo works i'm not so sure if this is the most elegant way to handle filtering with multiple options. I would love to hear other opinions how to achieve this functionality in a different way especially how to write logic when multiple options are selected.
Launch countdown timer with flipping animation
#animation#sass/scssPSubmitted 10 months agoI would love to see other approaches how to handle timing for flipping animation. I'm sure there are better ways to achieve this.
Latest comments
- P@miranleginPosted 3 days ago
Hi @Kuzukani,
i've answered this exact question to another poster which has the same problem as yourself.
If you want to preserve color of the icon while being able to change the color of the text alone you could import the svg file into Icomoon and export it as SVG sprite. This will download .zip file with all the files needed for this to work.
You will need two files, symbol-defs.svg and style.css and you will need both.
Inside symbol-defs.svg file structure will be similar to this
... <defs> <symbol id="icon-logo" viewBox="0 0 279 64"> <path fill="#c7231a" style="fill: var(--color1, #c7231a)" d="M21.409...In your case you will end up with multiple <path> nodes and next you need to identify which one is this text node, it will probably be this one
<path fill="#091540" style="fill: var(--color2, #091540)" d="M84.789 45.268v-You can remove "fill" and "style" attributes which will allow you to change it's color via external css stylesheet.
Next in HTML file you can reference this <symbol> with this line
<svg class="icon icon-logo"><use xlink:href="/path-to-this-file-in-filesystem/#icon-logo"></use></svg>Don't forget to apply provided stylesheet style.css which you previously downloaded.
In order to be able to change the color of the text path inside this svg all you need to do is apply color to the parent element or this element itself.
For example if you want this text inside logo to be red you can use:
<div style="color:red"> <svg class="icon icon-logo"><use xlink:href="/path-to-the-file/#icon-logo"></use></svg> </div>If you need extra help let me know, i can provide codepen if you're stuck.
Cheers, Miran
0 - @KapteynUniverseSubmitted 3 days agoWhat specific areas of your project would you like help with?
Any feedback is appreciated. Is there a way to change only the text color of the logo SVG, or is the dark mode logo missing? Also, is there a better way to fetch data, toggle states, and handle dark mode?
P@miranleginPosted 3 days agoHi @KapteynUniverse,
if you want to preserve color of the icon while being able to change the color of the text alone you could import the svg file into Icomoon and export it as SVG sprite. This will download .zip file with all the files needed for this to work.
You will need two files, symbol-defs.svg and style.css and you will need both.
Inside symbol-defs.svg file structure will be similar to this
... <defs> <symbol id="icon-logo" viewBox="0 0 279 64"> <path fill="#c7231a" style="fill: var(--color1, #c7231a)" d="M21.409...In your case you will end up with multiple <path> nodes and next you need to identify which one is this text node, it will probably be this one
<path fill="#091540" style="fill: var(--color2, #091540)" d="M84.789 45.268v-You can remove "fill" and "style" attributes which will allow you to change it's color via external css stylesheet.
Next in HTML file you can reference this <symbol> with this line
<svg class="icon icon-logo"><use xlink:href="/path-to-this-file-in-filesystem/#icon-logo"></use></svg>Don't forget to apply provided stylesheet style.css which you previously downloaded.
In order to be able to change the color of the text path inside this svg all you need to do is apply color to the parent element or this element itself.
For example if you want this text inside logo to be red you can use:
<div style="color:red"> <svg class="icon icon-logo"><use xlink:href="/path-to-the-file/#icon-logo"></use></svg> </div>If you need extra help let me know, i can provide codepen if you're stuck.
Cheers, Miran
Marked as helpful0 - P@krru09Submitted 12 days agoWhat are you most proud of, and what would you do differently next time?
I'm proud of almost everything! This is my first multi-functional project that I can see being out there in the real world. I think the two aspects of this project I am most proud of is accurately reflecting the cart with the popup modal at the end, and that I decided to go beyond the requirements of the assignment and create a sorting function where you can display the menu based on your preferences.
What I would do differently for next time is simplify my code. While the code works, I know that there were probably more effective ways to write script. Also, I would probably implement testing frameworks to ensure that my code actually works with edge cases, ensuring my made works with high volume, orders, etc.
What challenges did you encounter, and how did you overcome them?The biggest issue I had was thinking about how toggling between different settings actually duplicate event listeners can if you did not carefully consider how you display information. At first, I was simply changing the appearance of the add to cart vs. quantity button; however, that meant that whenever I was toggling to the quantity button multiple times, I would stack increment and decrement event listeners on top of each other, calling functions unnecessarily and causing a lot of bugs when using my website. For the buttons (and a lot of parts of my code actually), I utilized display: none depending on where the user was in their experience.
What specific areas of your project would you like help with?I would like to explore more ways to create the pop-up modal at the end. I utilized the popover modal API but it seems like it may not be supported by older versions of some browsers (e.g., Firefox).
Speaking of the popover modal, I had some issues with starting a new order. My original plan was to essentially erase the content from the popover modal after the user clicks Start New Order; however, the content in the modal would erase first and not close. The only way I got around it was utilizing a setTimeout() on the function that was responsible for clearing the modal, clearing the cart, and reloading the page. The timeout was so that the modal can close first and then begin a new order. This works, and I only needed to put 100ms for the setTimeout, which is basically indiscernible in practice... but I realize there was some flaw or inefficiencies in my JS for starting a new order. Any advice would be great!
P@miranleginPosted 8 days agoHi @krru09,
congratulations on completing this challenge.
As i'm working on this challenge myself i took some liberty to look at other peoples solutions as well and i can say that this is the most polished and complete solutions that i stumbled upon. Regarding UX everything works like expected, there are no jumps between switching from regular button to increment/decrement, outline on image doesn't change layout etc so everything is nice and smooth. It seems that you thought about this kind of things because i have seen far too many examples of other developers not paying attention to this kind of stuff.
If i'm cheery picking which i am i would advise to create a little bit more space for the interactive buttons for increment/decrement/delete because it's size currently is 20x20px which is far too small for comfortable clicking. I would include some spacing around but leave them visually small like they are now.
You can do that quite easily by including another element between <button> and <img> for example
<button class="quantity-icon-container increment-button"> <div class="button-circle"> <img src="assets/images/icon-increment-quantity.svg" class="quantity-icon" alt="increment-icon"> </div> </button>and adding some extra padding on the button element. Keep in mind that proposed size for the interactive elements like buttons is at least 44px in size, for this square ones it means 44x44px so 24px of padding needs to be added or 12px on all sides.
All in all great job on this challenge and happy coding!
Cheers, Miran
Marked as helpful0 - P@KuvashneeNaidooSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am glad that I used React as the useState hook helped to manage the state and rendering of the calculations, allowing for efficient updates to the UI. I will perhaps explore using other React hooks such as useRef to directly access DOM elements.
What challenges did you encounter, and how did you overcome them?One of the most challenging parts of creating this calculator was ensuring that all elements were styled correctly and responsive to different screen sizes. I made the calculator responsive through a combination of Flexbox for centering, a maximum container width, CSS Grid for button layout and a media query to add a breakpoint in order to adjust a column.
P@miranleginPosted 8 days agoHi @KuvashneeNaidoo,
First of all, congratulations on completing this challenge!
There are still a couple of things that could be improved, so let's get started.
The use of h[x] tags seems arbitrary, and I personally don't think anything other than <h1> fits this project. For instance, <h1>Splitter App</h1> or something similar would work well here. Other than that, no other h[x] tags are appropriate.
Speaking of tags, you could use <label> elements linked with <input> instead of using <h6>. That would help with accessibility and also would create a link between labels and inputs.
Applying border only of :focus makes input elements change it's size and the whole lest side area jumps because 4px is added on focus to the input element.
.input input:focus { border: 2px solid #26c0ab; outline: none; }To prevent this from happening you could apply border to default input styling but leave it transparent like so
.input input { border: 2px solid transparent; outline: none; }and only change color when in focused state, like
.input input:focus { border-color: #26c0ab; }
That would always create border but only change it's color when in focused state, preventing content jumps.
You could also put some event listeners on "Bill" and "Number of people" as well because as much as you cannot calculate "Tip amount" you can definitely calculate "Total amount" without any Tip percentage selected. Meaning that you don't need to select tip to calculate Total/person amount.
Last but not least you can use
<input type="radio" name="tip" />for all the Tip buttons instead of regular buttons which is more suitable for this kind of functionality. There is no need to keep track of which button is triggered because input with type="radio" can only have single element active at a time. The rule is they need to share the same "name" attribute for this functionality to work, for example<input type="radio" name="tip" id="5" /> <input type="radio" name="tip" id="10" /> <input type="radio" name="tip" id="15" /> <input type="radio" name="tip" id="25" />etc...
Hope this helps.
Happy coding! Miran
0 - @Africa4795Submitted 17 days agoWhat are you most proud of, and what would you do differently next time?
I'm Proud of building a responsive Tip-Calculator
What challenges did you encounter, and how did you overcome them?few challenges with positioning, and JavaScript
What specific areas of your project would you like help with?Feedback is Welcome!
P@miranleginPosted 16 days agoHi Daniel,
first of all congratulations on completing this challenge. There are couple of gotchas in this project but nonetheless is a fun one for sure. Hope you had a great time developing this one.
Now to the fun part, things that could be made to improve this solution.
- Semantics/Accessibility
- correct usage of heading tags (h1-h6) should not be dictated by visual appearance, how large or small something is, rather which purpose they serve, for example; <h2> for the "#tipAmount", and "#totalAmount" don't make much sense, think of it like a Table of Content where every heading level represents section that is following it, in that way <h1> could be <h1>Splitter calculator</h1>, all the other <h[x]> tags are probably not needed here
- input fields are missing labels, instead you are using <h3> for visual purposes, it is best practise to link <input> element to <label> elements and you can do that quite easily, for a <label> to be connected to <input> you need to add "for" attribute on the <label for="bill"> which should be the same as "id" on a <input id="bill">
- you are using <input type="search"> but the better approach would be to use type which is more suitable for numeric inputs such as <input type="number"> or <input type="tel">, there are some obvious gains for using correct type like input validation, setting up different patterns which are accepted and so on, also mobile keyboard is quite different for each type
- for the "Tip" buttons you could use <input type="radio"> which is probably more suitable here, because only one single radio button can be activated at the same time, reducing complexity on the javascript part
<input type="radio" name="tip" value="5" /> <input type="radio" name="tip" value="10" /> <input type="radio" name="tip" value="15" />- Presentation
- there is nothing obviously wrong with it rather the whole layout is quite small, it seems to me that the whole site is zoomed out a bit but this can be fixed with browser zoom or some other way
- when you enter really large number the layout breaks meaning there is no wrapping enabled on the results side, and basically everything breaks out of the container
- User experience
- input fields that can accept user input with keyboard will accept anything that user types, for instance nothing is stopping me for entering negative number, letters, or any other combination (some things could be prevented using correct input type)
- calculation is only happening on "Tip" button clicks which can be problematic if you change something in other fields, previous commenter mention adding event listeners to inputs as well
- "Reset" button looks like it's always in disabled state, nothing changes when the calculation is actually run
Hope you will find these feedback usefull!
Best Regards, Miran
Marked as helpful0 - @madhavan-tsSubmitted about 1 year agoP@miranleginPosted about 1 year ago
Hi @Madhavan,
I would remove grid completely from the mobile view, if you disable it yourself in the Dev Tools you will see that it's not doing anything useful.
Better solution would be to include it in the media query on the resolution you actually need it, in that way you don't need to override anything.
Also I would like to +1 the previous posters response about width/min-width/max-width. In general it is advisable to not use width/height on elements because that can lead to overflow issues etc...
Happy coding!
Cheers, Miran
1
