Pap Laci 2nd házi

src/App.css

@@ -0,0 +1,3 @@
+.error {
+  border: 5px solid red;
+}

src/App.js

@@ -1,10 +1,18 @@
 import './App.css';
+import React from "react";
+import Converter from './components/Converter';
 
 function App() {
+	const convertCountRef = React.useRef(0);
+
   return (
-    <div className="App">
-    </div>
+	<div>
+		<Converter label="BTC" exchangeRate={995} convertCount={convertCountRef} />
+		<br/>
+		<Converter label="ETH" exchangeRate={1.2} convertCount={convertCountRef} />
+	</div>
+
   );
 }
 
-export default App;
+export default App;

src/components/Amount.js

@@ -0,0 +1,28 @@
+import '../App.css';
+import React, { useContext} from 'react';
+import ThemeContext from '../context/ThemeContext';
+
+
+export default function Amount({label, value, onChange, isReadOnly, isRedBorderAdded}) {
+
+	const theme = useContext(ThemeContext);
+
+	return (
+		<div style={{ background: theme.background, color: theme.foreground }}>
+		    <div className={(isRedBorderAdded && !isReadOnly) ? "error" : "App"}>
+		    	<label>{label}:
+		         <input type="number" value={value} readOnly={isReadOnly} onChange=
+			        {
+			        	(event) => {
+			        		onChange(event.target)
+			        	}
+			        }
+		        >
+		        </input>
+		      </label>
+		    </div>
+		</div>
+
+
+  );
+}

src/components/Converter.js

@@ -0,0 +1,75 @@
+import '../App.css';
+import React, { useEffect, useContext, useState, useRef } from 'react';
+import Amount from './Amount';
+import ThemeContext from '../context/ThemeContext';
+
+const defaultEuroValue=0;
+const defaultConvertedValue=0;
+const themes = {
+  light: {
+    foreground: "#000000",
+    background: "#eeeeee"
+  },
+  dark: {
+    foreground: "#ffffff",
+    background: "#222222"
+  }
+};
+var isRedBorderAdded = false;
+var currentTheme = themes.light;
+
+export default function Converter({label, exchangeRate, convertCount}) {
+
+	const [mystate, setMyState] = React.useState({euroValue: defaultEuroValue, convertedValue: defaultConvertedValue, currentTheme: themes.light});
+    const {euroValue, convertedValue, currentTheme} = mystate;
+    const titleRef = React.useRef("Convert 0 euros to " + label);
+
+	const myOnChange = (element) => {
+		let calcEur = element.value;
+		let calcConvertedValue = element.value / exchangeRate;
+		let theme=currentTheme;
+
+		if (convertCount.current == 5) {
+			alert('Convert without limits by becoming a premium user');
+		} else {
+
+			if (element.value >= 0){
+		    	isRedBorderAdded = false;
+		    } else {
+		    	isRedBorderAdded = true;
+		    }
+
+			if (theme==themes.light){
+				theme = themes.dark;
+			} else {
+				theme=themes.light;
+			}
+
+			convertCount.current=convertCount.current+1;
+
+			titleRef.current="Convert " + calcEur + " euros to " + label;
+
+			setMyState({
+			  euroValue: calcEur,
+			  convertedValue: calcConvertedValue,
+			  currentTheme: theme
+			});
+
+		}
+	}
+
+	return (
+		<ThemeContext.Provider value={currentTheme}>
+			<div>
+				<div ref={titleRef}>
+					Title: {titleRef.current}
+				</div>
+				<Amount label="Euros" value={euroValue} onChange={myOnChange} isRedBorderAdded={isRedBorderAdded} />
+		    	<label>{label}:
+		         	{convertedValue}
+		      </label>
+			</div>
+		</ThemeContext.Provider>
+
+  );
+}

src/context/ThemeContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ThemeContext = React.createContext({});
+
+export default ThemeContext;