React

HTML

<div id="app"></div>

<!--
•	Build form control with the following. Label : “Enter City”, Input form field, Submit Button. Button should be custom built and re-usable.
•	Build weather details component. It should show the current Date, City Name, Current time & temperature details. “Begin with Static Data and later bind with JSON dynamic data”
•	Retrieve weather data from JSON service (API). Use Redux Store for the Data management. Parse the content to respective UI components.
•	Weather Details should be updated based on the City name entered in the form control.
•	Build “5 Day Weather” Button by re-using the button component which was created earlier.
•	Implement new page which shows 5 day weather Details. Create an event to “5 Day Weather” button to take to 5 Day weather details page.
•	Enhance Weather details UI component. Component should be divided into 3 small re-usable components. Date Display, City & current time, Temperature. Show the Visual screen to the candidate 
•	5 Day Weather details page should contain a data grid which shows the 5 day weather info. Temperature component should be reused and rendered in each cell. Show the visual design to the candidate.
-->

<script type="text/javascript">
	const data = {
	"States": {
		"IL": {
			"currentdate": "04/05/2019",
			"time": "02:59 PM",
			"cities": [{
					"name": "Chicago",
					"forecast": [{
							"Date": "04/05/2019",
							"Time": "2.59pm",
							"temprature": 47,
							"feels": 40
						},
						{
							"Date": "04/06/2019",
							"Time": "2.59pm",
							"temprature": 57,
							"feels": 55
						},
						{
							"Date": "04/07/2019",
							"Time": "2.59pm",
							"temprature": 45,
							"feels": 44
						},
						{
							"Date": "04/08/2019",
							"Time": "2.59pm",
							"temprature": 61,
							"feels": 50
						},
						{
							"Date": "04/09/2019",
							"Time": "2.59pm",
							"temprature": 68,
							"feels": 65
						}
					]
				},
				{
					"name":...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
}

.card {
  outline: 1px solid rgb(210, 210, 210);
  padding: 3px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const DateCardComponent = ({
	Date,
}) => {
	return (
  	<p>Date: {Date}</p>
  )
}

const CityAndTemperatureCardComponent = ({temprature, city}) => {
	return (
  	<div>
  	  <p>City: {city}</p>
      <p>Temprature: {temprature}</p>
    </div>
  )
}

const CurrentTimeCardComponent = ({
	Time,
}) => {
	return (
  	<p>Current time: {Time}</p>
  )
}

const WeatherCard = ({
	cityData,
  city,
}) => {
	if (!cityData) {
  	return (
    	<p>Error</p>
    )
  }
  
  const { Date, temprature, Time } = cityData;
  
	return (
  	<div className="card">
  	  <DateCardComponent Date={Date} />
      <CityAndTemperatureCardComponent temprature={temprature} city={city} />
      <CurrentTimeCardComponent Time={Time} />
    </div>
  )
}

const WeatherCardContainer = ({
	children,
}) => {
	return (
    <div>
  	  <h2>Weather Details</h2>
      <div className="container">
       {children}
      </div>
  	</div>
  )
}

const WeatherDetails = ({
	city,
  oneDayForecast,
}) => {
	const [UsState, setUsState] = React.useState(null);
  const [cityData, setCityData] = React.useState(null);

	React.useEffect(() => {
  	setUsState(null)
    setCityData(null)
  	console.log('The city is:', city)
    console.log('The US State is:', UsState)
  }, [city, UsState])
  
  const findState = () => {
  	for (let state in data.States) {
      for (let theCity of data.States[state]['cities']) {
        if (theCity.name.toLowerCase() === city.toLowerCase()) {
        	setUsState(state);
        	break;
        }
      }
    }
  }
  
  if (UsState === null) {
  	findState();
  } else if (cityData === null) {
    for (let entry of data['States'][UsState]['cities']) {    	
      if (entry.name.toLowerCase() === city.toLowerCase()) {
        setCityData(entry.forecast);
        break;
      }
    }
  }
  
  let weatherCards
  if (cityData && oneDayForecast === false) {
   weatherCards = cityData.map((card, index) => {
   	return (
    	<WeatherCard key={index} cityData={card} city={city}/>
    )
   })
  }...