eldar-gamisoniya/alphabet.js Secret

## alphabet.js
"use strict";

const fruits = {
  a: "apple",
  b: "banana",
  c: "coconut",
  e: "elephant",
  g: "grapes",
  l: "lemon",
  m: "mango",
  o: "orange",
  p: "pineapple",
  s: "strawberry",
  t: "tomato"
};

export const fetchImage = letter => {
  console.log("letter", letter);
  const myHeaders = new Headers({
    "Content-Type": "image/jpeg"
  });
  const myInit = {
    method: "GET",
    headers: myHeaders,
    mode: "same-origin"
  };

  const fruit = fruits[letter] || "tamarindo";
  console.log("fruit", fruit);

  const myRequest = new Request(`./fruits/${fruit}.png`, myInit);

  fetch(myRequest)
    .then(function(response) {
      return response.blob();
    })
    .then(function(myBlob) {
      console.log("inside then");
      var objectURL = URL.createObjectURL(myBlob);
      const img = new Image(200);
      img.src = objectURL;
      let element = document.getElementById("figure");
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
      element.appendChild(img);
    });
};

## index.html
<body>
  <div class="content">
    <section class="alphabet"></section>
    <figure id="figure"></figure>
  </div>
  <script src="./build/bundle.js"></script>
</body>

## index.js
import { fetchImage } from "./alphabet.js";

let i = 0;
const colorBox = {
    red: "#f00000",
    green: "#38c138",
    blue: "#0a6de8",
    orange: "#e69110",
    chocolate: "#1b1818",
    purple: "#632363",
    yellow: "#f1e904",
    bottle: "#102923",
    black: "#000000",
    white: "#d4d4d4"
};

const len = Object.keys(colorBox).length;

document.addEventListener(
    "keydown",
    e => {
        const key = e.key;
        i++;
        i = i % len == 0 ? 1 : i;
        let qs = document.querySelector(".alphabet");
        document.body.style.backgroundColor = Object.values(colorBox)[i];
        let str = key.toUpperCase();
        qs.innerHTML = str;
        fetchImage(key);
    },
    false
);

## package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack",
    "start": "http-server"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.52",
    "babel-loader": "^8.0.0-beta",
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

## webpack.config.js
module.exports = {
  entry: "./js/index.js",
  mode: "development",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  },
  devtool: "source-map",
  resolve: {
    extensions: [".html", ".js", ".json", ".css", ".less"]
  }
};
	"use strict";

	const fruits = {
	a: "apple",
	b: "banana",
	c: "coconut",
	e: "elephant",
	g: "grapes",
	l: "lemon",
	m: "mango",
	o: "orange",
	p: "pineapple",
	s: "strawberry",
	t: "tomato"
	};

	export const fetchImage = letter => {
	console.log("letter", letter);
	const myHeaders = new Headers({
	"Content-Type": "image/jpeg"
	});
	const myInit = {
	method: "GET",
	headers: myHeaders,
	mode: "same-origin"
	};

	const fruit = fruits[letter] \|\| "tamarindo";
	console.log("fruit", fruit);

	const myRequest = new Request(`./fruits/${fruit}.png`, myInit);

	fetch(myRequest)
	.then(function(response) {
	return response.blob();
	})
	.then(function(myBlob) {
	console.log("inside then");
	var objectURL = URL.createObjectURL(myBlob);
	const img = new Image(200);
	img.src = objectURL;
	let element = document.getElementById("figure");
	while (element.firstChild) {
	element.removeChild(element.firstChild);
	}
	element.appendChild(img);
	});
	};
	<body>
	<div class="content">
	<section class="alphabet"></section>
	<figure id="figure"></figure>
	</div>
	<script src="./build/bundle.js"></script>
	</body>
	import { fetchImage } from "./alphabet.js";

	let i = 0;
	const colorBox = {
	red: "#f00000",
	green: "#38c138",
	blue: "#0a6de8",
	orange: "#e69110",
	chocolate: "#1b1818",
	purple: "#632363",
	yellow: "#f1e904",
	bottle: "#102923",
	black: "#000000",
	white: "#d4d4d4"
	};

	const len = Object.keys(colorBox).length;

	document.addEventListener(
	"keydown",
	e => {
	const key = e.key;
	i++;
	i = i % len == 0 ? 1 : i;
	let qs = document.querySelector(".alphabet");
	document.body.style.backgroundColor = Object.values(colorBox)[i];
	let str = key.toUpperCase();
	qs.innerHTML = str;
	fetchImage(key);
	},
	false
	);
	{
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"webpack": "webpack",
	"start": "http-server"
	},
	"devDependencies": {
	"@babel/core": "^7.0.0-beta.51",
	"@babel/preset-env": "^7.0.0-beta.52",
	"babel-loader": "^8.0.0-beta",
	"webpack": "^4.12.1",
	"webpack-cli": "^3.0.8",
	"webpack-dev-server": "^3.1.4"
	}
	}
	module.exports = {
	entry: "./js/index.js",
	mode: "development",
	output: {
	path: __dirname + "/build",
	filename: "bundle.js"
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	exclude: /(node_modules\|bower_components)/,
	use: {
	loader: "babel-loader",
	options: {
	presets: ["@babel/preset-env"]
	}
	}
	}
	]
	},
	devtool: "source-map",
	resolve: {
	extensions: [".html", ".js", ".json", ".css", ".less"]
	}
	};