React with Vite install

[Optional] Local Development Setup

In the videos of this React module, I will be coding in CodeSandbox. Many students skip straight to React without going through the course and CodeSandbox is the easiest way to learn React with no complicated setup.

HOWEVER, if you really want to develop locally using VSCode then you can follow the steps below to work on the module locally. You will need to adapt to some differences between your code and what you see in the videos. But each lesson has downloadable .zip files for you to follow along.

Step 1. Make sure you have the latest version of Node installed. If not head over to https://nodejs.org/en/download to download the LTS (Long Term Support) version of Node.

Step 2. Make sure you have the latest version of VSCode installed. If not, head over to https://code.visualstudio.com/download to download the version for your platform.

Step 3. Open a Terminal or command prompt and navigate to the directory where you want to create your React project. (We covered how to do this in previous parts of the course, if this is confusing, I recommend skipping this lesson and continuing with the videos and using CodeSandbox).

Step 4. Create a Vite app by running the following command in your Terminal or Command Prompt:

npm create vite@latest my-react-app --template react

Step 5. The first time, you won’t have Vite installed. Type y to proceed. Then you’ll be asked to select a framework. Use your down arrow to select React.

Step 6. You’ll be asked to select a variant, select Javascript.

Then wait for the installation to finish, this will take a few minutes.

Step 7. Change directory to the new app that you built.

cd my-react-app

Step 8. Install dependencies:

npm install

When npm has installed all the necessary packages, open your project folder in VS Code. You should see a node modules folder:

Step 9. Start the development server:

npm run dev

Vite will compile your code every time your change anything and you can see the location of your development server in the output.

Step 10. Open the app in your browser by heading over to the local address shown. It’s usually at http://localhost:5173/

You can now work on this local version and Vite will automatically recompile your code as you make changes.

Again, I recommend following the videos and using CodeSandbox, but if you are more advanced and prefer to develop locally then you should now be ready to adapt the video code to your local version.

Disable select field with JS/JQuery from another/referrer link

jQuery(document).ready(function($){
	$(document).ready(function() {
		// Get the dropdown element
		var dropdown = $('#input_9_18');

		if (document.referrer === 'https://rockymountainpreschool.com/parent-survey/') {
		// Prevent click and selection events
		dropdown.on('mousedown', function(event) {
			event.preventDefault();
		});
		
		// Add the "readonly" attribute to the dropdown
    dropdown.attr('readonly', 'readonly');
			
		// Add the 'custom-cursor' class to the link
    dropdown.addClass('custom-cursor');
		}
	});

});

Gravity form sate name abbreviation

<script>
jQuery(document).ready(function($) {
  $('.abbreviated-state-field option').each(function() {
    var stateFullName = $(this).text();
    var stateAbbreviation = getStateAbbreviation(stateFullName);
    $(this).text(stateAbbreviation);
  });

  function getStateAbbreviation(stateFullName) {
    switch (stateFullName) {
      case 'Alabama':
        return 'AL';
      case 'Alaska':
        return 'AK';
      case 'American Samoa':
        return 'AS';
      case 'Arizona':
        return 'AZ';
      case 'Arkansas':
        return 'AR';
      case 'California':
        return 'CA';
      case 'Colorado':
        return 'CO';
      case 'Connecticut':
        return 'CT';
      case 'District of Columbia':
        return 'D.C.';
      case 'Delaware':
        return 'DE';
      case 'Florida':
        return 'FL';
      case 'Georgia':
        return 'GA';
      case 'Guam':
        return 'GU';
      case 'Hawaii':
        return 'HI';
      case 'Idaho':
        return 'ID';
      case 'Illinois':
        return 'IL';
      case 'Indiana':
        return 'IN';
      case 'Iowa':
        return 'IA';
      case 'Kansas':
        return 'KS';
      case 'Kentucky':
        return 'KY';
      case 'Louisiana':
        return 'LA';
      case 'Maine':
        return 'ME';
      case 'Maryland':
        return 'MD';
      case 'Massachusetts':
        return 'MA';
      case 'Michigan':
        return 'MI';
      case 'Minnesota':
        return 'MN';
      case 'Mississippi':
        return 'MS';
      case 'Missouri':
        return 'MO';
      case 'Northern Mariana Islands':
        return 'MP';
      case 'Montana':
        return 'MT';
      case 'Nebraska':
        return 'NE';
      case 'Nevada':
        return 'NV';
      case 'New Hampshire':
        return 'NH';
      case 'New Jersey':
        return 'NJ';
      case 'New Mexico':
        return 'NM';
      case 'New York':
        return 'NY';
      case 'North Carolina':
        return 'NC';
      case 'North Dakota':
        return 'ND';
      case 'Ohio':
        return 'OH';
      case 'Oklahoma':
        return 'OK';
      case 'Oregon':
        return 'OR';
      case 'Pennsylvania':
        return 'PA';
      case 'Puerto Rico':
        return 'PR';
      case 'Rhode Island':
        return 'RI';
      case 'South Carolina':
        return 'SC';
      case 'South Dakota':
        return 'SD';
      case 'Tennessee':
        return 'TN';
      case 'Texas':
        return 'TX';
      case 'Utah':
        return 'UT';
      case 'Vermont':
        return 'VT';
      case 'Virginia':
        return 'VA';
      case 'U.S. Virgin Islands':
        return 'VI';
      case 'Washington':
        return 'WA';
      case 'West Virginia':
        return 'WV';
      case 'Wisconsin':
        return 'WI';
      case 'Wyoming':
        return 'WY';
      case 'Armed Forces Americas':
        return 'AA';
      case 'Armed Forces Europe':
        return 'AE';
      case 'Armed Forces Pacific':
        return 'AP';
      default:
        return stateFullName;
    }
  }
});
</script>

