Simple Python CLI


# see https://pythonconquerstheuniverse.wordpress.com/2011/11/06/posting-sourcecode-on-wordpress/

# -*- coding: utf-8 -*-
from jsnippets import snippets

CUR_SNIP_IX = 0; CUR_SNIP_KEY = list(snippets.keys())[CUR_SNIP_IX]
def main():
    while True:
        cmd = (input ('?> ')).lower()
        if cmd == 'exit': break
        elif cmd == 'print': printCurrentSnippet()
        elif cmd == 'printa': printAllSnippets()
        elif cmd == 'next': bumpCUR_SNIP_IX()
        elif cmd == 'zero': zeroOutCUR_SNIP_IX()
def zeroOutCUR_SNIP_IX():
    global CUR_SNIP_IX, CUR_SNIP_KEY
    CUR_SNIP_IX = 0; CUR_SNIP_KEY = list(snippets.keys())[CUR_SNIP_IX]
def bumpCUR_SNIP_IX():
    global CUR_SNIP_IX, CUR_SNIP_KEY
    CUR_SNIP_IX = ( (CUR_SNIP_IX + 1)%(len(snippets.keys())) );
    CUR_SNIP_KEY = list(snippets.keys())[CUR_SNIP_IX]
def printCurrentSnippet():
    print(snippets[CUR_SNIP_KEY])
    def printAllSnippets():
    print(snippets)

if __name__ == '__main__':
    main()

Post code with new WP.com

See How to post source code on WordPress
URL https://pythonconquerstheuniverse.wordpress.com/2011/11/06/posting-sourcecode-on-wordpress/https://pythonconquerstheuniverse.wordpress.com/2011/11/06/posting-sourcecode-on-wordpress/

Help for ember cli

GitBash listing of ember — help

to edit with markdown,

  1. click 3-dots top right
  2. at middle select Tools >>Block Manager
  3. [X] Markdown was checked.
  4. Question just use markdown?
  5. experiment -> just use markdown in a new block

GB …/~/ $ ember –help
Usage: ember

Markdown Experiment

Code Listing

Available commands in ember-cli


> ember addon     # Generates a new folder structure for building an addon, complete with test harness.

> ember asset-sizes    # Shows the sizes of your asset files.

> ember build    # Builds your app and places it into the output path (dist/ by default).

> ember destroy     # Destroys code generated by generate command.

> ember generate     # Generates new code from blueprints.


> ember help       # Outputs the usage instructions for all commands or the provided command

> ember init       # Reinitializes a new ember-cli project in the current folder.

> ember install       # Installs an ember-cli addon from npm.

> ember new       # Creates a new directory and runs ember init in it.

> ember serve     # Builds and serves your app, rebuilding on file changes.

> ember test     # Runs your app’s test suite.

> version     # outputs ember-cli version



> # Available commands from @ember/optional-features:

> ember feature   # Prints the USAGE.

> ember feature:list   # List all available features.

> ember feature:enable     # Enable feature.

> ember feature:disable     # Disable feature.


Ember’s built-in blueprints as of 4/3/2021 10:19 AM PDT

Ember’s built-in blueprints are here

Here’s a list of their names from GitHub

acceptance-test
component-addon
component-class-addon
component-class
component-test
component
controller-test
controller
helper-addon
helper-test
helper
initializer-addon
initializer-test
initializer
instance-initializer-addon
instance-initializer-test
instance-initializer
mixin-test
mixin
route-addon
route-test
route
service-test
service
template
util-test
util

-addon-import.js
edition-detector.js
test-framework-detector.js

GIT bash Available commands in ember-cli:

ember addon
Generates a new folder structure for building an addon, complete with test harness.
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–blueprint (String) (Default: addon)
aliases: -b
–skip-npm (Boolean) (Default: false)
aliases: -sn
–skip-bower (Boolean) (Default: false)
aliases: -sb
–skip-git (Boolean) (Default: false)
aliases: -sg
–yarn (Boolean)
–directory (String)
aliases: -dir
–lang (String) Sets the base human language of the addon’s own test application via index.html

ember asset-sizes
Shows the sizes of your asset files.
–output-path (Path) (Default: dist/)
aliases: -o
–json (Boolean) (Default: false)

