Dev quiz simple

README.md

@@ -1,24 +1,25 @@
 # Quiz
+Det här projektet är en quiz/survey byggd i React basics. Syftet är att öva på React state och controlled forms genom att skapa en enkel typ av Typeform/Buzzfeed-quiz.
 
-Replace this readme with your own information about the project. You can include things like:
+Användaren får svara på tre frågor:
 
-- Brief description of the assignment
-- How you approached the task, what tools and techniques you used, and how you planned it
-- If you had more time, what would be next?
-- How to run the project locally
-
-## View it live
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+1. Namn (textinput)
+2. Roligaste sprint på kursen (radiobuttons)
+3. Sprint som lärt dig mest (dropdown)
 
+Efter att användaren har svarat visas en sammanfattning av svaren.
 
-## Getting Started with the Project
+Tekniker jag använt:
+- React för komponentbaserad UI
+- useState för att hantera state
+- Controlled forms för inputs, radiobuttons och dropdown.
+- CSS för responsiv design och (jättelite) styling
+- Vite som utvecklingsserver
 
-### Dependency Installation & Startup Development Server
+Om jag hade mer tid/lade ner mer tid skulle jag fixa snygga övergångar/animationer mellan frågorna så att det blev ett trevligare quiz utseendemässigt.
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+Kör lokalt: npm i && code . && npm run dev
+http://localhost:5173/
 
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
+## View it live
+https://quizzyquizzz.netlify.app/

src/App.jsx

@@ -1,3 +1,140 @@
+import { useState } from "react";
+import "./index.css";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>
-}
+  const [step, setStep] = useState(1);
+  const [name, setName] = useState("");
+  const [funSprint, setFunSprint] = useState("");
+  const [learnedSprint, setLearnedSprint] = useState("");
+
+  return (
+    <div className="container">
+      <h1>Technigo Sprintquiz</h1>
+
+      {/* Steg 1: Namn */}
+      {step === 1 && (
+        <div>
+          <label>
+            Vad heter du?
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  if (name !== "") {
+                    setStep(step + 1);
+                  } else {
+                    alert("Skriv ditt namn först!");
+                  }
+                }
+              }}
+            />
+          </label>
+
+          <button
+            onClick={() => {
+              if (name !== "") {
+                setStep(step + 1);
+              } else {
+                alert("Skriv ditt namn först!");
+              }
+            }}
+          >
+            Fortsätt
+          </button>
+        </div>
+      )}
+
+      {/* Steg 2: Roligaste sprint (radiobuttons) */}
+      {step === 2 && (
+        <div className="radio-group">
+          <p>Vilken sprint på Technigos kurs har varit roligast?</p>
+
+          <label>
+            <input
+              type="radio"
+              name="funSprint"
+              value="HTML & CSS"
+              checked={funSprint === "HTML & CSS"}
+              onChange={(e) => {
+                setFunSprint(e.target.value);
+                setStep(step + 1);
+              }}
+            />
+            HTML & CSS
+          </label>
+
+          <label>
+            <input
+              type="radio"
+              name="funSprint"
+              value="JavaScript"
+              checked={funSprint === "JavaScript"}
+              onChange={(e) => {
+                setFunSprint(e.target.value);
+                setStep(step + 1);
+              }}
+            />
+            JavaScript
+          </label>
+
+          <label>
+            <input
+              type="radio"
+              name="funSprint"
+              value="React"
+              checked={funSprint === "React"}
+              onChange={(e) => {
+                setFunSprint(e.target.value);
+                setStep(step + 1);
+              }}
+            />
+            React
+          </label>
+        </div>
+      )}
+
+      {/* Steg 3: Lärt mest av (dropdown) */}
+      {step === 3 && (
+        <div>
+          <label>
+            Vilken sprint har du lärt dig mest av?
+            <select
+              value={learnedSprint}
+              onChange={(e) => setLearnedSprint(e.target.value)}
+            >
+              <option value="">Välj</option>
+              <option value="HTML & CSS">HTML & CSS</option>
+              <option value="JavaScript">JavaScript</option>
+              <option value="React">React</option>
+            </select>
+          </label>
+
+          <button
+            onClick={() => {
+              if (learnedSprint !== "") {
+                setStep(4); // Visa summary
+              } else {
+                alert("Välj en sprint innan du skickar in!");
+              }
+            }}
+          >
+            Submit
+          </button>
+        </div>
+      )}
+
+      {/* Steg 4: Summary */}
+      {step === 4 && (
+        <div>
+          <h2>Tack för dina svar!</h2>
+          <p>Du svarade:</p>
+          <p>Namn: {name}</p>
+          <p>Roligaste sprint: {funSprint}</p>
+          <p>Jag har lärt mig mest av: {learnedSprint}</p>
+        </div>
+      )}
+    </div>
+  );
+};

src/index.css

@@ -1,13 +1,123 @@
-:root {
+/* Global styling */
+body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: #286097;
+  color: #030e1f;
+
+}
+
+/* Container */
+.container {
+  max-width: 600px;
+  min-width: 350px;
+  margin: 2rem auto;
+  padding: 1rem;
+  background-color: #5eea8f;
+}
+
+/* Form / Step container */
+form,
+div {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: rgb(172, 246, 177);
+  padding: 1.5rem;
+  border-radius: 3px;
+  box-shadow: 4px 2px 2px 6px rgba(31, 58, 22, 0.1);
+}
+
+/* Labels */
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-weight: 500;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+/* Inputs, selects, buttons */
+input,
+select,
+button {
+  padding: 0.6rem;
+  font-size: 1rem;
+  border: 1px solid black;
+  border-radius: 6px;
+  outline: none;
+}
+
+input:focus,
+select:focus {
+  border-color: #ffffff;
+  box-shadow: 0 0 0 4px rgba(3, 51, 4, 0.2);
+}
+
+/* Buttons */
+button {
+  margin: 1rem auto 0 auto;
+  background: #031d44;
+  max-width: 150px;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s;
+  display: block;
+}
+
+
+button:hover {
+  background: #1d4ed8;
 }
+
+/* Radiobutton group */
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.radio-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: 400;
+}
+
+.radio-group input[type="radio"] {
+  accent-color: #2563eb;
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+/* Fieldset styling */
+fieldset {
+  border: 1px solid #ddd;
+  padding: 1rem;
+  border-radius: 6px;
+}
+
+/* Summary styling */
+.summary {
+  text-align: center;
+}
+
+/* Tablet och uppåt */
+@media (min-width: 768px) {
+  .container {
+    padding: 2rem;
+  }
+}
+
+/* Större skärmar */
+@media (min-width: 1200px) {
+  .container {
+    padding: 3rem;
+  }
+}