Skip to content

Commit b3c3f6d

Browse files
Harbinder-webHarbinder-web
authored
Merge pull request #1 from gpbhupinder/HS_Branch
Saturday Changes
2 parents b6149d2 + a05ddc1 commit b3c3f6d

File tree

9 files changed

+91
-852
lines changed

9 files changed

+91
-852
lines changed

‎pages/_app.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import "@/styles/globals.css";
2-
import "../styles/tailwind.css";
32

43
export default function App({ Component, pageProps }) {
54
return <Component {...pageProps} />;

‎pages/index.js

Lines changed: 91 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import { useState } from "react";
22
import Head from "next/head";
33

44
const colors = [
5-
{ label: "Black", value: "black" },
6-
{ label: "Brown", value: "brown" },
7-
{ label: "Red", value: "red" },
8-
{ label: "Orange", value: "orange" },
9-
{ label: "Yellow", value: "yellow" },
10-
{ label: "Green", value: "green" },
11-
{ label: "Blue", value: "blue" },
12-
{ label: "Violet", value: "violet" },
13-
{ label: "Gray", value: "gray" },
14-
{ label: "White", value: "white" },
15-
{ label: "Gold", value: "gold" },
16-
{ label: "Silver", value: "silver" },
5+
{ label: "Black", value: "black", hexCode: "#1f2937" },
6+
{ label: "Brown", value: "brown", hexCode: "#a78b00" },
7+
{ label: "Red", value: "red", hexCode: "#ef4444" },
8+
{ label: "Orange", value: "orange", hexCode: "#f59e0b" },
9+
{ label: "Yellow", value: "yellow", hexCode: "#fcd34d" },
10+
{ label: "Green", value: "green", hexCode: "#10b981" },
11+
{ label: "Blue", value: "blue", hexCode: "#3b82f6" },
12+
{ label: "Violet", value: "violet", hexCode: "#8b5cf6" },
13+
{ label: "Gray", value: "gray", hexCode: "#6b7280" },
14+
{ label: "White", value: "white", hexCode: "#fff" },
15+
{ label: "Gold", value: "gold", hexCode: "#d1a038" },
16+
{ label: "Silver", value: "silver", hexCode: "#d8d8d8" },
1717
];
1818

1919
const toleranceColors = [
@@ -77,9 +77,20 @@ const calculateResistance = (colors) => {
7777
const value =
7878
(colorToValue(colors[0]) * 10 + colorToValue(colors[1])) *
7979
Math.pow(10, colorToValue(colors[2]));
80-
return value;
80+
const formattedValue = formatResistorValue(value);
81+
return formattedValue;
8182
};
8283

84+
function formatResistorValue(resistance) {
85+
const prefixes = ["", "k", "M", "G", "T", "P", "E"];
86+
let prefixIndex = 0;
87+
while (resistance >= 1000 && prefixIndex < prefixes.length - 1) {
88+
resistance /= 1000;
89+
prefixIndex++;
90+
}
91+
return `${resistance.toFixed(2)} ${prefixes[prefixIndex]}`;
92+
}
93+
8394
const calculateTolerance = (color) => {
8495
return toleranceToValue(color);
8596
};
@@ -89,98 +100,139 @@ export default function Home() {
89100
const [band2Color, setBand2Color] = useState("black");
90101
const [band3Color, setBand3Color] = useState("black");
91102
const [toleranceColor, setToleranceColor] = useState("brown");
103+
const [selectedColors, setSelectedColors] = useState({
104+
color1: "#1f2937",
105+
color2: "#1f2937",
106+
color3: "#1f2937",
107+
color4: "#a78b00",
108+
});
92109

93110
const resistance = calculateResistance([band1Color, band2Color, band3Color]);
94111
const tolerance = calculateTolerance(toleranceColor);
95112

113+
function handleColorChange(event) {
114+
const value = event.target.value;
115+
const name = event.target.name;
116+
const color = colors.find((c) => c.value === value);
117+
setSelectedColors((prevState) => ({
118+
...prevState,
119+
[name]: color.hexCode,
120+
}));
121+
}
122+
96123
return (
97-
<div className="container mx-auto py-8">
124+
<div className="flex flex-col p-4">
98125
<Head>
99126
<title>Resistor Calculator</title>
100127
<link rel="icon" href="/favicon.ico" />
101128
</Head>
102129

103-
<h1 className="text-3xl font-bold mb-8">Resistor Calculator</h1>
104-
105-
<div className="flex mb-4">
106-
<div className="w-1/4">
130+
<div className="flex flex-col gap-2 py-2 w-fit">
131+
<div className="flex text-3xl font-bold">Resistor Calculator</div>
132+
</div>
133+
<div className="flex flex-col md:flex-row gap-4 py-4 w-full border border-slate-100 rounded shadow p-2 my-2">
134+
<div className="md:w-1/4">
107135
<label className="block text-gray-700 font-bold mb-2">
108136
Band 1 Color
109137
</label>
110138
<select
139+
name="color1"
111140
value={band1Color}
112-
onChange={(e) => setBand1Color(e.target.value)}
113-
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
141+
onChange={(e) => {
142+
setBand1Color(e.target.value);
143+
handleColorChange(e);
144+
}}
145+
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded-t shadow leading-tight focus:outline-none focus:shadow-outline border-b-0"
114146
>
115147
{colors.map((color) => (
116148
<option key={color.value} value={color.value}>
117149
{color.label}
118150
</option>
119151
))}
120152
</select>
153+
<div
154+
className="h-1 my-0 rounded-b"
155+
style={{ backgroundColor: selectedColors.color1 }}
156+
></div>
121157
</div>
122-
<div className="w-1/4">
158+
<div className="md:w-1/4">
123159
<label className="block text-gray-700 font-bold mb-2">
124160
Band 2 Color
125161
</label>
126162
<select
163+
name="color2"
127164
value={band2Color}
128-
onChange={(e) => setBand2Color(e.target.value)}
129-
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
165+
onChange={(e) => {
166+
setBand2Color(e.target.value);
167+
handleColorChange(e);
168+
}}
169+
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded-t shadow leading-tight focus:outline-none focus:shadow-outline border-b-0"
130170
>
131171
{colors.map((color) => (
132172
<option key={color.value} value={color.value}>
133173
{color.label}
134174
</option>
135175
))}
136176
</select>
177+
<div
178+
className="h-1 my-0 rounded-b"
179+
style={{ backgroundColor: selectedColors.color2 }}
180+
></div>
137181
</div>
138-
<div className="w-1/4">
182+
<div className="md:w-1/4">
139183
<label className="block text-gray-700 font-bold mb-2">
140184
Band 3 Color
141185
</label>
142186
<select
187+
name="color3"
143188
value={band3Color}
144-
onChange={(e) => setBand3Color(e.target.value)}
145-
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
189+
onChange={(e) => {
190+
setBand3Color(e.target.value);
191+
handleColorChange(e);
192+
}}
193+
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded-t shadow leading-tight focus:outline-none focus:shadow-outline border-b-0"
146194
>
147195
{colors.map((color) => (
148196
<option key={color.value} value={color.value}>
149197
{color.label}
150198
</option>
151199
))}
152200
</select>
201+
<div
202+
className="h-1 my-0 rounded-b"
203+
style={{ backgroundColor: selectedColors.color3 }}
204+
></div>
153205
</div>
154-
<div className="w-1/4">
206+
<div className="md:w-1/4">
155207
<label className="block text-gray-700 font-bold mb-2">
156208
Tolerance
157209
</label>
158210
<select
211+
name="color4"
159212
value={toleranceColor}
160-
onChange={(e) => setToleranceColor(e.target.value)}
161-
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
213+
onChange={(e) => {
214+
setToleranceColor(e.target.value);
215+
handleColorChange(e);
216+
}}
217+
className="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded-t shadow leading-tight focus:outline-none focus:shadow-outline border-b-0"
162218
>
163219
{toleranceColors.map((color) => (
164220
<option key={color.value} value={color.value}>
165221
{color.label}
166222
</option>
167223
))}
168224
</select>
225+
<div
226+
className="h-1 my-0 rounded-b"
227+
style={{ backgroundColor: selectedColors.color4 }}
228+
></div>
169229
</div>
170230
</div>
171231

172-
<div className="flex items-center justify-center mb-8">
173-
<div className="bg-gray-400 h-2 w-48 mr-2"></div>
174-
<div className={`bg-${band1Color} h-2 w-16 mr-2`}></div>
175-
<div className={`bg-${band2Color} h-2 w-16 mr-2`}></div>
176-
<div className={`bg-${band3Color} h-2 w-16 mr-2`}></div>
177-
<div className={`bg-${toleranceColor} h-2 w-16`}></div>
178-
</div>
179-
180-
<div className="flex justify-between">
232+
<div className="flex justify-between border border-slate-100 rounded shadow p-2 my-2">
181233
<div className="flex-1 pr-4">
182234
<div className="text-gray-700 font-bold mb-2">Resistance</div>
183-
<div className="text-3xl font-bold">{resistance.toFixed(2)} Ω</div>
235+
<div className="text-3xl font-bold">{resistance}Ω</div>
184236
</div>
185237
<div className="flex-1">
186238
<div className="text-gray-700 font-bold mb-2">Tolerance</div>

‎public/favicon.ico

-10.3 KB
Binary file not shown.

‎public/favicon.png

1.47 KB
Loading

‎public/next.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/thirteen.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/vercel.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎styles/globals.css

Lines changed: 0 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,3 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4-
:root {
5-
--max-width: 1100px;
6-
--border-radius: 12px;
7-
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
8-
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
9-
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
10-
11-
--foreground-rgb: 0, 0, 0;
12-
--background-start-rgb: 214, 219, 220;
13-
--background-end-rgb: 255, 255, 255;
14-
15-
--primary-glow: conic-gradient(
16-
from 180deg at 50% 50%,
17-
#16abff33 0deg,
18-
#0885ff33 55deg,
19-
#54d6ff33 120deg,
20-
#0071ff33 160deg,
21-
transparent 360deg
22-
);
23-
--secondary-glow: radial-gradient(
24-
rgba(255, 255, 255, 1),
25-
rgba(255, 255, 255, 0)
26-
);
27-
28-
--tile-start-rgb: 239, 245, 249;
29-
--tile-end-rgb: 228, 232, 233;
30-
--tile-border: conic-gradient(
31-
#00000080,
32-
#00000040,
33-
#00000030,
34-
#00000020,
35-
#00000010,
36-
#00000010,
37-
#00000080
38-
);
39-
40-
--callout-rgb: 238, 240, 241;
41-
--callout-border-rgb: 172, 175, 176;
42-
--card-rgb: 180, 185, 188;
43-
--card-border-rgb: 131, 134, 135;
44-
}
45-
46-
@media (prefers-color-scheme: dark) {
47-
:root {
48-
--foreground-rgb: 255, 255, 255;
49-
--background-start-rgb: 0, 0, 0;
50-
--background-end-rgb: 0, 0, 0;
51-
52-
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
53-
--secondary-glow: linear-gradient(
54-
to bottom right,
55-
rgba(1, 65, 255, 0),
56-
rgba(1, 65, 255, 0),
57-
rgba(1, 65, 255, 0.3)
58-
);
59-
60-
--tile-start-rgb: 2, 13, 46;
61-
--tile-end-rgb: 2, 5, 19;
62-
--tile-border: conic-gradient(
63-
#ffffff80,
64-
#ffffff40,
65-
#ffffff30,
66-
#ffffff20,
67-
#ffffff10,
68-
#ffffff10,
69-
#ffffff80
70-
);
71-
72-
--callout-rgb: 20, 20, 20;
73-
--callout-border-rgb: 108, 108, 108;
74-
--card-rgb: 100, 100, 100;
75-
--card-border-rgb: 200, 200, 200;
76-
}
77-
}
78-
79-
* {
80-
box-sizing: border-box;
81-
padding: 0;
82-
margin: 0;
83-
}
84-
85-
html,
86-
body {
87-
max-width: 100vw;
88-
overflow-x: hidden;
89-
}
90-
91-
body {
92-
color: rgb(var(--foreground-rgb));
93-
background: linear-gradient(
94-
to bottom,
95-
transparent,
96-
rgb(var(--background-end-rgb))
97-
)
98-
rgb(var(--background-start-rgb));
99-
}
100-
101-
a {
102-
color: inherit;
103-
text-decoration: none;
104-
}
105-
106-
@media (prefers-color-scheme: dark) {
107-
html {
108-
color-scheme: dark;
109-
}
110-
}

0 commit comments

Comments
 (0)