This is a starter kit for interviews.

npm i -g @vue/cli
npm install

npm run serve

• Only screen resolution what will be tested is 360x640. (mobile)

Must

• The text within the menubar should say To Do List instead of menu.
• The text menu should be vertically centered within the menu bar.
• The menu bar should stay at the top, even if the user scrolls down.
• The menubar should have a drop shadow.
• The input field should have a blue drop shadow if it's focussed.
• The Add button should be green.

Should

• If you click Add, there will be a item appended to the list with the content of the input.
• Disable the Add button if the input is empty.
• If you press Enter while the input is focussed, the same behaviour will be executed as the Add button.
• There should be a Remove button in every Item (on the right).
• The Remove button should be red.
• If you click Remove, the corresponding item should disappear from the list.
• The footer should have a minimal height of 10rem.
• The footer should contain a copyright symbol.

Could

• Works in IE11 with only possible visual bugs.
• Move the div with the class item-creator to a seperate component called ItemCreator. The functionality should still work, while the Item components are still a direct child of the App component.
• Use SASS or LESS for the styles in stead of CSS.
• The input field should as wide as the remaining width next to the button.
• Every second Item element should have a darker background color #e0e0e0.

Would

• Works in IE11 without bugs.
• If you refresh the page, the content is still the same. Including the items you added!
• The footer should stick to the bottom if the content is smaller then the viewport.

Extra mile

• If you Add a new to do list Item. The content must be encrypted using the sha-256 algorithm.
• If you click a to do list Item. Show a popup with the decrypted content.

Screen resolutions what will be tested are:

• Mobile: 320x500, 360x640, 412x700
• Tablet: 1024x768, 768x1024
• Desktop: 1920x1080

Deliveries:

• Vue project (Internship requirements)
• Nuxt project (Junior Front End Developer requirements)

Must

• Complete everything of the Internship requirements above (using Bootstrap v4.1).
• Create a Nuxt.js project, here you will be working in from now.
• Move everything from the Vue to the Nuxt project.
• The menubar should have a linear gradient, choose whatever colors and direction you like.

Should

• Replace all bootstrap components with Bootstrap-vue components
• If you click on a To Do List Item you should go to a different page. Containing the decrypted content of that Item.

Could

• Move the To Do List data to a Vuex store.