Technigo · nella-x · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024 · Oct 18, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -9,6 +9,7 @@ module.exports = {
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  quotes: ["error", "backtick", { "avoidEscape": true }],
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],
   rules: {

diff --git a/README.md b/README.md
@@ -4,31 +4,26 @@
   </a>
 </h1>
 
-# Survey Project
 
-Replace this readme with your own information about your project.
+# Survey Project
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This is project with 3 different questions - name, birthdate and interested area for predictions, based on what user have chosen, summary page gives a prediction horoscope for the next year
 
 ## Getting Started with the Project
 
 ### Dependency Installation & Startup Development Server
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-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
 ```
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+
 
 ### 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.
+https://2025-horoscope.netlify.app/ 
 
 ## Instructions
 

diff --git a/index.html b/index.html
@@ -1,13 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Survey - Project - Week 6</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Survey - Project - Week 6</title>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Cinzel:wght@400..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,10 @@
+import { MultiStepForm } from "./components/MultiStepForm.jsx";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <>
+      <MultiStepForm />
+    </>
+  );
 };
+
diff --git a/src/components/Birthday.jsx b/src/components/Birthday.jsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+const daysInMonth = (month) => {
+  return new Date(2024, month + 1, 0).getDate(); // Fix month index
+};
+
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const DayDropdown = ({ onChange, selectedMonth, selectedDay }) => {
+  const maxDays = selectedMonth ? daysInMonth(selectedMonth - 1) : 31;
+
+  return (
+    <select onChange={(e) => onChange(parseInt(e.target.value, 10) || null)} value={selectedDay || ""}>
+      <option value="">Day</option>
+      {Array.from({ length: maxDays }, (_, i) => i + 1).map(day => (
+        <option key={day} value={day}>
+          {day}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+DayDropdown.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  selectedMonth: PropTypes.number,
+  selectedDay: PropTypes.number,
+};
+
+export const MonthDropdown = ({ onChange, selectedMonth }) => {
+  return (
+    <select onChange={(e) => onChange(parseInt(e.target.value, 10) || null)} value={selectedMonth || ""}>
+      <option value="">Month</option>
+      {months.map((month, index) => (
+        <option key={month} value={index + 1}>
+          {month}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+MonthDropdown.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  selectedMonth: PropTypes.number,
+};
+
+export const Form = () => {
+  const [selectedDay, setSelectedDay] = useState(null);
+  const [selectedMonth, setSelectedMonth] = useState(null);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Selected Day:", selectedDay);
+    console.log("Selected Month:", selectedMonth);
+  };
+
+  // Kontrollera att både dag och månad är giltiga
+  const isFormValid = selectedDay !== null && selectedMonth !== null;
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <MonthDropdown
+        onChange={(month) => setSelectedMonth(month)}
+        selectedMonth={selectedMonth}
+      />
+      <DayDropdown
+        onChange={(day) => setSelectedDay(day)}
+        selectedMonth={selectedMonth}
+        selectedDay={selectedDay}
+      />
+      <button type="submit" disabled={!isFormValid}>
+        Submit
+      </button>
+    </form>
+  );
+};
diff --git a/src/components/Categories.jsx b/src/components/Categories.jsx
@@ -0,0 +1,30 @@
+import PropTypes from "prop-types";
+
+export const Categories = ({ updateFormData, value }) => {
+  const handleRadioChange = (event) => {
+    updateFormData(event.target.value);  // Correctly updating formData.categories
+  };
+
+  return (
+    <div className="radio-box">
+      <label>Choose an option:</label>
+      {["Career", "Love life", "Personal life"].map((option) => (
+        <label key={option} className={`custom-radio ${value === option ? "selected" : ""}`}>
+          <input
+            type="radio"
+            value={option}
+            checked={value === option}
+            onChange={handleRadioChange}
+          />
+          <span>{option}</span>
+        </label>
+      ))}
+    </div>
+  );
+
+  // PropTypes validation
+  Categories.propTypes = {
+    updateFormData: PropTypes.func.isRequired,
+    value: PropTypes.string.isRequired,
+  };
+}