@leandrhoSubmitted 2 months ago
Erkant
@erntTt94All comments
- @muraliincSubmitted 2 months ago
- @teklitgSubmitted over 1 year ago@erntTt94Posted 2 months ago
Good job on complating this challenge! Overall everything is okay, but your web isnt responsive.. there is no @media for mobile or tablet... also i noticed that the lighbox buttons arent working too.. just by clicking the thumbnails.. Keep going :]
0 - @CoolNight99Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
This was a complex project but I got the design and functionality down, I think. I would probably try to make the JavaScript code more modular but otherwise I'm happy with what I did.
What challenges did you encounter, and how did you overcome them?The lightbox was the trickiest thing to do, but I succeeded after lots of trial and error.
What specific areas of your project would you like help with?The icons which are supposed to turn orange on hover don't change for some reason. I would also like help with making the design more responsive.
@erntTt94Posted 2 months agoGood job! For the cart notifiction you can add just a simple div and just style it to look like a notifiction and position it to the cart... The lighbox -prev and -next buttons arent working for me... and buy clicking the thumbnails the second and forth are also arent working... At mobile-design your product-details-container just overflow and there are other bugs too, but overall congrats by complating this challenge.
Marked as helpful0 - @AzerJradiSubmitted 7 months ago@erntTt94Posted 2 months ago
Hello, very good job! My advice is about the semantics of the site.. better use main/section/header/footer instead of divs.. and your mobile version can be better especially with an 'burger menu' icon.. Keep coding :]
0 - @thedanielkingSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I really proud of how i wrote the javascript code and i hope to make it shorter next time.
What challenges did you encounter, and how did you overcome them?I couldnt change the color of the input and also couldnt change the background color of the fieldset when the input[type:"radio"] was clicked. eventually, i researched and kept on checking till i finally did it by myself.
What specific areas of your project would you like help with?I need help most especially with a better javascript code.
@erntTt94Posted 2 months agoHello, very good job! I checked your JS code and there is too much repetation... Instead of doing it every single time just select all of the inputs without the radio and if there is an error you can do it with nextElementSibling to show it and if there is no error just hide it... It will shorten your code.. Keep going :]
Marked as helpful0 - P@PKosmowskiSubmitted 4 months agoWhat specific areas of your project would you like help with?
any help with rewriting the code to make it look good, also the tip and total amount before selecting the tip are visible as $NaN, how can I make it to display as $0.00?
@erntTt94Posted 4 months agoHello, good job! I can't understand your code very well, but why you add styles through JS instead of CSS.. ? I think your NaN is coming from the function Number.. i tried to understand your code, but istead of using Number just get the value and if its a string you can convert it with parseInt or parseFloat or maybe NaN coming from here:
tipAmount.textContent = "$" + Number(tip/peopleValue).toFixed(2)instead of + you can use templete literals - `$ ${tip/peopleValue).toFixed(2)How this is somehow connected to React? Its Vanilla JS, i don't understand React, but for React you need to have different components and a main component which is App.jsx/js..
0 - P@YuliaLantzbergSubmitted 5 months ago
- @mo7amed5hairySubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
well, i feel so proud in general with developing my skills, having the ability to enhance my code from project to another and the most thing am proud of is that i perform the code my self without relying on any outsource help such as video solutions or something. i think next time i will try to gain more skills to make my code so close to the correct criteria of coding to be more professional and really many thanks to this amazing website
What challenges did you encounter, and how did you overcome them?Well, frankly for the design i think i didn't meet a challenge mentioned as i practised for html and css design more than one time so i could easily design the form to be close to the design , but the challenge was in including javascript to interact with design this was the really challenge for me , but actually i had some basics of javascript so it helped me alot at performing the task
What specific areas of your project would you like help with?i think i completed all project and i think there is no specific part or area of the project than i can ask for help with , well may be in the future
- P@Richard1876Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
getting the tracker to change between tab
What challenges did you encounter, and how did you overcome them?all of it was a challenge, but how to not write alot of code was the most difficult
What specific areas of your project would you like help with?Feedback is welcome. i'll love to know how to get the hover state after changing the side tabs color through JS.
@erntTt94Posted 4 months agoHello good job! I have some suggestions for you: -You can center your card like wrapping it all in a single div and center it with flexbox, now there is too much space at the bottom... -Your mobile design is at around 374px and its not responsive at all.. my suggestion is to change it around 600-700px and it will be better.. -For this exact project is better to use grid for the cards is my suggestion, because you can easily change the area for the cards.. from 4 columns and 2 rows you can change it to be 1 column and auto rows and it will be responsive...
Marked as helpful0 - @ali00209Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
@media queries
What challenges did you encounter, and how did you overcome them?@media (min-width: ;) and (max-width: ;)
What specific areas of your project would you like help with?what is the easiest way to make website responsive? is there any other way to make website responsive other than media queries?
@erntTt94Posted 4 months agoHello, really well done project!
About the responsive design, you can learn more about rem,em,% and use them instead of px, because with px you hard-coded your components and they will be all the time for example 200px no matter of the width.. but with rem for example you can change your component width,font-size or etc.. easy with @media and html - font-size...
Keep coding :]
0 - @moonznSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how it turned out, I think it looks close enough and this project made me realise I don't dislike Frontend development as much as I thought I did.
I would organize the CSS differently, maybe with generic classes that can be reused. I still don't know the best way to organize it.
I would also build the HTML first and then add the CSS.
What challenges did you encounter, and how did you overcome them?There were a lot of CSS properties that I didn't even know existed so I had to Google to find them.
What specific areas of your project would you like help with?The best way to organize the CSS styles. Do I use generic classes that can be applied to multiple parts? Like the text styling for example. I think my CSS is way too closely coupled to each HTML component.
@erntTt94Posted 4 months agoGood job! I have a suggestion about your semantic HTML.. instead of using bold and normal, you can change them with title and subtitle...
Keep coding :]
0 - @AV-DNSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This one was pretty quick, but I might use another method to separate the "change" tag because I used margin-left: auto; and I'm not sure if it was the best choice. And I think I didn't have to use a media query for this one, despite the responsiveness issues for screen sizes smaller than 300px.
What challenges did you encounter, and how did you overcome them?I learned to use backgrounds better in this challenge.
What specific areas of your project would you like help with?I want to know how I could separate the "change" part from the other elements besides using space-between.
@erntTt94Posted 4 months agoHello, good job! To separate the Change you can add:
<img src="images/icon-music.svg"> <div class="plan-type"> <span><strong>Annual Plan</strong></span> <p>$55,99/year</p> </div> <a href="#">Change</a><div class="plan"> <img src="images/icon-music.svg"> <div class="plan-type"> <span><strong>Annual Plan</strong></span> <p>$55,99/year</p> </div> </div> <a href="#">Change</a>like that you have div and a and you can separate both of them and than you can work on the plan-type... also instead of space-between you can add gap: 1rem.
Marked as helpful0 - @AravindM817Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I was able to recreate the design as closely as possible. I would want to make the transition effects by hover to be smoother and calm.
What challenges did you encounter, and how did you overcome them?The transition effect was hard to replicate, I tried out different effects and ended up implementing the one that seemed to be similar to the effect shown in the design.
What specific areas of your project would you like help with?I would like to get help with transition effects how one can make smooth and calm transitions. What other properties are helpful and if there is any standard practice to it.
@erntTt94Posted 4 months agoHello, I check your code and the problem with the transitions are because you added them to the :hover state. You need to add transition to the element itself without :hover and in the :hover just what you want to change... Example:
color: green; transition: color 1s ease-in; } h1:hover { color:red; }Marked as helpful0 - @TaophyccSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
This is my first time using CSS grid to build a challenge
What challenges did you encounter, and how did you overcome them?It was as easy as it could have been
What specific areas of your project would you like help with?I want an overall feedback on the challenge
@erntTt94Posted 4 months agoHello, good job! My advice for you is instead of px you can use rem and with media you can set html font-size and all of your elements will shrink or grow... and its not a huge deal, but its good to have a different name on your css file.. for example: style.css. Otherwise is really well done, keep doing it.
Marked as helpful0 - @SimonbikerSubmitted 4 months ago@erntTt94Posted 4 months ago
Hello, You did a really great job with the project. I notice some improvments you can add: -At the Success State your button[Dismiss Message] is not working and you can add some state to go back to the main page. -The container is a bit large and you can set a max-width for it. -Email input is with different color.. in this case with **--grey and maybe this is your choice... -Font-size of the header is a bit more and the font-size of the rest elements is a bit less... othwerwise good job!
Marked as helpful0 - P@Y39WebDeveloperSubmitted 4 months ago
- @sakib-gitSubmitted 7 months ago@erntTt94Posted 5 months ago
Hello, good job! Seems like there need to be more paddind on each of the boxes, at middle resolution need some fixes, otherwise well done...
0
