Quiz settings

src/main.js

@@ -1,5 +1,6 @@
 import './style.css';
+import './views/quiz-settings/quiz-settings.css';
+import {QuizSettings} from "./views/quiz-settings/quiz-settings";
 
-document.querySelector('#app').innerHTML = `
-  <h1>CC first project</h1>
-`;
+
+document.querySelector('#app').appendChild(QuizSettings.showSettings());

src/style.css

@@ -1,3 +1,6 @@
+body {
+   background-color: #8ab0ab;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/views/quiz-settings/quiz-settings.css

@@ -0,0 +1,86 @@
+form {
+    width: 70%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    gap: 30px;
+    color: white;
+}
+
+form div {
+    width: 100%;
+    display: grid;
+    grid-template-columns: [first] 1fr [second] 1fr [third];
+    align-items: center;
+    justify-items: center;
+    align-content: center;
+    gap: 5%;
+}
+
+input {
+    border: 0px;
+    border-radius: 7px;
+    width: 100%;
+    max-width: 450px;
+    background-color: #658080;
+    height: 50px;
+    display: inline-block;
+
+}
+
+.radioButton {
+    display: flex;
+    flex-direction: column;
+}
+
+input[type=radio] {
+    -webkit-appearance: none;
+}
+
+input[type=radio]:checked {
+    background-color: #191f24;
+}
+
+input[type=radio]:hover {
+    background-color: #3e505b;
+}
+
+input[type=submit]:active {
+    background-color: #263038;
+}
+
+form p {
+    grid-column-start: first;
+    grid-column-end: third;
+}
+
+#number {
+    width: 40%;
+    grid-column-start: first;
+    grid-column-end: third;
+    color: white;
+    text-align: center;
+}
+
+#number:hover {
+    background-color: #3e505b;
+}
+
+#submit {
+    width: 40%;
+    margin-top: 100px;
+    color: white;
+}
+
+#submit:hover {
+    width: 40%;
+    margin-top: 100px;
+    background-color: #1e272c;
+}
+
+label {
+    position: relative;
+    top: -35px;
+}

src/views/quiz-settings/quiz-settings.js

@@ -0,0 +1,146 @@
+class QuizSettings {
+    quizAbout;
+    questionsNum;
+    questionsType;
+
+    static createRadioButton(value, settingName) {
+        const div = document.createElement('div');
+        div.setAttribute('class', 'radioButton')
+        const button = document.createElement('input');
+        button.setAttribute('id', value);
+        button.type = 'radio';
+        button.value = value;
+        button.name = settingName;
+        const label = document.createElement('label');
+        label.setAttribute('for', value);
+        label.innerText = value;
+        this.addEventListenerToComponent(button, 'click', settingName, value);
+        div.append(button, label);
+        return div;
+    }
+
+
+
+    static addEventListenerToComponent(component, event, settingName, value) {
+        component.addEventListener(event, () => {
+            if (settingName === 'quizAbout') {
+                this.quizAbout = value;
+            }
+            if (settingName === 'questionsType') {
+                this.questionsType = value;
+            }
+            if (settingName === 'questionsNum') {
+                this.questionsNum = component.value;
+            }
+            console.log(this.quizAbout, this.questionsType, this.questionsNum);
+        });
+    }
+
+
+
+    static createAboutSection() {
+        const about = document.createElement('div');
+        const text = document.createElement('p');
+        text.innerText = 'Quiz about: ';
+        about.append(
+            text,
+            this.createRadioButton('cats', 'quizAbout'),
+            this.createRadioButton('dogs', 'quizAbout'),
+        );
+        return about;
+    }
+
+
+
+    static createQuestionsNumberInput() {
+        const questionsNumber = document.createElement('input');
+        questionsNumber.setAttribute('id', 'number');
+        this.addEventListenerToComponent(questionsNumber, 'input', 'questionsNum', questionsNumber)
+        return questionsNumber;
+    }
+
+
+
+    static createQuestionsNumberdiv() {
+        const questionsNumberdiv = document.createElement('div');
+        const text = document.createElement('p');
+        text.innerText = 'Questions number: ';
+        questionsNumberdiv.append(text, this.createQuestionsNumberInput());
+        return questionsNumberdiv;
+    }
+
+
+
+    static createQuestionsTypeSection() {
+        const questionsType = document.createElement('div');
+        const text = document.createElement('p');
+        text.innerText = 'Questions type: ';
+        questionsType.append(
+            text,
+            this.createRadioButton('open', 'questionsType'),
+            this.createRadioButton('multiple choice', 'questionsType'),
+        );
+        return questionsType;
+    }
+
+
+
+    static createButtonStartQuiz() {
+        const buttonStartQuiz = document.createElement('input');
+        buttonStartQuiz.type = 'submit';
+        buttonStartQuiz.setAttribute('id', 'submit');
+        buttonStartQuiz.value = 'Start Quiz';
+        return buttonStartQuiz;
+    }
+
+
+
+    static createForm() {
+        const form = document.createElement('form');
+
+        form.append(
+            this.createAboutSection(),
+            this.createQuestionsNumberdiv(),
+            this.createQuestionsTypeSection(),
+            this.createButtonStartQuiz()
+        );
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            if (this.questionsNum === undefined || this.questionsNum < 1 || this.questionsNum > 20) {
+                alert('Insert questions number between 1 and 20');
+            } else if (this.quizAbout === undefined) {
+                alert('Choose animals');
+            } else if (this.quizAbout === undefined) {
+                alert('Choose questionsType');
+            } else {
+                alert(
+                    'Quiz about: ' +
+                    this.quizAbout +
+                    '\nQuestions number: ' +
+                    this.questionsNum +
+                    '\nQuestions type: ' +
+                    this.questionsType,
+                );
+            }
+        });
+        return form;
+    }
+
+
+
+    static showSettings() {
+        const settings = document.createElement('div');
+        settings.appendChild(this.createForm());
+        settings.setAttribute('id', 'quiz-settings');
+
+        return settings;
+    }
+}
+
+
+
+
+
+export {
+    QuizSettings
+};