John Otu johnotu

Human.

johnotu / index.js

Created November 11, 2020 08:29

DigitalClock - Entry file

	import React from 'react';
	import ReactDOM from 'react-dom';

	import 'bootstrap/dist/css/bootstrap.min.css';
	import 'font-awesome/css/font-awesome.min.css';
	import './index.css';

	import App from './App.js';

	ReactDOM.render(

johnotu / useScript.js

Created October 17, 2020 21:59

Modified useScript hook to load in a specific environment

	import { useEffect } from "react";

	const useScript = (url) => {
	useEffect(() => {
	// ensure script is only loaded in production
	if (process.env.REACT_APP_MY_ENV === "production") {
	const script = document.createElement("script");
	script.src = url;
	script.async = true;
	document.body.appendChild(script);

johnotu / TopNav.jsx

Created April 4, 2020 08:23

TopNav component

	import React, { useState } from 'react';
	import Logo from '../images/logo_512x512.png';

	const TopNav = props => {
	const [isNavCollapsed, setIsNavCollapsed] = useState(true);

	const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);

	return (
	<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">

johnotu / navbar-collapse-with-dynamic-class.jsx

Last active October 19, 2020 19:11

Bootstrap Navbar-collapse with dynamic collapse class

	<div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
	<a className="nav-link text-info" href="/contact">Support</a>
	<a className="nav-link text-info" href="/login">Login</a>
	<a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
	</div>

johnotu / geo.js

Created July 31, 2019 12:51 — forked from mkhatib/geo.js

A Javascript utility function to generate number of random Geolocations around a center location and in a defined radius.

	/**
	* Generates number of random geolocation points given a center and a radius.
	* @param {Object} center A JS object with lat and lng attributes.
	* @param {number} radius Radius in meters.
	* @param {number} count Number of points to generate.
	* @return {array} Array of Objects with lat and lng attributes.
	*/
	function generateRandomPoints(center, radius, count) {
	var points = [];
	for (var i=0; i<count; i++) {

johnotu / index.css

Created May 24, 2019 12:27

CSS for index.html

	html {
	position: relative;
	min-height: 100%;
	}
	body {
	/* Margin bottom by footer height */
	margin-bottom: 60px;
	}
	.footer {
	position: absolute;

johnotu / index.html

Created May 24, 2019 11:06

Basic HTML page with Bootstrap 4.0 including script tags for React and Babel

	<!doctype html>
	<html lang="en">

	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

johnotu / blog-app.js

Last active May 24, 2019 09:17

Putting it all together

	'use strict';

	const Header = props => {
	return (
	<header>
	<nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
	<a className="navbar-brand" href="#">My Blog</a>
	</nav>
	</header>
	)

johnotu / blog-app.js

Last active May 24, 2019 09:15

Initial parent component (before we add child components)

	'use strict';

	class BlogApp extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	blogPost: {}
	};
	}

johnotu / handle-messages.js

Created December 7, 2018 18:51

Code Snippets - Custom Payments for Messenger

	/**
	* Handle messages received by bot server
	*
	*/

	'use strict';

	// Assume you have these functions defined and exported in your project folder
	const sendTextMessage = require('../actions/sendTextMsg');
	const sendButtonMsg = require('../actions/sendButtonMsg');