home.js

let dataList = [
    {"country":"Abkhazia","capital":"Sukhumi","type":"countryCapital"},
    {"country":"Afghanistan","capital":"Kabul","type":"countryCapital"},
    {"country":"Akrotiri and Dhekelia","capital":"Episkopi Cantonment","type":"countryCapital"},
    {"country":"Albania","capital":"Tirana","type":"countryCapital"},
    {"country":"Algeria","capital":"Algiers","type":"countryCapital"},
    {"country":"American Samoa","capital":"Pago Pago","type":"countryCapital"},
    {"country":"Andorra","capital":"Andorra la Vella","type":"countryCapital"},
    {"country":"Angola","capital":"Luanda","type":"countryCapital"},
    {"country":"Anguilla","capital":"The Valley","type":"countryCapital"},
    {"country":"Antigua and Barbuda","capital":"St. John's","type":"countryCapital"},
    {"country":"Argentina","capital":"Buenos Aires","type":"countryCapital"},
    {"country":"Armenia","capital":"Yerevan","type":"countryCapital"},
    {"country":"Aruba","capital":"Oranjestad","type":"countryCapital"},
    {"country":"Ascension Island","capital":"Georgetown","type":"countryCapital"},
    {"country":"Australia","capital":"Canberra","type":"countryCapital"},
    {"country":"Austria","capital":"Vienna","type":"countryCapital"},
    {"country":"Azerbaijan","capital":"Baku","type":"countryCapital"},
    {"country":"Bahamas","capital":"Nassau","type":"countryCapital"},
    {"country":"Bahrain","capital":"Manama","type":"countryCapital"},
    {"country":"Bangladesh","capital":"Dhaka","type":"countryCapital"},
    {"country":"Barbados","capital":"Bridgetown","type":"countryCapital"},
    {"country":"Belarus","capital":"Minsk","type":"countryCapital"},
    {"country":"Belgium","capital":"Brussels","type":"countryCapital"},
    {"country":"Belize","capital":"Belmopan","type":"countryCapital"},
    {"country":"Benin","capital":"Porto-Novo","type":"countryCapital"},
    {"country":"Bermuda","capital":"Hamilton","type":"countryCapital"},
    {"country":"Bhutan","capital":"Thimphu","type":"countryCapital"},
    {"country":"Bolivia","capital":"Sucre","type":"countryCapital"},
    {"country":"Bolivia","capital":"La Paz","type":"countryCapital"},
    {"country":"Bosnia and Herzegovina","capital":"Sarajevo","type":"countryCapital"},
    {"country":"Botswana","capital":"Gaborone","type":"countryCapital"},
    {"country":"Brazil","capital":"Brasília","type":"countryCapital"},
    {"country":"British Virgin Islands","capital":"Road Town","type":"countryCapital"},
    {"country":"Brunei","capital":"Bandar Seri Begawan","type":"countryCapital"},
    {"country":"Bulgaria","capital":"Sofia","type":"countryCapital"},
    {"country":"Burkina Faso","capital":"Ouagadougou","type":"countryCapital"},
    {"country":"Burundi","capital":"Bujumbura","type":"countryCapital"},
    {"country":"Cambodia","capital":"Phnom Penh","type":"countryCapital"},
    {"country":"Cameroon","capital":"Yaoundé","type":"countryCapital"},
    {"country":"Canada","capital":"Ottawa","type":"countryCapital"},
    {"country":"Cape Verde","capital":"Praia","type":"countryCapital"},
    {"country":"Cayman Islands","capital":"George Town","type":"countryCapital"},
    {"country":"Central African Republic","capital":"Bangui","type":"countryCapital"},
    {"country":"Chad","capital":"N'Djamena","type":"countryCapital"},
    {"country":"Chile","capital":"Santiago","type":"countryCapital"},
    {"country":"China","capital":"Beijing","type":"countryCapital"},
    {"country":"Christmas Island","capital":"Flying Fish Cove","type":"countryCapital"},
    {"country":"Cocos (Keeling) Islands","capital":"West Island","type":"countryCapital"},
    {"country":"Colombia","capital":"Bogotá","type":"countryCapital"},
    {"country":"Comoros","capital":"Moroni","type":"countryCapital"},
    {"country":"Cook Islands","capital":"Avarua","type":"countryCapital"},
    {"country":"Costa Rica","capital":"San José","type":"countryCapital"},
    {"country":"Croatia","capital":"Zagreb","type":"countryCapital"},
    {"country":"Cuba","capital":"Havana","type":"countryCapital"},
    {"country":"Curaçao","capital":"Willemstad","type":"countryCapital"},
    {"country":"Cyprus","capital":"Nicosia","type":"countryCapital"},
    {"country":"Czech Republic","capital":"Prague","type":"countryCapital"},
    {"country":"Côte d'Ivoire","capital":"Yamoussoukro","type":"countryCapital"},
    {"country":"Democratic Republic of the Congo","capital":"Kinshasa","type":"countryCapital"},
    {"country":"Denmark","capital":"Copenhagen","type":"countryCapital"},
    {"country":"Djibouti","capital":"Djibouti","type":"countryCapital"},
    {"country":"Dominica","capital":"Roseau","type":"countryCapital"},
    {"country":"Dominican Republic","capital":"Santo Domingo","type":"countryCapital"},
    {"country":"East Timor (Timor-Leste)","capital":"Dili","type":"countryCapital"},
    {"country":"Easter Island","capital":"Hanga Roa","type":"countryCapital"},
    {"country":"Ecuador","capital":"Quito","type":"countryCapital"},
    {"country":"Egypt","capital":"Cairo","type":"countryCapital"},
    {"country":"El Salvador","capital":"San Salvador","type":"countryCapital"},
    {"country":"Equatorial Guinea","capital":"Malabo","type":"countryCapital"},
    {"country":"Eritrea","capital":"Asmara","type":"countryCapital"},
    {"country":"Estonia","capital":"Tallinn","type":"countryCapital"},
    {"country":"Ethiopia","capital":"Addis Ababa","type":"countryCapital"},
    {"country":"Falkland Islands","capital":"Stanley","type":"countryCapital"},
    {"country":"Faroe Islands","capital":"Tórshavn","type":"countryCapital"},
    {"country":"Federated States of Micronesia","capital":"Palikir","type":"countryCapital"},
    {"country":"Fiji","capital":"Suva","type":"countryCapital"},
    {"country":"Finland","capital":"Helsinki","type":"countryCapital"},
    {"country":"France","capital":"Paris","type":"countryCapital"},
    {"country":"French Guiana","capital":"Cayenne","type":"countryCapital"},
    {"country":"French Polynesia","capital":"Papeete","type":"countryCapital"},
    {"country":"Gabon","capital":"Libreville","type":"countryCapital"},
    {"country":"Gambia","capital":"Banjul","type":"countryCapital"},
    {"country":"Georgia","capital":"Tbilisi","type":"countryCapital"},
    {"country":"Germany","capital":"Berlin","type":"countryCapital"},
    {"country":"Ghana","capital":"Accra","type":"countryCapital"},
    {"country":"Gibraltar","capital":"Gibraltar","type":"countryCapital"},
    {"country":"Greece","capital":"Athens","type":"countryCapital"},
    {"country":"Greenland","capital":"Nuuk","type":"countryCapital"},
    {"country":"Grenada","capital":"St. George's","type":"countryCapital"},
    {"country":"Guam","capital":"Hagåtña","type":"countryCapital"},
    {"country":"Guatemala","capital":"Guatemala City","type":"countryCapital"},
    {"country":"Guernsey","capital":"St. Peter Port","type":"countryCapital"},
    {"country":"Guinea","capital":"Conakry","type":"countryCapital"},
    {"country":"Guinea-Bissau","capital":"Bissau","type":"countryCapital"},
    {"country":"Guyana","capital":"Georgetown","type":"countryCapital"},
    {"country":"Haiti","capital":"Port-au-Prince","type":"countryCapital"},
    {"country":"Honduras","capital":"Tegucigalpa","type":"countryCapital"},
    {"country":"Hungary","capital":"Budapest","type":"countryCapital"},
    {"country":"Iceland","capital":"Reykjavík","type":"countryCapital"},
    {"country":"India","capital":"New Delhi","type":"countryCapital"},
    {"country":"Indonesia","capital":"Jakarta","type":"countryCapital"},
    {"country":"Iran","capital":"Tehran","type":"countryCapital"},
    {"country":"Iraq","capital":"Baghdad","type":"countryCapital"},
    {"country":"Ireland","capital":"Dublin","type":"countryCapital"},
    {"country":"Isle of Man","capital":"Douglas","type":"countryCapital"},
    {"country":"Israel","capital":"Jerusalem","type":"countryCapital"},
    {"country":"Italy","capital":"Rome","type":"countryCapital"},
    {"country":"Jamaica","capital":"Kingston","type":"countryCapital"},
    {"country":"Japan","capital":"Tokyo","type":"countryCapital"},
    {"country":"Jersey","capital":"St. Helier","type":"countryCapital"},
    {"country":"Jordan","capital":"Amman","type":"countryCapital"},
    {"country":"Kazakhstan","capital":"Astana","type":"countryCapital"},
    {"country":"Kenya","capital":"Nairobi","type":"countryCapital"},
    {"country":"Kiribati","capital":"Tarawa","type":"countryCapital"},
    {"country":"Kosovo","capital":"Pristina","type":"countryCapital"},
    {"country":"Kuwait","capital":"Kuwait City","type":"countryCapital"},
    {"country":"Kyrgyzstan","capital":"Bishkek","type":"countryCapital"},
    {"country":"Laos","capital":"Vientiane","type":"countryCapital"},
    {"country":"Latvia","capital":"Riga","type":"countryCapital"},
    {"country":"Lebanon","capital":"Beirut","type":"countryCapital"},
    {"country":"Lesotho","capital":"Maseru","type":"countryCapital"},
    {"country":"Liberia","capital":"Monrovia","type":"countryCapital"},
    {"country":"Libya","capital":"Tripoli","type":"countryCapital"},
    {"country":"Liechtenstein","capital":"Vaduz","type":"countryCapital"},
    {"country":"Lithuania","capital":"Vilnius","type":"countryCapital"},
    {"country":"Luxembourg","capital":"Luxembourg","type":"countryCapital"},
    {"country":"Macedonia","capital":"Skopje","type":"countryCapital"},
    {"country":"Madagascar","capital":"Antananarivo","type":"countryCapital"},
    {"country":"Malawi","capital":"Lilongwe","type":"countryCapital"},
    {"country":"Malaysia","capital":"Kuala Lumpur","type":"countryCapital"},
    {"country":"Maldives","capital":"Malé","type":"countryCapital"},
    {"country":"Mali","capital":"Bamako","type":"countryCapital"},
    {"country":"Malta","capital":"Valletta","type":"countryCapital"},
    {"country":"Marshall Islands","capital":"Majuro","type":"countryCapital"},
    {"country":"Mauritania","capital":"Nouakchott","type":"countryCapital"},
    {"country":"Mauritius","capital":"Port Louis","type":"countryCapital"},
    {"country":"Mexico","capital":"Mexico City","type":"countryCapital"},
    {"country":"Moldova","capital":"Chisinau","type":"countryCapital"},
    {"country":"Monaco","capital":"Monaco","type":"countryCapital"},
    {"country":"Mongolia","capital":"Ulaanbaatar","type":"countryCapital"},
    {"country":"Montenegro","capital":"Podgorica","type":"countryCapital"},
    {"country":"Montserrat","capital":"Plymouth","type":"countryCapital"},
    {"country":"Morocco","capital":"Rabat","type":"countryCapital"},
    {"country":"Mozambique","capital":"Maputo","type":"countryCapital"},
    {"country":"Myanmar","capital":"Naypyidaw","type":"countryCapital"},
    {"country":"Nagorno-Karabakh Republic","capital":"Stepanakert","type":"countryCapital"},
    {"country":"Namibia","capital":"Windhoek","type":"countryCapital"},
    {"country":"Nauru","capital":"Yaren","type":"countryCapital"},
    {"country":"Nepal","capital":"Kathmandu","type":"countryCapital"},
    {"country":"Netherlands","capital":"Amsterdam","type":"countryCapital"},
    {"country":"New Caledonia","capital":"Nouméa","type":"countryCapital"},
    {"country":"New Zealand","capital":"Wellington","type":"countryCapital"},
    {"country":"Nicaragua","capital":"Managua","type":"countryCapital"},
    {"country":"Niger","capital":"Niamey","type":"countryCapital"},
    {"country":"Nigeria","capital":"Abuja","type":"countryCapital"},
    {"country":"Niue","capital":"Alofi","type":"countryCapital"},
    {"country":"Norfolk Island","capital":"Kingston","type":"countryCapital"},
    {"country":"North Korea","capital":"Pyongyang","type":"countryCapital"},
    {"country":"Northern Cyprus","capital":"Nicosia","type":"countryCapital"},
    {"country":"United Kingdom Northern Ireland","capital":"Belfast","type":"countryCapital"},
    {"country":"Northern Mariana Islands","capital":"Saipan","type":"countryCapital"},
    {"country":"Norway","capital":"Oslo","type":"countryCapital"},
    {"country":"Oman","capital":"Muscat","type":"countryCapital"},
    {"country":"Pakistan","capital":"Islamabad","type":"countryCapital"},
    {"country":"Palau","capital":"Ngerulmud","type":"countryCapital"},
    {"country":"Palestine","capital":"Jerusalem","type":"countryCapital"},
    {"country":"Panama","capital":"Panama City","type":"countryCapital"},
    {"country":"Papua New Guinea","capital":"Port Moresby","type":"countryCapital"},
    {"country":"Paraguay","capital":"Asunción","type":"countryCapital"},
    {"country":"Peru","capital":"Lima","type":"countryCapital"},
    {"country":"Philippines","capital":"Manila","type":"countryCapital"},
    {"country":"Pitcairn Islands","capital":"Adamstown","type":"countryCapital"},
    {"country":"Poland","capital":"Warsaw","type":"countryCapital"},
    {"country":"Portugal","capital":"Lisbon","type":"countryCapital"},
    {"country":"Puerto Rico","capital":"San Juan","type":"countryCapital"},
    {"country":"Qatar","capital":"Doha","type":"countryCapital"},
    {"country":"Republic of China (Taiwan)","capital":"Taipei","type":"countryCapital"},
    {"country":"Republic of the Congo","capital":"Brazzaville","type":"countryCapital"},
    {"country":"Romania","capital":"Bucharest","type":"countryCapital"},
    {"country":"Russia","capital":"Moscow","type":"countryCapital"},
    {"country":"Rwanda","capital":"Kigali","type":"countryCapital"},
    {"country":"Saint Barthélemy","capital":"Gustavia","type":"countryCapital"},
    {"country":"Saint Helena","capital":"Jamestown","type":"countryCapital"},
    {"country":"Saint Kitts and Nevis","capital":"Basseterre","type":"countryCapital"},
    {"country":"Saint Lucia","capital":"Castries","type":"countryCapital"},
    {"country":"Saint Martin","capital":"Marigot","type":"countryCapital"},
    {"country":"Saint Pierre and Miquelon","capital":"St. Pierre","type":"countryCapital"},
    {"country":"Saint Vincent and the Grenadines","capital":"Kingstown","type":"countryCapital"},
    {"country":"Samoa","capital":"Apia","type":"countryCapital"},
    {"country":"San Marino","capital":"San Marino","type":"countryCapital"},
    {"country":"Saudi Arabia","capital":"Riyadh","type":"countryCapital"},
    {"country":"Scotland","capital":"Edinburgh","type":"countryCapital"},
    {"country":"Senegal","capital":"Dakar","type":"countryCapital"},
    {"country":"Serbia","capital":"Belgrade","type":"countryCapital"},
    {"country":"Seychelles","capital":"Victoria","type":"countryCapital"},
    {"country":"Sierra Leone","capital":"Freetown","type":"countryCapital"},
    {"country":"Singapore","capital":"Singapore","type":"countryCapital"},
    {"country":"Sint Maarten","capital":"Philipsburg","type":"countryCapital"},
    {"country":"Slovakia","capital":"Bratislava","type":"countryCapital"},
    {"country":"Slovenia","capital":"Ljubljana","type":"countryCapital"},
    {"country":"Solomon Islands","capital":"Honiara","type":"countryCapital"},
    {"country":"Somalia","capital":"Mogadishu","type":"countryCapital"},
    {"country":"Somaliland","capital":"Hargeisa","type":"countryCapital"},
    {"country":"South Africa","capital":"Pretoria","type":"countryCapital"},
    {"country":"South Georgia and the South Sandwich Islands","capital":"Grytviken","type":"countryCapital"},
    {"country":"South Korea","capital":"Seoul","type":"countryCapital"},
    {"country":"South Ossetia","capital":"Tskhinvali","type":"countryCapital"},
    {"country":"South Sudan South Sudan","capital":"Juba","type":"countryCapital"},
    {"country":"Spain","capital":"Madrid","type":"countryCapital"},
    {"country":"Sri Lanka","capital":"Sri Jayawardenapura Kotte","type":"countryCapital"},
    {"country":"Sudan","capital":"Khartoum","type":"countryCapital"},
    {"country":"Suriname","capital":"Paramaribo","type":"countryCapital"},
    {"country":"Swaziland","capital":"Mbabane","type":"countryCapital"},
    {"country":"Sweden","capital":"Stockholm","type":"countryCapital"},
    {"country":"Switzerland","capital":"Bern","type":"countryCapital"},
    {"country":"Syria","capital":"Damascus","type":"countryCapital"},
    {"country":"São Tomé and Príncipe","capital":"São Tomé","type":"countryCapital"},
    {"country":"Tajikistan","capital":"Dushanbe","type":"countryCapital"},
    {"country":"Tanzania","capital":"Dodoma","type":"countryCapital"},
    {"country":"Thailand","capital":"Bangkok","type":"countryCapital"},
    {"country":"Togo","capital":"Lomé","type":"countryCapital"},
    {"country":"Tonga","capital":"Nukuʻalofa","type":"countryCapital"},
    {"country":"Transnistria","capital":"Tiraspol","type":"countryCapital"},
    {"country":"Trinidad and Tobago","capital":"Port of Spain","type":"countryCapital"},
    {"country":"Tristan da Cunha","capital":"Edinburgh of the Seven Seas","type":"countryCapital"},
    {"country":"Tunisia","capital":"Tunis","type":"countryCapital"},
    {"country":"Turkey","capital":"Ankara","type":"countryCapital"},
    {"country":"Turkmenistan","capital":"Ashgabat","type":"countryCapital"},
    {"country":"Turks and Caicos Islands","capital":"Cockburn Town","type":"countryCapital"},
    {"country":"Tuvalu","capital":"Funafuti","type":"countryCapital"},
    {"country":"Uganda","capital":"Kampala","type":"countryCapital"},
    {"country":"Ukraine","capital":"Kiev","type":"countryCapital"},
    {"country":"United Arab Emirates","capital":"Abu Dhabi","type":"countryCapital"},
    {"country":"United Kingdom; England","capital":"London","type":"countryCapital"},
    {"country":"United States","capital":"Washington, D.C.","type":"countryCapital"},
    {"country":"United States Virgin Islands","capital":"Charlotte Amalie","type":"countryCapital"},
    {"country":"Uruguay","capital":"Montevideo","type":"countryCapital"},
    {"country":"Uzbekistan","capital":"Tashkent","type":"countryCapital"},
    {"country":"Vanuatu","capital":"Port Vila","type":"countryCapital"},
    {"country":"Vatican City","capital":"Vatican City","type":"countryCapital"},
    {"country":"Venezuela","capital":"Caracas","type":"countryCapital"},
    {"country":"Vietnam","capital":"Hanoi","type":"countryCapital"},
    {"country":"Wales","capital":"Cardiff","type":"countryCapital"},
    {"country":"Wallis and Futuna","capital":"Mata-Utu","type":"countryCapital"},
    {"country":"Western Sahara","capital":"El Aaiún","type":"countryCapital"},
    {"country":"Yemen","capital":"Sanaá","type":"countryCapital"},
    {"country":"Zambia","capital":"Lusaka","type":"countryCapital"},
    {"country":"Zimbabwe","capital":"Harare","type":"countryCapital"}
]
let showList = [];
let data = "";
let startPosition = 0;
let statusScrollUp;

