Exercises 4 : Load and parse JSON (22p)

Remember use JAMK/GitLab to return your exercises. Student need to test that exercise really work.

Exercise 01 - Houses [6p]

Create a web page which shows a below real estate sales announcements. You should use HTML/CSS/JavaScript/JSON and Fetch API. You can use already made text data or you can create your own data and images.

1. Create JSON data from this text data - talotiedot.txt
2. Check that your JSON data is valid http://jsonformatter.curiousconcept.com
3. Save your JSON data to same folder with your HTML file

A few tips:

• Use array as a root in your JSON
• Array should contain house objects
• House object will have image, address, size, price and text

[
    {
       "image":"talo1.jpg",
       "address":"Suistokatu 3, 00120 , Helsinki",
       "size":170,
       "price":2904000,
       "text":"Granholmin suunnittelema vuonna 1896 valmistunut Kivipalatsi Pyyn korttelissa kuuluu tänäkin päivänä Helsingin kauneimpiin rakennuksiin."
    },
    ...

You can use our images or your own. Save images for example images folder near to your HTML file.

Create a HTML file which has empty div element with id="houses".

You can create your own styles for this exercise. A few tips are visible below.

#houses {
  width 600px
  height 800px
  float left
  overflow-y auto
  margin 10px
}

.houseContainer {
  display block
  border 1px solid gray
  width 570px
  height 165px
  your favourite font
  font size 12px
  margin and padding 2px
}

.houseImage {
  width 225px
  heigth 160px
  float left
  margin 2px
}

p.header {
  font size 14px
  font bold
}

p.text {
  font style italic
  font size 10px
}

Create separate JavaScript file and use it in your HTML file. Follow course material to load and render JSON data (Highscores to list). Create fetchHouses() function to fetch houses JSON and then create renderHouses() to create needed elements to DOM.

A few tips:

async function renderHouses() {
  let houses = await fetchHouses();
  // check console that json data is loaded correctly
  console.log(houses);
  // find empty houses div
  let housediv = document.getElementById("houses");
  // loop throught your JSON data
  houses.forEach(house => {     
    // create a new house container  
    housecontainer = document.createElement('div');
    housecontainer.className = 'houseContainer';
    // create an image
    let image = document.createElement('img');
    image.src = house.image;
    image.className = 'houseImage';
    // create p element as header
    let header = document.createElement('p');
    header.className = 'header';
    header.innerHTML = house.address;
    /*
      Create p elements here with house data
      ...
      let numberstr = new Intl.NumberFormat('fi-FI').format(house.price);
    */
    // add created elements to container
    housecontainer.appendChild(image);
    housecontainer.appendChild(header);
    /*
      Add created p elements to house container here 
    */
    // add house to div
    housediv.appendChild(housecontainer); 
  });    
}

Exercise 02 - Filter houses [6p]

You should modify exercise 1 to contain a few checkboxes to filter houses. Your application should display houses that are below 200m2 or below 1 000 000 euros (look more information from below images). A new data/houses are shown immediately after checkboxes are checked/unchecked.

Exercise 03 - Search form [10p]

Create a application which works as shown in below images. Use HTML/CSS/JavaScript/JSON and Fetch API. Application is waiting that user is typing a some first name and shows a possible names which are starting with a given letters (names are stored in JSON file). User can use arrow keys to select possible name from a list. Name will be displayed in a input field when an enter key is pressed.

Keycodes

You can check key codes for example here: Keycodes demo

Challenge

This exerice can be a challenging.