Background video mute toggle

<script>
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-mute');
var heroBackgroundVideo = document.querySelector('.herovideo video');
toggleSoundButton.addEventListener('click', function (event) {

if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>

Gravity form radio button design

/* Custom styling for radio buttons in Gravity Forms */
/* Replace 'form-id' with the actual ID or class of your form */

#form-id input[type="radio"] {
  /* Hide the default radio button */
  display: none;
}

#form-id input[type="radio"] + label {
  /* Style the label to resemble a radio button */
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

#form-id input[type="radio"]:checked + label {
  /* Style the selected radio button label */
  background-color: #007bff;
  color: #fff;
}


Gravity form repeater field

// Adjust your form ID
add_filter( 'gform_form_post_get_meta_1', 'add_my_field' );
function add_my_field( $form ) {
 
    // Create a Single Line text field for the team member's name
    $name = GF_Fields::create( array(
        'type'   => 'text',
        'id'     => 555, // The Field ID must be unique on the form
        'formId' => $form['id'],
        'label'  => 'Name',
        'pageNumber'  => 1, // Ensure this is correct
    ) );
 
    // Create an email field for the team member's email address
    $email = GF_Fields::create( array(
        'type'   => 'email',
        'id'     => 77, // The Field ID must be unique on the form
        'formId' => $form['id'],
        'label'  => 'Email',
        'pageNumber'  => 1, // Ensure this is correct
    ) );

    // Create a phone field for the team member's email address
    $phone = GF_Fields::create( array(
        'type'   => 'phone',
        'id'     => 777, // The Field ID must be unique on the form
        'formId' => $form['id'],
        'label'  => 'Phone',
        'pageNumber'  => 1, // Ensure this is correct
    ) );
		
    // Create a repeater for the team members and add the name and email fields as the fields to display inside the repeater.
    $team = GF_Fields::create( array(
        'type'             => 'repeater',
        'description'      => 'Maximum of 3 team members',
        'id'               => 585, // The Field ID must be unique on the form
        'formId'           => $form['id'],
        'label'            => 'Team Members',
        'addButtonText'    => 'Add team member', // Optional
        'removeButtonText' => 'Remove team member', // Optional
        'maxItems'         => 3, // Optional
        'pageNumber'       => 1, // Ensure this is correct
        'fields'           => array( $name, $email, $phone ), // Add the fields here.
    ) );
 
    $form['fields'][] = $team;
 
    return $form;
}
 
// Remove the field before the form is saved. Adjust your form ID
add_filter( 'gform_form_update_meta_1', 'remove_my_field', 10, 3 );
function remove_my_field( $form_meta, $form_id, $meta_name ) {
 
    if ( $meta_name == 'display_meta' ) {
        // Remove the Repeater field: ID 1000
        $form_meta['fields'] = wp_list_filter( $form_meta['fields'], array( 'id' => 585 ), 'NOT' );
    }
 
    return $form_meta;
}