now reverse button becomes active when it is possible to reverse and …

…disabled active, when it is not possible

js/converter.js

@@ -36,9 +36,12 @@ class Converter{
 			const fromSelect = createFromConverterSelect(this.type);
 
 			//title and select for "to" unit of measurement
-			const toTitle = createConverterTitle(`to:`, {reverse: true});
+			const toTitle = createConverterTitle(`to:`);
 			const toSelect = createToConverterSelect(this.type);
 
+			const reverseButton = createConverterReverseButton(fromSelect, toSelect);
+			toTitle.appendChild(reverseButton);
+
 			const optgroups = createOptgroups(this.#measurementUnitGroupData.list);
 			fromSelect.innerHTML += optgroups;
 			toSelect.innerHTML += optgroups;
@@ -51,7 +54,7 @@ class Converter{
 			const result = createContainerWithClasses("div", "converter-result");
 
 			//reads value from input, from and to units of measurements from selects and precision from range and passes it to converter, that prints result of error
-			const startConverting = converterHandler.bind(this, {valueInput, fromSelect, toSelect, precisionRange, result});
+			const startConverting = converterHandler.bind(this, {valueInput, fromSelect, toSelect, precisionRange, result, reverseButton});
 
 			//limit length of value input field
 			valueInput.oninput = event => {

js/main.js

@@ -11,30 +11,27 @@ function sleep(time){
 const createConverterTitle = (title, props = {}) => {
 	const titleContainer = createContainerWithClasses("div", "converter-title");
 	titleContainer.innerHTML = title;
-	if(props.reverse){
-		const reverseButton = createContainerWithClasses("i", "fas", "fa-sync-alt");
-		reverseButton.onclick = function(event){
-			const converterContainer = event.target.parentNode.parentNode;
-			const fromSelect = converterContainer.querySelector(".converter-from");
-			const toSelect = converterContainer.querySelector(".converter-to");
-			const from = getSelectedOption(fromSelect);
-			const to = getSelectedOption(toSelect);
-			if(!from || !to || (from === to)) return;
-
-			event.target.classList.add("rotate");
-			sleep(500).then(() => {
-				event.target.classList.remove("rotate");
-			})
-
-			fromSelect.querySelector(`[value='${to}']`).selected = true;
-			toSelect.querySelector(`[value='${from}']`).selected = true;
-
-			fromSelect.dispatchEvent(new Event("change"));
-		}
-		titleContainer.appendChild(reverseButton);
-	}
 	return titleContainer;
 };
+const createConverterReverseButton = (fromSelect, toSelect) => {
+	const reverseButton = createContainerWithClasses("i", "fas", "fa-sync-alt");
+	reverseButton.onclick = function(event){
+		const from = getSelectedOption(fromSelect);
+		const to = getSelectedOption(toSelect);
+		if(!from || !to || (from === to)) return;
+
+		event.target.classList.add("rotate");
+		sleep(500).then(() => {
+			event.target.classList.remove("rotate");
+		})
+
+		fromSelect.querySelector(`[value='${to}']`).selected = true;
+		toSelect.querySelector(`[value='${from}']`).selected = true;
+
+		fromSelect.dispatchEvent(new Event("change"));
+	}
+	return reverseButton;
+}
 
 const createConverterSelect = props => {
 	const select = createContainerWithClasses("select", "converter-select", `converter-${props.role}`, "converter-action-item")
@@ -111,7 +108,13 @@ function converterHandler(props){
 		const to = getSelectedOption(props.toSelect);
 
 		const precision = parseInt(props.precisionRange.querySelector("input").value);
-
+
+		if(to && from !== to){
+			props.reverseButton.classList.add("active");
+		}
+		else{
+			props.reverseButton.classList.remove("active");
+		}
 		//list of objects, that contain converted values
 		const converted = this.convert({value, from, to});
 		console.log(converted)

styles/converter.css

@@ -58,10 +58,15 @@
 	float: right;
 	text-align: right;
 	font-size: 1.2rem;
-	color: var(--secondary-blue);
 	transition: .3s;
 }
-.converter .fa-sync-alt:hover{
+.converter .fa-sync-alt{
+	color: gray;
+}
+.converter .fa-sync-alt.active{
+	color: var(--secondary-blue);
+}
+.converter .fa-sync-alt.active:hover{
 	cursor: pointer;
 	color: var(--primary-blue);
 }