Skip to content

GitLab

Commit 6be17fe5 authored by Weiser's avatar Weiser
Browse files

csssss

parent c326d65d
Show whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.css
View file @ 6be17fe5
...@@ -22,6 +22,30 @@ ...@@ -22,6 +22,30 @@
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
display: grid;
text-align: center;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output { .output {
margin-top: 40px; margin-top: 40px;
......
frontend/src/components/weather/currentData.js
View file @ 6be17fe5
...@@ -301,8 +301,10 @@ const Currentdata = (props) => { ...@@ -301,8 +301,10 @@ const Currentdata = (props) => {
<br /> <br />
</div> </div>
</div> </div>
<div> <div class="fw1">
<label for="units">Choose a unit:</label> <div class="h3">
<h3>Choose a unit</h3>
</div>
<select name="unnits" id="units"> <select name="unnits" id="units">
<option value="world">Rest of The World</option> <option value="world">Rest of The World</option>
<option value="american"> <option value="american">
...@@ -312,20 +314,36 @@ const Currentdata = (props) => { ...@@ -312,20 +314,36 @@ const Currentdata = (props) => {
</div> </div>
<div class="generate"> <div class="generate">
<button className="thq-button-filled" onClick={getData}> <button className="thq-button-filled" onClick={getData}>
Generate Generate your data
</button> </button>
</div> </div>
<br /> <br />
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
<div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output"> <div class="output">
<h2>Output:</h2> <h2>Output:</h2>
<br /> <br />
<pre id="weatherData"></pre> <pre id="weatherData"></pre>
</div> </div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div> </div>
</div> </div>
); );
......
frontend/src/components/weather/historicalWeatherData.css
View file @ 6be17fe5
...@@ -22,6 +22,30 @@ ...@@ -22,6 +22,30 @@
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
display:grid;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output { .output {
margin-top: 40px; margin-top: 40px;
...@@ -67,6 +91,3 @@ display: flex; ...@@ -67,6 +91,3 @@ display: flex;
.h3{ .h3{
margin-bottom: 10px; margin-bottom: 10px;
} }
.generate{
margin-top: 20px;
}
\ No newline at end of file
frontend/src/components/weather/historicalWeatherData.js
View file @ 6be17fe5
...@@ -305,28 +305,35 @@ const HistoricalWeatherData = (props) => { ...@@ -305,28 +305,35 @@ const HistoricalWeatherData = (props) => {
</div> </div>
<button className="thq-button-filled" onClick={getData}> <button className="thq-button-filled" onClick={getData}>
Generate Generate your data
</button> </button>
<div class="output"> <div class="fw1">
<h2>Output:</h2> <div class="h3">
<br /> <h3>Choose a Fileformat</h3>
<pre id="weatherData"></pre>
</div> </div>
<label for="fileformat">Choose a File Format:</label>
<select name="fileformat" id="fileformat"> <select name="fileformat" id="fileformat">
<option value="json">JSON</option> <option value="json">JSON</option>
<option value="xml">XML</option> <option value="xml">XML</option>
<option value="csv">CSV</option> <option value="csv">CSV</option>
</select> </select>
</div>
<button className="thq-button-filled" onClick={downloadData}> <button className="thq-button-filled" onClick={downloadData}>
Download Download your data
</button> </button>
<div id="apiUrl"> <div id="apiUrl">
<label>API URL:</label> <div class="fw1">
<br /> <div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly /> <input className="input" type="text" id="apiUrloutput" readOnly />
</div> </div>
</div> </div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
</div>
</div> </div>
); );
function getData() { function getData() {
......
frontend/src/components/weather/weatherForecastData.css
View file @ 6be17fe5
...@@ -22,6 +22,30 @@ ...@@ -22,6 +22,30 @@
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.fw1 {
display: block;
margin-bottom: 5px;
}
.fw1 {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
display:grid;
text-align: center;
}
.fw1 {
padding: 10px 20px;
background-color: var(--dl-color-theme-primary1);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.output { .output {
margin-top: 40px; margin-top: 40px;
......
frontend/src/components/weather/weatherForecastData.js
View file @ 6be17fe5
...@@ -407,12 +407,17 @@ const WeatherForecastData = (props) => { ...@@ -407,12 +407,17 @@ const WeatherForecastData = (props) => {
<label for="alerts">Alerts</label> <label for="alerts">Alerts</label>
</div> </div>
</div> </div>
<div> <div class="fw1">
<label for="days">Days:</label> <div class="h3">
<h3>How many forecast days do you want?</h3>
</div>
<label for="days"></label>
<input type="range" id="days" name="days" min="1" max="7" /> <input type="range" id="days" name="days" min="1" max="7" />
</div> </div>
<div> <div class="fw1">
<label for="units">Choose a unit:</label> <div class="h3">
<h3>Choose a Unit</h3>
</div>
<select name="unnits" id="units"> <select name="unnits" id="units">
<option value="world">Rest of The World</option> <option value="world">Rest of The World</option>
<option value="american"> <option value="american">
...@@ -422,33 +427,35 @@ const WeatherForecastData = (props) => { ...@@ -422,33 +427,35 @@ const WeatherForecastData = (props) => {
</div> </div>
<div> <div>
<button className="thq-button-filled" onClick={getData}> <button className="thq-button-filled" onClick={getData}>
Generate Generate your data
</button> </button>
</div> </div>
<br /> <br />
<div class="output"> <div class="fw1">
<h2>Output:</h2> <div class="h3">
<br /> <h3>Choose a Fileformat</h3>
<pre id="weatherData"></pre>
</div> </div>
<label for="fileformat">Choose a File Format:</label>
<select name="fileformat" id="fileformat"> <select name="fileformat" id="fileformat">
<option value="json">JSON</option> <option value="json">JSON</option>
<option value="xml">XML</option> <option value="xml">XML</option>
<option value="csv">CSV</option> <option value="csv">CSV</option>
</select> </select>
</div>
<button className="thq-button-filled" onClick={downloadData}> <button className="thq-button-filled" onClick={downloadData}>
Download Download your data
</button> </button>
<div id="apiUrl"> <div id="apiUrl">
<label>API URL:</label> <div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br /> <br />
<input <pre id="weatherData"></pre>
className="input"
type="text"
id="apiUrloutput"
readOnly
/>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal