diff --git a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/dist/index.html b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/dist/index.html
index 5c76178..4b3e995 100644
--- a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/dist/index.html
+++ b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/dist/index.html
@@ -1,12 +1 @@
-
-
-
-
-
- Drop Down Menu
-
-
-
- Drop Down Menu Demo
-
-
+Drop Down MenuDrop Down Menu Demo
diff --git a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/dist/main.js b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/dist/main.js
index 4a7b934..6814287 100644
--- a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/dist/main.js
+++ b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/dist/main.js
@@ -1,360 +1 @@
-(() => {
- "use strict";
- var e = {
- 365: (e, t, n) => {
- n.d(t, { A: () => c });
- var r = n(601),
- o = n.n(r),
- a = n(314),
- i = n.n(a)()(o());
- i.push([
- e.id,
- ".nav-bar {\n display: flex;\n background-color: rgb(127, 187, 255);\n padding: 1rem;\n border-radius: 3px;\n}\n\n.drop-down {\n width: max-content;\n background-color: orange;\n padding: 0.2em;\n border-radius: 2px;\n}\n\n.hide {\n display: none;\n}\n\n.drop-down-svg {\n cursor: pointer;\n}\n\na {\n text-decoration: none;\n padding: 0.1em 1em;\n background-color: aliceblue;\n border-radius: 5px;\n}\n\n.content-box {\n margin: 1em;\n}",
- "",
- ]);
- const c = i;
- },
- 314: (e) => {
- e.exports = function (e) {
- var t = [];
- return (
- (t.toString = function () {
- return this.map(function (t) {
- var n = "",
- r = void 0 !== t[5];
- return (
- t[4] && (n += "@supports (".concat(t[4], ") {")),
- t[2] && (n += "@media ".concat(t[2], " {")),
- r &&
- (n += "@layer".concat(
- t[5].length > 0 ? " ".concat(t[5]) : "",
- " {"
- )),
- (n += e(t)),
- r && (n += "}"),
- t[2] && (n += "}"),
- t[4] && (n += "}"),
- n
- );
- }).join("");
- }),
- (t.i = function (e, n, r, o, a) {
- "string" == typeof e && (e = [[null, e, void 0]]);
- var i = {};
- if (r)
- for (var c = 0; c < this.length; c++) {
- var s = this[c][0];
- null != s && (i[s] = !0);
- }
- for (var d = 0; d < e.length; d++) {
- var u = [].concat(e[d]);
- (r && i[u[0]]) ||
- (void 0 !== a &&
- (void 0 === u[5] ||
- (u[1] = "@layer"
- .concat(u[5].length > 0 ? " ".concat(u[5]) : "", " {")
- .concat(u[1], "}")),
- (u[5] = a)),
- n &&
- (u[2]
- ? ((u[1] = "@media "
- .concat(u[2], " {")
- .concat(u[1], "}")),
- (u[2] = n))
- : (u[2] = n)),
- o &&
- (u[4]
- ? ((u[1] = "@supports ("
- .concat(u[4], ") {")
- .concat(u[1], "}")),
- (u[4] = o))
- : (u[4] = "".concat(o))),
- t.push(u));
- }
- }),
- t
- );
- };
- },
- 601: (e) => {
- e.exports = function (e) {
- return e[1];
- };
- },
- 72: (e) => {
- var t = [];
- function n(e) {
- for (var n = -1, r = 0; r < t.length; r++)
- if (t[r].identifier === e) {
- n = r;
- break;
- }
- return n;
- }
- function r(e, r) {
- for (var a = {}, i = [], c = 0; c < e.length; c++) {
- var s = e[c],
- d = r.base ? s[0] + r.base : s[0],
- u = a[d] || 0,
- l = "".concat(d, " ").concat(u);
- a[d] = u + 1;
- var p = n(l),
- f = {
- css: s[1],
- media: s[2],
- sourceMap: s[3],
- supports: s[4],
- layer: s[5],
- };
- if (-1 !== p) t[p].references++, t[p].updater(f);
- else {
- var m = o(f, r);
- (r.byIndex = c),
- t.splice(c, 0, { identifier: l, updater: m, references: 1 });
- }
- i.push(l);
- }
- return i;
- }
- function o(e, t) {
- var n = t.domAPI(t);
- return (
- n.update(e),
- function (t) {
- if (t) {
- if (
- t.css === e.css &&
- t.media === e.media &&
- t.sourceMap === e.sourceMap &&
- t.supports === e.supports &&
- t.layer === e.layer
- )
- return;
- n.update((e = t));
- } else n.remove();
- }
- );
- }
- e.exports = function (e, o) {
- var a = r((e = e || []), (o = o || {}));
- return function (e) {
- e = e || [];
- for (var i = 0; i < a.length; i++) {
- var c = n(a[i]);
- t[c].references--;
- }
- for (var s = r(e, o), d = 0; d < a.length; d++) {
- var u = n(a[d]);
- 0 === t[u].references && (t[u].updater(), t.splice(u, 1));
- }
- a = s;
- };
- };
- },
- 659: (e) => {
- var t = {};
- e.exports = function (e, n) {
- var r = (function (e) {
- if (void 0 === t[e]) {
- var n = document.querySelector(e);
- if (
- window.HTMLIFrameElement &&
- n instanceof window.HTMLIFrameElement
- )
- try {
- n = n.contentDocument.head;
- } catch (e) {
- n = null;
- }
- t[e] = n;
- }
- return t[e];
- })(e);
- if (!r)
- throw new Error(
- "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
- );
- r.appendChild(n);
- };
- },
- 540: (e) => {
- e.exports = function (e) {
- var t = document.createElement("style");
- return e.setAttributes(t, e.attributes), e.insert(t, e.options), t;
- };
- },
- 56: (e, t, n) => {
- e.exports = function (e) {
- var t = n.nc;
- t && e.setAttribute("nonce", t);
- };
- },
- 825: (e) => {
- e.exports = function (e) {
- if ("undefined" == typeof document)
- return { update: function () {}, remove: function () {} };
- var t = e.insertStyleElement(e);
- return {
- update: function (n) {
- !(function (e, t, n) {
- var r = "";
- n.supports && (r += "@supports (".concat(n.supports, ") {")),
- n.media && (r += "@media ".concat(n.media, " {"));
- var o = void 0 !== n.layer;
- o &&
- (r += "@layer".concat(
- n.layer.length > 0 ? " ".concat(n.layer) : "",
- " {"
- )),
- (r += n.css),
- o && (r += "}"),
- n.media && (r += "}"),
- n.supports && (r += "}");
- var a = n.sourceMap;
- a &&
- "undefined" != typeof btoa &&
- (r +=
- "\n/*# sourceMappingURL=data:application/json;base64,".concat(
- btoa(unescape(encodeURIComponent(JSON.stringify(a)))),
- " */"
- )),
- t.styleTagTransform(r, e, t.options);
- })(t, e, n);
- },
- remove: function () {
- !(function (e) {
- if (null === e.parentNode) return !1;
- e.parentNode.removeChild(e);
- })(t);
- },
- };
- };
- },
- 113: (e) => {
- e.exports = function (e, t) {
- if (t.styleSheet) t.styleSheet.cssText = e;
- else {
- for (; t.firstChild; ) t.removeChild(t.firstChild);
- t.appendChild(document.createTextNode(e));
- }
- };
- },
- },
- t = {};
- function n(r) {
- var o = t[r];
- if (void 0 !== o) return o.exports;
- var a = (t[r] = { id: r, exports: {} });
- return e[r](a, a.exports, n), a.exports;
- }
- (n.n = (e) => {
- var t = e && e.__esModule ? () => e.default : () => e;
- return n.d(t, { a: t }), t;
- }),
- (n.d = (e, t) => {
- for (var r in t)
- n.o(t, r) &&
- !n.o(e, r) &&
- Object.defineProperty(e, r, { enumerable: !0, get: t[r] });
- }),
- (n.g = (function () {
- if ("object" == typeof globalThis) return globalThis;
- try {
- return this || new Function("return this")();
- } catch (e) {
- if ("object" == typeof window) return window;
- }
- })()),
- (n.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)),
- (() => {
- var e;
- n.g.importScripts && (e = n.g.location + "");
- var t = n.g.document;
- if (!e && t && (t.currentScript && (e = t.currentScript.src), !e)) {
- var r = t.getElementsByTagName("script");
- if (r.length)
- for (var o = r.length - 1; o > -1 && (!e || !/^http(s?):/.test(e)); )
- e = r[o--].src;
- }
- if (!e)
- throw new Error(
- "Automatic publicPath is not supported in this browser"
- );
- (e = e
- .replace(/#.*$/, "")
- .replace(/\?.*$/, "")
- .replace(/\/[^\/]+$/, "/")),
- (n.p = e);
- })(),
- (n.nc = void 0),
- (() => {
- const e = n.p + "392ff9915c1a17927ab4.svg";
- var t = n(72),
- r = n.n(t),
- o = n(825),
- a = n.n(o),
- i = n(659),
- c = n.n(i),
- s = n(56),
- d = n.n(s),
- u = n(540),
- l = n.n(u),
- p = n(113),
- f = n.n(p),
- m = n(365),
- v = {};
- (v.styleTagTransform = f()),
- (v.setAttributes = d()),
- (v.insert = c().bind(null, "head")),
- (v.domAPI = a()),
- (v.insertStyleElement = l()),
- r()(m.A, v),
- m.A && m.A.locals && m.A.locals;
- class h {
- static i = 0;
- constructor() {}
- createDropDown() {
- const t = document.createElement("div");
- t.classList.add("nav-bar"), document.body.appendChild(t);
- const n = document.createElement("div");
- n.classList.add("drop-down" + h.i), n.classList.add("drop-down");
- const r = document.createElement("div");
- r.classList.add("menu-content" + h.i),
- r.classList.add("hide"),
- r.appendChild(this.createLinkEle("Settings")),
- r.appendChild(this.createLinkEle("About")),
- r.appendChild(this.createLinkEle("Log out"));
- const o = new Image();
- o.classList.add("drop-down-svg"),
- (o.src = e),
- n.appendChild(o),
- n.appendChild(r);
- let a = h.i;
- h.i++,
- n.addEventListener("mouseover", function (e) {
- document
- .querySelector(".menu-content" + a)
- .classList.toggle("hide");
- }),
- n.addEventListener("mouseout", function () {
- document
- .querySelector(".menu-content" + a)
- .classList.toggle("hide");
- }),
- t.appendChild(n);
- }
- createLinkEle(e) {
- const t = document.createElement("div"),
- n = document.createElement("a");
- return (
- t.classList.add("content-box"),
- (n.textContent = e),
- (n.href = "#"),
- t.appendChild(n),
- t
- );
- }
- }
- new h().createDropDown();
- })();
-})();
+(()=>{"use strict";var e={365:(e,t,n)=>{n.d(t,{A:()=>c});var r=n(601),o=n.n(r),a=n(314),i=n.n(a)()(o());i.push([e.id,".nav-bar {\n display: flex;\n background-color: rgb(127, 187, 255);\n padding: 1rem;\n border-radius: 3px;\n}\n\n.drop-down {\n width: max-content;\n background-color: orange;\n padding: 0.2em;\n border-radius: 2px;\n}\n\n.hide {\n display: none;\n}\n\n.drop-down-svg {\n cursor: pointer;\n}\n\na {\n text-decoration: none;\n padding: 0.1em 1em;\n background-color: aliceblue;\n border-radius: 5px;\n}\n\n.content-box {\n margin: 1em;\n}",""]);const c=i},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var c=0;c0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=a),n&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=n):u[2]=n),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),t.push(u))}},t}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var t=[];function n(e){for(var n=-1,r=0;r{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={id:r,exports:{}};return e[r](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var o=r.length-1;o>-1&&(!e||!/^http(s?):/.test(e));)e=r[o--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),n.nc=void 0,(()=>{const e=n.p+"392ff9915c1a17927ab4.svg";var t=n(72),r=n.n(t),o=n(825),a=n.n(o),i=n(659),c=n.n(i),s=n(56),d=n.n(s),u=n(540),p=n.n(u),l=n(113),f=n.n(l),v=n(365),m={};m.styleTagTransform=f(),m.setAttributes=d(),m.insert=c().bind(null,"head"),m.domAPI=a(),m.insertStyleElement=p(),r()(v.A,m),v.A&&v.A.locals&&v.A.locals;class h{static i=0;constructor(){}createDropDown(){const t=document.createElement("div");t.classList.add("nav-bar"),document.body.appendChild(t);const n=document.createElement("div");n.classList.add("drop-down"+h.i),n.classList.add("drop-down");const r=document.createElement("div");r.classList.add("menu-content"+h.i),r.classList.add("hide"),r.appendChild(this.createLinkEle("Settings")),r.appendChild(this.createLinkEle("About")),r.appendChild(this.createLinkEle("Log out"));const o=new Image;o.classList.add("drop-down-svg"),o.src=e,n.appendChild(o),n.appendChild(r);let a=h.i;function i(){document.querySelector(".menu-content"+a).classList.toggle("hide")}h.i++,n.addEventListener("mouseover",i),n.addEventListener("mouseout",i),o.addEventListener("touchend",i),t.appendChild(n)}createLinkEle(e){const t=document.createElement("div"),n=document.createElement("a");return t.classList.add("content-box"),n.textContent=e,n.href="#",t.appendChild(n),t}}(new h).createDropDown()})()})();
diff --git a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/package-lock.json b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/package-lock.json
index b2f0236..7feea1b 100644
--- a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/package-lock.json
+++ b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@kesava-k/drop-down-menu",
- "version": "1.0.4",
+ "version": "1.0.6",
"lockfileVersion": 3,
"requires": true,
"packages": {
diff --git a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/package.json b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/package.json
index d204306..f116633 100644
--- a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/package.json
+++ b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/package.json
@@ -1,7 +1,6 @@
{
"name": "@kesava-k/drop-down-menu",
- "version": "1.0.4",
-
+ "version": "1.0.6",
"main": "script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
diff --git a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/src/menuDropDown.js b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/src/menuDropDown.js
index a7a670d..c39c7a3 100644
--- a/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/src/menuDropDown.js
+++ b/javascript/intermediate-js/implementing-dynamic-user-interface-interactions/drop-down-menu/src/menuDropDown.js
@@ -29,18 +29,20 @@ export default class MenuDropDown {
dropDown.appendChild(dropDownSvg);
dropDown.appendChild(menuContent);
- // Update i for every instance to keep event listeners unique and
- // making a closure of i w respective dropdowns
+ // To handle multiple dropdowns on the same page, update i for every
+ // instance to keep event listeners unique and making a closure of i w
+ // respective dropdowns
let ref_i = MenuDropDown.i;
MenuDropDown.i++;
+ // desktop browser events
+ dropDown.addEventListener("mouseover", menuContentToggle);
+ dropDown.addEventListener("mouseout", menuContentToggle);
+ // mobile browser event
+ dropDownSvg.addEventListener("touchend", menuContentToggle);
- dropDown.addEventListener("mouseover", function (e) {
+ function menuContentToggle() {
document.querySelector(".menu-content" + ref_i).classList.toggle("hide");
- });
-
- dropDown.addEventListener("mouseout", function () {
- document.querySelector(".menu-content" + ref_i).classList.toggle("hide");
- });
+ }
navBar.appendChild(dropDown);
}