Skip to content

Instantly share code, notes, and snippets.

Avatar

Clarian 01Clarian

  • NFTuity
  • New York
View GitHub Profile
View Form.js
import React from 'react'
const Form = (props) => {
return (
<form onSubmit={props.getWeather}>
<input
type='text'
placeholder='city'
name='city'
/>
@01Clarian
01Clarian / Form.js
Created Nov 16, 2019
Building Form For Hooks Weather App
View Form.js
import React from 'react'
const Form = (props) => {
return (
<form onSubmit={props.getWeather}>
<input
type='text'
placeholder='city'
name='city'
/>
@01Clarian
01Clarian / Weather.js
Created Nov 16, 2019
Building Weathe.js Component
View Weather.js
import React from 'react'
const Weather = ({description, city, country, error, temperature}) => {
return (
<div>
{city && country && <p>{city}, {country}</p>}
{temperature && <p>{temperature}</p>}
{description && <p> {description}</p>}
{error && <p>{error}</p>}
</div>
@01Clarian
01Clarian / Form.js
Created Nov 16, 2019
Form Component Set Up
View Form.js
import React from 'react'
const Form = (props) => {
return (
<form onSubmit={props.getWeather}>
<input
type='text'
placeholder='city'
name='city'
/>
@01Clarian
01Clarian / App.js
Created Nov 16, 2019
App Container updated with state, API and form
View App.js
import React,{useState} from 'react';
import './App.css';
import Form from './Form';
import Weather from './Weather';
function App() {
const [weather,setWeather] = useState([])
const APIKEY = 'INSERT YOUR OWN KEY HERE'
async function fetchData(e) {
@01Clarian
01Clarian / App.js
Created Nov 16, 2019
App Container Updating Weather Data
View App.js
import React,{useState} from 'react';
import './App.css';
import Form from './Form';
import Weather from './Weather';
function App() {
const [weather,setWeather] = useState([])
const APIKEY = '00517648ed782c3f434fed840bcfd50e'
async function fetchData(e) {
@01Clarian
01Clarian / App.js
Created Nov 16, 2019
App Container Error Handling
View App.js
import React,{useState} from 'react';
import './App.css';
import Form from './Form';
import Weather from './Weather';
function App() {
const [weather,setWeather] = useState([])
const APIKEY = '00517648ed782c3f434fed840bcfd50e'
async function fetchData(e) {
@01Clarian
01Clarian / App.js
Created Nov 16, 2019
App container Kelvin Conversation
View App.js
import React,{useState} from 'react';
import './App.css';
import Form from './Form';
import Weather from './Weather';
function App() {
const [weather,setWeather] = useState([])
const APIKEY = '00517648ed782c3f434fed840bcfd50e'
async function fetchData(e) {
@01Clarian
01Clarian / Weather.js
Created Nov 16, 2019
Weather.js UX Updates
View Weather.js
import React from 'react'
const Weather = ({description, city, country, error, temperature}) => {
return (
<div>
{city && country && <p>{city}, {country}</p>}
{temperature && <p>{temperature} °F</p>}
{description && <p> Conditions: {description}</p>}
{error && <p>{error}</p>}
</div>
@01Clarian
01Clarian / Weather.js
Created Nov 16, 2019
Weather matching Keyword Algorithm
View Weather.js
import React from 'react'
const Weather = ({description, city, country, error, temperature}) => {
if(description) {
const weatherDescription = description.split(' ')
const keyWords = ['cloudy','clouds', 'cloud', 'overcast']
for(let i = 0; i < weatherDescription.length; i++) {
if(keyWords.includes(weatherDescription[i])) {
console.log(weatherDescription[i], ': we have a match')