From 6d6de0f88348d1412d80f4a76c20f32069b43549 Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Wed, 17 Jun 2020 19:03:27 +0800
Subject: [PATCH] Improve JS Logic (#28)

* theme engine fix ugly logic part 1

* remove new lines when gettings css value property

* theme-engine: add process cssvalues

* theme-engine: add getting inputfields value

* theme-engine: validation

* theme-engine: animspeed validation

* theme-engine: animspeed validation 2

* fix #rgbaa validator

* theme-engine:almost finish

* theme-engine: fix codacy errors

* theme-engine: fix missing semicolon

* theme-engine: fix missing semicolon

* weather-settings: use confirm() method

* weather-settings: cleanup, remove some confirm()
---
 css/base/dummy-body-background.css |   2 +-
 css/screens/web-menu.css           |  10 +-
 index.html                         |  12 +-
 js/search-engine-settings.js       |  19 +-
 js/theme-engine.js                 | 347 +++++++++++++++++++++--------
 js/weather-settings.js             |  38 +---
 6 files changed, 289 insertions(+), 139 deletions(-)

diff --git a/css/base/dummy-body-background.css b/css/base/dummy-body-background.css
index f62c00a..f72c616 100644
--- a/css/base/dummy-body-background.css
+++ b/css/base/dummy-body-background.css
@@ -1,4 +1,4 @@
-/*Filter for body's lazy loaded background */
+/* Filter for body's lazy loaded background */
 
 #dummyBodyBackground {
 	background: var(--base-body-bg);
diff --git a/css/screens/web-menu.css b/css/screens/web-menu.css
index e8e1a2b..e2dcfee 100644
--- a/css/screens/web-menu.css
+++ b/css/screens/web-menu.css
@@ -189,7 +189,7 @@
 	/* mask-image: linear-gradient(to bottom, black 85%, transparent 100%); */
 }
 
-/*Stretch list item if screen width < 470px*/
+/* Stretch list item if screen width < 470px */
 @media screen and (max-width: 470px) {
 	#webMenuList {
 		flex-grow: 1;
@@ -221,18 +221,18 @@
 	}
 }
 
-/*The a href container/main web menu button container*/
+/* The a href container/main web menu button container */
 .webMenuLink {
-	/*Act as div*/
+	/* Act as div */
 	display: block;
 
-	/*Remove outlines*/
+	/* Remove outlines */
 	text-decoration: none;
 	outline: 0;
 	border: none;
 	-moz-outline-style: none;
 
-	/*Disable dragging*/
+	/* Disable dragging */
 	user-select: none;
 	-webkit-user-drag: none;
 }
diff --git a/index.html b/index.html
index f06b183..e715d57 100644
--- a/index.html
+++ b/index.html
@@ -164,8 +164,8 @@
 						<div class='themeEngineGroups' id='themeEngineBackground'>
 							<label for='backgroundSet' class='themeEngineLabels'>Background Color and Opacity</label>
 							<div class='backgroundColorSetter'>
-								<input type='text' maxlength='7' class='themeEngineInputs' id='backgroundSet' autocomplete='off' placeholder='000000'/>
-								<input type='text' maxlength='2' class='themeEngineInputs' id='backgroundOpacitySet' autocomplete='off' placeholder='FF'/>
+								<input type='text' maxlength='7' class='themeEngineInputs' id='backgroundSet' autocomplete='off' placeholder='000000' pattern='[a-fA-f0-9#]+'/>
+								<input type='text' maxlength='2' class='themeEngineInputs' id='backgroundOpacitySet' autocomplete='off' placeholder='FF' pattern='[a-fA-f0-9]+'/>
 							</div>
 						</div>
 
@@ -173,21 +173,21 @@
 						<div class='themeEngineGroups' id='themeEngineForeground'>
 							<label for='foregroundSet' class='themeEngineLabels'>Foreground Color and Opacity</label>
 							<div class='foregroundColorSetter'>
