css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <!--page structure -->
  <div class="container-fluid">
    <!--where everything is displayed -->
    <div class="jumbotron">
      <div class="row-fluid clear-fix visible textarea">
        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
          <h1 class="text-left title">
          Bad-ass Technical Women
        </h1>
          <p class="text-left" id="female-tech-quote">
            Want to hear what technical women have to say?
          </p>
          <p class="text-left">
            <strong>– <span id="female-tech-name">Curious as to who they are</span></strong>, <span id="female-tech-note">want to know their work?
          </span>
          </p>
        </div>
      </div>
      <div class="row-fluid clear-fix visible">
        <button type="button" class="btn btn-primary btn-lg" onclick="whenClicked()">Meet a bad-ass technical woman!</button>
<a class="btn btn-info btn-lg" id="tweettext" title="tweet this quote!" href="#" onclick="dynamicURL()" target="_blank"><i class="fa fa-twitter fa-lg"></i> Share on Twitter!</a>

      </div>
      <div class="row-fluid clear-fix visible source-text">
        <p>Source:
          <a href="http://mentalfloss.com/article/53181/inspiring-quotes-10-influential-women-tech">Inspiring quotes from 10 influential women in tech.</a></p>
        <p>A CodePen by <a href="https://codepen.io/Velochicdunord/">Velochicdunord</a></p>
      </div>
    </div>
  </div>
            
          
!
            
              body {
	padding: 60px;
  background-color: grey;
}
.textarea{
  height: 500px;
}
h1 {
  padding: 0 0 20px 0;
}
p{
  
}

.source-text{
  padding: 15px 0 0 0;
}

img{
  
}
            
          
!
            
              //quote array - to be called and placed in random quote exercise jumbotron
