Skip to content

Commit b7376db

Browse files
metkerrmetkerr
committed
update responsive styling
1 parent c79880f commit b7376db

File tree

3 files changed

+94
-68
lines changed

3 files changed

+94
-68
lines changed

‎src/App.jsx

+83-67
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ function App() {
1212
const [ipData, setIpData] = useState({});
1313
const [searchIP, setSearchIP] = useState("");
1414
const [latlang, setLatlang] = useState([-6.1752, 106.8272]);
15+
const [errorMsg, seterrorMsg] = useState();
1516

1617
useEffect(() => {
1718
//this web app is built for learning & experimenting purposes, therefore this kind of API request is strongly NOT recommended due to exposing the API key to the client, please consider using a server-side request for an API request that requires an API KEY.
@@ -26,10 +27,13 @@ function App() {
2627
? `domain=${searchIP}`
2728
: `ipAddress=${searchIP}`
2829
}`
29-
).then((res) => {
30-
setIpData(res.data);
31-
setLatlang([res.data.location?.lat, res.data.location?.lng]);
32-
});
30+
)
31+
.then((res) => {
32+
setIpData(res.data);
33+
setLatlang([res.data.location?.lat, res.data.location?.lng]);
34+
seterrorMsg("");
35+
})
36+
.catch((err) => seterrorMsg(err?.message));
3337
}, 500);
3438

3539
return () => clearTimeout(timer);
@@ -55,78 +59,90 @@ function App() {
5559
});
5660

5761
return (
58-
<div id="App">
59-
<header
60-
className="h-76 bg-cover bg-center flex container"
61-
style={{ backgroundImage: `url(${patternBg})` }}
62-
>
62+
<div id="App" className="min-w-min">
63+
<header className="sm:flex">
6364
<div
64-
id="header-wrapper"
65-
className="m-auto mt-7 flex flex-col w-full mx-6"
65+
id="header-container"
66+
className="h-76 bg-cover bg-bottom flex sm:w-full sm:h-64"
67+
style={{ backgroundImage: `url(${patternBg})` }}
6668
>
67-
<h1 className="text-white text-2.5xl font-medium tracking-wide mx-auto mb-7">
68-
IP Adress Tracker
69-
</h1>
7069
<div
71-
id="search-input-wrapper"
72-
className="bg-white rounded-2xl w-full flex"
73-
>
74-
<input
75-
type="search"
76-
className="grow rounded-2xl px-6 text-lg"
77-
placeholder="Search for any IP address or domain"
78-
value={searchIP}
79-
onChange={(e) => setSearchIP(e.target.value)}
80-
/>
81-
<button className="font-bold h-full bg-black text-white px-6 py-5.5 rounded-r-2xl text-xl">
82-
<img src={searchArrow} alt="search arrow button" />
83-
</button>
84-
</div>
85-
<div
86-
id="details-wrapper"
87-
className="rounded-2xl flex bg-white mt-6 shadow-md"
88-
style={{ zIndex: 9999 }}
70+
id="header-wrapper"
71+
className="m-auto mt-7 flex flex-col w-full mx-6 sm:container sm:mx-auto"
8972
>
73+
<h1 className="text-white text-2.5xl font-medium tracking-wide mx-auto mb-7 sm:text-3xl sm:mt-2.5">
74+
IP Adress Tracker
75+
</h1>
76+
<div
77+
id="search-input-wrapper"
78+
className="bg-white rounded-2xl w-full flex sm:w-128 sm:mx-auto"
79+
>
80+
<input
81+
type="search"
82+
className="grow rounded-2xl px-6 text-lg"
83+
placeholder="Search for any IP address or domain"
84+
value={searchIP}
85+
onChange={(e) => setSearchIP(e.target.value)}
86+
/>
87+
<button className="font-bold h-full bg-black text-white px-6 py-5.5 rounded-r-2xl text-xl">
88+
<img src={searchArrow} alt="search arrow button" />
89+
</button>
90+
</div>
91+
<p className="pt-1 text-center font-semibold text-white text-red-300">
92+
{errorMsg && `*${errorMsg}`}
93+
</p>
9094
<div
91-
id="details"
92-
className="rounded-2xl bg-white p-7 flex flex-col mx-auto text-center gap-3.5 font-semibold text-very-dark-gray tracking-wide"
95+
id="details-wrapper"
96+
className="rounded-2xl flex bg-white mt-6 shadow-md sm:w-11/12 sm:mx-auto"
97+
style={{ zIndex: 9999 }}
9398
>
94-
<div id="ip-address-wrapper">
95-
<h3 className="text-2xs text-dark-gray tracking-x-wide pb-1.5">
96-
IP ADDRESS
97-
</h3>
98-
<div className="text-xl" id="ip-address">
99-
{ipData?.ip || "Unknown"}
99+
<div
100+
id="details"
101+
className="rounded-2xl bg-white p-7 flex flex-col mx-auto text-center gap-3.5 font-semibold text-very-dark-gray tracking-wide sm:flex-row sm:text-left sm:justify-between sm:w-full sm:m-1 sm:my-2"
102+
>
103+
<div id="ip-address-wrapper">
104+
<h3 className="text-2xs text-dark-gray tracking-x-wide pb-1.5">
105+
IP ADDRESS
106+
</h3>
107+
<div className="text-xl" id="ip-address">
108+
{ipData?.ip || "Unknown"}
109+
</div>
100110
</div>
101-
</div>
102-
<div id="location-wrapper">
103-
<h3 className="text-2xs text-dark-gray tracking-x-wide pb-1.5">
104-
LOCATION
105-
</h3>
106-
<div className="text-xl" id="location">
107-
{`${ipData?.location?.city || ""} ${
108-
ipData.location?.country ? "," : ""
109-
} ${ipData?.location?.country || "Unknown"} ${
110-
ipData?.location?.postalCode || ""
111-
}`}
111+
<div
112+
id="location-wrapper"
113+
className="sm:border-l-2 sm:pl-6 sm:py-2"
114+
>
115+
<h3 className="text-2xs text-dark-gray tracking-x-wide pb-1.5">
116+
LOCATION
117+
</h3>
118+
<div className="text-xl" id="location">
119+
{`${ipData?.location?.city || ""} ${
120+
ipData.location?.country ? "," : ""
121+
} ${ipData?.location?.country || "Unknown"} ${
122+
ipData?.location?.postalCode || ""
123+
}`}
124+
</div>
112125
</div>
113-
</div>
114-
<div id="timezone-wrapper">
115-
<h3 className="text-2xs text-dark-gray tracking-x-wide pb-1.5">
116-
TIMEZONE
117-
</h3>
118-
<div className="text-xl" id="timezone">
119-
{ipData.location?.timezone
120-
? `UTC${ipData.location.timezone}`
121-
: "Unknown"}
126+
<div
127+
id="timezone-wrapper"
128+
className="sm:border-l-2 sm:pl-6 sm:py-2"
129+
>
130+
<h3 className="text-2xs text-dark-gray tracking-x-wide pb-1.5">
131+
TIMEZONE
132+
</h3>
133+
<div className="text-xl" id="timezone">
134+
{ipData.location?.timezone
135+
? `UTC${ipData.location.timezone}`
136+
: "Unknown"}
137+
</div>
122138
</div>
123-
</div>
124-
<div id="isp-wrapper">
125-
<h3 className="text-2xs text-dark-gray tracking-x-wide pb-1.5">
126-
ISP
127-
</h3>
128-
<div className="text-xl" id="isp">
129-
{ipData.isp ? ipData.isp : "Unknown"}
139+
<div id="isp-wrapper" className="sm:border-l-2 sm:pl-6 sm:py-2">
140+
<h3 className="text-2xs text-dark-gray tracking-x-wide pb-1.5">
141+
ISP
142+
</h3>
143+
<div className="text-xl" id="isp">
144+
{ipData.isp ? ipData.isp : "Unknown"}
145+
</div>
130146
</div>
131147
</div>
132148
</div>

‎src/index.css

+7-1
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,10 @@ body{
1414

1515
#map-wrapper{
1616
height: calc(100vh - 19rem);
17-
}
17+
}
18+
19+
@media screen and (min-width: 640px) {
20+
#map-wrapper{
21+
height: calc((100vh - 16rem));
22+
}
23+
}

‎tailwind.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ module.exports = {
1010
height: {
1111
76: "19rem",
1212
},
13+
width: {
14+
128: "34rem",
15+
256: "72rem",
16+
},
1317
letterSpacing: {
1418
"x-wide": "0.17em",
1519
},

0 commit comments

Comments
 (0)