Web design
  1. 2015-10-15 Canceled
  2. 2015-10-29 HTML + CSS + JavaScript
    Simple web application with HTML, CSS and JavaScript.
    Structure of the application's files and folders.
    app  
      |
      +--lib
      |
      +--images
      |
      +--app.css
      |
      +--app.html
      |
      +--app.js
    
    task_app_01.tgz
    We have:
    • simple application layout with one text field and unordered list,
    • corresponding *.js file with some basic application logic (an application entry point - start global function, setStatus local function).

    After this classes you should know

    1. When we use HTML, JavaScript and CSS?
    2. What we can do with HTML, JavaScript and CSS?
    3. What the Document Object Model (DOM) is?
    4. Basic HTML and JavaScript syntax.
    5. What is and why we use jQuery?
    6. Syntax of jQuery selectors.
    7. How to use selectors in jQuery to get element we want to work with.

    Additional informations

  3. 2015-11-12 HTML + CSS + JavaScript
    Continuation
    task_app_02.tgz
    We have:
    • basic style for our application
    task_app_03.tgz
    We have:
    • text entered into text field and confirmed by enter should appear as list element

    After this classes you should know

    1. Basic CSS syntax.
    2. Syntax of CSS selectors.
    3. How to use selectors in CSS to get element(s) we want to change.

    Additional informations

    • No additional informations
  4. 2015-11-26 HTML + CSS + JavaScript
    Continuation
    task_app_04.tgz
    We have:
    • delete button
    task_app_05.tgz
    We have:
    • move up, move down button
    task_app_06.tgz
    We have:
    • template for list item and we use this template

    After this classes you should know

    1. How to ,,bind'' action (like mouse click) with element (like button).
    2. How to use jQuery function to manipulate DOM elements (like we did for example with insertAfter).

    Additional informations

    • No additional informations
  5. 2015-12-10 HTML + CSS + JavaScript
    Continuation
    task_app_07.tgz
    We have:
    • stub of a new class AppStorage + simple code to test it (inside start method).
    task_app_08.tgz
    We have:
    • methods setValue and getValue to add and get elements to/from our storage
    task_app_09.tgz
    We have:
    • method removeValue to remove element from our storage

    After this classes you should know

    1. What a local storage is and how we can use it.

    Additional informations

    • No additional informations
  6. 2015-12-17 HTML + CSS + JavaScript
    Continuation
    task_app_10.tgz
    We have:
    • method removeValue to remove element from our storage,
    • method removeAll to remove all elements,
    • method containsKey to verify if there exists an element with a given key.

    How to test this code

    1. Open application in the browser (Chromium in my case)
    2. Press F12 to open tools for programmers and select Console tab. There should be printed an output from our application. If not, refresh an application.

      This log is generated by start method from AppStorage class (function)
          this.start = function()
          {
              console.log(prefix);
              console.log("local storage: ", this.isLocalStorageSupported);
      
              this.setValue("test_key_01", "test_value_01");
              console.log("getValue result: ", this.getValue("test_key_01"));
              
              // begin removeValue test
              console.log(localStorage);
              this.removeValue("test_key_01");         
              console.log("after remove: ", localStorage);
              
              // begin removeAll test
              this.setValue("test_key_02", "test_value_02");
              this.setValue("test_key_03", "test_value_03");
              console.log(localStorage);
              this.removeAll();
              console.log("after remove all: ", localStorage);
              
              // begin containsKey test
              this.setValue("test_key_04", "test_value_04");
              console.log(localStorage);
              console.log(this.containsKey("test_key_04"));
              console.log(this.containsKey("test_key_05"));
              
              // clean local storage
              this.removeAll();
              console.log(localStorage);
          };
      		
      Compare this code with an output.

    After this classes you should know

    1. No new knowledge

    Additional informations

    • No additional informations
    task_app_11.tgz
    We have:
    • save our data (all list items) in localStorage with a function saveTaskList. This function is called by pressing an auxiliary button Test.

    How to test this code

    1. Open application in the browser (Chromium in my case)
    2. Press F12 to open tools for programmers
    3. Select Resources tab
    4. Expand Local storage item and select file subitem

      Table with key-values pairs should be empty. If not, press right mouse button on every key and select Delete option from submenu.
    5. Add first item: "test item 01"
    6. Next add more items and remove / move some of them (I add "test item 02", "test item 03", "test item 04", "test item 05", then removed item 02, and moved 03 and 04)
    7. Press Test button located above the application footer and collapse, expand Local storage from left menu and select file subitem

      Note that in your local storage there should be a new element with a key simillar to taskApplication.taskList with values corresponding to your items: ["test item 04","test item 01","test item 03","test item 05"].
    8. Refresh an application. Verify that when an application is refreshed data in local storage are sill there but in our application are lost

    After this classes you should know

    1. No new knowledge

    Additional informations

    • No additional informations
    task_app_12.tgz
    We have:
    • function saveTaskList is called every time we modiffy something in our list (add, remove or move an item),
    • function loadTaskList called every time we start our browser.

    How to test this code

    1. Repeat steps 1-4 from previous example.
    2. Add test item 01 item and verify your local storage - this item should be there
    3. Add test item 02 item and verify your local storage - this item should be there. Note that an order of the list's elements correspnd to an order of our application's list items
    4. Move test item 02 element up and verify changes in our list
    5. Add test item 03, remove test item 01 item and verify changes in our list
    6. Refresh an application. Verify that when an application is refreshed data in local storage as well as our aplication are sill there

    After this classes you should know

    1. No new knowledge

    Additional informations

    • No additional informations

Task to complete the classes

Modify your application according to the following instructions
  1. make an items from a list editable
  2. add quantity field as a part of every item; this field should allowed to enter floating point number
  3. verify if the value entered as a quantity is a correct positive floating point number
  4. save in and restore from a local storage quantity information