Looking to hire developers?
@AghlaAbdo
@YahyobekRahimov
Submitted
I mostly had difficulty working with functions, trying to connect them. I am not sure if I have done a good job, writing JS code. So please, check out my JS code, and let me know if I could have made my code cleaner or better.
@AghlaAbdo
Posted
Great job
Hey, I just have some notes for you to consider, I noticed that you're trying to handle the dates yourself, setting the current dates, checking how many days in the month and if its a leap year or not.
You don't have to do all of that, you can just use the Date object to access the current date and validate whether the date is valid or not and much more, search for the Date object in Javascript to learn more.
Another thing, you need to remove the error when the user correct their input.
You can check my solution if you want to know how I handled that. Happy coding ;)
Marked as helpful
@Olagunju9148
Submitted
All feedbacks are welcome please.
@AghlaAbdo
Posted
Hi, great job, you did excellent work.
However, there are few things to note on your code. First of all, you used Fontawesome to import some icons, and the challenge is focused to create everything only with CSS.
You could create those arrow using:
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
width: 12px;
height: 12px;
border-radius: 3px;
}
.left-arrow {
transform: rotate(135deg);
}
.right-arrow {
transform: rotate(-45deg);
}
And you could create those 3 dots menu by creating 3 divs inside a another div container:
<div class="dots">
<div></div>
<div></div>
<div></div>
</div>
.dots {
margin-left: auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.dots div {
background-color: rgba(255, 255, 255, 0.76);
width: 4px;
height: 4px;
border-radius: 50%;
}
Another thing to note in the .msg-input section; there is no need to add any input, it supposed to be just like a screenshot but made with CSS, shouldn't interact with it. And also for the radio input, it should be just like an icon.
In general you did great work by finishing this intermediate challenge. I also went through this challenge you can see my solution on my profile. I wish you happy coding ;-)
Marked as helpful
@Mharvel13
Submitted
This project was a little bit challenging as my share popup box kept moving around the screen at different screen sizes, mostly for the desktop design
If anyone can help me fix it and allow, I'd be grateful. Feedback and contributions would be highly appreciated
@AghlaAbdo
Posted
Great job, you did very nice
I have some notes for you to consider to further improve your design:
<main> on the page, you can use flexbox or grid instead of margin. T use flexbox you need to set body desplay:flex:body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
But also .attribution will be set as flex, to avoid that you can set it's position to absolute and position it at the bottom of the page, Like so:
.attribution {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
I hope you got something from this. Good luck on your journey
@rileydevdzn
Submitted
Hey guys!
Back at it with responsive images, this time using the <picture> element. And exploring more of Flexbox's capabilities with the goal of minimizing the number of media queries I needed.
Had a couple of responsive design questions, thoughts/suggestions/feedback is welcome!
row-gap (and gap in general) for Flexbox and Grid are great when the spacing is identical, but I couldn't find a way to implement different gaps without adding a bunch more elements and styling. Using percentages required an additional media query in order to match the design. Does anyone know of a better approach for this?border-radius but would be more inclined to use em if I used relative units. Thoughts on em vs. percentage vs. viewport units for border-radius?Thanks!
@AghlaAbdo
Posted
That's awesome, you really did a great job
I cannot differentiate between you solution and the origin image. If you could just make some small changes to the font size and match it with origin image so you can't see the small dance of the text when you scroll between your solution and the design😅.
There is nothing else to say. Good Luck for your coding Journey 😊
@ahmbarreiros
Submitted
@AghlaAbdo
Posted
Very nice, you did great job
The only thing I will mention though is that you need to make the colored divs background color more transparent as in the image because those shining colors don't really look great.
And another thing for the drop shadow you also need to make it less visible to reach the same effect as in the image. But overall, you did great job I wish you happy coding 😊.
@VictorDEV1301
Submitted
@AghlaAbdo
Posted
Great job, you did very well.
The only thing I will mention is that you didn't use the same colors given in the style-guide.md
And for the div that contains 76 of 100, you should make the background linear-gradient from color to transparent to reach the same effect like this:
background: linear-gradient(180deg, rgb(77,34,200), rgba(77,34,200, .05));
And also you need to make the drop shadow less visible and use the color as in the image because its not a dark shadow, and add more padding to the text to make it go to 3 lines. Good Luck for your coding Journey 😊
Marked as helpful
@Ahmad-Akbik-f
Submitted
That is my first chalenge thanx for feedbacks
@AghlaAbdo
Posted
That's awesome you did a great job. But you didn't use the icons, and you also didn't use the same font, you sticked to the default one. you can see my solution for this one in my profile and compare it with yours.
Marked as helpful
