In this challenge, you will build a vanilla Javascript modal window.
- You are not allowed to write any production code unless it is to make a failing unit test pass.
- You are not allowed to write any more of a unit test than is sufficient to fail; and compilation failures are failures.
- You are not allowed to write any more production code than is sufficient to pass the one failing unit test.
Which means the workflow is:
- Write a failing test. Stop writing the test as soon as it fails.
- Write the minimal production code required for the test to pass. Stop writing any code once the test passes.
- Refactor the test code and the production code without altering the functionality. All tests should pass.
Run yarn test
to execute the unit tests via Karma.
- Try not to read ahead.
- Do one task at a time. The trick is to learn to work incrementally.
- All tests should always pass, regardless of environment conditions.
You are tasked with developing a modal window component.
Note: it should be easy to develop the modal as a web component, but it can also just be a stand alone service
- Write a Modal class
- The modal should have an overlay area
- The modal should have a content area
- The overlay background color should be black with opacity (
rgba(0,0,0,0.42)
) - The content area should appear above the overlay (hint: parent-child elements)
- The content area should be in the center of the screen
- The content's background color should be white
- The content's dimensions should be 250x250 px
- The modal should be invisible on init
- Create an
open
method which turns the modal visible - The
open
method should get a string of HTML and add it to the content area - Create a
close
method that turns the modal invisible
Now that the modal is ready, you get new specifications:
- The open method should get
width
andheight
parameters and set the content's area accordingly - The open method should get a
background
property and set the content's area's background accordingly - The open method should get a
showOverlay
property and show/hide the overlay accordingly (in order to maintain backwards compatibility, the default value is true) - The overlay area should appear above all content of the website (hint: z-index or click test)