JSFiddle - React, Tailwind, and code Playground

by Ali Dadmand

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<!DOCTYPE html>
<html Lang="en">

  <head>
    <!-- set the title, the source of the javascript file, and the css sheet -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="report.css">
    <script src="report-ajax.js"></script>
    <title>Report a Wildlife Collision</title>
    <!-- add leaflet css -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
    <!-- add leaflet js file -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
  </head>

  <body>
    <!-- set the javascript script    -->
    <div id="content"></div>
    <h2>Report a Wildlife Collision</h2>
    <!-- set the method for the form and set the php location -->
    <form id="report" method="post" enctype="multipart/form-data">
      <div class="row">
        <div class="col-25">
          <label for="species">Species:</label>
        </div>
      </div>
      <!-- identify the selections for species -->
      <div class="col-75">
        <select id="species" name="species" class="form control" required>
                    <option value="">Select a species</option>
                    <option value="Bear">Bear</option>
                    <option value="Cat">Cat</option>
                    <option value="Coyote">Coyote</option>
                    <option value="Deer">Deer</option>
                    <option value="Fox">Fox</option>
                    <option value="Raccoon">Raccoon</option>
                    <option value="Skunk">Skunk</option>
  ...

CSS

//php script
<h3>Wildlife Collision Record</h3><?php require_once("db.php");
$species1=$_REQUEST['species'];
$species2=$_REQUEST['txtSpecies'];
$gender=$_REQUEST['rbGender'];
$age=$_REQUEST['rbAge'];
$date=$_REQUEST['rpDate'];
$location=$_REQUEST['location'];
$latitude=$_REQUEST['lat'];
$longitude=$_REQUEST['lng'];
if ($species1==="Others");
$species1=$species2;
if ( !empty($species1) && is_string($species1) && !empty($location)&& is_string($location)) {
  $imgURL=null;
}

?><p>Your information been recorded.</p><dl><dt>Species:</dt><dd><?php print $species1;
?></dd></dl><dl><dt>Gender:</dt><dd><?php print $gender;
?></dd></dl><dl><dt>Age:</dt><dd><?php print $age;
?></dd></dl><dl><dt>Date:</dt><dd><?php print $date;
?></dd></dl><dl><dt>Location:</dt><dd><?php print $location;
?></dd></dl><dl><dt>Latitude:</dt><dd><?$latitude=is_numeric($latitude)? $latitude: "NULL";
print $latitude;
?></dd></dl><dl><dt>Longitude:</dt><dd><?$longitude=is_numeric($longitude) ? $longitude: "NULL";
print $longitude;
;
?></dd></dl><?php if ($_FILES["imgFile"]["error"] > 0) {
  // Something happened that prevented the file from uploading...
  print ("<p>File Upload Error: " . $_FILES["imgFile"]["error"] . "</p>");
}

elseif( ($_FILES["imgFile"]["type"]=="image/gif") || ($_FILES["imgFile"]["type"]=="image/jpeg") || ($_FILES["imgFile"]["type"]=="image/jpg") || ($_FILES["imgFile"]["type"]=="image/png") && ($_FILES["imgFile"]["size"] < 1000000)) {
  // The file uploaded without any issues, so get...
  // - file name
  $filename=$_FILES["imgFile"]["name"]; // - tmp name
  $tmpname=$_FILES["imgFile"] ["tmp_name"]; // - path
  $path="uploads\\"; // ...set the destination...
  $imgURL=$destpath . $filename; // ...and try to copy the file...
  if(file_exists($imgURL)) {
    // - The file already exists... That's an error!
    print("<p>File Upload Error: " . $filename . " already exists.</p>");
  }
  else {
    // - Try to move the uploaded file to the destination
   ...

JavaScript

var map;

/* window.onload = function() {

  //initForms();
 // initMap();
} */

initForms();
initMap();


var allGood = true;

//define and set first event handler function
//set the current date using javascript date object and set the value of the input field to the current date
function initForms() {
  document.getElementById("species").onchange = toggleToEnterNewSpecies;
  document.getElementById("report").onsubmit = validateForm;

  var today = new Date();
  var year = today.getFullYear();
  var month = ("0" + (today.getMonth() + 1)).slice(-2);
  var day = ("0" + today.getDate()).slice(-2);
  var hour = ("0" + today.getHours()).slice(-2);
  var minute = ("0" + today.getMinutes()).slice(-2);
  var currentDate = (year) + "-" + (month) + "-" + (day) + "T" + (hour) + ":" + (minute);
  document.getElementById("rpDate").value = currentDate;
  


  // var output = document.getElementById("rpDate"); 
  // output.innerHTML += "rpDate.toString(): " + today.toString() + "<br>";
  // output.innerHTML += "rpDate.toLocaleString(): " + today.toLocaleString() + "<br>";
  // output.innerHTML += "rpDate.toISOString(): " + today.toISOString() + "<br>";
  // output.innerHTML += "rpDate.toUTCString(): " + today.toUTCString() + "<br>";

  // console.log(today.toString());
  // expected output: '19 April 2019 
  // console.log(today.toISOString());
  // console.log(today.toUTCString());
  // console.log(today.toLocaleString());
  // console.log(today.toJSON()); // 



}

//define and set second event handler function
// create function to enable user to input text when Species is others
//identify drop down menu
//get values of selected options and selectedIndex attributes
//Make field txtSpecies required using the setAttribute method or remove the required attribute using
//removeAttribute method


function toggleToEnterNewSpecies() {
  var e1 = document.getElementById('species');
  var e1_index = e1.selectedIndex;
  var e2 = document.getElementById('txtSpecies');
  var...