Maryyy_ux_Harry Potters Quiz_Are you a truly Witch/Wizzard?

.gitignore

@@ -11,7 +11,6 @@ node_modules
 dist
 dist-ssr
 *.local
-package-lock.json
 
 # Editor directories and files
 .vscode/*

App.css

@@ -0,0 +1,119 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background-color: white;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.quiz-container {
+  width: 100%;
+  max-width: 800px;
+  background-color: blue;
+  border-radius: 10px;
+  padding: 50px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.question-block {
+  background-color: white;
+  padding: 20px;
+  text-align: center;
+  border: 2px solid gray;
+  border-radius: 10px;
+}
+
+.separator {
+  width: 100%;
+  height: 5px;
+  background-color: gray;
+}
+
+.result-container {
+  width: 60%;
+  height: 60%;
+  background-color: white;
+  padding: 20px;
+  text-align: center;
+  border: 2px solid gray;
+  border-radius: 10px;
+  display: block;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+}
+
+
+.house-logo {
+  width: 30px;
+  height: 30px;
+  margin-left: 10px;
+}
+
+
+.logo {
+  width: 150px;
+  height: auto;
+  max-width: 100%;
+  object-fit: contain;
+  margin-top: 20px;
+}
+
+
+
+/* Para pantallas grandes (desktops) */
+@media (min-width: 1200px) {
+  .quiz-container {
+    max-width: 900px;
+  }
+}
+
+/* Para pantallas medianas (tablets) */
+@media (min-width: 768px) and (max-width: 1199px) {
+  body {
+    padding: 20px;
+  }
+
+  .quiz-container {
+    padding: 30px;
+    max-width: 700px;
+  }
+
+  .result-container {
+    max-width: 500px;
+  }
+}
+
+/* Para pantallas pequeñas (teléfonos) */
+@media (max-width: 767px) {
+  body {
+    padding: 15px;
+  }
+
+  .quiz-container {
+    padding: 20px;
+  }
+
+  .result-container {
+    padding: 15px;
+  }
+}
+
+/* Para pantallas extra pequeñas (iPhone 5) */
+@media (max-width: 320px) {
+  body {
+    padding: 15px;
+  }
+
+  .quiz-container {
+    padding: 15px;
+  }
+
+  .result-container {
+    padding: 10px;
+  }
+}