-								<input type='text' maxlength='7' class='themeEngineInputs' id='foregroundSet' autocomplete='off' placeholder='000000'/>
-								<input type='text' maxlength='2' class='themeEngineInputs' id='foregroundOpacitySet' autocomplete='off' placeholder='FF'/>
+								<input type='text' maxlength='7' class='themeEngineInputs' id='foregroundSet' autocomplete='off' placeholder='000000' pattern='[a-fA-f0-9#]+'/>
+								<input type='text' maxlength='2' class='themeEngineInputs' id='foregroundOpacitySet' autocomplete='off' placeholder='FF' pattern='[a-fA-f0-9]+'/>
 							</div>
 						</div>
 
 						<div class='themeEngineGroups' id='themeEngineBlurStrength'>
 							<label for='blurSet' class='themeEngineLabels'>Blur Strength in Pixels</label>
 							<div class='blurSetter'>
-								<input type='text' class='themeEngineInputs' id='blurSet' autocomplete='off' placeholder='10'/>
+								<input type='text' class='themeEngineInputs' id='blurSet' autocomplete='off' placeholder='6px' pattern='[0-9px]+'/>
 							</div>
 						</div>
 						<div class='themeEngineGroups' id='themeEngineAnimSpeed'>
 							<label for='animSpeedSet' class='themeEngineLabels'>Animation Speed</label>
 							<div class='animSpeedSetter'>
-								<input type='text' class='themeEngineInputs' id='animSpeedSet' autocomplete='off' placeholder='300ms'/>
+								<input type='text' class='themeEngineInputs' id='animSpeedSet' autocomplete='off' placeholder='300ms' pattern='[0-9ms]+'/>
 							</div>
 						</div>
 						<button type='button' id='themeEngineReset'>Reset</button>
diff --git a/js/search-engine-settings.js b/js/search-engine-settings.js
index 51d6b44..7ff2559 100644
--- a/js/search-engine-settings.js
+++ b/js/search-engine-settings.js
@@ -12,9 +12,6 @@ class SearchEngineSettings {
 
 		this._searchEngines = config.getSearchEngines();
 
-		this._onClickEvent = this._onClickEvent.bind(this);
-		this._onChangeEvent = this._onChangeEvent.bind(this);
-
 		this._init();
 	}
 
