css

frontend/src/components/weather/currentData.css

@@ -4,6 +4,7 @@
 }
 
 .filter input[type="text"],
+
 .filter select {
   width: 100%;
   padding: 8px;
@@ -44,39 +45,43 @@
 #apiUrloutput {
   width: 1250px;
 }
-.list-container {
-  width: 300px;
-  margin: 20px auto;
-  font-family: Arial, sans-serif;
+.field_write{
+margin-top: 30px;
+display: flex;
+flex-direction: row;
 }
-
-.list-item {
-  border: 1px solid #ccc;
-  margin: 10px 0;
-  padding: 10px;
-  border-radius: 5px;
-  transition: background-color 0.3s;
-  cursor: pointer;
+.fw{
+  margin-left:20px;
 }
-
-.list-item:hover {
-  background-color: #f0f0f0;
+.h1{
+ margin-bottom: -30px;
 }
-
-.title {
-  font-size: 18px;
-  font-weight: bold;
+.thq-grid-5{
+  display: flex;
+  flex-direction: column;
 }
-
-.subtitle {
-  font-size: 14px;
-  color: #666;
+.h2{
+  margin-top: 40px;
 }
+.location{
+  margin-top: 40px;
+}
+.time{
+  margin-top:40px;
+  margin-left:80px;
+}
+.dataselect{
+  display: flex;
+  flex-direction: row;
 
-.APIButton {
-  display: block;
-  margin: 10px auto;
-  padding: 10px 20px;
-  font-size: 16px;
-  cursor: pointer;
+}
+.data{
+  margin-top:40px;
+  margin-left:80px;
+}
+.h3{
+  margin-bottom: 10px;
+}
+.generate{
+  margin-top: 20px;
 }
\ No newline at end of file

frontend/src/components/weather/currentData.js

@@ -17,7 +17,12 @@ const Currentdata = (props) => {
     <div className="home-container">
       <div>
         <div className="thq-grid-5">
-          <div class="filter">
+          <div class="h1">
+          <h1>Choose your City</h1>
+          <br />
+          </div>
+          <div class="field_write">
+            <div class="fw">
             <label htmlFor="location">Location:</label>
             <input
               type="text"
@@ -36,20 +41,33 @@ const Currentdata = (props) => {
                 lon={item.lon}
               />
             ))}
-            <br />
+            </div>
+            <div class="fw"> 
             <label for="region">Region:</label>
             <input type="text" id="region_text" placeholder="Region" />
-            <br />
+            </div>
+            <div class="fw">      
             <label>Country:</label>
             <input type="text" id="country_text" placeholder="Country" />
-            <br />
+            </div>
+            <div class="fw">   
             <label>Latitude:</label>
             <input type="text" id="latitude_text" placeholder="Latitude" />
+            </div>
+            <div class="fw">
             <label>Longitude:</label>
             <input type="text" id="longitude_text" placeholder="Longitude" />
-            <br />
             </div>
-          <div>
+          </div>
+        </div>
+        <div class="h2">
+        <h2>Choose the variables you want.</h2>
+        </div>
+        <div className="dataselect">
+        <div class="location">
+        <div class="h3">
+        <h3>Location</h3>
+        </div>
           <input type="checkbox" id="name" className="checkBoxFilter" />
           <label> City Name</label>
           <br />
@@ -65,6 +83,11 @@ const Currentdata = (props) => {
           <input type="checkbox" id="lat" className="checkBoxFilter" />
           <label> Latitude</label>
           <br />
+          </div>
+          <div class="time">
+          <div class="h3">
+          <h3>Time</h3>
+          </div>
           <input type="checkbox" id="tz_id" className="checkBoxFilter" />
           <label> Timezone Id</label>
           <br />
@@ -92,29 +115,26 @@ const Currentdata = (props) => {
           />
           <label> Last Updated</label>
           <br />
+          </div>
+          <div class="data">
+          <div class="h3">
+          <h3>Temperature</h3>
+          </div>
           <input type="checkbox" id="temp" className="checkBoxFilter" />
           <label for="temp">Temp</label>
           <br />
           <input type="checkbox" id="id_day" className="checkBoxFilter" />
           <label for="id_day">ID Day</label>
           <br />
-            <input
-              type="checkbox"
-              id="condition_text"
-              className="checkBoxFilter"
-            />
+          <input type="checkbox"id="condition_text"className="checkBoxFilter"/>
           <label for="condition">Condition Text</label>
           <br />
-            <input
-              type="checkbox"
-              id="condition"
-              className="checkBoxFilter"
-            />
-            <input
-              type="checkbox"
-              id="wind_degree"
-              className="checkBoxFilter"
-            />
+          </div>
+          <div class="data">
+          <div class="h3">
+          <h3>Wind</h3>
+          </div>
+          <input type="checkbox" id="wind_degree" className="checkBoxFilter" />
           <label for="wind_degree">Wind Degree</label>
           <br />
           <input type="checkbox" id="wind_dir" className="checkBoxFilter" />
@@ -132,6 +152,11 @@ const Currentdata = (props) => {
           <input type="checkbox" id="cloud" className="checkBoxFilter" />
           <label for="cloud">Cloud</label>
           <br />
+          </div>
+          <div class="data">
+          <div class="h3">
+          <h3>Temperature</h3>
+          </div>
           <input type="checkbox" id="feelslike" className="checkBoxFilter" />
           <label for="feelslike">Feelslike</label>
           <br />
@@ -153,6 +178,11 @@ const Currentdata = (props) => {
           <input type="checkbox" id="gust" className="checkBoxFilter" />
           <label for="gust">Gust </label>
           <br />
+          </div>
+          <div class="data">
+          <div class="h3">
+          <h3>Air Quality</h3>
+          </div>
           <input
             type="checkbox"
             id="air_quality_co"
@@ -209,6 +239,8 @@ const Currentdata = (props) => {
           />
           <label for="air_quality_gb_defra_index">GB DEFRA Index</label>
           <br />
+          </div>
+          </div>
         <div>
           <label for="units">Choose a unit:</label>
           <select name="unnits" id="units">
@@ -218,7 +250,7 @@ const Currentdata = (props) => {
             </option>
           </select>
         </div>
-            <div>
+        <div class="generate">
           <button className="thq-button-filled" onClick={getData}>
             Generate
           </button>
@@ -238,8 +270,6 @@ const Currentdata = (props) => {
           <br />
       </div>
     </div>
-      </div>
-    </div>
   );
 
   function getData() {