BUILDING INFO BOX

HERE, WE USE A CARD LAYOUT TO SHOW THE INFO . FROM THE MATERIAL UI WE IMPORT THE REQUIRED CODE.


import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
import "./InfoBox.css"
export default function InfoBox() {
  let info = {
    city: "khammam",
    feels_like: 34.48,
    humidity: 26,
    temp: 35.43,
    tempMax: 35.43,
    tempMin: 35.43,
    weather: "clear sky",
  };
  return (
    <div className="InfoBox">
      <h1>Weather info - {info.weather}</h1>
      <Card sx={{ maxWidth: 345 }}>
        <CardMedia
          sx={{ height: 140 }}
          image="https://images.unsplash.com/photo-1603883055407-968560f7522e?q=80&w=1901&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          title="green iguana"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            <p> {info.city}</p>
          </Typography>
      <Typography variant="body2" sx={{ color: "text.secondary" }} component={"span"}>
            <p> Humidity:{info.humidity}</p>
            <p>Temperature: {info.temp}&deg;C(TO SHOW THE DEGREE SYMBOL)</p>
            <p> Min Temp: {info.tempMin}&deg;C</p>
            <p> Max Temp: {info.tempMax}&deg;C</p>
            <p>
              Weather can be described as <i>{info.weather}</i> but it feels
              like {info.feels_like} &deg;C
            </p>
          </Typography>
        </CardContent>
      </Card>
    </div>
  );
}









Comments

Post a Comment

Popular posts from this blog

DEPENDENCIES IN useEffect()

Image
 DEPENDENCIES REFER TO STATE VARIABLES. WHATEVER VARIABLE DECLARED AS A DEPENDENCY WILL ONLY BE PERFORMED AS A SIDE EFFECT. WE DECLARE THEM AS ARRAYS IN TWO  WAYS,  [COUNTX] - MEANS THAT ONLY COUNTX WILL BE USED AS A SIDE EFFECT. [] - EMPTY , MEANS THAT SIDE EFFECT IS PERFORMED ONLY WHEN THE PAGE IS RENDERED ( NOT RE-RENDERED). ( IN THE BEGINNIG)  EX- WE CREATE TWO STATE VARIABLES, COUNTX AND COUNT Y , HERE WE ONLY ADD SIDE EFFECTS TO COUNT X. import { useEffect , useState } from "react" ; export default function Counter () {   let [ countx , setCountx ] = useState ( 0 );   let [ county , setCounty ] = useState ( 0 );   let incx = () => {     setCountx (( currCount ) => currCount + 1 );   };   let incy = () => {     setCounty (( currCount ) => currCount + 1 );   };   useEffect ( function PrintSomething () {     console . log ( "this is a side effect" );   },[ co...
Read more

ACTIVITY1

Image
 SHOW A HELLO MESSAGE  ALONG WITH THE USERNAME WITH THE GIVEN TEXT COLOR. TWO PROPS ARE GIVEN, USERNAME AND TEXTCOLOR. ACTIVITY1.JSX function Activity1 ({ userName , textColor }) {   let styles = { color : textColor };   return < h3 style = { styles } > Hello! { userName } </ h3 > ; } export default Activity1 ; APP.JSX import Activity1 from "./Activity1.jsx" ; function App () {   // let name = "abhi";   // return <ProductTab />;   return (     <>     < Activity1 userName = "abhii" textColor = "yellow" />     < Activity1 userName = "ashwith" textColor = "orange" />     < Activity1 userName = "bharath" textColor = "red" />     < Activity1 userName = "vinay" textColor = "red" />     </>   ) }
Read more

CONDITIONALS

Image
 CONDITIONAL STATEMENTS (IF) CAN BE PASSED AS TERNARY OPERATORS OR EVEN BY USING(  &&) LOGICAL AND OPERATOR. import "./Product.css" ; function Product ({ title , price , features }) {   return (     < div className = "Product" >       < h4 > { title } </ h4 >       < h5 > price: { price } </ h5 >       { price > 15000 ? < p > Discount of 5% </ p > : null }       { /* <p>{features.map((feature) => <li>{feature}</li>)}</p> */ }     </ div >   ); } export default Product ; LOGICAL AND OPERATOR.       { price > 15000 && < p > Discount of 5% </ p > }
Read more