@@ -22,8 +19,8 @@ class SearchEngineSettings {
 		this._updateDefaultSearchEngine();
 		this._createSearchEngineOptions();
 		this._selectTheEngine();
-		this._registerOnChangeEvent();
-		this._registerOnClickEvent();
+		this._registerSearchEngineSelectOnChangeEvent();
+		this._registerApplyOnClickEvent();
 	}
 
 	_updateDefaultSearchEngine = () => {
@@ -74,18 +71,18 @@ class SearchEngineSettings {
 	}
 
 	// Execute this on change event of <select>
-	_onChangeEvent = e => {
+	_searchEngineSelectOnChangeEvent = e => {
 		const selectedEngine = this._selectSearchEngine.options[this._selectSearchEngine.selectedIndex].value;
 		this._currentSearchEngine = selectedEngine;
 		this._selectTheEngine();
 	}
 
-	_registerOnChangeEvent = () => {
-		this._selectSearchEngine.onchange = this._onChangeEvent;
+	_registerSearchEngineSelectOnChangeEvent = () => {
+		this._selectSearchEngine.onchange = this._searchEngineSelectOnChangeEvent;
 	}
 
 	// Apply button callback
-	_onClickEvent = e => {
+	_applyOnClickEvent = e => {
 		// Get selected <options>
 		const selectCurrentIndex = this._selectSearchEngine.options[this._selectSearchEngine.selectedIndex];
 
@@ -100,8 +97,8 @@ class SearchEngineSettings {
 		this._updateDefaultSearchEngine();
 	}
 
-	_registerOnClickEvent = () => {
-		this._selectSearchEngineApply.onclick = this._onClickEvent;
+	_registerApplyOnClickEvent = () => {
+		this._selectSearchEngineApply.onclick = this._applyOnClickEvent;
 	}
 
 }
\ No newline at end of file
diff --git a/js/theme-engine.js b/js/theme-engine.js
index df94096..96244e6 100644
--- a/js/theme-engine.js
+++ b/js/theme-engine.js
@@ -16,56 +16,90 @@ class ThemeEngine {
 		this._init();
 	}
 
-	_saveDefaultCSS = () => {
+	// Get CSS variable value
+	_getCSSProperty = variable => {
+		let cssValue = window.getComputedStyle(document.documentElement).getPropertyValue(String(variable));
 
-		const origBaseBG = this._localStorage.getItem('origBaseBG');
-		const origBaseColor = this._localStorage.getItem('origBaseColor');
-		const origBlurStrength = this._localStorage.getItem('origBlurStrength');
-		const origAnimSpeed = this._localStorage.getItem('origAnimSpeed');
-		
-		if ((origBaseBG === null) || (origBaseColor === null) || (origBlurStrength === null) || (origAnimSpeed === null)) {
+		// Remove whitespaces
+		// I don't know why getProperty value adds a whitespace(i'm really noob at js)
+		cssValue = cssValue.replace(/ /g,'');
 
-			this._localStorage.setItem(
-				'origBaseBG',
-				window.getComputedStyle(document.documentElement).getPropertyValue('--base-bg')
-			);
-			this._localStorage.setItem(
-				'origBaseColor',
-				window.getComputedStyle(document.documentElement).getPropertyValue('--base-color')
-			);
-			this._localStorage.setItem(
-				'origBlurStrength',
-				window.getComputedStyle(document.documentElement).getPropertyValue('--blur-strength')
-			);
-			this._localStorage.setItem(
-				'origAnimSpeed',
-				window.getComputedStyle(document.documentElement).getPropertyValue('--transition-speed')
-			);
-		}
+		return cssValue;
 	}
 
+	// Get localStorage item value
+	_getStorageItem = item => {
+		return this._localStorage.getItem(String(item));
+	}
+
+	// Set localStorage item value
+	_setStorageItem = (item, value) => {
+		this._localStorage.setItem(
+			String(item),
+			this._getCSSProperty(String(value))
+		);
+	}
+
+	// Set/Save original CSS Value, useful when reseting theme engine
+	_saveOriginalDefaultCSS = () => {
+
+		// Check original default CSS values
+		const defaultValues = {
+			'origBaseBG': {
+				value: this._getStorageItem('origBaseBG'),
+				cssVariable: '--base-bg'
+			},
+			'origBaseColor': {
+				value: this._getStorageItem('origBaseColor'),
+				cssVariable: '--base-color'
+			},
+			'origBlurStrength': {
+				value: this._getStorageItem('origBlurStrength'),
+				cssVariable: '--blur-strength'
+			},
+			'origAnimSpeed': {
+				value: this._getStorageItem('origAnimSpeed'),
+				cssVariable: '--transition-speed'
+			}
+		};
+
+		// If original css variable has has no value, set it
+		Object.keys(defaultValues)
+		.forEach(item => {
+			const itemName = item;
+			const itemValue = defaultValues[String(item)].value;
+
+			// If value is null, set
+			if (!itemValue) {
+				this._setStorageItem(itemName, defaultValues[String(item)].cssVariable);
+			}
+		});
+	}
+
+	// Validate color
 	_checkColorValidity = colorStr => {
 
 		// Check if RGBA - (#RRGGBBAA)
-		const colorRGBA = /^#[0-9A-F]{8}$/i.test(colorStr);
+		const colorRGBA = /^#[0-9a-fA-F]{8}$/i.test(colorStr);
 
 		// If not RGBA
 		if (!colorRGBA) {
 
 			// If RGB - (#RRGGBB)
-			if (/^#[0-9A-F]{3}$/i.test(colorStr)) {
+			if (/^#[0-9a-fA-F]{3}$/i.test(colorStr)) {
 				
 				// Add completely opaque alpha
 				return colorStr + 'FF';
 			
 			// If three-charactered HEX color - (#RGB)
-			} else if (/^#[0-9A-F]{3}$/i.test(colorStr)) {
+			// I feel that this is never used lol
+			} else if (/^#[0-9a-fA-F]{3}$/i.test(colorStr)) {
 
 				// Convert it to RRGGBB
 				return colorStr.replace(/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/, '#$1$1$2$2$3$3');
 
 			// If three-charactered HEX Color(#RGB) with AA - (#RGBAA)
-			} else if (colorStr.length === 6) {
+			} else if (/^#[0-9a-fA-F]{3}[0-9a-fA-F]{2}$/i.test(colorStr)) {
 
 				const bg = colorStr.slice(0, -2);
 				const op = colorStr.slice(-2);
@@ -73,8 +107,7 @@ class ThemeEngine {
 				return bg.replace(/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/, '#$1$1$2$2$3$3') + op;
 
 			} else {
-				alert('Invalid color');
-				return false;
+				return null;
 			}
 		}
 
@@ -82,6 +115,42 @@ class ThemeEngine {
 		return colorStr;
 	}
 
+	// Validate color
+	_checkBlurValidity = blurStr => {
+
+		let blurStrength = parseInt(blurStr, 10);
+
+		if (String(blurStrength) === 'NaN') {
+			return null;
+		} else {
+			return String(blurStrength) + 'px';
+		}
+	}
+
+	_checkAnimSpeedValidity = speedStr => {
+
+		let animSpeed = parseInt(speedStr, 10);
+		let timeSuffix;
+
+		if (speedStr.endsWith('ms')) {
+			timeSuffix = 'ms';
+		} else if (speedStr.endsWith('s')) {
+			timeSuffix = 's';
+		}
+
+		if(String(animSpeed) === 'NaN') {
+			return null;
+		} else {
+			if (timeSuffix) {
+				return String(animSpeed) + timeSuffix;
+			} else {
+				return String(animSpeed) + 'ms';
+			}
+		}
+
+	}
+
+	// Update textboxes value
 	_updateTextBoxValues = (bgColor, bgOpacity, fgColor, fgOpacity, blurPower, animSpeed) => {
 
 		// Set placeholders
@@ -101,57 +170,64 @@ class ThemeEngine {
 
 		this._animSpeedTextBox.value = '';
 		this._animSpeedTextBox.placeholder = animSpeed;
-
 	}
 
-	_processTheme = () => {
+	// Get/Update current css value
+	_getCurrentCSSValues = () => {
 
-		// Retrieve custom colors
-		let baseBG = this._localStorage.getItem('baseBG');
-		let baseColor = this._localStorage.getItem('baseColor');
-		let blurStrength = this._localStorage.getItem('blurStrength');
-		let animSpeed = this._localStorage.getItem('animSpeed');
+		// Retrieve current css values
+		let currentValues = {
+			'baseBG': {
+				value: this._getStorageItem('baseBG'),
+				origVariable: 'origBaseBG'
+			},
+			'baseColor': {
+				value: this._getStorageItem('baseColor'),
+				origVariable: 'origBaseColor'
+			},
+			'blurStrength': {
+				value: this._getStorageItem('blurStrength'),
+				origVariable: 'origBlurStrength'
+			},
+			'animSpeed': {
+				value: this._getStorageItem('animSpeed'),
+				origVariable: 'origAnimSpeed'
+			}
+		};
 
-		// If custom color doesn't exist, use the value in CSS
-		if (baseBG === null) {
-			baseBG = this._localStorage.getItem('origBaseBG');
-		}
+		// If current css variable has has no value, set it
+		Object.keys(currentValues)
+		.forEach(key => {
+			const cssVar = key;
+			const cssValue = currentValues[String(cssVar)].value;
 
-		if (baseColor === null) {
-			baseColor = this._localStorage.getItem('origBaseColor');
-		}
+			// If value is null, set
+			if (!cssValue) {
+				currentValues[String(cssVar)].value = this._getStorageItem(currentValues[String(cssVar)].origVariable);
+			}
+		});
 
-		if (blurStrength === null) {
-			blurStrength = this._localStorage.getItem('origBlurStrength');
-		}
+		return currentValues;
+	}
 
-		if (animSpeed === null) {
-			animSpeed = this._localStorage.getItem('origAnimSpeed');
-		}
+	// Process css variables to update input fields
+	_processCurrentCSSValues = () => {
 
-		// Remove whitespace
-		baseBG = baseBG.replace(/ /g,'');
-		baseColor = baseColor.replace(/ /g,'');
-		blurStrength = blurStrength.replace(/ /g,'');
-		animSpeed = animSpeed.replace(/ /g,'');
+		// Get current css values
+		const themeObj = this._getCurrentCSSValues();
 
-		// Check validity
-		baseBG = this._checkColorValidity(baseBG);
-		baseColor = this._checkColorValidity(baseColor);
-
-		// Slice to separate RGB and A of background color
-		// Slice alpha out
+		const baseBG = themeObj['baseBG'].value;
 		const backgroundColor = baseBG.slice(0, -2);
-		// Get alpha
 		const backgroundOpacity = baseBG.slice(-2);
 
-
-		// Slice to separate RGB and A of foreground color		
-		// Slice alpha out
+		const baseColor = themeObj['baseColor'].value;
 		const foregroundColor = baseColor.slice(0, -2);
-		// Get alpha
 		const foregroundOpacity = baseColor.slice(-2);
 
+		const blurStrength = themeObj['blurStrength'].value;
+		const animSpeed = themeObj['animSpeed'].value;
+
+		// Pass value to update textboxes
 		this._updateTextBoxValues(
 			backgroundColor,
 			backgroundOpacity,
@@ -161,29 +237,111 @@ class ThemeEngine {
 			animSpeed
 		);
 	}
+	
+	// Get input fields values
+	_getInputFieldsValue = () => {
 
-	_updateCSSconstiables = () => {
-
-		// Get value from input fields
-		const background = (this._backgroundTextBox.value || this._backgroundTextBox.placeholder) +
+		// Get value from the input fields
+		const backgroundColor = (this._backgroundTextBox.value || this._backgroundTextBox.placeholder) +
 			(this._backgroundOpacityTextBox.value || this._backgroundOpacityTextBox.placeholder);
 
-		const foreground = (this._foregroundTextBox.value || this._foregroundTextBox.placeholder) +
+		const foregroundColor = (this._foregroundTextBox.value || this._foregroundTextBox.placeholder) +
 			(this._foregroundOpacityTextBox.value || this._foregroundOpacityTextBox.placeholder);
-		
-		const blurPower = (this._blurTextBox.value || this._blurTextBox.placeholder);
 
-		const animSpeed = (this._animSpeedTextBox.value || this._animSpeedTextBox.placeholder);
+		const blurStrength = (this._blurTextBox.value || this._blurTextBox.placeholder);
+		const transitionSpeed = (this._animSpeedTextBox.value || this._animSpeedTextBox.placeholder);
 
-		// Check color validity
-		const bgColor = this._checkColorValidity(background);
-		const fgColor = this._checkColorValidity(foreground);
+		const inputFieldValues = {
+			'background': backgroundColor,
+			'foreground': foregroundColor,
+			'blurPower': blurStrength,
+			'animSpeed': transitionSpeed 
+		};
 
+		return inputFieldValues;
+	}
+
+	_updateCSSColors = (bgColor, fgColor, blurPower, animSpeed) => {
 		// Change CSS colors
 		document.documentElement.style.setProperty('--base-bg', bgColor);
 		document.documentElement.style.setProperty('--base-color', fgColor);
 		document.documentElement.style.setProperty('--blur-strength', blurPower);
 		document.documentElement.style.setProperty('--transition-speed', animSpeed);
+	}
+
+	// Update css variables and set theme
+	_updateCSSVariables = () => {
+
+		const inputValueObj = this._getInputFieldsValue();
+
+		const bgColorRaw = inputValueObj['background'];
+		const fgColorRaw = inputValueObj['foreground'];
+		const blurPowerRaw = inputValueObj['blurPower'];
+		const animSpeedRaw = inputValueObj['animSpeed'];
+
+		// Colors data obj
+		let validatedColorValues = {
+			'bgColor': {
+				value: this._checkColorValidity(String(bgColorRaw)),
+				fallbackVar: 'baseBG',
+				fallbackOrigVar: 'origBaseBG'
+			},
+			'fgColor': {
+				value: this._checkColorValidity(String(fgColorRaw)),
+				fallbackVar: 'baseColor',
+				fallbackOrigVar: 'origBaseColor'
+			}
+		};
+
+		// Check color validity
+		Object.keys(validatedColorValues)
+		.forEach(key => {
+
+			let colorVar = key;
+			let colorValue = validatedColorValues[String(key)].value;
+
+			if (!colorValue) {
+				validatedColorValues[String(key)].value = 
+				this._getStorageItem(validatedColorValues[String(key)].fallbackVar) ||
+				this._getStorageItem(validatedColorValues[String(key)].fallbackOrigVar);
+
+				// console.log('Invalid Color! Will use previous one...')
+			}
+		});
+
+		// Set valid color to variables
+		const bgColor = validatedColorValues['bgColor'].value;
+		const fgColor = validatedColorValues['fgColor'].value;
+
+		// Blur data obj
+		let validatedBlurValue = {
+			'blurStrength': {
+				value: this._checkBlurValidity(blurPowerRaw),
+				fallbackVar: 'blurStrength',
+				fallbackOrigVar: 'origBlurStrength'
+			}
+		};
+
+		// Validate and set blur strength
+		const blurPower = this._checkBlurValidity(blurPowerRaw) ||
+			this._getStorageItem(validatedBlurValue['blurStrength'].fallbackVar) ||
+			this._getStorageItem(validatedBlurValue['blurStrength'].fallbackOrigVar);
+
+		// Anim speed data obj
+		let validatedSpeedValue = {
+			'transitionSpeed' : {
+				value: this._checkBlurValidity(animSpeedRaw),
+				fallbackVar: 'animSpeed',
+				fallbackOrigVar: 'origAnimSpeed'
+			}
+		};
+
+		// Valudate and set anim speed
+		const animSpeed = this._checkAnimSpeedValidity(animSpeedRaw) ||
+			this._getStorageItem(validatedSpeedValue['transitionSpeed'].fallbackVar) ||
+			this._getStorageItem(validatedSpeedValue['transitionSpeed'].fallbackOrigVar);
+
+		// console.log('bg: '+bgColor+'\nfg: '+fgColor+'\nblur: '+blurPower+'\nspeed: '+animSpeed);
 
 		// Save custom color
 		this._localStorage.setItem('baseBG', bgColor);
@@ -191,12 +349,24 @@ class ThemeEngine {
 		this._localStorage.setItem('blurStrength', blurPower);
 		this._localStorage.setItem('animSpeed', animSpeed);
 
-		this._processTheme();
+		// Update css colors
+		this._updateCSSColors(bgColor, fgColor, blurPower, animSpeed);
+		this._processCurrentCSSValues();
+	}
+
+	_reApplyTheme = () => {
+		this._updateCSSColors(
+			this._getStorageItem('baseBG') || this._getStorageItem('origBaseBG'),
+			this._getStorageItem('baseColor') || this._getStorageItem('origBaseColor'),
+			this._getStorageItem('blurStrength') || this._getStorageItem('origBlurStrength'),
+			this._getStorageItem('animSpeed') || this._getStorageItem('origAnimSpeed')
+		);
+
+		this._processCurrentCSSValues();
 	}
 
 	_applyOnClickEvent = e => {
-		this._updateCSSconstiables();
-		alert('Success!');
+		this._updateCSSVariables();
 	}
 
 	_registerApplyOnClickEvent = () => {
@@ -209,11 +379,8 @@ class ThemeEngine {
 		this._localStorage.removeItem('blurStrength');
 		this._localStorage.removeItem('animSpeed');
 
-		this._saveDefaultCSS();
-		this._processTheme();
-		this._updateCSSconstiables();
-		
-		alert('Success!');
+		this._saveOriginalDefaultCSS();
+		this._reApplyTheme();
 	}
 
 	_registerResetOnClickEvent = () => {
@@ -222,13 +389,13 @@ class ThemeEngine {
 
 	_init = () => {
 
-		this._saveDefaultCSS();
+		// Save original css variables value
+		this._saveOriginalDefaultCSS();
 
-		// Update
-		this._processTheme();
-		// Update settings
-		this._updateCSSconstiables();
+		// Process theme
+		this._reApplyTheme();
 
+		// Register events
 		this._registerApplyOnClickEvent();
 		this._registerResetOnClickEvent();
 	}
diff --git a/js/weather-settings.js b/js/weather-settings.js
index 0560099..15025c3 100644
--- a/js/weather-settings.js
+++ b/js/weather-settings.js
@@ -104,9 +104,8 @@ class WeatherSettings {
 	// You denied the permission request
 	_deniedGeolocation = () => {
 
-		alert(`Location access denied! If you're on mobile, make sure to`+
+		confirm(`Location access denied! If you're on mobile, make sure to`+
 			` enable your GPS and allow the location permission on your browser's settings.`);
-
 	}
 
 	// Watch
@@ -130,13 +129,10 @@ class WeatherSettings {
 
 	// Error
 	_watchGeoError = err => {
-
 		// console.warn('ERROR(' + err.code + '): ' + err.message);
-		
 		if (err.code === err.PERMISSION_DENIED) {
 
 			this._deniedGeolocation();
-
 		}
 	}
 
@@ -153,13 +149,10 @@ class WeatherSettings {
 			if ((result.state === 'prompt') || (result.state === 'granted')) {
 
 				this._watchGeoPosition();
-
 			} else if (result.state === 'denied') {
 
 				alert('Manually enable the geolocation in your browser settings. How? Who knows?');
-
 			}
-
 		});
 	}
 
@@ -170,25 +163,17 @@ class WeatherSettings {
 
 		if (this._locatorMode === 'geolocation') {
 
-			// console.log('geolocation');
-
 			this._weatherSettingsCityIDGroup.classList.add('hideWeatherSettings');
-
 		} else if (this._locatorMode === 'city') {
 
-			// console.log('city');
-
 			this._weatherSettingsCityIDGroup.classList.remove('hideWeatherSettings');
-
 		}
-
 	}
 
 	// Register on change event
 	_registerWeatherSelectLocatorOnChangeEvent = () => {
 
 		this._weatherSelectLocator.onchange = this._weatherSelectLocatorOnChangeEvent;
-
 	}
 
 	// Update weather settings
@@ -200,15 +185,12 @@ class WeatherSettings {
 		if (this._locatorMode === 'geolocation') {
 
 			this._weatherSettingsCityIDGroup.classList.add('hideWeatherSettings');
-
 			if (navigator.geolocation) {
 
 				this._checkGeoPermission();
-
 			} else {
 
 				alert(`Oof! It seems your browser doesn't support geolocation.`);
-			
 			}
 
 		} else if (this._locatorMode === 'city') {
@@ -221,7 +203,6 @@ class WeatherSettings {
 			// Update weather forecast elements
 			this._getWeatherDataViaCity(this._appID, this._cityID, this._units);
 			this._getForecastDataViaCity(this._appID, this._cityID, this._units);
-
 		}
 
 		this._deleteWeatherSettingsValue();
@@ -230,6 +211,7 @@ class WeatherSettings {
 
 	// Reset
 	_weatherResetOnClickEvent = e => {
+
 		// Reset keys
 		this._clearWeatherCredentials();
 
@@ -247,22 +229,26 @@ class WeatherSettings {
 		} else if (this._locatorMode === 'city') {
 			this._weatherSettingsCityIDGroup.classList.remove('hideWeatherSettings');
 		}
-		alert('Credentials deleted!');
 	}
 
 	// Apply Onclick event
 	_weatherApplyOnClickEvent = e => {
 
+		// Set input field value to variables
+		const apiKey = this._apiKeySet.value || this._apiKeySet.placeholder;
+		const cityID = this._cityIDSet.value || this._cityIDSet.placeholder;
+		const units = this._weatherSelectUnits.options[this._weatherSelectUnits.selectedIndex].value;
+		const locator = this._weatherSelectLocator.options[this._weatherSelectLocator.selectedIndex].value;
+
 		// Update credentials/Settings
 		this._applyWeatherSettings(
-			this._apiKeySet.value || this._apiKeySet.placeholder,
-			this._cityIDSet.value || this._cityIDSet.placeholder,
-			this._weatherSelectUnits.options[this._weatherSelectUnits.selectedIndex].value,
-			this._weatherSelectLocator.options[this._weatherSelectLocator.selectedIndex].value
+			apiKey,
+			cityID,
+			units,
+			locator
 		);
 
 		this._updateWeatherSettings();
-		alert('Successfully updated!');
 	}
 
 	_registerWeatherResetOnClickEvent = () => {