/**Show data table */
data += "<table><thead> <tr><th>Country</th><th>Capital</th><th>Type</th></thead></tr> <tbody id='body'>"
for (let item of dataList) {
    data += "<tr id='" + item.country + "' style='display: none'><td>" + item.country + "</td><td>" +item.capital + "</td><td>"+ item.type+ "</td></tr>";
}
data += "</tbody></table>"    
document.getElementById("data").innerHTML = data;

for(let i = startPosition; i<=startPosition+12; i++){
  document.getElementById(dataList[i].country).classList.add("display");
}

let objectBef = document.getElementById(dataList[startPosition].country);
//let objectAff = document.getElementById(dataList[startPosition+12].country);
/**intersection observer */
intersection();

function intersection(){
  const callback = (entries, observer) => {
      entries.forEach((entry) =>{
        console.log(entry);
          var scrollableElement = document.getElementById('body');
          scrollableElement.addEventListener('wheel', checkScrollDirection);
          if(!entry.isIntersecting){
            if(startPosition != 0){
              if(statusScrollUp){
                document.getElementById(dataList[startPosition].country).classList.add('display');
                document.getElementById(dataList[startPosition+12].country).classList.remove('display');
              }else{
                document.getElementById(dataList[startPosition-1].country).classList.remove('display');
                document.getElementById(dataList[startPosition+12].country).classList.add('display');
              }
            }
          }
      });
  }
  const options = {
      root: document.querySelector('tbody'),
      rootMargin: '95px 0px 432px 0px',
      threshold: 1.0
  }
  const myObserver = new IntersectionObserver(callback, options)
  myObserver.observe(objectBef)
}


/**Check scroll up or down */
function checkScrollDirection(event) {
  if (checkScrollDirectionIsUp(event)) {
    statusScrollUp = true;
    if(startPosition != 0){ startPosition -= 1;}
    intersection();
  } else {
    statusScrollUp = false;
    startPosition += 1;
    intersection();
  }
}

function checkScrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}