I started working with a company, the Reliable Collaboration Company #rcc, a few weeks ago thanks to an in with an old friend. The company is working on a bigger event planning social media project, while I'm doing some learning on a smaller side-project, called Counterservice. But for now, we're just programming side-projects for a week to illustrate where we are currently regarding: HTML, CSS, and vanilla JS.

Spoiler alert: I'm nowhere near anywhere in vanilla JS, and rusty as hell at HTML/CSS. But that didn't stop me! Our goal was to cook up a form, any form, that would take in data, and display that data in a new form below the form on the same page using Javascript. So, welcome to the unplayable Fantasy Football League, with only NFC North teams.

What's it do?

It asks for your full name, team name, which team, week, and unit you'd like to select as your 'team' selection, and then re-organizes the data below. It doesn't play any game or anything, but it uses vanilla JS and CSS to manage the form.

This is a very loose implementation of the fantasy football site that I'm actually building: this site will be in beta for the upcoming season, and allows the users to play backwards fantasy football: FF where you pick a new 'bad' quarterback and a 'bad' Defense every week, and compete to see who does worst. This isn't really a build of it, but it at least shows the basic concept of selecting a team.

So, code and stuff?

It's a generic HTML form, integrated with JS and CSS. The text is put through the validation paces through the use of external functions and is displayed at the end through this:

    // If form isn't valid, don't display the third section
    if (!formIsValid) {displayDataText = ''};

    // Set text content for the fields
    document.getElementById("displaynameparagraph").textContent = displayNameText;
    document.getElementById("displayteamparagraph").textContent = displayTeamText;
    document.getElementById("displaydataparagraph").textContent = displayDataText;

The logic is beyond the scope of this article, but functions were written to validate each individual text input and change the border to red if input was invalid. But in the end, all valid results are displayed and animated using a simple CSS keyframe animation.

.textContent was used to make sure nobody can hijack the HTML and name themselves, say, <hr><hr>lol<hr> and jack up the displaying of the page.

All In All

I think I did a pretty good job making an attractive, responsive form for selecting your name, team, etc. in a fantasy football context. This probably won't be used in any finished product but something along these lines might show up in my S4L project that I'm converting from using PHP for the logic to using JS. Not bad for day 2.