Merge branch 'main' into Header

Signed-off-by: Julia Undeutsch <54622834+YuriDevAT@users.noreply.github.com>

Author: YuriDevAT

public/images/download.svg

@@ -1,11 +1,15 @@
-import React from "react";
 import "./App.css";
 import Header from "./components/Header/Header";
+import DownloadButton from "./components/DownloadButton";
+import ProgrammingExpertise from "./components/ProgrammingExpertise";
+
 function App() {
   return (
-    <div className="App">
-      <Header />
-    </div>
+    <>
+    <Header />
+      <DownloadButton />
+      <ProgrammingExpertise />
+    </>
   );
 }
 

src/App.js

@@ -0,0 +1,63 @@
+import { useState } from "react";
+
+const initialState = {
+  Title: "",
+  SubTitle: "",
+  City: "",
+  Country: "",
+  StartDate: "",
+  EndDate: "",
+  Description: "",
+};
+
+const ProgrammingExpertise = () => {
+  const [formState, setFormState] = useState(initialState);
+
+  const handleChange = (e, label) =>
+    setFormState((prev) => ({ ...prev, [label]: e.target.value }));
+
+  const clearState = () => setFormState({ ...initialState });
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    localStorage.setItem("Programming Expertise", JSON.stringify(formState));
+  };
+
+  console.log(JSON.parse(localStorage.getItem("Programming Expertise")));
+
+  const inputList = [
+    { label: "Title", type: "text", name: "title" },
+    { label: "SubTitle", type: "text", name: "subtitle" },
+    { label: "City", type: "text", name: "city" },
+    { label: "Country", type: "text", name: "country" },
+    { label: "StartDate", type: "date", name: "startdate" },
+    { label: "EndDate", type: "date", name: "enddate" },
+    { label: "Description", type: "text", name: "description" },
+  ].map(({ label, type, name }, index) => {
+    return (
+      <div key={`${label}${index}`}>
+        <label htmlFor={name}>{label}</label>
+        <input
+          type={type}
+          name={name}
+          id={name}
+          value={formState[label]}
+          onChange={(e) => handleChange(e, label)}
+        />
+      </div>
+    );
+  });
+  return (
+    <>
+      <h1>Programming Expertise</h1>
+      <form onSubmit={onSubmit}>
+        {inputList}
+        <button type="submit">Save</button>
+        <button type="button" onClick={clearState}>
+          Cancel
+        </button>
+      </form>
+    </>
+  );
+};
+export default ProgrammingExpertise;

src/Components/ProgrammingExpertise.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const DownloadButton = () => {
+	return ( 
+		<button style={{
+			display: "flex",
+			alignItems: "center"
+		}}>
+			<img src='/images/download.svg' alt="" style={{
+				padding: "5px"
+			}}></img>
+			Download
+
+		</button>
+	 );
+}
+ 
+export default DownloadButton;