Day 22 - Flex Box, moment.js

July 31, 2018 16:12 UTC Team GirlsCode MK (Bahmni) [2018]Subscribe to this teams's activities


Flex box - more options, inputting labels to create siblings so that styles can be changed independently without effecting other elements.

Installed moment.js to deal with calculating age from a date of birth or date of birth from age. 😱

Looked at checkbox solutions on github, codepen, and stack overflow and how to add SVG so we can do this when design is ready.

Met with one of our coaches, update SCRUM type online. 30 mins to update, what has happened, what is still to happen and the problems we are dealing with. Loved his feedback to css refactoring in react with our little app, YAGNI. Which stands for "You aren't gonna need it" which is a principle of extreme programming (XP).

Installed Firefox which has a responsive design mode that adapts a UI depending on the device being used. Our mentor introduced us to this and might prove very useful for testing but at the moment we are using it to see the different screen sizes and how flex changes the UI.

Using git branches to gain confidence to change code without fear of changing master. Makes you a bit more daring with code and breaking it in an attempt to fix a problem with a safety net.


Working with moment.js to calculate age. Looking at options as suggested from coach about creating an interim third input to do the calculation in stages.

Flex box refinements to get the spacing of checkbox and years, months and days either using padding, creating siblings, using flex wrap

Completed application to Wish us luck! 🤞


Date calculation for date of birth and age into years, months and days and vis versa.

Change labels so the text appears to the right rather than at the top of the input - estimated input

Change flex container sibling to split another row to reduce spreading of components.

Meet with mentor to get feedback on story and next steps.


You must be logged in to add a comment.