ember build
Builds your app and places it into the output path (dist/ by default).
aliases: b
–environment (String) (Default: development) Possible values are “development”, “production”, and “test”.
aliases: -e , -dev (–environment=development), -prod (–environment=production)
–output-path (Path) (Default: dist/)
aliases: -o
–watch (Boolean) (Default: false)
aliases: -w
–watcher (String)
–suppress-sizes (Boolean) (Default: false)

ember destroy
Destroys code generated by generate command.
aliases: d
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–pod (Boolean) (Default: false)
aliases: -p, -pods
–classic (Boolean) (Default: false)
aliases: -c
–dummy (Boolean) (Default: false)
aliases: -dum, -id
–in-repo-addon (String) (Default: null)
aliases: –in-repo , -ir
–in (String) (Default: null) Runs a blueprint against an in repo addon. A path is expected, relative to the root of the project.

ember generate
Generates new code from blueprints.
aliases: g
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–pod (Boolean) (Default: false)
aliases: -p, -pods
–classic (Boolean) (Default: false)
aliases: -c
–dummy (Boolean) (Default: false)
aliases: -dum, -id
–in-repo-addon (String) (Default: null)
aliases: –in-repo , -ir
–in (String) (Default: null) Runs a blueprint against an in repo addon. A path is expected, relative to the root of the project.

ember help
Outputs the usage instructions for all commands or the provided command
aliases: h, –help, -h
–verbose (Boolean) (Default: false)
aliases: -v
–json (Boolean) (Default: false)

ember init
Reinitializes a new ember-cli project in the current folder.
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–blueprint (String)
aliases: -b
–skip-npm (Boolean) (Default: false)
aliases: -sn
–skip-bower (Boolean) (Default: false)
aliases: -sb
–welcome (Boolean) (Default: true) Installs and uses {{ember-welcome-page}}. Use –no-welcome to skip it.
–yarn (Boolean)
–name (String) (Default: “”)
aliases: -n
–lang (String) Sets the base human language of the application via index.html

ember install
Installs an ember-cli addon from npm.
aliases: i
–save (Boolean) (Default: false)
aliases: -S
–save-dev (Boolean) (Default: true)
aliases: -D
–save-exact (Boolean) (Default: false)
aliases: -E, –exact
–yarn (Boolean) Use –yarn to enforce yarn usage, or –no-yarn to enforce npm

ember new
Creates a new directory and runs ember init in it.
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–blueprint (String) (Default: app)
aliases: -b
–skip-npm (Boolean) (Default: false)
aliases: -sn
–skip-bower (Boolean) (Default: false)
aliases: -sb
–skip-git (Boolean) (Default: false)
aliases: -sg
–welcome (Boolean) (Default: true) Installs and uses {{ember-welcome-page}}. Use –no-welcome to skip it.
–yarn (Boolean)
–directory (String)
aliases: -dir
–lang (String) Sets the base human language of the application via index.html

ember serve
Builds and serves your app, rebuilding on file changes.
aliases: server, s
–port (Number) (Default: 4200) To use a port different than 4200. Pass 0 to automatically pick an available port.
aliases: -p
–host (String) Listens on all interfaces by default
aliases: -H
–proxy (String)
aliases: -pr , -pxy
–proxy-in-timeout (Number) (Default: 120000) When using –proxy: timeout (in ms) for incoming requests
aliases: -pit
–proxy-out-timeout (Number) (Default: 0) When using –proxy: timeout (in ms) for outgoing requests
aliases: -pot
–secure-proxy (Boolean) (Default: true) Set to false to proxy self-signed SSL certificates
aliases: -spr
–transparent-proxy (Boolean) (Default: true) Set to false to omit x-forwarded-* headers when proxying
aliases: –transp
–watcher (String) (Default: events)
aliases: -w
–live-reload (Boolean) (Default: true)
aliases: -lr
–live-reload-host (String) Defaults to host
aliases: -lrh
–live-reload-base-url (String) Defaults to baseURL
aliases: -lrbu
–live-reload-port (Number) Defaults to same port as ember app
aliases: -lrp
–live-reload-prefix (String) (Default: _lr) Default to _lr
aliases: –lrprefix
–environment (String) (Default: development) Possible values are “development”, “production”, and “test”.
aliases: -e , -dev (–environment=development), -prod (–environment=production)
–output-path (Path) (Default: dist/)
aliases: -op , -out
–ssl (Boolean) (Default: false) Set to true to configure Ember CLI to serve using SSL.
–ssl-key (String) (Default: ssl/server.key) Specify the private key to use for SSL.
–ssl-cert (String) (Default: ssl/server.crt) Specify the certificate to use for SSL.
–path (Path) Reuse an existing build at given path.

