EM Greeff modster

![This is an image](https://myoctocat.com/assets/images/base-octocat.svg)

Basic Setup

First turn your project into an npm one with npm init -y

Next install the package of your choice. In this video I used Luxon

npm install luxon

plotchar(series, title, char, location, color, transp, offset, text, textcolor, editable, size, show_last, display) → void plotchar

	import { useContext } from 'react';
	import { useHistory } from 'react-router-dom';
	import withModal from '../common/Modal';
	import Create from '../create/Create';
	import Context from '../../context';
	import logo from '../../logo.png';

	const Header = (props) => {
	const { toggleModal } = props;

	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
	<script type="text/javascript">
	'use strict'
	$(document).ready(function(){

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<link rel="stylesheet" href="/css/main.css" />
	<title>Linked Datalists</title>
	</head>
	<body>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>min, max, minmax, clamp, calc</title>
	<link rel="stylesheet" href="main.css" />
	</head>
	<body>

	const APP = {
	SW: null,
	init() {
	//called after DOMContentLoaded
	//register our service worker
	APP.registerSW();
	document
	.getElementById('colorForm')
	.addEventListener('submit', APP.saveColor);