var quoteArray = [
  ["\“A ship in port is safe, but that is not what ships are for. Sail out to sea and do new things.\"",
    "<a href=\"http://www.biography.com/people/grace-hopper-21406809#early-life\">Rear Admiral Grace Hopper</a>",
    "The U.S. Navy’s oldest active-duty officer at the time of her retirement, developer of the <a href=\"https://www.computinghistory.org.uk/det/5487/Grace-Hopper-completes-the-A-0-Compiler/\">first compiler</a> for a computer programming language, developer of <a href=\"https://en.wikipedia.org/wiki/Grace_Hopper#UNIVAC\">UNIVAC I</a> and <a href=\"https://en.wikipedia.org/wiki/Grace_Hopper#COBOL\">COBOL</a>, and coiner of the terms \"<a href=\"http://www.computerhistory.org/tdih/September/9/\">computer bug</a>\" and \"<a href=\"https://en.wikipedia.org/wiki/Debugging\">debugging</a>.\""
  ],

  ["\"I was told I\'d never make it to VP rank because I was too outspoken. Maybe so, but I think men will always find an excuse for keeping women in their \'place.\' So, let's make that place the executive suite and start more of our own companies.\”",
    "<a href=\"http://ethw.org/Jean_Bartik\">Jean Bartik</a>",
    "One of the <a href=\"http://www.computerworld.com/article/2540042/it-management/unsung-innovators--jean-bartik--eniac-programmer.html\">first programmers</a> of the <a href=\"http://www.computerhistory.org/revolution/birth-of-the-computer/4/78\">ENIAC</a>; she later went on to work with <a href=\"http://historyofinformation.com/expanded.php?id=844\">BINAC</a> and <a href=\"http://www.thocp.net/hardware/univac.htm\">UNIVAC I</a> computers, then became one of the early editors of computer information publishing at Auerbach Publishers, Data Decisions, and McGraw-Hill."
  ],

  ["\"I was a bit of an artist, and somewhere along the way had gotten the idea that computers could be used for animation and artists, because in-betweening was so tedious... Of course, everyone thought I was nuts.\" ",
    "<a href=\"https://en.wikipedia.org/wiki/Carla_Meninsky\">Carla Meninsky</a>",
    "Engineer for <a href=\"https://en.wikipedia.org/wiki/Atari\">Atari</a>, who coded <a href=\"https://en.wikipedia.org/wiki/Atari_2600\">Atari 2600</a> games <a href=\"https://en.wikipedia.org/wiki/Warlords_(1980_video_game)\">Warlords</a>, <a href=\"https://en.wikipedia.org/wiki/Dodge_%27Em\">Dodge \‘Em</a>, and <a href=\"https://en.wikipedia.org/wiki/Star_Raiders\">Star Raiders</a>."
  ],

  ["\“We accepted education as the means to rise above the limitations that a prejudiced society endeavored to place upon us.\"",
    "<a href=\"http://www.biography.com/people/evelyn-boyd-granville-21442045#synopsis\">Evelyn Boyd Granville</a>",
    "One of the first black women in the U.S. to earn a PhD in Mathematics, and later, an analyist and developer in IBM for <a href=\"https://en.wikipedia.org/wiki/Project_Vanguard\">Project Vanguard</a> and <a href=\"https://en.wikipedia.org/wiki/Project_Mercury\">Project Mercury</a>, which she called \"the most interesting job of [her] lifetime.\""
  ],

  ["\"[T]he world would be a better place if more engineers, like me, hated technology. The stuff I design, if I’m successful, nobody will ever notice. Things will just work, and be self-managing.\"",
    "<a href=\"https://en.wikipedia.org/wiki/Radia_Perlman\">Radia Perlman</a>",
    "<a href=\"http://science.howstuffworks.com/innovation/big-thinkers/mother-of-internet.htm\">\"The Mother of the Internet,\"</a> <a href=\"https://www.ieee.org/index.html\">IEEE</a> fellow, inventor of <a href=\"https://en.wikipedia.org/wiki/Spanning_Tree_Protocol\">Spanning-Tree Protocol (STP)</a>, <a href=\"https://billyc5022.blogspot.com/2012/03/radia-perlman-talk-on-trill-and.html\">TRILL</a>, and <a href=\"https://dspace.mit.edu/handle/1721.1/6224\">TORTIS</a>, an early programming language for children."
  ],

  ["\"Most engineers like to proceed from A to B to C in a series of logical steps. I'm the rare engineer who says the answer is obviously Z and we will get on with that while you guys work out how to do all the intermediate steps. It makes me a dangerous person to employ in IT but a useful one.\"",
    "<a href=\"https://en.wikipedia.org/wiki/Sophie_Wilson\">Sophie Wilson</a>",
    "Designer of the <a href=\"https://en.wikipedia.org/wiki/Acorn_System_1\">Acorn Micro-Computer</a> and <a href=\"https://en.wikipedia.org/wiki/BBC_Micro\">BBC Micro</a>, <a href=\"https://en.wikipedia.org/wiki/BBC_BASIC\">BBC BASIC programming language</a>, and the <a href=\"https://www.telegraph.co.uk/finance/newsbysector/epic/arm/8243162/History-of-ARM-from-Acorn-to-Apple.html\">ARM (Acorn RISC Machine)</a>, a foundational technology for handheld computing devices."
  ],

  ["\"I designed the executive program for handling situations when there are too many calls, to keep it operating efficiently without hanging up on itself. Basically it was designed to keep the machine from throwing up its hands and going berserk.\"",
    "<a href=\"https://en.wikipedia.org/wiki/Erna_Schneider_Hoover\">Erna Schneider Hoover</a>",
    "Her revolutionary <a href=\"https://www.google.com/patents/US3623007?dq=patent:3623007\">computerized telephone switching method</a> for <a href=\"https://en.wikipedia.org/wiki/Bell_Labs\">Bell Laboratories</a>. Hoover was awarded one of the earliest software patents and became the first female supervisor of any technical department at Bell, cementing her place as a pioneer in modern communications technology."
  ],

  ["\"Any girl can be glamorous. All she has to do is stand still and look stupid.\"",
    "<ahref=\"https://en.wikipedia.org/wiki/Hedy_Lamarr\">Hedy Lamarr</a>",
    "\"The most beautiful woman in Europe,\” <a href=\"http://www.hollywoodsgoldenage.com/actors/hedy_lamarr.html\">Hollywood \“Golden Age\”</a> actress, and co-developer of a <a href=\"http://www.businessinsider.com/hedy-lamarr-george-antheil-frequency-hopping-2014-7\">frequency-hopping/spread spectrum technology</a> based on a player piano. Lamarr never earned a penny from her patent; after her patent expired, the technology was used in guided torpedoes by the U.S. Navy during the Cuban Missile Crisis."
  ],

  ["\"I think it's very important to get more women into computing. My slogan is: Computing is too important to be left to men.\"",
    "<a href=\"https://en.wikipedia.org/wiki/Karen_Sp%C3%A4rck_Jones\">Karen Spärck Jones</a>",
    "<a href=\"https://www.cl.cam.ac.uk/archive/ksj21/\">Professor of Computers and Information at Cambridge Computer Laboratory</a>. Spärck Jones was a vocal advocate for women in computing and technology; she introduced the concept of <a href=\"https://en.wikipedia.org/wiki/Tf%E2%80%93idf\">inverse document frequency (IDF)</a> used by most search engines today."
  ],

  ["\"If I am remembered at all, I would like to be remembered as my family storyteller. It has been a great life.\"",
    "<a href=\"https://en.wikipedia.org/wiki/Kathleen_Antonelli\">Kay McNulty Mauchly Antonelli</a>",
    "One of the <a href=\"https://en.wikipedia.org/wiki/ENIAC#.22Refrigerator_Ladies.22\">original six female programmers</a> of ENIAC, software designer for BINAC and UNIVAC I, and wife of <a href=\"https://en.wikipedia.org/wiki/John_Mauchly\">John Mauchly</a>, co-inventor of the ENIAC and UNIVAC I."
  ]
];