ember test
Runs your app’s test suite.
aliases: t
–environment (String) (Default: test) Possible values are “development”, “production”, and “test”.
aliases: -e
–config-file (String)
aliases: -c , -cf
–server (Boolean) (Default: false)
aliases: -s
–host (String)
aliases: -H
–test-port (Number) (Default: 7357) The test port to use when running tests. Pass 0 to automatically pick an available port
aliases: -tp
–filter (String) A string to filter tests to run
aliases: -f
–module (String) The name of a test module to run
aliases: -m
–watcher (String) (Default: events)
aliases: -w
–launch (String) (Default: false) A comma separated list of browsers to launch for tests.
–reporter (String) Test reporter to use [tap|dot|xunit] (default: tap)
aliases: -r
–silent (Boolean) (Default: false) Suppress any output except for the test report
–ssl (Boolean) (Default: false) Set to true to configure testem to run the test suite using SSL.
–ssl-key (String) (Default: ssl/server.key) Specify the private key to use for SSL.
–ssl-cert (String) (Default: ssl/server.crt) Specify the certificate to use for SSL.
–testem-debug (String) File to write a debug log from testem
–test-page (String) Test page to invoke
–path (Path) Reuse an existing build at given path.
–query (String) A query string to append to the test page URL.
–output-path (Path)
aliases: -o

ember version
outputs ember-cli version
aliases: v, –version, -v
–verbose (Boolean) (Default: false)

GB …/~/ $

ember generate –help

GB …/~/ $ ember generate –help
Requested ember-cli commands:

ember generate
Generates new code from blueprints.
aliases: g
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–pod (Boolean) (Default: false)
aliases: -p, -pods
–classic (Boolean) (Default: false)
aliases: -c
–dummy (Boolean) (Default: false)
aliases: -dum, -id
–in-repo-addon (String) (Default: null)
aliases: –in-repo , -ir
–in (String) (Default: null) Runs a blueprint against an in repo addon. A path is expected, relative to the root of the project.

Available blueprints:
ember-cli:
addon
The default blueprint for ember-cli addons.
addon-import
Generates an import wrapper.
app
The default blueprint for ember-cli projects.
blueprint
Generates a blueprint and definition.
http-mock
Generates a mock api endpoint in /api prefix.
http-proxy
Generates a relative proxy to another server.
in-repo-addon
The blueprint for addon in repo ember-cli addons.
lib
Generates a lib directory for in-repo addons.
server
Generates a server directory for mocks and proxies.
vendor-shim
Generates an ES6 module shim for global libraries.

GB …/~/ $

ember generate component –help

GB …/~/ $ ember generate component –help
Requested ember-cli commands:

ember generate
Generates new code from blueprints.
aliases: g
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–pod (Boolean) (Default: false)
aliases: -p, -pods
–classic (Boolean) (Default: false)
aliases: -c
–dummy (Boolean) (Default: false)
aliases: -dum, -id
–in-repo-addon (String) (Default: null)
aliases: –in-repo , -ir
–in (String) (Default: null) Runs a blueprint against an in repo addon. A path is expected, relative to the root of the project.

The ‘component’ blueprint does not exist in this project.

GB …/~/ $

#ember, #ember-js

JCW COVID-19 County Compare Plugin

Joe Codeswell’s “JCW COVID-19 County Compare Plugin” for WordPress is currently under development.

This is the Plugin Uri.

This plugin allows the user to display COVID-19 County Data Comparison Charts.

Stay tuned for more info.

Here is the short link: https://wp.me/p1zI3Z-xD

web2py genericIndexJoe.html & layoutJoe.html

genericIndexJoe.html

