Why is my custom plugin not working after accidentally deleting a different plugin?

Question

I accidentally deleted a plugin called WP File Manager that seems to only allow me to access my websites files via the WordPress dashboard. After I deleted it, a custom plugin I have stopped functioning properly. The custom plugin is for a shortcode to generate a JS table that is editable by the user which will divide some nutritional information by how many servings they want. I have included the .php .js and .css files that make up the plugin below. If you could help me figure out what is happening i would appreciate it!!

It looks like this when functioning properly:

How the table should look

Currently, all of the pages that have this specific shortcode on the page look like this(below) and nothing happens when you update the number in the Servings column:

How the table currently looks

Here is my .php code

<?php
    function ls_nutritional_table_resources() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'nutrition_table') ) {
    wp_register_style( 'ls-nutritional-table-css',  plugin_dir_url( __FILE__ ) . 'nutritional-table.css' );
    wp_enqueue_style( 'ls-nutritional-table-css' );

    wp_enqueue_script('ls-nutritional-table-js', plugin_dir_url( __FILE__ ) . 'nutritional-table.js' );
}
 }
  add_action( 'wp_enqueue_scripts', 'ls_nutritional_table_resources');

  add_shortcode('nutrition_table', 'ls_nutritional_table');

  function ls_shortcodes() {
   function ls_nutritional_table($atts) {
    $attributes = shortcode_atts(array(
        'servings' => '1',
        'carbs' => '100',
        'protein' => '400',
        'fats' => '90',
        'calories'=> '2810'
    ), $atts);

    $output = '<div class="nutrition-table">
    <div class="nutrition-table__column">
    <div class="nutrition-table__head">Servings</div>
    <div class="nutrition-table__content">
        <input type="number" value="' . esc_html($attributes['servings']) .  '" min="1" autocomplete="off" class="nutrition-table__number">
    </div>
    </div>
    <div class="nutrition-table__column">
    <div class="nutrition-table__head">Carbs</div>
    <div class="nutrition-table__content nutrition-table__content--carbs">' . esc_html($attributes['carbs']) .  'g</div>
    </div>
    <div class="nutrition-table__column">
    <div class="nutrition-table__head">Protein</div>
    <div class="nutrition-table__content nutrition-table__content--protein">' . esc_html($attributes['protein']) .  'g</div>
    </div>
    <div class="nutrition-table__column">
    <div class="nutrition-table__head">Fat</div>
    <div class="nutrition-table__content nutrition-table__content--fat">' . esc_html($attributes['fats']) .  'g</div>
    </div>
    <div class="nutrition-table__column">
    <div class="nutrition-table__head">Calories</div>
    <div class="nutrition-table__content nutrition-table__content--calories">' . esc_html($attributes['calories']) .  ' cals</div>
    </div>
</div>';

 return $output;
  }
 }

 add_action('init', 'ls_shortcodes');

 ?>

Here is my .js code

var NutritionTablesPlugin = (function() {

'use strict';

/**
 * Create the Constructor object
 */
var Constructor = function(selector) {

    //
    // Variables
    //

    var publicAPIs = {};

    var nodes = document.querySelectorAll(selector);

    //
    // Methods
    //
    var allNodes = function(callback) {
        for (var i = 0; i < nodes.length; i++) {
            callback(nodes[i], i);
        }
    };

    /**
     * A private method
     */
    var updateNutritionValues = function(table, multipler, macros) {
        var carbs = table.querySelector('.nutrition-table__content--carbs');
        var protein = table.querySelector('.nutrition-table__content--protein');
        var fat = table.querySelector('.nutrition-table__content--fat');
        var calories = table.querySelector('.nutrition-table__content--calories');

        carbs.textContent = (macros.carbs / parseInt(multipler)).toFixed(1) + 'g';
        protein.textContent = (macros.protein / parseInt(multipler)).toFixed(1) + 'g';
        fat.textContent = (macros.fat / parseInt(multipler)).toFixed(1) + 'g';
        calories.textContent = (macros.calories / parseInt(multipler)).toFixed(0) + ' cals';
    };


    /**
     * Another public method
     */
    publicAPIs.init = function(options) {
        allNodes(function(node) {

            var originalValues = {
                carbs: parseInt(node.querySelector('.nutrition-table__content--carbs').textContent),
                protein: parseInt(node.querySelector('.nutrition-table__content--protein').textContent),
                fat: parseInt(node.querySelector('.nutrition-table__content--fat').textContent),
                calories: parseInt(node.querySelector('.nutrition-table__content--calories').textContent)
            };

            node.addEventListener('change', function(e) {
                updateNutritionValues(node, parseInt(e.target.value), originalValues);
            });
        });
    };

    //
    // Return the Public APIs
    //
    return publicAPIs;
};

//
// Return the Constructor
//
return Constructor;

})();

document.addEventListener("DOMContentLoaded", function(event) {
    var nutrition = new NutritionTablesPlugin('.nutrition-table');
    nutrition.init();

});

Here is my .css code

.nutrition-table {
display: flex;
flex-flow: row wrap;
width: 100%;
max-width: 740px;
margin: 20px auto;
border: 1px solid black;
}
  .nutrition-table__column {
    flex: 1;
    border-right: 1px solid black;
   }
  .nutrition-table__column:last-child {
    border-right: none;
   }
  @media screen and (max-width: 740px) {
   .nutrition-table__column {
     flex: 0 0 100%;
   } 
  }
  .nutrition-table__head {
    padding: 8px 0;
    background: #474b56;
    font-weight: bold;
    font-size: 14px;
    color: white;
    text-align: center;
    text-transform: uppercase;
  }
  .nutrition-table__content {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    font-weight: bold;
    color: black;
  }
  .nutrition-table__number {
    width: 60px;
  }
0
jmc1885 8 months 2020-11-26T06:11:04-05:00 0 Answers 10 views 0

Leave an answer

Browse
Browse