From 7c8ece1d5ed1c9ffba9595c19b1eba4391d670e4 Mon Sep 17 00:00:00 2001 From: Gerome Matilla Date: Wed, 10 Jun 2020 15:35:27 +0800 Subject: [PATCH] Use insertAdjacentHTML instead of createElement (#21) * web menu * weather-screen forecast * search engine selection, change some to beforeend --- js/search-engine-settings.js | 11 ++++-- js/weather-screen.js | 74 +++++++++--------------------------- js/web-menu.js | 63 +++++++++--------------------- 3 files changed, 45 insertions(+), 103 deletions(-) diff --git a/js/search-engine-settings.js b/js/search-engine-settings.js index 698b848..b58bb4f 100644 --- a/js/search-engine-settings.js +++ b/js/search-engine-settings.js @@ -44,9 +44,14 @@ class SearchEngineSettings { const seValue = key; const seData = this._searchEngines[key]; const seOption = document.createElement('option'); - seOption.value = seValue; - seOption.innerText = seData.name; - this._selectSearchEngine.appendChild(seOption); + + // Generate search engine suggestions + this._selectSearchEngine.insertAdjacentHTML( + 'beforeend', + ` + + ` + ) }) // Call to update query string and placeholder diff --git a/js/weather-screen.js b/js/weather-screen.js index 9f5c3f3..1eb0e90 100644 --- a/js/weather-screen.js +++ b/js/weather-screen.js @@ -80,62 +80,24 @@ class WeatherScreen { _createForecastBody = (fIcon, forecastTemp, foreDescription, fHour, fDate) => { - // Main Div - const forecastDay = document.createElement('div'); - forecastDay.className = 'weatherForecastDay'; - - // Icon Container Div - const forecastIconContainer = document.createElement('div'); - forecastIconContainer.className = 'weatherForecastDayIconContainer'; - - // Icon Div - const forecastIcon = document.createElement('div'); - forecastIcon.className = 'weatherForecastDayIcon'; - forecastIcon.style.background = `url('assets/weather-icons/${fIcon}')`; - forecastIcon.style.backgroundSize = 'cover'; - - // Details Div - const forecastDetails = document.createElement('div'); - forecastDetails.className = 'weatherForecastDayDetails'; - - const forecastTemperature = document.createElement('div'); - forecastTemperature.className = 'weatherForecastDayDetailsTemperature'; - forecastTemperature.innerHTML = forecastTemp; - - const forecastDescription = document.createElement('div'); - forecastDescription.className = 'weatherForecastDayDetailsDescription'; - forecastDescription.innerHTML = foreDescription; - - // Append details to div container - forecastDetails.appendChild(forecastTemperature); - forecastDetails.appendChild(forecastDescription); - - // Date Div - const forecastDayDate = document.createElement('div'); - forecastDayDate.className = 'weatherForecastDayDate'; - - const forecastHour = document.createElement('div'); - forecastHour.className = 'weatherForecastDayDateHour'; - forecastHour.innerHTML = fHour; - - const forecastDate = document.createElement('div'); - forecastDate.className = 'weatherForecastDayDateDate'; - forecastDate.innerHTML = fDate; - - // Append icon image to div container - forecastIconContainer.appendChild(forecastIcon); - - // Append details to div container - forecastDayDate.appendChild(forecastHour); - forecastDayDate.appendChild(forecastDate); - - // Append to main div - forecastDay.appendChild(forecastIconContainer); - forecastDay.appendChild(forecastDetails); - forecastDay.appendChild(forecastDayDate); - - // Append to the main container - this._forecastContainer.appendChild(forecastDay); + // Generate forecast + this._forecastContainer.insertAdjacentHTML( + 'beforeend', + ` +
+
+
+
+
+
${forecastTemp}
+
${foreDescription}
+
+
${fHour}
+
${fDate}
+
+
+ ` + ) } diff --git a/js/web-menu.js b/js/web-menu.js index 06bef01..868156b 100644 --- a/js/web-menu.js +++ b/js/web-menu.js @@ -72,53 +72,28 @@ class WebMenu { const li = document.createElement('li'); + // Generate web item/li child + li.insertAdjacentHTML( + 'afterbegin', + ` + +
+
+
+
+
+
+
${site}
+
+
+
+ + ` + ) + // Create callback property this._createWebItemCallback(li, url); - // Create a href - const aWebLink = document.createElement('a'); - aWebLink.className = 'webMenuLink'; - aWebLink.href = url; - aWebLink.tabIndex = '-1'; - - // Create an outer div, child of li - let webItemDiv = document.createElement('div') - webItemDiv.className = 'webItem'; - webItemDiv.id = 'id' + site; - - // Create a second div, webItemContainer - const webItemContainer = document.createElement('div'); - webItemContainer.className = 'webItemContainer'; - - // Create the innermost div, contains icon and label - const webItemBody = document.createElement('div'); - webItemBody.className = 'webItemBody'; - - // Create div for webItemIcon - const webItemIconContainer = document.createElement('div'); - webItemIconContainer.className = 'webItemIconContainer'; - - const webItemIcon = document.createElement('div'); - webItemIcon.className = 'webItemIcon'; - webItemIcon.style.background = `url('assets/webcons/${icon}.svg')`; - webItemIcon.style.backgroundSize = 'cover'; - - // Create webItemName - const webItemName = document.createElement('div'); - webItemName.className = 'webItemName'; - webItemName.innerHTML = site; - - // Append divs with heirarchy - webItemDiv.appendChild(webItemContainer); - webItemContainer.appendChild(webItemBody); - - webItemIconContainer.appendChild(webItemIcon); - webItemBody.appendChild(webItemIconContainer); - webItemBody.appendChild(webItemName); - - aWebLink.appendChild(webItemDiv); - - li.appendChild(aWebLink); this._webMenuList.appendChild(li); }