Add working Ajax search engine with CSS styling

konradjakubowski · Feb 1, 2018 · fdf986e · fdf986e
commit fdf986e
Show file tree

Hide file tree

Showing 9 changed files with 4,387 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,59 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# Konrad_Jakubowski_Portfolio
+JQuery/Ajax Country Search Engine vol.2
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css?family=Graduate');
+@import url('https://fonts.googleapis.com/css?family=Titillium+Web&subset=latin-ext');
+
+body {
+    text-align: center;
+    background: url('https://image.ibb.co/k0geWw/bg.jpg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+input[type="text"]
+{
+    background: transparent;
+    border: 1px solid dodgerblue;
+    color: #fff;
+    padding: 5px;
+}
+#search {
+    padding: 4px;
+    color: #fff;
+    background-color: red;
+    border: none;
+    font-weight: bold;
+    border-radius: 7px;
+}
+h1 {
+    font-family: 'Graduate', cursive;
+    font-size: 40px;
+    font-weight: bold;
+    color: #fff;
+    padding: 20px;
+}
+tr {
+    background-color: rgba(255,255,255,0.7);
+}
+.table {
+    margin-top: 60px;
+}
+.container {
+    padding-bottom: 40%;
+}
diff --git a/images/bg.jpeg b/images/bg.jpeg
diff --git a/images/bg2.jpg b/images/bg2.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>12.6 Ajax</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/style.css" type="text/css">
+</head>
+<body>
+   <h1>Country search engine</h1>
+    <button id="search">Search a country</button>
+    <input id="country-name" type="text" />
+
+    <section class="container">
+        <div class="row">
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th class="text-center">Country name:</th>
+                        <th class="text-center">Capital:</th>
+                        <th class="text-center">Flag:</th>
+                        <th class="text-center">Population:</th>
+                    </tr>
+                </thead>
+                <tbody id="countries-add"> 
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
+    <script type="text/javascript" src="js/script.js"></script>
+</body>
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,31 @@
+$(function() {
+	var url = 'https://restcountries.eu/rest/v1/name/';
+    var countriesList = $('#countries-add');
+
+	$('#search').click(searchCountries);
+	function searchCountries() {
+		var countryName = $('#country-name').val();
+		if (!countryName.length) countryName = 'Poland'; 
+
+		$.ajax({
+			url: url + countryName,
+			method: 'GET',
+			success: showCountriesList
+		});
+	}
+
+	function showCountriesList(resp) {
+		countriesList.empty();
+		resp.forEach(function(item) {
+            var twoLetters = item.alpha2Code.toLowerCase();
+            var tableRow = $('<tr>');
+
+			$('<td>').text(item.name).appendTo(tableRow);
+            $('<td>').text(item.capital).appendTo(tableRow);
+            $('<td>').html( '<img src="http://www.countryflags.io/' + twoLetters + '/flat/64.png">').appendTo(tableRow);
+            $('<td>').text(item.population + ' people').appendTo(tableRow);
+            tableRow.appendTo(countriesList); 
+		});
+	}
+});
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Konrad_Jakubowski_Portfolio
		JQuery/Ajax Country Search Engine vol.2