Fixed ui issues with grid

src/constants.js

@@ -13,7 +13,7 @@ export const RESTART_QUIZ_BUTTON_ID = 'restart-button';
 export const TIMER_CONTAINER = 'timer-container';
 
 export const PARAGRAPH_ID = 'welcome-paragraph';
-export const GREET_DIV_ID = 'greet-div-id';
+export const WELCOME_DIV_ID = 'welcome-container';
 export const INPUT_FIELD_ID = 'input-data';
 
 export const TIME_LEFT_IN_SEC = 300;
@@ -26,4 +26,5 @@ export const AUDIO_ELEMENT_ID = 'play';
 export const CHANGE_THEME_BUTTON_ID = 'change-theme-button';
 export const WRAPPER_CLASS = '.wrapper';
 export const FINAL_MSG_ID = 'final-msg';
-
+export const WELCOME_FORM = 'welcome-form';
+export const GRID_CONTAINER_ID = 'grid-container';

src/pages/finalPage.js

@@ -33,11 +33,11 @@ const showGif = (score) => {
   gifElement.src = gifUrl;
   gifElement.alt = 'Quiz result gif';
   gifElement.classList.add('result-gif');
-  
+
   const resultContainer = document.getElementById('result-container');
   resultContainer.innerHTML = '';
   resultContainer.appendChild(gifElement);
-}
+};
 
 const restartQuiz = () => {
   quizData.currentQuestionIndex = 0;

src/pages/questionPage.js

@@ -3,9 +3,7 @@ import {
   NEXT_QUESTION_BUTTON_ID,
   USER_INTERFACE_ID,
 } from '../constants.js';
-import {
-  createQuestionElement,
-} from '../views/questionView.js';
+import { createQuestionElement } from '../views/questionView.js';
 import { createAnswerElement } from '../views/answerView.js';
 import { quizData } from '../data.js';
 import { initFinalPage } from './finalPage.js';

src/pages/welcomePage.js

@@ -2,10 +2,9 @@ import {
   USER_INTERFACE_ID,
   TIME_LEFT_IN_SEC,
   INPUT_FIELD_ID,
+  WELCOME_FORM,
 } from '../constants.js';
-import {
-  createWelcomeElement
-} from '../views/welcomeView.js';
+import { createWelcomeElement } from '../views/welcomeView.js';
 import { initQuestionPage } from './questionPage.js';
 import { initTimer } from '../utilities/timerPage.js';
 
@@ -17,7 +16,7 @@ export const initWelcomePage = () => {
   const welcomeElement = createWelcomeElement();
   userInterface.appendChild(welcomeElement);
 
-  const welcomeForm = document.getElementById('welcome-from');
+  const welcomeForm = document.getElementById(WELCOME_FORM);
 
   welcomeForm.addEventListener('submit', (e) => {
     e.preventDefault();

src/themeChanger.js

@@ -41,4 +41,4 @@ export const initThemeChanger = () => {
   const changeThemeButton = createChangeThemeButton();
   changeThemeButton.addEventListener('click', changeTheme);
   loadSavedTheme();
-};
+};

src/utilities/timerPage.js

@@ -3,7 +3,7 @@ import {
   TIME_LEFT_IN_SEC,
   REMAINDER,
   INTERVAL,
-  PLAY_AUDIO_INTERVAL
+  PLAY_AUDIO_INTERVAL,
 } from '../constants.js';
 
 import { createTimerElement, createAudioElement } from '../views/timerView.js';
@@ -13,7 +13,7 @@ export const initTimer = () => {
   const wrapper = document.querySelector('.wrapper');
   const timerElement = createTimerElement();
   wrapper.prepend(timerElement);
-  
+
   timerElement.innerHTML = '';
 
   if (window.remainingTime === undefined) {
@@ -52,4 +52,4 @@ export const initTimer = () => {
       clearInterval(window.timerInterval);
     }
   }, INTERVAL);
-};
+};

src/views/finalView.js

@@ -1,5 +1,5 @@
 import {
-  GREET_DIV_ID,
+  WELCOME_DIV_ID,
   RESTART_QUIZ_BUTTON_ID,
   FINAL_MSG_ID,
 } from '../constants.js';
@@ -10,7 +10,7 @@ import {
  */
 export const createFinalElement = (score, question) => {
   const element = document.createElement('div');
-  element.id = GREET_DIV_ID;
+  element.id = WELCOME_DIV_ID;
   let message = !window.remainingTime ? `Time's Up!` : '';
 
   // I use String.raw just to get fancy colors for the HTML in VS Code.

src/views/questionView.js

@@ -1,19 +1,19 @@
 import { ANSWERS_LIST_ID } from '../constants.js';
-import { NEXT_QUESTION_BUTTON_ID } from '../constants.js';
+import { NEXT_QUESTION_BUTTON_ID, GRID_CONTAINER_ID } from '../constants.js';
 import { quizData } from '../data.js';
 /**
  * Create a full question element
  * @returns {Element}
  */
 export const createQuestionElement = (question) => {
   const element = document.createElement('div');
-
+  element.id = GRID_CONTAINER_ID;
   // I use String.raw just to get fancy colors for the HTML in VS Code.
   element.innerHTML = String.raw`
-  <span class="question-indicator"> Question ${
-    quizData.currentQuestionIndex + 1
-  } </span> 
-    <h1 class="question-heading"> ${question}</h1>
+    <div class="heading-container"><span class="question-indicator"> Question ${
+      quizData.currentQuestionIndex + 1
+    } </span> 
+  <h1 class="question-heading"> ${question}</h1></div>
 
     <ul id="${ANSWERS_LIST_ID}">
     </ul>
@@ -24,4 +24,4 @@ export const createQuestionElement = (question) => {
   `;
 
   return element;
-};
+};

src/views/welcomeView.js

@@ -1,8 +1,9 @@
 import {
   START_QUIZ_BUTTON_ID,
   PARAGRAPH_ID,
-  GREET_DIV_ID,
+  WELCOME_DIV_ID,
   INPUT_FIELD_ID,
+  WELCOME_FORM,
 } from '../constants.js';
 
 /**
@@ -11,17 +12,17 @@ import {
  */
 export const createWelcomeElement = () => {
   const greetingElement = document.createElement('div');
-  greetingElement.id = GREET_DIV_ID;
+  greetingElement.id = WELCOME_DIV_ID;
   greetingElement.innerHTML = String.raw`
       <h1>Welcome to Our Movie Quiz</h1>
       <p id="${PARAGRAPH_ID}">You've <span class="highlight">5</span> minutes to test your movie skills!</p>
-      <div class="welcome">
-    <form id="welcome-from">
+
+    <form id="${WELCOME_FORM}">
 
       <input type="text" id="${INPUT_FIELD_ID}"  placeholder="Enter Your Name"  required/>
       <button type="submit" id="${START_QUIZ_BUTTON_ID}">Start Quiz</button>
     </form>
-    </div>
+
   `;
   return greetingElement;
 };