Exercise 1: Frontend programming
Clone the start project from: FrontEnd starter code and open the project in netbeans
1. Style with pure CSS
- Open the file: cssex1.html
- Link a new stylesheet to the html page.
- Change the look of the content in div with id = top_menu. Make it a horisontal menu:
- Change the look of the content in div with id = left_menu. Make it a vertical navigation bar to the left side (under the top menu)
- Change the look of the content in div with id = right_content. Make it sit to the right side of the left_menu. Give it an appropriate font-family, border and padding etc.
2. Style with bootstrap
- Open the file: cssex2.html setup links to bootstrap CDN: Look here.
- Use bootstrap to get a top menu, a left menu and a zebra striped look on the table in the right side content div (Hint: use Bootstrap grid to get the left and right hand side)
- Play around with different bootstrap tricks to prittyfy the content.
3. Javascript functionality
In this exercise we use the index.jsp file and the scripts/script.js file to make our solution.
when you develop with javascript allways have your browser console window open to detect any errors!!
- Look at the script.js file: see how the submit event handler is implemented.
- Extend it to also validate input from the other input fields (Use the regular expressions to check if the character pattern for the input is right.)
- Implement the eventhandlers for the 8 of the 10 buttons in the right view pane
- consoleLog: Implement the eventhandler so you can write to the browser console: The time is
current time
(Hint get the time like this: ` Date();` - When this button is clicked its color should change. (Hint use ‘this’ keyword to reference the element behind the event:
this.style.backgroundColor = 'red';
) - Change color in TH: The exercise here is to target all the
<th>
tags by usingdocument.getElementByTagName
. This will return an array of all elements of type table header. In order to set.style.color = 'pink'
on each of them. the collection must be looped over. (hint: use a normal for loop). - Make an eventhandler to this button that can hide the logo if it is shown and show it if it is hidden. (Hint: select the surrounding div with id=logo. save the information about its innerHTML (in a variable outside the eventhandler function (only if the variable is empty)). Then if the innerHTML is empty give it the content of the variable - else give it an empty string)
- Remove the first row of buttons. Hint: use the surrounding div and set its innerHTML to an empty string;
- Look at the implementation of the ‘sort by firstname’ click event handler. Based on the code in this eventhandler now implement the eventhandler code for the ‘sort by lastname’ button
- In the same way now look at the implementation of ‘filter on female’ and implement the filter on male button.
- Finally implement the ‘Sum account’ event handler so that we get the sum of all the listed accounts.
- consoleLog: Implement the eventhandler so you can write to the browser console: The time is