From e5d2ea691a21203706c1717a0cc0b520fc207919 Mon Sep 17 00:00:00 2001 From: AleksandraCyp <73715885+AleksandraCyp@users.noreply.github.com> Date: Tue, 5 Jan 2021 19:42:58 +0100 Subject: [PATCH] =?UTF-8?q?MNG-16=20Add=20a=20help=20screen,=20style=20it?= =?UTF-8?q?=20(has=20to=20be=20polished,=20the=20scrollbar=20is=20not?= =?UTF-8?q?=E2=80=A6=20(#16)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add a help screen, style it (has to be polished, the scrollbar is not styled). Add help screen HTML the the page, add an event listener for the help screen and a reusable function showAPopUpScreen (can be used to display hall of fame) * Remove event listener from the exit button every time it is clicked, correct spelling mistakes --- src/app/App.js | 11 +++- src/app/addHelpScreenTemplate.js | 19 +++++++ src/app/showAPopUpScreen.js | 17 +++++++ src/app/showStartingPage.js | 21 ++++---- styles/App.css | 87 +++++++++++++++++++++++++++++++- 5 files changed, 143 insertions(+), 12 deletions(-) create mode 100644 src/app/addHelpScreenTemplate.js create mode 100644 src/app/showAPopUpScreen.js diff --git a/src/app/App.js b/src/app/App.js index dd2872a..a95be5e 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,8 +1,17 @@ import { doc } from "prettier"; -import { showStartingPage } from './showStartingPage.js' +import { showStartingPage } from './showStartingPage.js'; +import { showAPopUpScreen } from './showAPopUpScreen'; +import { addHelpScreenTemplate } from "./addHelpScreenTemplate.js"; export const App = ({options}) => { + showStartingPage(); + addHelpScreenTemplate(); + + //add event listener to the help button + document.querySelector('#helpOption').addEventListener('click', () => { + showAPopUpScreen(document.querySelector('#helpScreen')) + }); } diff --git a/src/app/addHelpScreenTemplate.js b/src/app/addHelpScreenTemplate.js new file mode 100644 index 0000000..db8326f --- /dev/null +++ b/src/app/addHelpScreenTemplate.js @@ -0,0 +1,19 @@ +export const addHelpScreenTemplate = () => { + const appScreen = document.querySelector('#pokequiz-app'); + const helpScreenTemplate = + `
+
+

HELP

+

✕

+
+ +
+ Pikachu +
+
` + appScreen.innerHTML += helpScreenTemplate; +} \ No newline at end of file diff --git a/src/app/showAPopUpScreen.js b/src/app/showAPopUpScreen.js new file mode 100644 index 0000000..c2c9ff8 --- /dev/null +++ b/src/app/showAPopUpScreen.js @@ -0,0 +1,17 @@ +export const showAPopUpScreen = (screenToDisplay) => { + // display the help screen + screenToDisplay.style.display = 'initial'; + // add blur to the rest of the page + document.querySelectorAll('.disableWithPopUpScreen').forEach(e => e.style.filter = 'blur(4px)'); + // function which gets called when the exit button is clicked + const exitPopUpFunction = () => { + //hide the screen + screenToDisplay.style.display = 'none'; + // remove the blur + document.querySelectorAll('.disableWithPopUpScreen').forEach(e => e.style.filter = 'blur(0)'); + // remove the event listener + screenToDisplay.querySelector('.exitPopUpScreen').removeEventListener('click', exitPopUpFunction); + }; + // add event listener to the exit button; + screenToDisplay.querySelector('.exitPopUpScreen').addEventListener('click', exitPopUpFunction); + }; \ No newline at end of file diff --git a/src/app/showStartingPage.js b/src/app/showStartingPage.js index b34cea8..24ba6de 100644 --- a/src/app/showStartingPage.js +++ b/src/app/showStartingPage.js @@ -1,18 +1,18 @@ export const showStartingPage = () => { const appScreen = document.querySelector('#pokequiz-app'); const startingPageTemplate = - `