Server with algorithms

.gitignore

@@ -2,7 +2,14 @@
 .idea/
 
 src/data_mining/nomadlist_data_mining/handler/__pycache__/
-
 src/data_mining/nomadlist_data_mining/scraper/__pycache__/
-
 src/.ipynb_checkpoints/
+src/scraper/__pycache__/
+
+venv/
+
+*.pyc
+backend/__pycache__/
+backend/notes
+backend/config.py
+instance/
\ No newline at end of file

README.md

@@ -19,6 +19,12 @@ The dataset, found in the `data/` folder, is scraped from user pages of [nomadli
 - 1. navigate to the root directory of this repo
 - 2. run `pip install -r requirements.txt`
 
+# How to run the server
+- 1. navigate to the root directory of this repo
+- 2. run `pip install -r requirements.txt`
+- 3. go to `backend/config.py` and replace the default arguments for databse connection with your local postgress one
+- 4. run `python run.py`
+
 ## Working with the datasets: See boilerplate code in src/Starter.ipynb
 - 3. run `jupyter notebook`
 - 4. select `src/Starter.ipynb`

backend/app.py

+from flask import Flask, render_template, url_for, request, redirect
+from flask_sqlalchemy import SQLAlchemy
+from datetime import datetime
+import csv
+from .models.UserCityModel import UserCityModel
+from .models.DestinationModel import DestinationModel
+from .models import db
+from .views.UserCityView import userCityBlueprint
+from .views.RecommendationView import recommendBlueprint
+from .views.RecommendationResultsView import recommendationsBlueprint
+from .config import app_config
+import pandas as pd
+import os
+from flask_bootstrap import Bootstrap
+
+
+# app = Flask(__name__, template_folder="templates", static_folder="static")
+# /// - relative path //// - absolute path
+# postgresql://username:passwd@localhost/naomeofthedatabase
+# app.config[
+#     "SQLALCHEMY_DATABASE_URI"
+# ] = "postgresql://michalhornak:vancouver12@localhost/test_db"
+# app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+# db = SQLAlchemy(app)
+
+
+def create_app(env_name):
+    app = Flask(__name__, template_folder="templates", static_folder="static")
+    Bootstrap(app)
+    app.config.from_object(app_config[env_name])
+    # app.config[
+    #     "SQLALCHEMY_DATABASE_URI"
+    # ] = "postgresql://michalhornak:vancouver12@localhost/test_db"
+    # db.init_app(app)
+
+    app.register_blueprint(userCityBlueprint)
+    app.register_blueprint(recommendBlueprint)
+    app.register_blueprint(recommendationsBlueprint)
+    with app.test_request_context():
+        db.init_app(app)
+        db.create_all()
+        # csv_data = pd.read_csv(
+        #    '/Users/michalhornak/Documents/School/MUNI/3. semester/PV254/recomander/pv254-city-recommender/backend/models/data/data_cities_stats_full.csv')
+        # csv_data.to_sql(con=db, index_label='id',
+        #                name='destinations', if_exists='replace')
+
+    @app.route('/', methods=['GET'])
+    def index():
+
+        destinations = UserCityModel.query.limit(10).all()
+        #return render_template("index.html", destinations=destinations)
+        return redirect(url_for('recommend.recommendInput'))
+    return app

backend/config.py

+import os
+
+basedir = os.path.abspath(os.path.dirname(__file__))
+postgres_local_base = 'postgresql://postgres:1ntersection@localhost/'
+database_name = 'test'
+
+class BaseConfig:
+    SQLALCHEMY_ECHO = False
+    SQLALCHEMY_TRACK_MODIFICATIONS = True
+    # SQLALCHEMY_DATABASE_URI = os.environ['DATABASE_URL']
+    SQLALCHEMY_DATABASE_URI = postgres_local_base + database_name
+
+
+class Development(BaseConfig):
+    DEBUG = True
+
+
+class Production(BaseConfig):
+    DEBUG = False
+
+
+app_config = {
+    'development': Development,
+    'production': Production,
+}

backend/forms.py

+from wtforms import (
+    Form,
+    StringField,
+    PasswordField,
+    validators,
+    SubmitField,
+    SelectField,
+)
+from wtforms.validators import ValidationError, DataRequired, Email, EqualTo, Length
+
+
+class CreateDestination(Form):
+    # [VARIABLE] = [FieldType]('[LABEL]', [
+    #     validators.[VALIDATOR TYPE](message=('[VALIDATOR ERROR'))
+    # ])
+    city = StringField("City", [validators.DataRequired(message=("Don't be shy!"))])
+    # hospital_score = StringField('Hospital score')
+    # english_speaking = StringField('English speaking')
+    submit = SubmitField("Add")
+

backend/models/DestinationModel.py

+from . import db
+
+
+class DestinationModel(db.Model):
+    __tablename__ = "destinations"
+    # __abstract__ = True
+    #id = db.Column(db.Integer, primary_key=True)
+    city = db.Column(db.String(200), primary_key=True)
+    hospital_availability = db.Column(db.Integer)
+    nightlife = db.Column(db.Integer)
+    female_friendly = db.Column(db.Integer)
+    racial_tolerance = db.Column(db.Integer)
+    walkability = db.Column(db.Integer)
+    quality_of_life = db.Column(db.Integer)
+    place_to_work_from = db.Column(db.Integer)
+    friendliness_to_foreigners = db.Column(db.Integer)
+    freedom_of_speech = db.Column(db.Integer)
+    startup_score = db.Column(db.Integer)
+    traffic_safety = db.Column(db.Integer)
+    ac_availability = db.Column(db.Integer)
+    lgbt_friendly = db.Column(db.Integer)
+    fun = db.Column(db.Integer)
+    wifi_availability = db.Column(db.Integer)
+    peace = db.Column(db.Integer)
+    nomad_score = db.Column(db.Float)
+    internet_mbs = db.Column(db.Integer)
+    cost_dollars_per_month = db.Column(db.Integer)
+
+    def __init__(self, city, hospital, nightlife, female,
+                 racial, walkability, quality_of_life, place_to_work_from, friendliness,
+                 freedom_of_speech, startup_score, traffic_safety, ac_availability,
+                 lgbt_friendly, fun, wifi_availability, peace, nomad_score, internet_mbs,
+                 cost_dollars_per_month
+                 ):
+        self.city = city
+        self.hospital_availability = hospital
+        self.nightlife = nightlife
+        self.female_friendly = female
+        self.racial_tolerance = racial
+        self.walkability = walkability
+        self.quality_of_life = quality_of_life
+        self.place_to_work_from = place_to_work_from
+        self.friendliness_to_foreigners = friendliness
+        self.freedom_of_speech = freedom_of_speech
+        self.startup_score = startup_score
+        self.traffic_safety = traffic_safety
+        self.ac_availability = ac_availability
+        self.lgbt_friendly = lgbt_friendly
+        self.fun = fun
+        self.wifi_availability = wifi_availability
+        self.peace = peace
+        self.nomad_score = nomad_score
+        self.internet_mbs = internet_mbs
+        self.cost_dollars_per_month = cost_dollars_per_month

backend/models/UserCityModel.py

+from . import db
+
+
+class UserCityModel(db.Model):
+    __tablename__ = "userCity"
+
+    id = db.Column(db.Integer, primary_key=True)
+    user = db.Column(db.String(200))
+    city = db.Column(db.String(200))
+    country = db.Column(db.String(200))
+    trip_start = db.Column(db.DateTime)
+    trip_end = db.Column(db.DateTime)
+    trip_duration = db.Column(db.Integer)
+    latitude = db.Column(db.Float)
+    longitude = db.Column(db.Float)
+
+    def __init__(self, data, user, city, country,
+                 trip_start, trip_end, trip_duration, latitude, longitude):
+        self.city = city
+        self.user = user
+        self.city = city
+        self.country = country
+        self.trip_start = trip_start
+        self.trip_end = trip_end
+        self.trip_duration = trip_duration
+        self.latitude = latitude
+        self.longitude = longitude

backend/models/__init__.py

+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()

backend/static/css/main.css

+body {
+    margin: 0;
+    font-family: sans-serif;
+}
\ No newline at end of file

backend/static/css/recommend.css

+body {
+    font: 16px Arial;
+  }
+  .autocomplete {
+    /*the container must be positioned relative:*/
+    position: relative;
+    display: inline-block;
+  }
+  input {
+    border: 1px solid transparent;
+    background-color: #f1f1f1;
+    padding: 10px;
+    font-size: 16px;
+  }
+  input[type=text] {
+    background-color: #f1f1f1;
+    width: 100%;
+  }
+  input[type=submit] {
+    background-color: DodgerBlue;
+    color: #fff;
+  }
+  .autocomplete-items {
+    position: absolute;
+    border: 1px solid #d4d4d4;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+    /*position the autocomplete items to be the same width as the container:*/
+    top: 100%;
+    left: 0;
+    right: 0;
+  }
+  .autocomplete-items div {
+    padding: 10px;
+    cursor: pointer;
+    background-color: #fff;
+    border-bottom: 1px solid #d4d4d4;
+  }
+  .autocomplete-items div:hover {
+    /*when hovering an item:*/
+    background-color: #e9e9e9;
+  }
+  .autocomplete-active {
+    /*when navigating through the items using the arrow keys:*/
+    background-color: DodgerBlue !important;
+    color: #ffffff;
+  }
\ No newline at end of file

backend/static/js/autocomplete.js

+function autocomplete(inp, arr) {
+  //alert("{{city}}");
+  /*the autocomplete function takes two arguments,
+  the text field element and an array of possible autocompleted values:*/
+  var currentFocus;
+  //for (let inp in inps) {
+      /*execute a function when someone writes in the text field:*/
+      inp.addEventListener("input", function(e) {
+          var a, b, i, val = this.value;
+          /*close any already open lists of autocompleted values*/
+          closeAllLists();
+          if (!val) { return false;}
+          currentFocus = -1;
+          /*create a DIV element that will contain the items (values):*/
+          a = document.createElement("DIV");
+          a.setAttribute("id", this.id + "autocomplete-list");
+          a.setAttribute("class", "autocomplete-items");
+          /*append the DIV element as a child of the autocomplete container:*/
+          this.parentNode.appendChild(a);
+          /*for each item in the array...*/
+          for (i = 0; i < arr.length; i++) {
+          /*check if the item starts with the same letters as the text field value:*/
+          if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
+              /*create a DIV element for each matching element:*/
+              b = document.createElement("DIV");
+              /*make the matching letters bold:*/
+              b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
+              b.innerHTML += arr[i].substr(val.length);
+              /*insert a input field that will hold the current array item's value:*/
+              b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
+              /*execute a function when someone clicks on the item value (DIV element):*/
+                  b.addEventListener("click", function(e) {
+                  /*insert the value for the autocomplete text field:*/
+                  inp.value = this.getElementsByTagName("input")[0].value;
+                  /*close the list of autocompleted values,
+                  (or any other open lists of autocompleted values:*/
+                  closeAllLists();
+              });
+              a.appendChild(b);
+          }
+          }
+      });
+      /*execute a function presses a key on the keyboard:*/
+      inp.addEventListener("keydown", function(e) {
+          var x = document.getElementById(this.id + "autocomplete-list");
+          if (x) x = x.getElementsByTagName("div");
+          if (e.keyCode == 40) {
+          /*If the arrow DOWN key is pressed,
+          increase the currentFocus variable:*/
+          currentFocus++;
+          /*and and make the current item more visible:*/
+          addActive(x);
+          } else if (e.keyCode == 38) { //up
+          /*If the arrow UP key is pressed,
+          decrease the currentFocus variable:*/
+          currentFocus--;
+          /*and and make the current item more visible:*/
+          addActive(x);
+          } else if (e.keyCode == 13) {
+          /*If the ENTER key is pressed, prevent the form from being submitted,*/
+          e.preventDefault();
+          if (currentFocus > -1) {
+              /*and simulate a click on the "active" item:*/
+              if (x) x[currentFocus].click();
+          }
+          }
+      });
+      function addActive(x) {
+      /*a function to classify an item as "active":*/
+      if (!x) return false;
+      /*start by removing the "active" class on all items:*/
+      removeActive(x);
+      if (currentFocus >= x.length) currentFocus = 0;
+      if (currentFocus < 0) currentFocus = (x.length - 1);
+      /*add class "autocomplete-active":*/
+      x[currentFocus].classList.add("autocomplete-active");
+      }
+      function removeActive(x) {
+      /*a function to remove the "active" class from all autocomplete items:*/
+      for (var i = 0; i < x.length; i++) {
+          x[i].classList.remove("autocomplete-active");
+      }
+      }
+      function closeAllLists(elmnt) {
+      /*close all autocomplete lists in the document,
+      except the one passed as an argument:*/
+      var x = document.getElementsByClassName("autocomplete-items");
+      for (var i = 0; i < x.length; i++) {
+          if (elmnt != x[i] && elmnt != inp) {
+          x[i].parentNode.removeChild(x[i]);
+      }
+      }
+  }
+  /*execute a function when someone clicks in the document:*/
+  document.addEventListener("click", function (e) {
+      closeAllLists(e.target);
+  });
+ // }
+}
+
+/*An array containing ingredients*/
+var ingredients = ['ho-chi-minh-city', 'seoul', 'alicante', 'amsterdam', 'london',
+     'nha-trang', 'da-nang', 'mui-ne', 'paris', 'hong-kong',
+     'chiang-mai', 'ko-samui', 'bangkok', 'bilbao', 'madrid',
+     'barcelona', 'nottingham', 'istanbul', 'new-york-city', 'tunis',
+     'florence', 'vientiane', 'kuala-lumpur', 'sanur', 'siem-reap',
+     'phnom-penh', 'sliema', 'kharkiv', 'venice', 'tenerife', 'hue',
+     'hanoi', 'vienna', 'rotterdam', 'dusseldorf', 'innsbruck', 'cairo',
+     'alexandria', 'riga', 'antwerp', 'antalya', 'rhodes', 'bodrum',
+     'jerusalem', 'tel-aviv', 'reykjavik', 'tangier', 'fes',
+     'marrakesh', 'casablanca', 'vancouver', 'chicago', 'busan',
+     'osaka', 'canggu', 'san-francisco', 'las-vegas', 'reno',
+     'portland', 'seattle', 'honolulu', 'tokyo', 'ko-tao', 'taipei',
+     'kyoto', 'nicosia', 'milan', 'arnhem', 'rome', 'jeju-island',
+     'denpasar', 'guangzhou', 'kuta', 'ubud', 'singapore',
+     'los-angeles', 'nijmegen', 'berlin', 'bratislava', 'kosice',
+     'cologne', 'kiev', 'brussels', 'edmonton', 'haarlem', 'the-hague',
+     'tirana', 'zurich', 'bern', 'copenhagen', 'prague', 'budapest',
+     'dublin', 'tilburg', 'porto', 'lisbon', 'gdansk', 'ghent',
+     'abu-dhabi', 'shenzhen', 'shanghai', 'athens', 'oslo', 'calgary',
+     'stockholm', 'katowice', 'utrecht', 'nairobi', 'frankfurt',
+     'tromso', 'groningen', 'warsaw', 'rzeszow', 'munich', 'dortmund',
+     'toronto', 'seville', 'detroit', 'minneapolis', 'eindhoven',
+     'bergen', 'atlanta', 'new-orleans', 'houston', 'zwolle', 'nassau',
+     'beijing', 'moscow', 'zandvoort', 'regina', 'denver',
+     'newcastle-upon-tyne', 'edinburgh', 'orlando', 'tampa', 'oxford',
+     'havana', 'mombasa', 'ottawa', 'lexington', 'des-moines', 'fargo',
+     'grande-prairie', 'hamburg', 'nuremberg', 'bologna', 'siena',
+     'lucca', 'bruges', 'indio', 'redding', 'dallas', 'santa-cruz',
+     'nanaimo', 'guelph', 'yangshuo', 'guilin', 'chengdu', 'victoria',
+     'salzburg', 'turin', 'exeter', 'bristol', 'cardiff',
+     'santa-barbara', 'montreal', 'quebec-city', 'heidelberg', 'pisa',
+     'monaco', 'nice', 'abbotsford', 'ogden', 'salt-lake-city',
+     'washington', 'ashland', 'phoenix', 'sacramento', 'miami',
+     'geneva', 'lugano', 'toulouse', 'granada', 'las-palmas',
+     'makassar', 'valencia', 'cebu', 'jakarta', 'cairns', 'byron-bay',
+     'brisbane', 'rio-de-janeiro', 'fortaleza', 'belo-horizonte',
+     'cusco', 'arequipa', 'lima', 'baltimore', 'florianopolis',
+     'leipzig', 'pristina', 'kotor', 'dubrovnik', 'mostar', 'essaouira',
+     'kralendijk', 'mountain-view', 'dahab', 'san-sebastian', 'daejeon',
+     'novi-sad', 'belgrade', 'krabi', 'doha', 'interlaken',
+     'montpellier', 'birmingham', 'da-lat', 'george-town', 'kuching',
+     'kaohsiung', 'pokhara', 'dhaka', 'kathmandu', 'tarifa', 'naha',
+     'fukuoka', 'okayama', 'nagoya', 'hamamatsu', 'yangon', 'mandalay',
+     'ao-nang', 'santiago', 'norwich', 'fort-lauderdale', 'cartagena',
+     'phuket', 'chania', 'malaga', 'buenos-aires', 'san-juan-del-sur',
+     'playa-del-carmen', 'montego-bay', 'puerto-viejo', 'panama-city',
+     'vilnius', 'colombo', 'ko-lanta', 'sydney', 'aarhus', 'dubai',
+     'hobart', 'sapporo', 'cancun', 'dresden', 'mexico-city',
+     'guwahati', 'stamford', 'ann-arbor', 'helsinki', 'trondheim',
+     'alesund', 'pittsburgh', 'austin', 'kigali', 'winnipeg', 'split',
+     'hvar', 'zagreb', 'brighton', 'toledo', 'kochi', 'varkala',
+     'kannur', 'mumbai', 'ahmedabad', 'jodhpur', 'delhi', 'pattaya',
+     'addis-ababa', 'madison', 'cody', 'idaho-falls', 'bozeman',
+     'casper', 'eugene', 'banff', 'antananarivo', 'milwaukee',
+     'luang-prabang', 'sofia', 'buffalo', 'tallinn', 'gili-air',
+     'sendai', 'tehran', 'shiraz', 'isfahan', 'bandar-seri-begawan',
+     'kota-kinabalu', 'johor-bahru', 'nashville', 'boston', 'halifax',
+     'santorini', 'male', 'muscat', 'jeddah', 'sa-pa', 'kolkata',
+     'bhubaneswar', 'visakhapatnam', 'kagoshima', 'beirut', 'cali',
+     'wilmington', 'hua-hin', 'davenport', 'grand-junction',
+     'schenectady', 'new-haven', 'glasgow', 'southampton',
+     'johannesburg', 'cape-town', 'windhoek', 'livingstone', 'lilongwe',
+     'khartoum', 'luxor', 'benghazi', 'tripoli', 'queenstown',
+     'cambridge', 'christchurch', 'auckland', 'adelaide', 'melbourne',
+     'ko-pha-ngan', 'richmond', 'pai', 'jaipur', 'agra', 'moradabad',
+     'izmir', 'taos', 'flagstaff', 'tucson', 'reading', 'ulaanbaatar',
+     'novosibirsk', 'almaty', 'bishkek', 'dushanbe', 'volgograd',
+     'cluj', 'san-diego', 'bursa', 'fort-wayne', 'omaha', 'little-rock',
+     'ushuaia', 'wellington', 'saint-petersburg', 'langkawi', 'tainan',
+     'basel', 'mykonos', 'palma', 'boracay', 'surabaya', 'manila',
+     'pyongyang', 'port-moresby', 'grenoble', 'york', 'hoi-an',
+     'managua', 'oaxaca', 'malacca', 'goa', 'ko-phi-phi', 'montevideo',
+     'naples', 'mendoza', 'manchester', 'santo-domingo', 'rosario',
+     'cordoba', 'salta', 'la-paz', 'guayaquil', 'galapagos-islands',
+     'quito', 'santa-marta', 'bogota', 'manaus', 'belem', 'sao-luis',
+     'salvador', 'karlsruhe', 'odessa', 'zadar', 'marseille',
+     'chamonix', 'santa-maria', 'mars-city', 'taichung', 'cannes',
+     'ljubljana', 'arrecife', 'northampton', 'cabarete', 'sheffield',
+     'aberdeen', 'palawan', 'port-louis', 'chiang-rai', 'el-gouna',
+     'boulder', 'leeds', 'burgas', 'kandy', 'rishikesh', 'canberra',
+     'oranjestad', 'poznan', 'philadelphia', 'worcester', 'baguio',
+     'gold-coast', 'varanasi', 'bath', 'udon-thani', 'sihanoukville',
+     'lviv', 'batumi', 'tbilisi', 'vang-vieng', 'nago', 'urumqi',
+     'tashkent', 'chennai', 'brasov', 'bucharest', 'palermo',
+     'seminyak', 'gibraltar', 'lagos', 'paphos', 'szczecin', 'funchal',
+     'antigua', 'corralejo', 'jacksonville', 'gothenburg', 'chisinau',
+     'isla-mujeres', 'bocas-del-toro', 'goiania', 'lille', 'strasbourg',
+     'chatham', 'uluwatu', 'dili', 'punta-cana', 'minsk', 'coventry',
+     'varna', 'belfast', 'bengaluru', 'baku', 'durban',
+     'port-elizabeth', 'maputo', 'albuquerque', 'makati',
+     'thiruvananthapuram', 'naypyidaw', 'hamilton', 'guadalajara',
+     'wuhan', 'kunming', 'puerto-vallarta', 'charlotte', 'deventer',
+     'taghazout', 'chandigarh', 'amritsar', 'yogyakarta', 'malang',
+     'bandung', 'ipoh', 'ko-lipe', 'mataram', 'leeuwarden', 'ibiza',
+     'sayulita', 'tamarindo', 'thessaloniki', 'avignon',
+     'yekaterinburg', 'liberia', 'asuncion', 'brasilia', 'tartu',
+     'shenyang', 'sinuiju', 'harbin', 'queretaro', 'guiyang', 'perth',
+     'chongqing', 'gurgaon', 'indianapolis', 'road-town', 'tulum',
+     'merida', 'whistler', 'kauai', 'bend', 'luanda', 'graz', 'huambo',
+     'nantes', 'padova', 'barranquilla', 'aguascalientes', 'guanajuato',
+     'puebla', 'osijek', 'skopje', 'coimbra', 'sarajevo', 'cork',
+     'klaipeda', 'santa-teresa', 'rovaniemi', 'phu-quoc', 'hartford',
+     'amalfi', 'cincinnati', 'menlo-park', 'palo-alto', 'cleveland',
+     'oakland', 'luton', 'bari', 'fairfax', 'medford', 'lyon',
+     'krasnodar', 'saratov', 'bar', 'hiroshima', 'lake-tahoe',
+     'syracuse', 'jackson', 'helena', 'kingston', 'spokane', 'santa-fe',
+     'memphis', 'asheville', 'lancaster', 'lake-como', 'park-city',
+     'caye-caulker', 'timisoara', 'montanita', 'cuenca', 'budva',
+     'daegu', 'luxembourg', 'bethlehem', 'lublin', 'puerto-escondido',
+     'cabo-san-lucas', 'cavtat', 'stuttgart', 'salem', 'jamestown',
+     'lafayette', 'bedford', 'shaoxing', 'hangzhou', 'lusaka',
+     'dar-es-salaam', 'kampala', 'hohhot', 'zhangjiakou', 'nanning',
+     'nanchang', 'changsha', 'suzhou', 'rennes', 'portsmouth', 'boise',
+     'podgorica', 'plovdiv', 'medan', 'san-jose', 'vatican-city',
+     'dakar', 'yerevan', 'andorra-la-vella', 'praia', 'a-coruna',
+     'cagliari', 'minca', 'aachen', 'banja-luka', 'cheltenham',
+     'liverpool', 'pune', 'bielefeld', 'okinawa-city', 'surat', 'genoa',
+     'kansas-city', 'columbia', 'cozumel', 'brno', 'ningbo', 'yiwu',
+     'fort-collins', 'raleigh', 'grand-rapids', 'panajachel', 'amman',
+     'jarabacoa', 'suva', 'larnaca', 'gwangju', 'scranton',
+     'burlington', 'columbus', 'san-juan', 'san-pedro-de-atacama',
+     'antofagasta', 'savannah', 'anchorage', 'galway', 'fort-mcmurray',
+     'moncton', 'san-pedro-sula', 'kaunas', 'limassol', 'charleston',
+     'bordeaux', 'windsor', 'harrisonburg', 'darmstadt',
+     'virginia-beach', 'haifa', 'arendal', 'kobe', 'kollam', 'madurai',
+     'hyderabad', 'galle', 'napa', 'braga', 'ankara', 'bellingham',
+     'san-salvador', 'huntsville', 'astana', 'tijuana', 'dayton',
+     'lausanne', 'rabat', 'ajaccio', 'sarasota', 'key-west', 'wanaka',
+     'general-santos', 'trieste', 'constanta', 'trento', 'rochester',
+     'ithaca', 'gainesville', 'mancora', 'salento', 'aveiro',
+     'ponta-delgada', 'xiamen', 'fort-myers', 'mysore', 'marbella',
+     'mcleod-ganj', 'san-antonio', 'west-palm-beach', 'annecy',
+     'beacon', 'bloomington', 'hilo', 'bansko', 'colorado-springs',
+     'semarang', 'las-cruces', 'pamplona', 'lodz', 'yokohama',
+     'roanoke', 'javea', 'patras', 'belize-city', 'aalborg',
+     'bay-islands', 'monterey', 'nanjing', 'zhengzhou', 'luoyang',
+     'jinan', 'dalian', 'qinhuangdao', 'tianjin', 'leiden', 'trier',
+     'breda', 'banjul', 'princeton', 'biarritz', 'pretoria', 'erlangen',
+     'bridgetown', 'monterrey', 'bremen', 'agadir', 'guatemala-city',
+     'freetown', 'kelowna', 'san-miguel-de-allende', 'punta-del-este',
+     'recife', 'providence', 'zhuhai', 'curitiba', 'campo-grande',
+     'la-crosse', 'juarez', 'chiang-mai-thailand', 'davao', 'sochi',
+     'hannover', 'rimini', 'xining', 'amarillo', 'tulsa', 'scottsdale',
+     'oklahoma-city', 'san-clemente', 'carlsbad', 'rijeka', 'yichang',
+     'willemstad', 'wenzhou', 'manhattan', 'chattanooga', 'caracas',
+     'palm-bay', 'olympia', 'greenville', 'rouen', 'qingdao', 'manama',
+     'oulu', 'temple', 'lake-balaton', 'louisville', 'philipsburg',
+     'san-pedro', 'pensacola', 'shreveport', 'bowling-green',
+     'warner-robins', 'bismarck', 'campinas', 'porto-alegre',
+     'baton-rouge', 'lanzhou', 'wuhu', 'wollongong', 'texel', 'lincoln',
+     'kearney', 'green-bay', 'ramallah', 'matara', 'kanpur', 'jimbaran',
+     'missoula', 'verona', 'pueblo', 'tegucigalpa', 'ko-chang', 'nuuk',
+     'hull', 'alanya', 'galveston', 'accra', 'yaounde', 'juba',
+     'ulyanovsk', 'samara', 'kazan', 'chelyabinsk', 'sioux-falls',
+     'beaumont', 'datong', 'dongguan', 'darwin', 'changzhou',
+     'aurangabad', 'la-serena', 'yuma', 'leicester', 'vista',
+     'kitchener', 'riverside', 'novocherkassk', 'zhanjiang', 'kassel',
+     'joliet', 'albany', 'fuzhou', 'knoxville', 'surrey', 'conakry',
+     'modena', 'nagpur', 'rostov-on-don', 'rethymno', 'temecula',
+     'terre-haute', 'tallahassee', 'riyadh', 'nashua', 'wichita',
+     'augusta', 'saskatoon', 'port-vila', 'ashgabat', 'iasi', 'nis',
+     'bournemouth', 'shrewsbury', 'waterloo', 'pasto', 'noida',
+     'ciutadella', 'georgetown', 'weston', 'san-ignacio', 'canton',
+     'port-au-prince', 'springdale', 'bhopal', 'amundsen-scott',
+     'leuven', 'kaesong', 'sharjah', 'visalia', 'charlotte-amalie',
+     'dunedin', 'douala', 'sandpoint', 'joplin', 'springfield', 'provo',
+     'kaliningrad', 'bradenton', 'gori', 'apple-valley', 'harare',
+     'mamaia', 'dijon', 'newport-beach', 'karachi', 'duluth',
+     'daytona-beach', 'greensboro', 'palembang', 'sorocaba', 'nizhny',
+     'bucaramanga', 'turku', 'petaluma', 'palm-desert', 'port-of-spain',
+     'ferrara', 'giza', 'bakersfield', 'lake-havasu-city', 'senggigi',
+     'lansing', 'vladivostok', 'indore', 'lucknow'];
+
+  let elements;
+
+  var addMore = document.getElementById("add");
+  if (addMore.addEventListener) {
+      addMore.addEventListener("click", myFunction);
+  }
+  function myFunction(){
+      document.getElementById("first").insertAdjacentHTML('beforeend', "<input class='autocomplete' class='form-control' type='text' name='city_name'placeholder='Enter a city'/>");
+      elements = document.getElementsByClassName("autocomplete");
+      for (var i = 0; i < elements.length; i++){
+          autocomplete(elements[i], ingredients);
+      }
+  }
+
+  elements = document.getElementsByClassName("autocomplete");
+  for (var i = 0; i < elements.length; i++){
+      autocomplete(elements[i], ingredients);
+  }
\ No newline at end of file

