Add v1.2.0 - codebase refactored (preview)

package.json

@@ -2,11 +2,11 @@
   "name": "frontend-2021-framework",
   "version": "1.0.0",
   "description": "",
-  "main": "index.html",
+  "main": "src/index.html",
   "scripts": {
-    "start": "parcel ./index.html",
+    "start": "parcel src/index.html",
     "prebuild": "shx rm -rf dist/*",
-    "build": "parcel build ./index.html --public-url ./",
+    "build": "parcel build src/index.html --public-url ./",
     "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup --verbose"
   },
   "repository": {
@@ -27,7 +27,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "husky": "^5.0.9",
     "lint-staged": "^10.5.4",
-    "parcel-bundler": "^1.12.4",
+    "parcel-bundler": "1.12.4",
     "prettier": "^2.2.1",
     "push-dir": "^0.4.1",
     "shx": "^0.3.3"

src/components/App.js

@@ -0,0 +1,16 @@
+import { SearchByCity, UnitSwitch, WeatherToday } from "./appComponents";
+
+const setCurrentUnits = function(value) {
+  window.dataStore.currentUnits = value;
+  window.renderApp();
+}
+
+function App() {
+  return `<div>
+ ${SearchByCity()}
+ ${UnitSwitch(window.dataStore.currentUnits, setCurrentUnits)}
+ ${WeatherToday()}
+</div>`;
+}
+
+export default App;

src/components/appComponents.js

@@ -0,0 +1,53 @@
+import { CELSIUS_UNITS, displayInUnits, FAHRENHEIT_UNITS } from "../utils";
+import { currentWeather } from "./fixtures";
+
+function UnitSwitch(currentUnits, setCurrentUnitsCB) {
+  return `
+    <p>Select units</p>
+  ${[
+    { id: 'celsius-units', value: CELSIUS_UNITS, name: 'C' },
+    { id: 'fahrenheit-units', value: FAHRENHEIT_UNITS, name: 'F' },
+  ].map(
+    ({ id, value, name }) =>
+      `<div>
+          <input 
+              type="radio" 
+              id="${id}"
+              name="temperature-units" 
+              value="${value}" 
+              ${currentUnits === value ? ' checked ' : ''} 
+              onchange="(${setCurrentUnitsCB})(this.value);"
+          >
+            <label for="${id}">${name}</label>
+        </div>`
+  )
+    .join('')}
+`;
+}
+
+function SearchByCity() {
+  return `
+    <input
+        type="text"
+        value="${window.dataStore.currentCity}"
+        onchange="window.dataStore.currentCity = this.value; window.renderApp();" 
+    />
+`;
+}
+
+function WeatherToday() {
+  let currentWeatherInCity = currentWeather[window.dataStore.currentCity];
+  if (currentWeatherInCity) {
+    const {
+      weather: [{ main, description }],
+      main: { temp },
+      name,
+    } = currentWeatherInCity;
+    const tempInUnits = displayInUnits(temp, window.dataStore.currentUnits);
+    return `${name} - ${main} (${description}). Temp is ${tempInUnits}`;
+  }
+
+  return `Enter one of the city names: ${Object.keys(currentWeather).join(', ')}.`;
+}
+
+export { UnitSwitch, SearchByCity, WeatherToday };

src/components/fixtures.js

@@ -0,0 +1,80 @@
+export const currentWeather = {
+  London: {
+    coord: {
+      lon: -0.13,
+      lat: 51.51,
+    },
+    weather: [
+      {
+        id: 300,
+        main: 'Drizzle',
+        description: 'light intensity drizzle',
+        icon: '09d',
+      },
+    ],
+    base: 'stations',
+    main: {
+      temp: 280.32,
+      pressure: 1012,
+      humidity: 81,
+      temp_min: 279.15,
+      temp_max: 281.15,
+    },
+    visibility: 10000,
+    wind: {
+      speed: 4.1,
+      deg: 80,
+    },
+    clouds: {
+      all: 90,
+    },
+    dt: 1485789600,
+    sys: {
+      type: 1,
+      id: 5091,
+      message: 0.0103,
+      country: 'GB',
+      sunrise: 1485762037,
+      sunset: 1485794875,
+    },
+    id: 2643743,
+    name: 'London',
+    cod: 200,
+  },
+  Yafran: {
+    id: 2208791,
+    name: 'Yafran',
+    coord: {
+      lon: 12.52859,
+      lat: 32.06329,
+    },
+    main: {
+      temp: 259.68,
+      temp_min: 9.681,
+      temp_max: 9.681,
+      pressure: 961.02,
+      sea_level: 1036.82,
+      grnd_level: 961.02,
+      humidity: 85,
+    },
+    dt: 1485784982,
+    wind: {
+      speed: 3.96,
+      deg: 356.5,
+    },
+    rain: {
+      '3h': 0.255,
+    },
+    clouds: {
+      all: 88,
+    },
+    weather: [
+      {
+        id: 500,
+        main: 'Rain',
+        description: 'light rain',
+        icon: '10d',
+      },
+    ],
+  },
+};

src/dataStore.js

@@ -0,0 +1,8 @@
+import {CELSIUS_UNITS} from "./utils";
+
+const dataStore = {
+  currentCity: '',
+  currentUnits: CELSIUS_UNITS,
+};
+
+export default dataStore;

src/framework/render.js

@@ -0,0 +1,9 @@
+import App from "../components/App";
+
+function renderApp() {
+  document.getElementById('app-root').innerHTML = `
+        ${App()}
+    `;
+}
+
+export default renderApp;

index.html → src/index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
+        <div id="app-root"></div>
         <script src="./index.js"></script>
     </body>
 </html>

src/index.js

@@ -0,0 +1,11 @@
+import renderApp from "./framework/render";
+import dataStore from "./dataStore";
+
+if (module.hot) {
+  module.hot.accept();
+}
+
+window.renderApp = renderApp;
+window.dataStore = window.dataStore || dataStore;
+
+renderApp();

src/utils.js

@@ -0,0 +1,15 @@
+export const KELVIN_UNITS = 'K';
+export const CELSIUS_UNITS = 'C';
+export const FAHRENHEIT_UNITS = 'F';
+
+export function displayInUnits(value, units) {
+  switch (units) {
+    case CELSIUS_UNITS:
+      return `${Math.round(value - 273.15)}˚C`;
+    case FAHRENHEIT_UNITS:
+      return `${Math.round((value - 273.15) * (9 / 5) + 32)}˚F`;
+    // case KELVIN_UNITS:
+    default:
+      return `${value}˚K`;
+  }
+}