Skip to content

Instantly share code, notes, and snippets.

Avatar

Clarian 01Clarian

  • NFTuity
  • New York
View GitHub Profile
@01Clarian
01Clarian / ClickCounter.jsx
Created Nov 30, 2019
Click Counter Pre HOC
View ClickCounter.jsx
import React from 'react';
class ClickCounter extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
}
increment = () => {
@01Clarian
01Clarian / script.js
Created Nov 24, 2019
Initial Memoization Example Notes
View script.js
// MEMOIZATION AND CACHING: THE CONSTRUCTION FUNCTION EXAMPLE
// In order to better our understanding of Memoization, we will write a function
// entitled 'Building' and apply various logged results to observe the behaviour
// of JavaScript.
// ****Additional Notes****
// In this example, you are the boss of a construction company.
// The construction company will be a reference to your Application.
@01Clarian
01Clarian / Weather.js
Created Nov 16, 2019
FInish Weather Keyword Search
View Weather.js
import React from 'react'
const Weather = ({description, city, country, error, temperature}) => {
function matchValues () {
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])) {
@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')
@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 / 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 / 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 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 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 / 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'
/>