By ICT Hub and JS Belgrade
TBA
- Factorial function (see slide 55)
Create HTML and CSS for calculator. Recommended design: https://dribbble.com/shots/3344091-Daily-Ui-004-Calculator. Use <button> elements for calculator buttons.
Calculator project (HTML, CSS and JavaScript) is available here.
Calculator project (HTML, CSS and JavaScript) is available here.
- Fix the calculator bug
- Finish the +,-,/,*
- Do the Login form per design - practice example: https://dribbble.com/shots/2125879-Day-001-Login-Form
The Login/Sign Up project (HTML, CSS and JavaScript) is available here.
- Implement a Course site with navigation (Home, Topics, Attendees) and pages view per example: https://dribbble.com/shots/3708155-Home-Scanner - NOTE! Not the animation on the right, just the navigation and the table. The Home page should be a our course description, the Topics an unordered list with the topics we covered so far and the attendees a table from the design of with the FirstName, LastName, Email and Date of Birth . On hover it should show the blue hover, like on the example.
- In the navigation view add the User Full name and Picture which should be defined from variables and keep on page change
- On the Attendee view, add a button "Add Another Attendee" below the Attendee table, which will show a form with inputs for First Name, Last Name, Email and Date of Birth and a button "Add". Pressing the "Add" button, adds the entered data to the bottom of the table. The inputs from the Add Attendee form, should be validated. If you switch the view, the attendee list should stay the same, with the added attendee.
The Course/Attendee project (HTML, CSS and JavaScript) is available here.
- Add an another column to your table Actions that will show for each row two buttons
- Button Delete
- Button Edit
- Clicking Delete button - creates a DELETE request, on status 200 it deletes the row from the table Clicking Edit button - shows the form. The form button should now show the EDIT title.
- Clicking Attendee EDIT form button should now invoke a PUT request and on status 200, update the attendee row in the table. Advanced - actually send the ID to the API and delete the attendee.
The Course/Attendee project (HTML, CSS and JavaScript) is available here.
-
Replace all your requests with Jquery AJAX
-
Implement a Register form with first name, last name, email, password POST /register
and with validation! -
Implement a Login request form with email, password POST /login on success open the / page if the user puts wrong credentials, show an error message
There were no Course/Attendee projects on the class, just the test.
- Read about what is a server and a database
- What is Node.js? What is NPM? How to install and use both
- Write a Hello World Node.js app