Merge pull request #59 from Rajneesh2223/feature/AmazingFeature

added clear button beside submit button
surajondev · Oct 17, 2023 · dc99929 · dc99929
2 parents a3f27c7 + f04b78d
commit dc99929
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 20 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,8 @@ import 'react-toastify/dist/ReactToastify.css';
 class App extends React.Component {
   constructor() {
     super();
+
+
     this.state = {
       city_name: "london",
       error: false,
@@ -23,6 +25,7 @@ class App extends React.Component {
     };
     this.city = this.city.bind(this);
     this.submit = this.submit.bind(this);
+    this.clearInput = this.clearInput.bind(this);
     this.componentWillMount = this.componentWillMount.bind(this);
     this.closeToasterMessage = this.closeToasterMessage.bind(this);
   }
@@ -48,6 +51,11 @@ class App extends React.Component {
     e.preventDefault();
     this.componentWillMount();
   }
+  clearInput() {
+    this.setState({
+      city_name: "",
+    });
+  }
 
   componentWillMount() {
     document.body.style.filter = "blur(0px)";
@@ -117,6 +125,9 @@ class App extends React.Component {
           <button className="submit-button" onClick={this.submit}>
             <p className="p-submit">SUBMIT</p>
           </button>
+          <button className="clear-button" onClick={this.clearInput}>
+            Clear
+          </button>
         </form>
         <Appcontainer
           temp={this.state.temp}

diff --git a/src/Footer.js b/src/Footer.js
@@ -1,19 +1,20 @@
-import React from "react"
-import "./index.css"
+import React from "react";
+import "./index.css";
 
-function Footer(){
-    return(
-        <footer>
-            <div className="container">
-                <center>
-                    <p className="p-footer">Made with the ❤️ by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
-                    <p className="p-footer">Made with <span role="img" aria-labelledby="love">❤️</span> by <a href="https://github.com/surajondev">Suraj Vishwakarma</a></p>
-                    <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
-                </center>
-            </div>
-        </footer>
-    )
-}
+function Footer() {
+  const year = new Date().getFullYear();
 
-export default Footer
+  return (
+    <footer>
+      <div className="container">
+        <center>
+
+          <p className="p-footer">Source <a href="https://openweathermap.org/">OpenWeather</a></p>
+          <p  className='footer1' id="copyright">© {year} MADE WITH ❤️ BY SURAJ VISHWAKARMA</p>
+        </center>
+      </div>
+    </footer>
+  );
+}
 
+export default Footer;
diff --git a/src/Header.js b/src/Header.js
@@ -1,11 +1,14 @@
 import React from "react";
 import "./index.css";
+import {TiWeatherSunny} from 'react-icons/ti'
 
 function Header() {
   return (
     <header>
       <div className="container ui block header">
-        <h1 className="title">GET WEATHER <span role="img" aria-labelledby="weather">💨</span></h1>
+      <h1 className="title">
+    GET WEATHER <span className="logo"><TiWeatherSunny/></span>
+  </h1>
       </div>
     </header>
   );

diff --git a/src/index.css b/src/index.css
@@ -17,10 +17,15 @@ footer {
   color: white;
   background-color: #192733;
   padding: 1.5rem;
+
+  text-align: center;
 }
 
+
+
 header {
   margin-bottom: 2rem;
+
 }
 
 footer {
@@ -40,13 +45,21 @@ a:hover {
   width: 90%;
   max-width: 1110px;
   margin: 0 auto;
+
 }
 
 /* TYPOGRAPHY */
 .title {
-  font-size: 2.5rem;
-  font-weight: 20px;
-  padding-left: 0.6rem;
+  font-size: 3rem;
+  font-weight: 24px;
+  padding-left: 0.rem;
+  font-family:Arial, Helvetica, sans-serif  
+}
+.logo{
+  font-size: 50px;
+  vertical-align: middle;
+  margin-left: 10px; 
+
 }
 
 h2 {
@@ -96,6 +109,18 @@ p {
   padding: 0 2rem;
   cursor: pointer;
 }
+.clear-button{
+   font-size:17px ;
+  margin-top: 1rem;
+  margin-left: 1rem;
+  font-family: Arial, sans-serif;
+  background-color: #7c77fe;
+  border-radius: 10em;
+  padding: 1.1rem 2rem;
+  cursor: pointer;
+  color: white;
+
+}
 
 .cancel-button {
   color: white;
@@ -109,6 +134,12 @@ p {
   justify-content: center;
 }
 
+
+.clear-button:hover {
+  background-color: #6c7077;
+}
+
+
 .submit-button:hover {
   background-color: #6c7077;
 }
@@ -271,3 +302,6 @@ p {
     transform: rotate(360deg);
   }
 }
+.footer1{
+  font-size: 20px;
+}