//set end destination string. Text set to alert if not working.
  var combinedStr = "notCombined";
  console.log(combinedStr);

v//call the functions
function whenClicked(){
  
  var quoteNum = 0;
  //run function to assign the quote number
  quoteNum =  Math.floor(Math.random() * 10);

  //call the values from the array and assign to the elements
  document.getElementById("female-tech-quote").innerHTML = quoteArray[quoteNum][0];
  document.getElementById("female-tech-name").innerHTML = quoteArray[quoteNum][1];
  document.getElementById("female-tech-note").innerHTML = quoteArray[quoteNum][2];

  //strip html markup off female-tech-name if present
  var cleanedNameStr = quoteArray[quoteNum][1].replace(/<[^>]*>?/gi, '');

  
  //call the values from the array and assign to variables
  var quoteStr = quoteArray[quoteNum][0];
  console.log(quoteStr);
  
  //check to ensure combined strings are 140 characters or less
  //if more, reduce quote length by one full sentence.
  var maxLength = 140 - (3 + cleanedNameStr.length);
  var isLess140 = true;
  var tweetStr = " ";
  var ct = 0;

  //check quoteStr against maxLength. If longer, split into 
  //pieces at periods
  if (quoteStr.length > maxLength) {
    var strArray = quoteStr.split(".");
  }

  //reassemble, checking length in each loop.
  //Stop when the room remaining is less than next sentence in quote
  do {
    //add next sentence in quote
    tweetStr = tweetStr.concat(strArray[ct], ". ");
    console.log(tweetStr);
    ct++;
    console.log(ct);
    //check how much room is left
    var strALen = tweetStr.length;
    console.log(strALen);
    var strB = strArray[ct];
    console.log(strB);
    var strBLen = strB.length;
    console.log(strBLen);
    if ((strALen + strBLen) >= maxLength) {
      //if there isn't room the next string, change flag
      isLess140 = false; 
    }
  } while (isLess140 === true);
  combinedStr = tweetStr.concat("– ", cleanedNameStr);
  console.log(combinedStr);
  return combinedStr;
}

//push the quote to the twitter button
function dynamicURL(combinedStr) {
  //assign the string for twitter
  document.getElementById("tweettext").href = "https://www.twitter.com/intent/tweet?text="
  + encodeURIComponent(combinedStr);
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console