fix search engine settings logic and probably add more bugs

README.md

@@ -67,7 +67,7 @@
 Add more buttons or web shortcuts in web menu by editing the `webSites` array in `js/config.js`. Make sure to put an icon with `svg` format for the shortcut in `assets/webcons/` folder. 
 
 ```js
-let webSites = [
+const webSites = [
 	{
 		site: 'Reddit',
 		icon: 'reddit',
@@ -83,7 +83,7 @@ let webSites = [
 To add more web shortcuts/buttons in the dock, you have to edit the `dockSites` array in `js/config.js`. Make sure to put an icon with `svg` format for the shortcut in `assets/webcons/` folder.
 
 ```js
-let dockSites = [
+const dockSites = [
 	{
 		site: 'Reddit',
 		icon: 'reddit',
@@ -93,6 +93,20 @@ let dockSites = [
 ]
 ```
 
+#### Adding more search engine in selection
+
+Add more search engine in selection by editing the `searchEngines` object in `js/config.js`. Make sure to follow the format below:
+
+```js
+const searchEngines = {
+	'duckduckgo': {
+		name: 'Duckduckgo',
+		prefix: 'https://duckduckgo.com/?q='
+	},
+	...
+}
+```
+
 #### Set your OpenWeatherMap API key
 
 Setting your OpenWeatherMap credential is a breeze. 

index.html

@@ -134,11 +134,10 @@
 					</div>
 					<div id='searchEngineContainer'>
 						<select id='searchEngineSelect'>
-							<option value='google'>Google</option>
+							<!-- Below is the structure of an option that will be generated in js/search-engine-settings.js -->
-							<option value='duckduckgo'>Duckduckgo</option>
+							<!-- 
-							<option value='ecosia'>Ecosia</option>
+							<option value='example'>Example</option>
-							<option value='yahoo'>Yahoo</option>
+							 -->
-							<option value='bing'>Bing</option>
 						</select>
 						<button type='button' id='searchEngineAsDefault'>Set as Default</button>
 					</div>

js/config.js

@@ -1,10 +1,39 @@
 class Config {
 
 	constructor() {
+		this.getSearchEngines = this.getSearchEngines.bind(this);
 		this.getWebSites = this.getWebSites.bind(this);
 		this.getDockSites = this.getDockSites.bind(this);
 	}
 
+	getSearchEngines = () => {
+
+		const searchEngines = {
+			'google': {
+				name: 'Google',
+				prefix: 'https://www.google.com/search?q='
+			},
+			'duckduckgo': {
+				name: 'Duckduckgo',
+				prefix: 'https://duckduckgo.com/?q='
+			},
+			'ecosia': {
+				name: 'Ecosia',
+				prefix: 'https://www.ecosia.org/search?q='
+			},
+			'yahoo': {
+				name: 'Yahoo',
+				prefix: 'https://search.yahoo.com/search?p='
+			},
+			'bing': {
+				name: 'Bing',
+				prefix: 'https://www.bing.com/search?q='
+			}
+		}
+
+		return searchEngines;
+	}
+
 	getWebSites = () => {
 		// Web menu
 		// A list of websites that will be generated and put on the web menu

js/search-engine-settings.js

@@ -7,10 +7,11 @@ class SearchEngineSettings {
 		this._selectSearchEngine = document.querySelector('#searchEngineSelect');
 		this._selectSearchEngineApply = document.querySelector('#searchEngineAsDefault');
 		
-		this._defaultSearchEngine = this._localStorage.getItem('searchEngine') || 'google';
 		this._placeholderPrefix = '  Search with ';
 		this._searchQueryPrefix = 'http://www.google.com/search?q=';
 
+		this._searchEngines = config.getSearchEngines();
+
 		this._onClickEvent = this._onClickEvent.bind(this);
 		this._onChangeEvent = this._onChangeEvent.bind(this);
 
@@ -18,69 +19,80 @@ class SearchEngineSettings {
 	}
 
 	_init = () => {
-		this._selectQueryString();
+		this._updateDefaultSearchEngine();
+		this._createSearchEngineOptions();
 		this._selectTheEngine();
 		this._registerOnChangeEvent();
 		this._registerOnClickEvent();
 	}
 
-	// Update query string and placeholder
+	_updateDefaultSearchEngine = () => {
-	_selectQueryString = () => {
+		// Update default search engine and current search engine
-
+		this._defaultSearchEngine = this._localStorage.getItem('searchEngine') || 'google';
-		if (this._defaultSearchEngine === 'google') {
+		this._currentSearchEngine = this._defaultSearchEngine;
-			this._searchQueryPrefix = 'http://www.google.com/search?q=';
-			this._searchBox.placeholder = this._placeholderPrefix + 'Google';
-
-		} else if (this._defaultSearchEngine === 'duckduckgo') {
-			this._searchQueryPrefix = 'https://duckduckgo.com/?q=';
-			this._searchBox.placeholder = this._placeholderPrefix + 'Duckduckgo';
-
-		} else if (this._defaultSearchEngine === 'ecosia') {
-			this._searchQueryPrefix = 'https://www.ecosia.org/search?q=';
-			this._searchBox.placeholder = this._placeholderPrefix + 'Ecosia';
-
-		} else if (this._defaultSearchEngine === 'yahoo') {
-			this._searchQueryPrefix = 'http://search.yahoo.com/search?p=';
-			this._searchBox.placeholder = this._placeholderPrefix + 'Yahoo';
-
-		} else if (this._defaultSearchEngine === 'bing') {
-			this._searchQueryPrefix = 'https://www.bing.com/search?q=';
-			this._searchBox.placeholder = this._placeholderPrefix + 'Bing';
-		
-		} else {
-			this._searchQueryPrefix = 'http://www.google.com/search?q=';
-			this._searchBox.placeholder = this._placeholderPrefix + 'Google';
-		}
 	}
 
-	_getSearchQueryPrefix = () => {
+	// Get query prefix
+	getSearchQueryPrefix = () => {
 		return this._searchQueryPrefix;
 	}
 
-	// Use this to select the default search engine on startup
+	// Parse the this._searchEngines object to automatically create a selection
-	_selectTheEngine = () => {
+	_createSearchEngineOptions = () => {
-		// Available values: google, duckduckgo, ecosia, etc.
+		Object.keys(this._searchEngines)
-	    this._selectSearchEngine.value = this._defaultSearchEngine;
+		.forEach(key => {
-	    this._selectQueryString();
+			const seValue = key;
+			const seData = this._searchEngines[key];
+			const seOption = document.createElement('option');
+			seOption.value = seValue;
+			seOption.innerText = seData.name;
+			this._selectSearchEngine.appendChild(seOption);
+		})
+
+		// Call to update query string and placeholder
+		this._updateSearchEngineElements();
 	}
 
+	// Update query string and placeholder
+	_updateSearchEngineElements = () => {
+
+		const seData = this._searchEngines[this._currentSearchEngine];
+
+		this._searchQueryPrefix = seData.prefix;
+		this._searchBox.placeholder = this._placeholderPrefix + seData.name;
+	}
+
+	// Use this to select the current/default search engine on startup
+	_selectTheEngine = () => {
+	    this._selectSearchEngine.value = this._currentSearchEngine;
+	    this._updateSearchEngineElements();
+	}
+
+	// Execute this on change event of <select>
 	_onChangeEvent = e => {
 		const selectedEngine = this._selectSearchEngine.options[this._selectSearchEngine.selectedIndex].value;
-		this._defaultSearchEngine = selectedEngine;
+		this._currentSearchEngine = selectedEngine;
-		this._selectTheEngine()
+		this._selectTheEngine();
 	}
 
 	_registerOnChangeEvent = () => {
 		this._selectSearchEngine.onchange = this._onChangeEvent;
 	}
 
+	// Apply button callback
 	_onClickEvent = e => {
-		const selectCurrentIndex = this._selectSearchEngine.options[this._selectSearchEngine.selectedIndex]
+		// Get selected <options>
+		const selectCurrentIndex = this._selectSearchEngine.options[this._selectSearchEngine.selectedIndex];
+
+		// Alert
 		alert('Success! ' + selectCurrentIndex.text + 
 			' is now your default search engine!');
 
-		// Save search engine
+		// Save and apply default search engine
 		this._localStorage.setItem('searchEngine', selectCurrentIndex.value);
+
+		// Update default search engine and current search engine
+		this._updateDefaultSearchEngine();
 	}
 
 	_registerOnClickEvent = () => {

js/search-query-send.js

@@ -1,7 +1,7 @@
-class SearchQuerySend extends SearchEngineSettings {
+class SearchQuerySend {
 
 	constructor() {
-		super();
+		// super();
 		this._searchBox = document.querySelector('#searchBox');
 		this._keyUpEvent = this._keyUpEvent.bind(this);
 		this._registerKeyUpEvent();
@@ -9,7 +9,7 @@ class SearchQuerySend extends SearchEngineSettings {
 
 	_sendQuery = () => {
 		// Search
-		window.location.href = encodeURI(this._getSearchQueryPrefix() + this._searchBox.value);
+		window.location.href = encodeURI(searchEngineSettings.getSearchQueryPrefix() + this._searchBox.value);
 	};
 
 	_keyUpEvent = event => {