- Run it using:
npm run server
- I only used HTML and CSS
- The speed of the animations was not specified so I used 1s
- Tested on Chrome, Firefox and Safari
- To respect the timing between
15
to45
minutes, I was not able to test in IE
Write some HTML, CSS, and JavaScript to complete the following steps.
- Use
index.html
to write your HTML (loadsbundle.css
andbundle.js
) - Use
boxtest.scss
to write your CSS (compiles tobundle.css
) - Use
boxtest.js
to write your JavaScript (compiles tobundle.js
)
- Create 4 boxes in the DOM
- Each box should be
100px
wide and100px
tall - Each box will contain a single letter in counter-clockwise order:
C
: top leftM
: top rightY
: bottom rightK
: bottom left
- Each box will have a background color:
C
: cyanM
: magentaY
: yellowK
: black
- The text for each box should be styles with:
- size:
16px
- color:
#acacac
- font:
Helvetica
- size:
- The text for each box should be horizontally and vertically aligned in the center
- Each box should stick to its respective corners when resizing the browser window (see Step 1 gif)
- No JavaScript is allowed
Place all boxes in the center of the browser window building upon what you did in Step 1.
- Do not modify the CSS that was written for Step 1 (you'll see why in Step 3)
- Center all 4 boxes in the center of the browser window
- All 4 boxes should stay centered in the browser window when resizing the browser window (see Step 2 gif)
- No JavaScript is allowed
Apply timed animation effects building upon what you did in Step 1 and Step 2. Each animation effect should follow this order:
For all steps wait until the previous animation has completed before continuing to the next animation.
- All boxes should be hidden on page load
- Fade in each box one at a time in clockwise order
- Fade in box
C
- Fade in box
M
- Fade in box
Y
- Fade in box
K
- Fade in box
- Transition the position of each box in counter-clockwise to the center of the browser window
- Transition box
K
- Transition box
Y
- Transition box
M
- Transition box
C
- Transition box
- Fade out each box one at a time in clockwise order
- Fade out box
C
- Fade out box
M
- Fade out box
Y
- Fade out box
K
- Fade out box
The animations do not need to repeat once the boxes have faded out.
- No other libraries may be used outside of
jQuery
- Use of ES6 and ES7 syntax is preferred, but you can use ES5 syntax if that's your thing
- You should be able to resize the browser window at all times without breaking any of the above steps (see Step 3 resize gif below)
- Don't use
jQuery
- Complete steps 1-3 using only CSS. It's definitely possible!
- Inline documentation
- A recent version of Node.js
>= 4.0
- A recent version of NPM
>= 2.14
- Chrome, Firefox, Safari, or Microsoft Edge
npm install
- Start a local livereload server
- Compile ES7 and ES6 JavaScript to ES5 compatible file:
bundle.js
- Compile SCSS to CSS file:
bundle.css
npm run start
This challenge should take anywhere between 15
to 45
minutes.
Jr to Mid Level