<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway|Slabo+27px|Yatra+One" rel="stylesheet">


  
  <h1 id = "moveCenter"> Scrape and Make Usable. De-tourning the web week one</h1>


<h1 id = "headLine"> Original</h1>
<div id = "originalThis">

 <p id="words"></p>
 </div>

<div id = "reCreate">
<h1>Processed</h1>
      <p id="return"></p>
 </div>
@orange: #FF5A0B;
@red: #FF0000;
@deepRed:#B90504;
@kissRed:#990100;
@cream:#FFF2BC;
@grey:#806F66;
@fiftyShades: #E8E8E8;
@dark:#383636;
@theDarkness: #333333;
@theBlack: #111;
@tufteBack: #fffff8;
@shadyDream: #DEDEDE;
@shadyDark: #2C352F;
@highlightBase:#A41623;
@highlight: lighten(@highlightBase, 10%);
@myFont: 'Yatra One', cursive;
@turk:#1985A1;
@shadyGreen:#B8D8C1;

body {
        padding: 20px;
        background-color: @shadyDream;
        // width: 60%;
        // padding-left: 9em;
        // padding-riight: 1em;
        // font-size: 18px;
        font-size: 1em;
        color: #2C352F;
        font-family: 'Open Sans', sans-serif;

      }

       a{
        color: @turk;
      }

      #message {
      	width: 65%;
      	margin-left: 18%;

      }

      #footNote{
      	    	font-size: 10px;
      }

      #reCreate{
      	width: 55%;
// padding-left: 33%;
margin-left: 18px;
position: absolute;
font-size: 16px;
line-height: 1.5;

      }

      #google{
      	align: center;
      	padding-left: 18%;
      }

      #originalThis {
      	font-size: 10px;
width: 30%;
position: absolute;
padding-left: 60%;
padding-top: 9%;
margin-left: 10px;
      }
#moveCenter{

	text-align: center;
}
      #headLine{
      	position:absolute;
      	left: 66%;
      	// padding-bottom: 20%;
      }
      .file {
        margin-top: 24px;
        font-weight: bold;
      }
      .text {
        border-style: solid;
        border-width: 1px;
        padding: 20px;
      }
      #drop_zone {
        padding: 20px;
        border-style: dotted;
        width: 200px;
        text-align: center;
      }

// #onethey{
// 	color: #A41623;
// }
// #oneThey{
// 	color: #A41623;
// }
// #onetheir{
// 	color: #A41623;
// }
// #onethemselves {
// 	color: #A41623;
// }

// dealing with tense issue with 'she' to 'they'  relates -->related--but it looks funky
#onerelates{
	// visibility: hidden;
	text-decoration: line-through;
	
}

#onedaughter{
	 text-decoration: underline overline;
}

#his{
  	color: @highlight;
    // background-color: #FEFE91;
    // font-family: 'Baloo Bhaina', cursive;
font-family: @myFont;
  }

  #him{
  	color: @highlight;
    // background-color: #FEFE91;
    font-family:@myFont;

  }

  #her{
    color: @highlight;
    font-family:@myFont;

  }


#His{
    color: @highlight;
    // background-color: #FEFE91;
    font-family:@myFont;

  }

  #Her{
    color: @highlight;
    font-family:@myFont;

  }

  #he {
    color: @highlight;
    font-family:@myFont;
  }

  #she {
        color: @highlight;
        font-family:@myFont;
  }
  #He {
    color: @highlight;
    font-family:@myFont;
  }

  #She {
        color: @highlight;
        font-family:@myFont;
  }

  #himself{
  	 color: @highlight;
        font-family:@myFont;
  }
  #Mr{
    color: @highlight;
    font-family:@myFont;
  }

  #Mrs{
        color: @highlight;
        font-family:@myFont;
  }
//questions:
//  -is there any way to make this logic valid:
      //if text is capital font then apply a certain class? 
// Here is where we are working with a regex
function process(data) {
//create an array of the entire text
  var txt = data.join('\n');

//create an array of the text by word (why do I need to data.join above before I can split.text"? @ask)
  var showMe = split(txt, ' ');
  // console.log(showMe);
 

// map objects to set word that replaces matched word in for regex below
var mapObj = {
   he:"they",
   He: "They",
   his:"their",
   her: "their",
   him: "them",
   himself: 'themselves',
//need a second one for the her that should be 'them'
She: "They related" //need to erase original 'relates' in the first part I think, like capture ''


  
 
};

//regex to find 'gender words' (need to add the rest in between pipes below) 
 var regex = /(\bhe\b|\bHe\b|\bhim\b|\bhis\b|\bhimself\b|\bher\b|\bShe\b)/gi;
 
 // regex replace using a function as the second argument which returns the mapped object from above to correctly replace each word with its assigned replacement
               var results = txt.replace(regex,function(matched){
               	return mapObj[matched];
               });

//displaying the (re)Created text
var reSplit = split(results, ' ');
// console.log(reSplit);
var reWordP = select('#return');
       for (var i = 0; i < reSplit.length; i++) {
        var thing = createSpan(reSplit[i]);
//assign an id to each span that is = (one)word so that I can distinguish from id = word, which for loop for highlighted original uses
        thing.id("one"+reSplit[i]);
       thing.parent(reWordP);
       //put spaces in between returned words
 var space2 = createSpan(" ");
    space2.parent(reWordP);

}

 //full text
  //    var par = select('#return');
  // par.html(txt);
//for loop to give each word a span element and give the word 'his' an id of 'his' (or append it to an html element which already has the id 'his')

//Displaying the original text with highlighted gender words
var wordP = select('#words');
  for (var i = 0; i < showMe.length; i++) {
        var word = createSpan(showMe[i]);
//assign an id to each span that is equal to its name so that I can assign css styling to the original gender word
        word.id(showMe[i]);
       word.parent(wordP);
       //put spaces in between returned words
 var space = createSpan(" ");
    space.parent(wordP);



 }
}
var lines;


function preload() {
  lines = loadStrings('https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/bppTenWords.txt', process);
}

function setup() {


}




External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.blast.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js