toggle switch

frontend/src/components/homepage/contact4.js

@@ -28,6 +28,8 @@ const Contact4 = (props) => {
                 {props.email1}
                 <div></div>
                 {props.email2}
+                <div></div>
+                {props.email3}
               </span>
             </div>
           </div>
@@ -74,6 +76,7 @@ const Contact4 = (props) => {
 Contact4.defaultProps = {
   email1: '22kaen1bdi@hft-stuttgart.de',
   email2: '22wela1bdi@hft-stuttgart.de',
+  email3: '92mean1bil@hft-stuttgart.de',
   content2: 'Get in touch with us today!',
   address1: 'Schellingstraße 24, 70174 Stuttgart, Germany',
   heading1: 'Contact Us',

frontend/src/components/homepage/features_about3.css

+.features17-layout349 {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    align-items: center;
+    flex-direction: column;
+  }
+  .features17-max-width {
+    gap: var(--dl-space-space-fiveunits);
+    display: flex;
+    align-items: center;
+  }
+  .features17-image-container {
+    flex: 1;
+    display: flex;
+    position: relative;
+    align-items: center;
+  }
+  .features17-content {
+    gap: var(--dl-space-space-oneandhalfunits);
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .features17-section-title {
+    gap: var(--dl-space-space-oneandhalfunits);
+    display: flex;
+    align-self: stretch;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .features17-content1 {
+    gap: var(--dl-space-space-oneandhalfunits);
+    display: flex;
+    align-self: stretch;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  @media(max-width: 991px) {
+    .features17-max-width {
+      gap: var(--dl-space-space-twounits);
+      flex-direction: column;
+    }
+  }
+  
\ No newline at end of file

frontend/src/components/homepage/features_about3.js

+import React from "react";
+
+import PropTypes from "prop-types";
+
+import "./features_about3.css";
+
+const Features_about3 = (props) => {
+  return (
+    <div className="features17-layout349 thq-section-padding">
+      <div className="features17-max-width thq-section-max-width">
+        <div className="features17-image-container">
+          <img
+            alt={props.feature3ImageAlt}
+            src="/external/ClimateChange.jpg"
+            className="thq-img-ratio-16-9"
+          />
+        </div>
+        <div className="features17-content">
+          <div className="features17-section-title">
+            <span className="thq-body-small">{props.feature3Slogan}</span>
+            <div className="features17-content1">
+              <h2 className="thq-heading-2">{props.feature3Title}</h2>
+              <p className="thq-body-large">{props.feature3Description}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Features_about3.defaultProps = {
+  feature3Title: "Climate Change",
+  feature3ImageSrc: "/external/ClimateChange.jpg",
+  feature3ImageAlt: "Accurate Weather Forecast Image",
+  feature3Description:
+    "We need to address climate change because its impacts threaten the health and stability of our planet and society. Rising temperatures lead to more extreme weather events, such as hurricanes, floods, and heatwaves, which can cause widespread destruction and loss of life. Melting ice caps and rising sea levels endanger coastal communities and ecosystems. Changes in weather patterns disrupt agriculture, jeopardizing food security. Additionally, the loss of biodiversity and natural habitats can have irreversible consequences on our environment. By taking action to mitigate climate change, we can protect our planet for future generations, ensure sustainable development, and enhance the resilience of communities worldwide.",
+};
+
+Features_about3.propTypes = {
+  feature3Title: PropTypes.string,
+  feature3ImageSrc: PropTypes.string,
+  feature3ImageAlt: PropTypes.string,
+  feature3Description: PropTypes.string,
+};
+
+export default Features_about3;

frontend/src/components/weather/currentData.js

@@ -165,6 +165,9 @@ const Currentdata = (props) => {
           <h1>Choose your custom output Data</h1>
           <br />
         </div>
+        <div>
+        <button className="thq-button-filled" onClick={toggleCheckboxes}>Toggle Checkboxes</button>
+        </div>
         <div className="dataselect">
           <div class="data">
             <div class="h3">
@@ -359,9 +362,9 @@ const Currentdata = (props) => {
             <h3>Choose a unit</h3>
           </div>
           <select name="unnits" id="units">
-            <option value="world">Rest of The World</option>
+            <option value="world">Metric</option>
             <option value="american">
-              American units: /eagles per shool shootings
+              Emperial
             </option>
           </select>
         </div>
@@ -401,6 +404,13 @@ const Currentdata = (props) => {
     </div>
   );
 
+  function toggleCheckboxes() {
+    var checkboxes = document.querySelectorAll('.checkBoxFilter');
+    checkboxes.forEach(function(checkbox) {
+        checkbox.checked = !checkbox.checked;
+    });
+}
+
   function getData() {
     //switch
     const units = document.getElementById("units").value;

frontend/src/components/weather/historicalWeatherData.js

@@ -194,6 +194,9 @@ const HistoricalWeatherData = (props) => {
           <h1>Choose your custom output Data</h1>
           <br />
         </div>
+        <div>
+        <button className="thq-button-filled" onClick={toggleCheckboxes}>Toggle Checkboxes</button>
+        </div>
         <div className="dataselect">
           <div class="data">
             <div class="h3">
@@ -371,6 +374,14 @@ const HistoricalWeatherData = (props) => {
       </div>
     </div>
   );
+
+  function toggleCheckboxes() {
+    var checkboxes = document.querySelectorAll('.checkBoxFilter');
+    checkboxes.forEach(function(checkbox) {
+        checkbox.checked = !checkbox.checked;
+    });
+}
+
   function getData() {
     const city_text = document.getElementById("city_text").value;
     const region_text = document.getElementById("region_text").value;

frontend/src/components/weather/weatherForecastData.js

@@ -176,6 +176,9 @@ const WeatherForecastData = (props) => {
           <h1>Choose your custom output Data</h1>
           <br />
         </div>
+        <div>
+        <button className="thq-button-filled" onClick={toggleCheckboxes}>Toggle Checkboxes</button>
+        </div>
         <div className="dataselect">
           <div class="data">
             <div class="h3">
@@ -268,7 +271,7 @@ const WeatherForecastData = (props) => {
           </div>
           <div class="data">
             <div class="h3">
-              <h3>Dayly Data</h3>
+              <h3>Daily Data</h3>
             </div>
 
             <input
@@ -433,7 +436,7 @@ const WeatherForecastData = (props) => {
             id="days"
             name="days"
             min="1"
-            max="7"
+            max="14"
             value={sliderValue}
             onChange={handleSliderChange}
           />
@@ -444,9 +447,9 @@ const WeatherForecastData = (props) => {
             <h3>Choose a Unit</h3>
           </div>
           <select name="unnits" id="units">
-            <option value="world">Rest of The World</option>
+            <option value="world">Metric</option>
             <option value="american">
-              American units: /eagles per shool shootings
+              Emperial
             </option>
           </select>
         </div>
@@ -485,6 +488,13 @@ const WeatherForecastData = (props) => {
       </div>
     </div>
   );
+  function toggleCheckboxes() {
+    var checkboxes = document.querySelectorAll('.checkBoxFilter');
+    checkboxes.forEach(function(checkbox) {
+        checkbox.checked = !checkbox.checked;
+    });
+}
+
 
   function getData() {
     const units = document.getElementById("units").value;
@@ -564,7 +574,9 @@ const WeatherForecastData = (props) => {
     const hour_gust = document.getElementById("hour_gust").checked;
     const hour_uv = document.getElementById("hour_uv").checked;
 
+
     let filterArray = [];
+    
 
     if (name) filterArray.push("name");
     if (regionCheckbox) filterArray.push("region");

frontend/src/views/about.js

@@ -4,6 +4,7 @@ import Navbar4 from "../components/homepage/navbar4";
 import Footer15 from "../components/homepage/footer15";
 import Features_about1 from "../components/homepage/features_about1";
 import Features_about2 from "../components/homepage/features_about2";
+import Features_about3 from "../components/homepage/features_about3";
 import "./home.css";
 
 const About = (props) => {
@@ -20,6 +21,9 @@ const About = (props) => {
       <div className="home-features6">
         <Features_about2></Features_about2>
       </div>
+      <div className="home-features6">
+        <Features_about3></Features_about3>
+      </div>
       <div className="home-footer11">
         <Footer15></Footer15>
       </div>