Javascript - Classwork #1 2 - Solved

DOM. Events 

 

Dummy texts can be copied from here: ​https://www.lipsum.com/ 

 

 

1.    Create a page which contains a button. By clicking on that button current datetime should appear on the right of the button. Style html by yourself.

 

 

2.    Create a page which contains an input. When entering a symbol, the same text should be presented under the input in parallel.

 

 

3.    Create a page which contains some form(you can use the same form from the HTML lesson: https://aca-jsjanuary.slack.com/files/U8XBT404E/F9SKV57GC/form_example.zip​) . When submitting the form alert entered data as JSON.

 

 

4.    Create a page which contains some information represented with a list. As an example you can consider one’s everyday schedule:

 

1.  Wake up at 07:00.

2.  Leave for a work at 08:30.

3.  Meeting at 11:00.

4.  12:00-13:00 lunchtime.

5.  18:15 shopping at the nearby grocery.

6.  Dinner with friends at 19:20.

7.  Finish freelance work until 01:00.  

 

 When some list item is hovered it should be highlighted. To highlight an item, change its font-size and background-color.

When clicking on a list item it should be marked as done by putting a strikethrough on it.  If the previous item is not finished yet, the next one cannot be marked as done.

 

 

5.    Create a page with image slider. Put three images and left and right buttons on sides which will allow you to change the image. Also images should slide by themselves with some interval.

 

6.    Create a page which contains several paragraphs of text. Create two inputs at the bottom of the page. One of the inputs changes the color of the texts in the paragraphs and the other one changes the background color of paragraphs. Input values can only be hexadecimal values such as #cdcd67. This means that inputs should be validated when value is entered. Under the buttons there should be a button with “Apply” label. When input values are valid, by clicking on button text colors should be changed.

  

 

7.    Create a page which contains a table with the students’ information. It consists from the following columns: Name, Age, Average Grade.

With the last row of a table (it can be in the footer) you can add a new ordinary row to the table with new information. That last row contains inputs for the columns. So when enter values and there is no empty value by clicking “Enter” new row should be added to the table.  

Table is sortable with the column Age. That means when clicking on Age column first time, it should sort table by ascending order. When clicking the second time, table should be sorted by descending order. When clicking the third time sorting should not be applied.