JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div class="kwInput">
    <label>Input Keywords:</label>
    <input name="kw" value="Lorem" />
    <input name="kw" value="elit" />
    <input name="kw" value="in" />
    <input name="kw" value="amet" />
    <input name="kw" value="odio" />
    <button class="kwCheck">Check Keywords</button>
</div>
<div class="diyw">
    <div id="content_area">
        <div id="content_start">
             <h1>Lorem Ipsum</h1>

            <p class="n">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis tellus pulvinar arcu porttitor, in sagittis sapien pellentesque. Aliquam et lacus at erat sollicitudin tristique ac id eros.<img src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Schneider_Amstrad_PC_1512_DD_Transparent_BG.png" alt="Lorem ipsum" align="left" /> Fusce laoreet, dui at placerat pharetra, tortor metus molestie velit, sed consectetur sapien leo nec leo. Curabitur sit amet fermentum dolor. Duis ante urna, pellentesque a odio eu, scelerisque rhoncus mi. Fusce lorem eros, feugiat id tellus sed, lobortis suscipit diam. Donec non purus turpis. Etiam fringilla pharetra <a href="http://fandango.com">augue</a> iaculis cursus. Ut dapibus augue eget vehicula dictum. Morbi volutpat sollicitudin enim, a dictum magna adipiscing quis. Morbi molestie elit ut massa dictum vestibulum. Nulla ut massa tincidunt, aliquet nisi vitae, placerat metus.</p>
            
            <p class="n"></p>
            
             <h2>Lorem Ipsum</h2>

            <p class="n">In mauris felis, condimentum ut lacinia quis, fringilla sed nisi. Nam gravida, dui nec interdum semper, erat dolor convallis purus, in lobortis erat nisl ac enim. Ut vitae erat eget leo sodales tristique. Aenean tincidunt purus sit amet sagittis scelerisque. In nibh velit, mollis varius ullamcorper eget, cursus non libero. Curabitur tincidunt convallis lectus id eleifend. Donec condimentum ultricies sapien pellentesque tristique. Suspendisse mi orci, vestibulum euismod tortor sit amet, <a...

CSS

body {
    margin:0px;
    padding: 0px;
}
.diyw {
    padding: 10px;
}
.kwInput {
    background: #e5e5e5;
    border-bottom: solid 1px;
    padding: 10px;
    position: fixed;
    width: 100%;
    top: 0px;
}
img {
    width: 80px; 
    border: solid 1px; 
    padding: 5px;
    margin: 5px;
}

JavaScript

$('body').prepend('<div id="counterOutput" style="padding:10px;margin:10px;border: solid 1px #000; margin-top:80px;"><div style="border:solid 1px #000; background: #e5e5e5; padding: 5px;"><strong>Results</strong></div></div>');

// N Count + Word count + Total Word Count
nCount = $('#content_area .n').length;
$('#counterOutput').append('<p><strong><u>Paragraphs on page: ' + nCount + '</p>');

var totalWordCount = 0;
var pCount = 1;
$('#content_area .n').each(function () {
    text = $(this).text();
    wordCount = text.split(' ');
    $('#counterOutput').append('<p><strong><u>Paragraph-' + pCount + '</u></strong>: ' + (wordCount.length - 1) + ' words </p>');
    totalWordCount = totalWordCount + (wordCount.length - 1);
    pCount++;
});
$('#counterOutput').append('<p><strong><u>Total words on page</u></strong>:' + totalWordCount + '</p>');
if (totalWordCount < 300) {
    $('#counterOutput').append('<p style="color:red;"><strong>This page does not pass the minimum word count!</strong></p>');
} else {
    $('#counterOutput').append('<p style="color:green;"><strong>This page passes the minimum word count amount.</strong></p>');
}

// H1 Count
h1Count = $('#content_area h1').length;
$('#counterOutput').append('<p><strong><u>Headings on page</u></strong>: &lt;h1&gt; ' + h1Count + '</p>');

// H2 Count
h2Count = $('#content_area h2').length;
$('#counterOutput').append('<p><strong><u>Headings on page</u></strong>: &lt;h2&gt; ' + h2Count + '</p>');

// A Count
aCount = $('#content_area a').length;
$('#counterOutput').append('<p><strong><u>Links on page</u></strong>: ' + aCount + '</p>');
var intern = 0;
var extern = 0;
$('#content_area a').each(function () { // Iterate through links to determin if internal or external
    host = window.location.host;
    linkLocation = $(this).attr('href');
    if (linkLocation.indexOf(host) >= 0) {
        intern++;
    } else {
        extern++;
    }
});
$('#counterOutput').append('<p><strong><u>Internal Links:</u></strong> ' + intern...