JSFiddle - React, Tailwind, and code Playground

by Tanveer Khan

HTML

<title>CSCI E-3 Unit 2 Project:  Part A</title>

<div 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
  ...

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

var getFibSum = document.getElementById("sumFib");

getFibSum.onclick = function(){
               document.getElementById("sumFibResult").innerHTML = twelveEvenFibonacciSum();
 }

 function twelveEvenFibonacciSum(){
     
 console.clear();
                
        var fib = [0, 1]; //Initialize array
        var sum = 0;
        var counter = 0;
        
            for (var i= 2; i <= 50; i++) {         
                    fib[i] = fib[i-1] + fib[i-2];    
                    var integer = fib[i];
                    if(integer  % 2 != 0) {

                         // sums up the totol of my fib even numbers
                         var sumFibResult = sum += fib[i];
                        console.log("shows the numbers being added together " + sumFibResult);
                        counter++;
                    }
                // Loops 12 times checking for even numbers
                if(counter >= 12) {
                   return sumFibResult;
                }
            } //console.log(fib);
 }