Part 0: The Rules

In this exercise, you will go over the different blocks, read the instructions and apply the necessary javascript code to get to the result.
You are not allowed to write anything outside the script tags provided. So keep your code in there!

How to do these exercies:
  • Read the instructions (Above the line)
  • Apply these instructions on the content (Below the line)
  • Do the bonus items if you wish to challenge yourself some more

Part 1: Interaction with inputs

Below this, you have an input, here's what you need to do:

  • When you type something in the greetingsBox, The bordered box should fill with what you typed
  • When you empty out the input box, show a "sorry nothing to show" message or a funny text

Part 2: DOM Creation on interaction with inputs

Below this, you have a table, here are the instructions:

  • When you press enter, check whether all fields have been filled (except remarks)
  • If the first condition is met, create a row with this data and allow the user to fill in the next row
    (so there should always be a row with empty inputs to fill in)
  • If you press enter and the conditions aren't met, display a popup saying what's wrong with toastr
  • Add a cross to the last cell, that when clicked, deletes the row again (Do NOT use the HTML onclick attribute!)

Name Pizza Size Remarks

Part 3: Element alterations

Here is what you need to do, below me is a list:

  • Fix it up so that it is an actual HTML list
  • Make it so the user can type what he / she wants in the final option
  • Launch the above transformation once the button (#launchMe) is pushed
  • "Choose your final ingredient" should be placed as placeholder text in the input when it's empty
  • When you go away from the input (click somewhere else), if the input is not empty, it should change into a regular LI item with the content of the input

This is what you need to make delicious spaghetti: PastaTomato SauceCheeseChoose your final ingredient



Part 4: Interaction with inputs

Below this, you have a table with some random data, here's what you need to do:

  • When you type something in the searchInput, the table rows need to be filtered by the typed text
  • Add checkboxes to each header (thead -> th ) when unchecked the columns disappear from the table (default = checked)
  • Highlight the found text in the table row

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500

Part 5: Make it move

Below this, you have a div that needs to move left to right using JS for the motion. Make it reach the end in 2 seconds, then return in 5s. Repeat that forever.


Part 6: make it follow

Below this, you have a div that needs to move left to right using JS for the motion. It should follow the mouse horizontally.


Part 7: Sliiiiiders

Recreate this very intuitive user interface. Insert the DOM nodes (html elements) using document.createElement();

Interface

Part 8: Sliiiiiders again

Put the exercise of above here again. They should both keep working. And you should only write one more line. In other words you cannot hard code ids 😉 If needed, rewrite the above code.