diff --git a/src/components/Results/EnergyScore/calcbutton.jsx b/src/components/Results/EnergyScore/calcbutton.jsx index db7fc98..5450a23 100644 --- a/src/components/Results/EnergyScore/calcbutton.jsx +++ b/src/components/Results/EnergyScore/calcbutton.jsx @@ -1,9 +1,87 @@ import React, { useState } from 'react'; -import { Button } from '@mui/material'; -import { sparkles } from 'ionicons/icons'; +import { Button, Dialog, DialogTitle, DialogContent, Card, CardContent, Typography, Box, Grid } from '@mui/material'; import { IonIcon } from '@ionic/react'; +import { star } from 'ionicons/icons'; -const CalcButton = () => { +const ScoreBlock = ({ score }) => ( + + Your Home's Clean Energy Score: + {score} out of 100 + Your score is based on the estimated CO2 emissions of your home. + + + 0 = the highest possible emissions + + + 50 = an average home + + + 100 = a zero-emissions home + + + +); + +const ScoreDetailsCard = (props) => { + const { + zipCode, + state, + solarIndex, + heatingDegreeDays, + coolingDegreeDays, + groundWaterTemp, + homeVolume, + airChangesPerHour, + wallRValue, + atticRValue, + glazingPercentage, + heatLossBTUs, + solarHeatGainBTUs + } = props.props; + return ( + + + + The Science Behind Your Score + + + Many things go into estimating the CO₂ emissions of a home - the size of your home, the outside temperature through the year, the materials and insulation in your home, and much more! + + + Here's a look at what we estimated some of those factors to be based on your answers. + + + + What we estimate: + + + + Your Location + - Zip Code: {zipCode} + - State: {state} + - Average Solar Index: {solarIndex} + - Annual Heating Degree Days: {heatingDegreeDays} + - Annual Cooling Degree Days: {coolingDegreeDays} + - Average Ground Water Temp: {groundWaterTemp}° F + + + Your Home + - Home Volume: {homeVolume} ft³ + - Air Changes per Hour (ACH): {airChangesPerHour} + - Insulated Wall R Value: {wallRValue} + - Insulated Attic/Roof R Value: {atticRValue} + - Glazing Percentage: {glazingPercentage}% + - Annual BTUs of Heat Loss: {heatLossBTUs} million + - Annual BTUs of Solar Heat Gain: {solarHeatGainBTUs} million + + + + + + ); +}; + +const CalcButton = (props) => { const [open, setOpen] = useState(false); const handleClickOpen = () => { @@ -17,9 +95,18 @@ const CalcButton = () => { return (
+ + Calculation Guide: + + + + +
); }; diff --git a/src/components/Results/EnergyScore/energyscore.jsx b/src/components/Results/EnergyScore/energyscore.jsx index 1a80fa2..5932587 100644 --- a/src/components/Results/EnergyScore/energyscore.jsx +++ b/src/components/Results/EnergyScore/energyscore.jsx @@ -37,7 +37,10 @@ const EnergyScore = (props) => { - + {
- System Report Card + + System Report Card +
{props.content.map((item, index) => ( @@ -114,8 +116,8 @@ const IndividualScore = (props) => { ))}
- - Recommendations + + Recommendations diff --git a/src/pages/Results.jsx b/src/pages/Results.jsx index 6b14fb0..e762cff 100644 --- a/src/pages/Results.jsx +++ b/src/pages/Results.jsx @@ -30,9 +30,11 @@ const Results = (props) => { return (
- +