Case Study: Lineup Generator V1


Uncategorized

Updated Aug 24th, 2021

The Lineup Generator was my first ever stab at using programming skills to build a tool that could help create fantasy football lineups.

Paste into a WP page, a snippet of html into an html code block. This was a portion from the index.html file inside the project’s root directory.

<form id="ourForm">
        <label class="button-notice" for="">Minimum Projected Points:  </label>
    <input id="minimumPtsInput" class="inputBv" type="number" min="0" max="200" value="0" step="0.1">
   
    <br>
    <br>
    <button class="btn btn-primary btn-lg btn-block">Generate</button>
    </form>
    <br>

    <div class="lineupContainer" id="ourLineupContainer">     
    </div>

    <p class="" id="maxLimit"></p>

    <div id="footer">
        <p class="smallerText">Disclaimer: This site is for non-profit educational purposes only and uses content from other sources. This site makes no promises about the accuracy and reliability of the content it publishes. The site is provided on an “as is” and “as available” basis, and that by using it, visitors accept that it may contain defects or not meet their expectations.</p>
    </div>

Then I would have page-specific JS files. I leveraged a “reveal-ids” plugin to get a page’s id number.

function bv_child_parent_styles() {
	 // enqueue style
		wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
		wp_enqueue_style( 'parent-thursday', get_theme_file_uri().'/bv-js/styles.css' );
		wp_enqueue_script('custom-js', get_theme_file_uri('/bv-js/scripts.js'), NULL, '1.0', true);		
}

add_action( 'wp_enqueue_scripts', 'bv_child_parent_styles');


/* enqueue script to conditonally load page-specific js and css for Thursday */
function load_thurs_js() {
    if( is_page( 404 ) ) {
        wp_enqueue_script('custom-js-thursday', get_theme_file_uri('/bv-js/thursday.js'), NULL, '1.0', true);
    } 
}
add_action('wp_enqueue_scripts', 'load_thurs_js');

So for the a standard Sunday slate I would go into the site’s files via SFTP and update the JS file that the function was pointing to so I didn’t have to update much in the WP-admin besides a quick paragraph based on when the file was updated.

I won’t get into the logic behind the generator here. But the concept of how I posted the generator to a WP website, on the domain that was my wedding website, is comical.

I used innerHTML and insertAdjacentHTML

Page specific JS loaded into WP.


Top