backend/static/js/general.js

+
+function createOption(){
+    let newForm = document.createElement("OPTION");
+}
\ No newline at end of file

backend/templates/base.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+    <!-- jinja2 syntax(flask) -->
+    {% block head%}{% endblock %} 
+</head>
+<body>
+    {% block body%}{% endblock %} 
+</body>
+</html>
\ No newline at end of file

backend/templates/form.html

+{% block content %}
+<div class="formwrapper">
+    <form method="POST">
+        <div class="city">
+            {{ form.city(placeholder='city') }} {{ form.name.label }}
+        </div>
+        <div class="submitbutton">
+            <input id="submit" type="submit" value="Submit">
+        </div>
+    </form>
+</div>
\ No newline at end of file

backend/templates/index.html

+{% extends "bootstrap/base.html" %}
+{% block title %}This is an example page{% endblock %}
+
+{% block navbar %}
+<div class="navbar navbar-fixed-top">
+  <!-- ... -->
+</div>
+{% endblock %}
+
+{% block content %}
+  <h1>Recommender</h1>
+  <div>
+    <a href="{{ url_for('recommend.recommendInput')}}">recommend</a>
+    <a href="{{ url_for('usercity.getRatings') }}">list of visits</a>
+    </div>
+{% endblock %}
\ No newline at end of file

