lisonallie / starting-javascript Goto Github PK

I was provided code with a series of exercises to learn different concepts of JavaScript.

The exercises were intended to teach some basics of javascript and what it can do. The 8 exercises are:

1. 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

2. 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) Bonus:
  • 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!)

3. 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 Bonus:
  • "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

4. 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) Bonus:
  1. Highlight the found text in the table row

5. 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.

6. 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.

7.Part 7: Sliiiiiders Recreate this very intuitive user interface.

• Insert the DOM nodes (html elements) using document.createElement();

8. 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.

For these exercises in the provided time, I completed 1-4 and learned a lot about how to use JavaScript.