JSFiddle - React, Tailwind, and code Playground

by mtzara

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSCI E-3 Homework #2</title>
    <link rel="stylesheet" href="css/cscie3.css">
  </head>
  <body class="hw">
  <div class="container">
    <h1>CSCI E-3 Homework #2</h1>
      <p class="whatlearn"> The course material
        needed to solve these problems is covered in the course material on variables, conditional,
        arrays and looping (weeks 1-4 in the full-semester version of the course, weeks 1-2 in the summer
        version). Some of these solutions
        will require that you use concepts you've learned in new ways, or look up and use new properties
        and methods of standard Javascript objects, such as String or Math. If the conceptual
        leap from the basics you've learned so far to the problems here seems large, be sure
        to attend section meetings, ask questions in Piazza, and re-read/re-watch
        the course material if necessary! </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>

          <li>Follow the example to calculate an average (5 points)</li>
          <li>Generate random numbers as for a lottery drawing</li>
         ...

JavaScript

// This line sets calcAvgButton to point to the browser object that supports the button on this form.
 // You don't need to understand this yet - we'll cover it in depth later in the course - but it's
 //  here to make the form work in the page.
 var calcAvgButton = document.getElementById("calcAverage");

 calcAvgButton.onclick = function(){  //onclick means that when the button is clicked, this function will run

   // these three variables contain values from the three form fields
   var val1 = document.getElementById("val1").value;
   var val2 = document.getElementById("val2").value;
   var val3 = document.getElementById("val3").value;

   // This variable will contain your result. Notice we declare it, but
   //  aren't assigning any value.  For now, its value will be 'undefined'.
   var result;

  // Your calculations go here. You'll start with the variables va1, val2, and val3,
  //  calculate the average, and assign the result in the variable 'result'.  Remember
  //  that the values that come from the form will be strings, so you'll need
  //  to convert them to numbers before doing math on them.
 function calc (){
  var a = number(val1);
  var b = number(val2);
  var c = number(val3);
  var result=((a+b+c) / 3);}

  
  // now we write the result to the page
  document.getElementById("resultSpan").innerHTML = result;
 }