From 369e5c26c8067f210473a9b6577f28233c5ef645 Mon Sep 17 00:00:00 2001
From: Geneen <geneen850@gmail.com>
Date: Sun, 31 Aug 2025 10:43:18 +0300
Subject: [PATCH] implement temp converter using react and style it

---
 index.html | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 style.css  | 29 +++++++++++++++++++++++
 2 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 style.css
diff --git a/index.html b/index.html
index ba39046..c4d8a1c 100644
--- a/index.html
+++ b/index.html
@@ -2,23 +2,82 @@
 <html lang="en">
   <meta charset="utf-8" />
   <title>React Form</title>
+  <link rel="stylesheet" href="style.css" />
 
   <body>
     <!-- These scripts will make React and ReactDOM globally available. -->
 
     <div id="root"></div>
-    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+    ></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
     <script type="text/babel">
       const container = document.getElementById('root');
 
       const TempConverter = () => {
+        const [scale, setScale] = React.useState('celsius');
+        const [temperature, setTemperature] = React.useState('');
+
+        const handleScaleChange = (e) => {
+          setScale(e.target.value);
+        };
+
+        const handleTemperatureChange = (e) => {
+          setTemperature(e.target.value);
+        };
+
+        const toCelsius = (f) => {
+          return ((f - 32) * 5) / 9;
+        };
+
+        const toFahrenheit = (c) => {
+          return (c * 9) / 5 + 32;
+        };
+
+        let converted = '';
+        if (temperature !== '') {
+          converted =
+            scale === 'celsius'
+              ? `${toFahrenheit(temperature)}°F`
+              : `${toCelsius(temperature)}°C`;
+        }
+
         return (
-          <form>
-            <h1>Temperature converter</h1>
-            <output>converted output goes here</output>
+          <form className="temp-form">
+            <h1 className="title">Temperature converter</h1>
+
+            <label>
+              <input
+                type="radio"
+                value="celsius"
+                onChange={handleScaleChange}
+                checked={scale === 'celsius'}
+              />
+              celsius
+            </label>
+            <label>
+              <input
+                type="radio"
+                value="fahrenheit"
+                onChange={handleScaleChange}
+                checked={scale === 'fahrenheit'}
+              />
+              fahrenheit
+            </label>
+
+            <label>
+              Enter Temperature:
+              <input type="number" onChange={handleTemperatureChange} />
+            </label>
+
+            <output className="result">converted output: {converted}</output>
           </form>
         );
       };
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..78e1d6b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,29 @@
+.temp-form {
+  margin: 20px auto;
+  padding: 15px;
+  max-width: 300px;
+  font-family: sans-serif;
+}
+
+.temp-form h1 {
+  font-size: 18px;
+  text-align: center;
+}
+
+.temp-form label {
+  display: block;
+}
+
+.temp-form input[type="number"] {
+  padding: 5px;
+  margin-top: 10px;
+}
+
+.result {
+  display: block;
+  margin-top: 15px;
+  padding: 8px;
+  background: #f0f8ff;
+  text-align: start;
+  font-weight: bold;
+}