App.jsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import './App.css';
+
+function Quiz() {
+  const [house, setHouse] = useState('');
+  const [spell, setSpell] = useState(''); // Estate for prefered spell//Estado para el hechizo favorito
+  const [creature, setCreature] = useState(''); // Estate for magic creature//Estado para la criatura mágica favorita
+  const [showResult, setShowResult] = useState(false); // Estate to show result//Estado para controlar si mostramos el resultado
+
+  const handleHouseChange = (selectedHouse) => {
+    setHouse(selectedHouse);
+    document.body.className = selectedHouse; // Selected house image//Cambiar el fondo de pantalla según la casa
+  };
+
+  const handleSpellChange = (e) => {
+    setSpell(e.target.value); // Handle spell//Guardar el hechizo
+  };
+
+  const handleCreatureChange = (e) => {
+    setCreature(e.target.value); // Handle creature//Guardar la criatura
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setShowResult(true); // show result//Mostrar resultado al enviar
+  };
+
+  return (
+    <div className="quiz-container">
+      {/* show result if not submitted//Mostrar preguntas si no se ha enviado el formulario */}
+      {!showResult && (
+        <form onSubmit={handleSubmit}>
+          <div className="question-block block-1">
+            <h2>Which house do you belong to?</h2>
+            <div>
+              <label>
+                <input
+                  type="radio"
+                  name="house"
+                  value="gryffindor"
+                  onChange={() => handleHouseChange('gryffindor')}
+                />
+                Gryffindor
+                <img src="/logos/gryffindor.jpg" alt="Logo de Gryffindor" className="house-logo" />
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="house"
+                  value="slytherin"
+                  onChange={() => handleHouseChange('slytherin')}
+                />
+                Slytherin
+                <img src="/logos/slytherin.jpg" alt="Logo de Slytherin" className="house-logo" loading="lazy" />
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="house"
+                  value="ravenclaw"
+                  onChange={() => handleHouseChange('ravenclaw')}
+                />
+                Ravenclaw
+                <img src="/logos/ravenclaw.jpg" alt="Logo de Ravenclaw" className="house-logo" loading="lazy" />
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="house"
+                  value="hufflepuff"
+                  onChange={() => handleHouseChange('hufflepuff')}
+                />
+                Hufflepuff
+                <img src="/logos/hufflepuff.jpg" alt="Logo de Hufflepuff" className="house-logo" loading="lazy" />
+              </label>
+            </div>
+          </div>
+
+          <div className="separator sep-1"></div>
+
+          <div className="question-block block-2">
+            <h2>Which is your favourite spell?</h2>
+            <input
+              type="text"
+              placeholder="Write your favourite spell..."
+              value={spell}
+              onChange={handleSpellChange} // Guardar el hechizo
+            />
+          </div>
+
+          <div className="separator sep-2"></div>
+
+          <div className="question-block block-3">
+            <h2>Which is your favourite magic creature?</h2>
+            <label htmlFor="creature-select">Select one magic creature:</label>
+            <select id="creature-select" value={creature} onChange={handleCreatureChange}>
+              <option value="">Select one magic creature</option>
+              <option value="hipogrifo">Hippogryph</option>
+              <option value="dragón">Dragon</option>
+              <option value="elfo">House elf</option>
+            </select>
+          </div>
+
+          <button type="submit">Submit</button>
+        </form>
+      )}
+
+      {/* Mostrar el resultado cuando se haya enviado el formulario */}
+      {showResult && (
+        <div className="result-container">
+          <h2>Quiz result</h2>
+          <p>Prefered house: {house}</p>
+          <p>Favourite spell: {spell}</p>
+          <p>Favourite magic creature: {creature}</p>
+          {house && (
+            <img
+              src={`/logos/${house}.jpg`}
+              alt={`Logo de ${house}`}
+              className="logo"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <div className="App">
+      <Quiz />
+    </div>
+  );
+}
+
+export default App;
+

Quiz.css

@@ -0,0 +1,101 @@
+.question-block {
+    width: 100%;
+    max-width: 600px;
+}
+
+.next-button {
+    background-color: gray;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 20px;
+    display: block;
+    width: 100%;
+}
+
+.next-button:hover {
+    background-color: darkgray;
+}
+
+.house-logo {
+    width: 40px;
+    margin-left: 10px;
+    height: 30px;
+}
+
+.question-block {
+    display: none;
+}
+
+.question-block.active {
+    display: block;
+
+}
+
+/* Para pantallas grandes (desktops) */
+@media (min-width: 1200px) {
+    .question-block {
+        max-width: 900px;
+    }
+}
+
+/* Para pantallas medianas (tablets) */
+@media (min-width: 768px) and (max-width: 1199px) {
+    body {
+        padding: 20px;
+        /* Añade algo de padding para centrar mejor el contenido */
+    }
+
+    .question-block {
+        max-width: 600px;
+    }
+
+    .house-logo {
+        width: 40px;
+        height: 30px;
+    }
+}
+
+/* Para pantallas pequeñas (teléfonos) */
+@media (max-width: 767px) {
+    body {
+        padding: 15px;
+    }
+
+    .question-block {
+        padding: 10px;
+    }
+
+    .next-button {
+        padding: 8px 15px;
+        font-size: 14px;
+    }
+
+    .house-logo {
+        width: 30px;
+        height: 25px;
+    }
+}
+
+/* Para pantallas extra pequeñas (iPhone 5) */
+@media (max-width: 320px) {
+    body {
+        padding: 15px;
+    }
+
+    .question-block {
+        padding: 15px;
+    }
+
+    .next-button {
+        padding: 6px 10px;
+        font-size: 12px;
+    }
+
+    .house-logo {
+        width: 25px;
+        height: 20px;
+    }
+}