JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<body class="hw">
    <div class="container">
      <h1>CSCI E-3 Unit 2 Project: Part A</h1>
      <p class="whatlearn">This is worth half of the total point value for the
        Unit 2 Project. There will be a Unit 2 Project: Part B as well, released in
        two weeks. Both Part A and Part B are due on the same date, the
        night before Unit 3 begins. We will cover the material required to do
        this assignment over the coming weeks, well in advance of when it is
        due. </p>
      <h3 class="whatlearn">What you're learning:</h3>
      <p>How to handle the most basic information in a computer program: numbers
        and strings, arrays, and conditionals.<br>
      </p>
      <ol>
        <li>Math: Basic mathematical calculations underlie nearly everything
          that you'll do with a computer program: counting photos to layout on
          a page, calculating prices in a shopping cart, positioning a ball on a
          game screen, or figuring the length of the bar on a graph. <br>
        </li>
        <li>String Handling: manipulating text</li>
        <li>Arrays</li>
        <li>Conditionals, looping, and functions are some of the most basic
          structures in computer programming. These also underlie just about
          everything you'll do in a program.&nbsp; </li>
      </ol>
      <h3>What you need to do:</h3>
      <ol>
        <ol>
          <li>Follow the example to create your own mathematical converter (5 points)</li>
          <li>Place an X in an automatically-chosen random location within a box
            (5 points)</li>
          <li>Use indexOf() and substr() or slice() to divide your name into two
            strings&mdash;firstname and lastname (10 points)</li>
          <li>Provide a feature in this page that counts the words input into
            the input box below (15 points)</li>
          <li>Write a function that will calculate the sum of the first 12 even
            Fibonacci numbers (20 points)</li>
   ...

CSS

#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

.degoutput{
	width:4em;
	border: 1px solid gray;
	padding: 1px;
}

#putAnX{
	width:600px;
	height:400px;
	border:1px solid black;
}
#theX{
	position:relative;
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.hwbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid...

JavaScript

/* CSCI E-3 Introduction to Web Programming Using Javascript
 * Spring 2014
 *
 * Homework Unit #2
 *
 *
 */

 /********************************************************************
  *
  * First problem: temperature conversion
  *
  * If the values entered by the user aren't numbers (or convertible to numbers),
  * return nothing (or, more specifically, leave the output field blank)
  *
  ********************************************************************/

 var convertCtoF = document.getElementById("degC");
 convertCtoF.onchange = function(){  //onchange means that every time the value in the input box changes, this function will run
                var degreesC = document.getElementById("degC").value; // this is the value from the form field

                // your calculations go here. You'll start with the variable degreesC, convert it to Fahrenheit
                //  and place the result in the variable 'degreesF'
                var degreesF = "you haven't written this code yet"; // you will set this to the results of your conversion
                var degreesF = (degreesC - 32) * (5/9);
                // now we write the result to the page
                document.getElementById("degFOut").innerHTML = degreesF;
 }

 var convertFtoC = document.getElementById("degF");
 convertFtoC.onchange = function(){  //onchange means that every time the value in the input box changes, this function will run
                var degreesF = document.getElementById("degF").value; // this is the value from the form field
                
                // your calculations go here. You'll start with the variable degreesF, convert it to Celsius
                //  and place the result in the variable 'degreesC'
                var degreesC = "you haven't written this code yet"; // you will set this to the results of your conversion
                var degreesC = (degreesF * (9/5)) + 32;
                console.log(degreesC)

                // now we write the result to...