Merge pull request #61 from Abilash-3704/Abilash-HotCold

added animations

Author: Jayanti2919

Cold-Hot React/src/SeasonDisplay.css

@@ -1,29 +1,56 @@
 .icon-left {
-    position: absolute;
-    top: 10px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  animation-name: left;
+  animation-duration: 20s;
+  animation-iteration-count: infinite;
+}
+@keyframes left {
+  0% {
+    left: 10px;
+  }
+  50% {
+    left: 92%;
+  }
+  100% {
     left: 10px;
+  }
 }
 .icon-right {
-    position: absolute;
-    bottom: 10px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  animation-name: right;
+  animation-duration: 20s;
+  animation-iteration-count: infinite;
+}
+@keyframes right {
+  0% {
     right: 10px;
-
+  }
+  50% {
+    right: 92%;
+  }
+  100% {
+    right: 10px;
+  }
 }
 .season-display.winter i {
-    color: blue;
+  color: blue;
 }
 .season-display.summer i {
-    color: red;
+  color: red;
 }
 .season-display {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
 .winter {
-    background-color: aliceblue;
+  background-color: aliceblue;
 }
 .summer {
-    background-color: orange;
-}
+  background-color: orange;
+}

Cold-Hot React/src/SeasonDisplay.js

@@ -1,34 +1,31 @@
 import './SeasonDisplay.css';
-import React from "react";
-const seasonConfig={
-    summer: {
-        text:"Bhai bohot garmi hai",
-        iconName: "sun"
-    },
-    winter: {
-        text: "Bhai bohot thand hai",
-        iconName: "snowflake"
-    }
-
+import React from 'react';
+const seasonConfig = {
+  summer: {
+    text: 'Bhai bohot garmi hai',
+    iconName: 'sun',
+  },
+  winter: {
+    text: 'Bhai bohot thand hai',
+    iconName: 'snowflake',
+  },
 };
-const getSeason = (lat,month)=>{
-    if(month>2 && month<9)
-    {
-        return lat > 0 ? 'summer': 'winter';
-    }else
-    {
-        return lat > 0 ? 'winter': 'summer';
-    }
+const getSeason = (lat, month) => {
+  if (month > 2 && month < 9) {
+    return lat > 0 ? 'summer' : 'winter';
+  } else {
+    return lat > 0 ? 'winter' : 'summer';
+  }
 };
-const SeasonDisplay =(props) => {
-    const season  = getSeason(props.lat, new Date().getMonth());
-    const {text,iconName} =seasonConfig[season];
-    return(
-        <div className={`season-display ${season}`}>
-            <i className={`icon-left massive ${iconName} icon`} />
-           <h1>{text}</h1> 
-           <i className={`icon-right massive ${iconName} icon`}/>
-        </div>
-    );
+const SeasonDisplay = props => {
+  const season = getSeason(props.lat, new Date().getMonth());
+  const {text, iconName} = seasonConfig[season];
+  return (
+    <div className={`season-display ${season}`}>
+      <i className={`icon-left massive ${iconName} icon`} />
+      <h1>{text}</h1>
+      <i className={`icon-right massive ${iconName} icon`} />
+    </div>
+  );
 };
-export default SeasonDisplay;
+export default SeasonDisplay;