backend/templates/recommend.html

+{% extends "bootstrap/base.html" %}
+{% block title %}This is an example page{% endblock %}
+
+{% block styles %}
+{{super()}}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/recommend.css') }}">
+
+{% endblock %}
+
+{% block scripts %}
+{{super()}}
+<script src="{{url_for('static', filename='js/autocomplete.js')}}"></script>
+
+{% endblock %}
+
+{% block content %}
+<h1 class="display-4">Travel destinations recommendations</h1>
+{% if not results %}
+<form action="/recommend/results" method="POST" autocomplete="off">
+    <divclass='col-xs-12 col-sm-12 col-md-10 col-lg-10'>
+        <div class='input-group', id='first'>
+            <input class="autocomplete" class='form-control' type='text' name='city_name' placeholder="Enter a city"/>
+        </div>
+    <button type="button" id="add" class="btn btn-light">Add a city</button>
+    <button type="submit" id="submit" value="submit" class="btn btn-light">Get recommendations</button>
+
+    </div>
+</form>
+{% endif %}
+
+{% if results %}
+    <p>Cities: {{cities}}</p>
+    {% for key, value in results.items() %}
+    <div class="col-xs-6">  
+        <h2 class="sub-header">{{key}}</h2>
+        <div class="table-responsive"></div>
+            <table class="table table-striped" >
+                <thead>
+                    <th>City</th>
+                    <th>Match</th>
+                    <th>Reason</th>
+                </thead>
+                {% for val in value %}
+                <tr>
+                    <td><a href="https://www.google.com/search?q={{ val[0] }}">{{val[0]}}</a></td>
+                    <td>{{val[1]}}</td>
+                    <td>{{val[2]}}</td>
+                </tr>
+                {% endfor %}
+            </table>
+        </div>
+    </div>
+    {% endfor %}
+{% endif %}
+{% endblock %}
\ No newline at end of file

