Skip to content
Submitted over 4 years ago

Angular Chat app with Sass using Grid & Flex

Karim A C•150
@ackuser
A solution to the Chat app CSS illustration challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi all, first of all thanks for the platform and support.

Well, I have used Angular to create components in some visual entities for reuse them as much as possible.

Grid was used for positioning the two main design with Media Queries as well. Then, I made responsive components flexing them with Flex.

Mainly, I did the phone & comments playing with shapes in Css and positioning them through margins, positions, relative units, etc.

One thing I really struggled was the creation of effects delayed with interpolations in Sass. In fact, I haven't learnt yet if it is possible to know how many elements are belonging to a class (See src/app/phone/phone.component.scss L43 ). My idea was to get this parametized @for $i from 0 through 7 { ==>
@for $i from 0 through NUMBER_OF_ELEM_WITH_CLASS {

Can anyone know how to do that?

Anyway, I have tested on Chrome & Firefox. Finally, I checked with a real IPhone 7 where I found problems related with scroll, although I was able to solve.

Any feedback would be really appreciate it, many thanks.

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Karim A C! 👋

    Good job on this challenge! 👍

    Your CSS illustration looks good and your solution is responsive! 🙌

    I suggest,

    • Decreasing the space between the CSS illustration and the text of the page and setting the text-align property of the text to start in the desktop layout of the site (to match the original design more closely).
    • Not immediately switching to a mobile-friendly layout right at 1440px since your solution still has plenty of space to accommodate the desktop layout for a few hundred pixels after that.
    • Making sure the text of the page doesn't get hidden behind the CSS illustration on screens with small viewport heights.
    • I'm not familiar with Angular JS, but I used CSS to create the messaging animation for this challenge. It's easy to create a simple animation for all of the messages and then set different animation-delay times for each message. You can do the same thing in Sass, of course, without any trouble.

    Keep coding (and happy coding, too)! 😁

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord