jonathanudeh
@jonathanudehAll comments
- @dullarzee@jonathanudeh
This is good and identical too. Kudos.
- @calvinvinWhat are you most proud of, and what would you do differently next time?
This challenge seems to be more desktop-based, and I seldom style such these cases. So it took me more time on the styling of this challenge.
The given example of mobile version design image is 750px in width but the instruction is to build a mobile version of 375px. As a result, I build a display on 750px viewport width based on the given example, and another display for smaller viewports just the way I like it to be.
@jonathanudehNice job, you really did great
- @raozhaizhu@jonathanudeh
Great Job, it looks really nice. Is that Tailwind css you used?
- P@MukarramHaqWhat are you most proud of, and what would you do differently next time?
I'm really proud of two things:
- The slider
- The lightbox design
I think writing cleaner code would be very beneficial in the future.
What challenges did you encounter, and how did you overcome them?I think the main challenge I encountered was the positioning of the cart. For some reason, it would only go as far as the middle of the page.
So to tackled that I learned a little about position and I was able to solve it after that.
Another challenge that I faced was that whenever I would click an image in the lightbox the lightbox would close. In order to tackle that I put the following code
What specific areas of your project would you like help with?if(e.target !== e.currentTarget) return
in theaddEventListener
for the lightbox.I would really like some help with how I chose the elements in JavaScript. Do you guys think that was the only way to do it or is there a better and cleaner way to go about it? Maybe create a new
.js
file and get them as objects?@jonathanudehBased on how your coded is structured I think using if(e.target !== e.currentTarget) return for the solution was a good choice. overall you did a very good job.
- @Zeey76@jonathanudeh
great work mate, you did well
- @JstickzWhat are you most proud of, and what would you do differently next time?
This project was quite difficult but it was worth it.
What challenges did you encounter, and how did you overcome them?I encountered a lot of challenges with javascript as I not very conversant with the programming language yet.
What specific areas of your project would you like help with?None for now.
@jonathanudehOverall everything is solid and looks really nice, I love it.
Though i noticed a bug, which is i can submit the button without consenting (when every field is filled but the checkbox is not). Hope this helps.
- @omarkl95@jonathanudeh
good job and good code also, keep going.
- @omarkl95@jonathanudeh
You did a nice job
- @aarontarkWhat are you most proud of, and what would you do differently next time?
I am most proud of my work with the Javascript. I learned many different concepts, such as the different kinds of event listeners for forms. I am also proud of making a functioning calculator that makes accurate calculations.
I would do the CSS a lot differently, and try to write it in a more structural way next time.
What challenges did you encounter, and how did you overcome them?It became difficult to determine which kinds of events to use on each of the interactable elements. Eventually I just gave each of the different elements multiple event listeners to cover all use cases.
What specific areas of your project would you like help with?I would really like help with writing better CSS. I would like to know ways I can reduce the amount of lines I use, and how I can make it more neat and structured.
I would also like to know how to better name classes, as I have been struggling with that as well.
@jonathanudehThis is good and as for writing better class names or id(s), I'll tell you that every developer faces this same issue, from clasnames to variables, etc. But what I do is i normally name the poular ones section-name-container, for the parents then like section-name for the child, or children. (ps. replace section-name with the actual name). I think i once saw a video on vscode tiltok account talking about an extension that helps with naming, I suggest you check it out.
- P@Y39WebDeveloper@jonathanudeh
You did good, I looked at your code and noticed you used a very unique approach at least to me though, making the daily, weekly or monthly option and input was quite different I enjoyed reading it.
- P@SurajCaseyWhat are you most proud of, and what would you do differently next time?
I am proud that I have completed this project. I tried to go with mobile screen first in this project. I would like to make seperate html file for similar projects next time.
What challenges did you encounter, and how did you overcome them?I had challenges to design for desktop screen as I used to do that first. I had trouble validating the email too. But I did my research online and found out the way to overcome the difficulties.
What specific areas of your project would you like help with?I would like help with figuring out easy way to do the css. It consumes a lot of time to design and I feel exhausted while doing it.
@jonathanudehYour result is very good and what i love most about it is that its identical. And about the css i don't know how long you've been coding but one thing i know for sure is that it gets easier with time, I also am going through the same thing as you and i just hope i am right, lol. you did very well though, how did you know the exact sizes to use to match the design perfectly?
Marked as helpful - P@Aminpatra@jonathanudeh
You really did good, I'm jealous.
- @nrdygrnmaWhat are you most proud of, and what would you do differently next time?
This was a bit tricky but I mastered it in the end :)
What challenges did you encounter, and how did you overcome them?To style the different cards with all the colors and backgrounds was not easy. Also to position the cards in the desktop layout also was a bit challenging. After quite some bit of trial and error I did it :)
@jonathanudehCongratulations on finally doing it, it shows growth. I just finished this project and I had similar problem as you but I also mastered it at the end. cheers to learning.
- @zzdevs@jonathanudeh
Looks great! although the calculator's card icon should be a monitor. outside that everything else looks good.
- @WiiDevYouSef@jonathanudeh
You did good, it looks great.
- @henrychrisWhat challenges did you encounter, and how did you overcome them?
There were a lot of challenges.
-
I could not get the font to work right, despite using an import from Google Fonts, a
@font-face
rule & referring to the font files in the directory. I had to ask for help before I got them to display correctly. -
I did not know how to move text away from bullets in a list. I Googled and found this solution:
.list-text { position: relative; left: 1rem; }
By surrounding text with a span, and assigning this class, the text would indent away from the bullet. However, this led to another issue because I had set
list-style-position
toinside
. To fix this, I removed that rule and changed how I padded lists to this:ul, ol { display: block; padding-inline-start: 1.5rem; }
With this, the list text is formatted & indented correctly.
What specific areas of your project would you like help with?I used a single media query, kicking in once the screen width surpasses 568px. The reasoning is the rest of the code is responsive & I don't need many breakpoints (for multiple screen sizes).
@jonathanudehTo move text away from bullet you just have to give the ol or ul ul { list-style-position: outside; padding-left: 20px; }
ul li { padding-left: 5px; }
at least thats how i did mine
list style position put the bullet outside the ul/ol and then the padding moves it left or right depending on your taste and the padding for li moves the text away left or right also depending on your taste
-
- @Manisha3196What are you most proud of, and what would you do differently next time?
I completed this project more easily this time.I would like to check if there any major changes i can do to the code so that it can be more efficient.
What challenges did you encounter, and how did you overcome them?I didn't encounter too much challenges in this project.
What specific areas of your project would you like help with?I would like help on to make my code more efficent and less code. I also want know through accessibility perspective of my code.
@jonathanudehIt looks great and the code is clean, kudos.
- @daurygg@jonathanudeh
It looks really good. The only thing I have to say is do not leave the alt attribute empty.
Marked as helpful