{{extend 'layoutJoe.html'}}
{{response.menu}} {{# uncommented, makes the menu appear }}
{{ #=BEAUTIFY(response._vars) }}
{{ =response._vars['message'] }}

layoutJoe.html

<!DOCTYPE html>
<!-- copied from ordersarrive >> layoutJoe.html which may be crappy -->

<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{=T.accepted_language or 'en'}}"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <!-- www.phpied.com/conditional-comments-block-downloads/ -->
    <!-- Always force latest IE rendering engine
         (even in intranet) & Chrome Frame
         Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge{{=not request.is_local and ',chrome=1' or ''}}">
    <!--  Mobile Viewport Fix
          j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
          device-width: Occupy full width of the screen in its current orientation
          initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
          user-scalable = yes allows the user to zoom in -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{=response.title or request.application}}</title>
    <!-- http://dev.w3.org/html5/markup/meta.name.html -->
    <meta name="application-name" content="{{=request.application}}">
    <!-- Speaking of Google, don't forget to set your site up:
         http://google.com/webmasters -->
    <meta name="google-site-verification" content="">
    <!-- include stylesheets -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="{{=URL('static','css/bootstrap.min.css')}}"/>
    <link rel="stylesheet" href="{{=URL('static','css/web2py-bootstrap4.css')}}"/>
    <link rel="shortcut icon" href="{{=URL('static','images/favicon.ico')}}" type="image/x-icon">
    <link rel="apple-touch-icon" href="{{=URL('static','images/favicon.png')}}">
    <!-- All JavaScript at the bottom, except for Modernizr which enables
         HTML5 elements & feature detects -->
    <a href="http://=URL('static','js/modernizr-2.8.3.min.js')">http://=URL('static','js/modernizr-2.8.3.min.js')</a>
    <!-- Favicons -->
    {{include 'web2py_ajax.html'}} <!-- this includes jquery.js, calendar.js/.css and web2py.js -->
    {{block head}}{{end}}
  </head>
  <body>
    <div class="w2p_flash alert alert-dismissable">{{=response.flash or ''}}</div>
    <!-- Navbar ======================================= -->
    <nav class="navbar navbar-light navbar-expand-md bg-faded bg-dark navbar-dark justify-content-center">
<!--        <a href="http://web2py.com" class="navbar-brand d-flex w-50 mr-auto">web2py</a> -->
        <a href="http://JoeCodeswell.com" class="navbar-brand d-flex w-50 mr-auto">JoeCodeswell.com</a> 
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="navbar-collapse collapse w-100" id="navbarNavDropdown">
         <ul class="navbar-nav w-100 justify-content-center">
          {{for _item in response.menu or []:}}
          {{if len(_item)<4 or not _item[3]:}}
          <li class="nav-item {{if _item[1]:}}active{{pass}}">
            <a class="nav-link" href="{{=_item[2]}}">{{=_item[0]}}</a>
          </li>
          {{else:}}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="{{=_item[2]}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{=_item[0]}}</a>
            <div class="dropdown-menu">
              {{for _subitem in _item[3]:}}
              <a class="dropdown-item" href="{{=_subitem[2]}}">{{=_subitem[0]}}</a>
              {{pass}}
            </div>
          </li>
          {{pass}}
          {{pass}}
        </ul>
         <form class="form-inline my-2 my-lg-0">
             <input class="form-control mr-sm-2" type="text" placeholder="Search">
         </form>
        {{if 'auth' in globals():}}
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {{if auth.user:}}{{=auth.user.first_name}}{{else:}}LOGIN{{pass}}
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              {{if auth.user:}}
              <a class="dropdown-item" href="{{=URL('default','user/profile')}}">{{=T('Profile')}}</a>
              {{if 'change_password' not in auth.settings.actions_disabled:}}
              <a class="dropdown-item" href="{{=URL('default','user/change_password')}}">{{=T('Change Password')}}</a>
              {{pass}}
              <a class="dropdown-item" href="{{=URL('default','user/logout')}}">{{=T('Logout')}}</a>
              {{else:}}
              <a class="dropdown-item" href="{{=URL('default','user/login')}}">{{=T('Login')}}</a>
              {{if 'register' not in auth.settings.actions_disabled:}}
              <a class="dropdown-item" href="{{=URL('default','user/register')}}">{{=T('Sign up')}}</a>
              {{pass}}
              {{if 'retrieve_password' not in auth.settings.actions_disabled:}}
              <a class="dropdown-item" href="{{=URL('default','user/retrieve_password')}}">{{=T('Lost Password')}}</a>
              {{pass}}
              {{pass}}
            </div>
          </li>
        </ul>
        {{pass}}
      </div>
    </nav>

    <!-- Masthead ===================================== -->
    {{block header}}
    {{end}}
    <!-- Main ========================================= -->
    <!-- Begin page content -->
    <div class="container-fluid main-container">
      {{include}}
      {{=response.toolbar() if response.show_toolbar else ''}} 
    </div>

    {{block footer}} <!-- this is default footer -->
    <footer class="footer container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="copyright pull-left">{{=T('Copyright ')}} © {{=request.now.year}} Joseph P. Dorocak, Sacramento, CA. All rights reserved.</div>
          <div id="poweredBy" class="pull-right">
            {{=T('Powered by')}}
            <a href="http://www.web2py.com/">web2py</a>
          </div>
        </div>
      </div>
    </footer>
    {{end}}
    <!-- The javascript =============================== -->
    <a href="http://=URL('static','js/bootstrap.bundle.min.js')">http://=URL('static','js/bootstrap.bundle.min.js')</a>
    <a href="http://=URL('static','js/web2py-bootstrap4.js')">http://=URL('static','js/web2py-bootstrap4.js')</a>
    {{block page_js}}{{end page_js}}
    {{if response.google_analytics_id:}}
    <!-- Analytics ==================================== -->
    <a href="http://=URL('static','js/analytics.min.js')">http://=URL('static','js/analytics.min.js')</a>
    <script type="text/javascript">
      analytics.initialize({
      'Google Analytics':{trackingId:'{{=response.google_analytics_id}}'}
      });
    </script>
    {{pass}}
  </body>
</html>





<!-- original stuff below here -->
{{#extend 'layout.html'}}
<!-- <h1>This is the layoutJoe.html template</h1> -->
{{#=BEAUTIFY(response._vars)}}

#markdown, #web2py

web2py Markdown Usage Example

web2py Markdown Usage Example

from gluon.contrib.markdown import WIKI as markdown
def index():
    """ ##
      [see](web2py.com/examples/static/sphinx/gluon/gluon.contrib.markdown.html)
      [Markdown see](https://groups.google.com/g/web2py/c/om9aXi3xg3Y/m/jE4t-KwpBQAJ)

    """
    # response.view = 'genericIndexJoe.html'
    response.flash = T("Welcome!")

    my_md = '''## Welcome to the cov19cty App!
### To generate County Comparison Charts:
1. Click Menu >> Gen Chart >> Multi-County Input Form
  1. Add Your Counties to compare (state, county, typeOfData)
  2. Define Your Time Series
2. Click Menu >> Gen Chart >> Show Multi-County Chart
    '''
    my_html = markdown(my_md)

    # return dict( message=my_html )  
    return my_html

#markdown, #web2py

react post from wp-admin editor text tab


/**
 *  File: App.js
 *  "React State Example-1: Update state using 2 select elements."
 *  by Joe Dorocak (JoeCodeswell.com) 
 *  Demonstrates changing state with 2 select elements 
 * 
 *  Source Code Link: https://joecodeswell.wordpress.com/2018/09/25/react-state-example-1-update-state-using-2-select-elements/
 * 
 * MIT License
 * 
 * Copyright (c) [2018] [Joseph P. Dorocak]
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * 
 *  https://en.forums.wordpress.com/topic/posting-javascript-markdown-does-not-show/
 * 
 *  
 */

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

let programmerList =  ["Admiral Grace Hopper","Ada Lovelace","Donald Knuth","James Gosling","Guido van Rossum","Linus Torvalds"];

class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      programmer_list: programmerList,
      fmSelFrom: programmerList[0],
      fmSelTo:programmerList[0]
    };
  }
  handleFromChange = (event) => {
    this.setState({ 
      fmSelFrom: event.target.value     
    });
  }
  handleToChange = (event) => {
    this.setState({ 
      fmSelTo: event.target.value    
    });
  }
  render() {
    // inside class App -> render(){ before return(
    return (

      /* begin out of the box jsx */
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {/* end out of the box jsx */}
        {/* begin non out of the box jsx */}
        <div id="show-programmer-list">
          <p>Programmer List</p>
            {this.state.programmer_list.map(  (itm,ix) => <p key={ix} value={itm} >ix:{ix}->itm:{itm}</p> )   }          
        </div>

        <div id="select-programmer-from-to">
        <label>
            Pick your FROM Programmer:        
            <select id="select-from"  value={this.value} onChange={this.handleFromChange} >
              {this.state.programmer_list.map(  (itm,ix) => <option key={ix} value={ix+":"+itm} >{itm}</option> )   }  
            </select>
        </label>
        <label>
          Pick your TO Programmer:         
          <select id="select-to" value={this.key} onChange={this.handleToChange} >
            {this.state.programmer_list.map(  (itm,ix) => <option key={ix} value={itm} >{itm}</option> )   }
          </select>
        </label>

        <p>this.state.fmSelFrom: {this.state.fmSelFrom}</p>
        <p>this.state.fmSelTo: {this.state.fmSelTo}</p>

        </div>
        {/* end non out of the box jsx */}
     
      </div> 
      /* end of <div className="App"> */

      // inside class App -> render(){ ->return( -> after <div className="App"></div>

    ); // end render -> return
  } // end render () code
}

export default App;
App.js.txt
Displaying App.js.txt.

Help with publishing code on WordPress.com

Here is a link to a WordPress.com support request of mine regarding publishing code on WordPress.com, posting “` javascript markdown DOES NOT show ”.

The folks were a GREAT HELP.

Thanks again to  @melancholia.

Love and peace,

Joe

React State Example-1: Update state using 2 select elements.

Based on Out of the box src for create-react-app -V 1.5.2


/**
 *  File: App.js
 *  "React State Example-1: Update state using 2 select elements."
 *  by Joe Dorocak (JoeCodeswell.com) 
 *  Demonstrates changing state with 2 select elements 
 * 
 *  Source Code Link: https://joecodeswell.wordpress.com/2018/09/25/react-state-example-1-update-state-using-2-select-elements/
 * 
 * MIT License
 * 
 * Copyright (c) [2018] [Joseph P. Dorocak]
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * 
 *  https://en.forums.wordpress.com/topic/posting-javascript-markdown-does-not-show/
 * 
 *  
 */

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

let programmerList =  ["Admiral Grace Hopper","Ada Lovelace","Donald Knuth","James Gosling","Guido van Rossum","Linus Torvalds"];

class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      programmer_list: programmerList,
      fmSelFrom: programmerList[0],
      fmSelTo:programmerList[0]
    };
  }
  handleFromChange = (event) => {
    this.setState({ 
      fmSelFrom: event.target.value     
    });
  }
  handleToChange = (event) => {
    this.setState({ 
      fmSelTo: event.target.value    
    });
  }
  render() {
    // inside class App -> render(){ before return(
    return (

      /* begin out of the box jsx */
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {/* end out of the box jsx */}
        {/* begin non out of the box jsx */}
        <div id="show-programmer-list">
          <p>Programmer List</p>
            {this.state.programmer_list.map(  (itm,ix) => <p key={ix} value={itm} >ix:{ix}->itm:{itm}</p> )   }          
        </div>

        <div id="select-programmer-from-to">
        <label>
            Pick your FROM Programmer:        
            <select id="select-from"  value={this.value} onChange={this.handleFromChange} >
              {this.state.programmer_list.map(  (itm,ix) => <option key={ix} value={ix+":"+itm} >{itm}</option> )   }  
            </select>
        </label>
        <label>
          Pick your TO Programmer:         
          <select id="select-to" value={this.key} onChange={this.handleToChange} >
            {this.state.programmer_list.map(  (itm,ix) => <option key={ix} value={itm} >{itm}</option> )   }
          </select>
        </label>

        <p>this.state.fmSelFrom: {this.state.fmSelFrom}</p>
        <p>this.state.fmSelTo: {this.state.fmSelTo}</p>

        </div>
        {/* end non out of the box jsx */}
     
      </div> 
      /* end of <div className="App"> */

      // inside class App -> render(){ ->return( -> after <div className="App"></div>

    ); // end render -> return
  } // end render () code
}

// App.js.txt
// Displaying App.js.txt.

export default App;

Out of the box src for create-react-app -V 1.5.2

App.js out of the box

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img src="{logo}" alt="logo" />
          <h1>Welcome to React</h1>
        </header>

          To get started, edit <code>src/App.js</code> and save to reload.

      </div>
    );
  }
}

export default App;

App.css out of the box

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

App.test.js out of the box

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

index.css out of the box

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

index.js out of the box

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

registerServiceWorker.js out of the box

<br />// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export default function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        // This is running on localhost. Lets check if a service worker still exists or not.
        checkValidServiceWorker(swUrl);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://goo.gl/SC7cgQ'
          );
        });
      } else {
        // Is not local host. Just register service worker
        registerValidSW(swUrl);
      }
    });
  }
}

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl)
    .then(response => {
      // Ensure service worker exists, and that we really are getting a JS file.
      if (
        response.status === 404 ||
        response.headers.get('content-type').indexOf('javascript') === -1
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    });
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

logo.svg out of the box

NOT shown due to WordPress.com markdown limitations!

#222