backend/templates/update.html

+{% extends 'base.html' %}
+
+{% block head%}
+<title>Task Master</title>
+{% endblock %}
+
+{% block body%}
+<div class="content">
+    <h1>Update Task</h1>
+    <form action="/update/{{task.id}}" method="POST">
+        <input type="text" name="content" id="content" value="{{task.content}}">
+        <input type="submit" value="Update">
+    </form>
+</div>
+{% endblock %}
\ No newline at end of file

backend/templates/userCity.html

+{% extends 'base.html' %}
+
+{% block head%}
+<title>Recommneder</title>
+{% endblock %}
+
+{% block body%}
+{% if destinations|length < 1 %}
+<p>There are no Destinations</p>
+{% else %}
+<div>
+    <table>
+        <tr>
+            <th>id</th>
+            <th>user</th>
+            <th>city</th>
+            <th>number of visits</th>
+        </tr>
+        {% for i in range(destinations|length) %}
+            <tr>
+                <td>{{destinations[i].id}}</td>
+                <td>{{destinations[i].user}}</td>
+                <td>{{destinations[i].city}}</td>
+                <td>{{destinations[i].number_of_visits}}</td>
+                
+            </tr>
+        {% endfor %}
+
+    </table>
+</div>
+{% endif %}
+<form action="/ratings" method="GET">
+    <input type="text" name="content" id="content">
+    <input type="submit" value="Inser destination">
+</form>
+
+{% endblock %}
\ No newline at end of file