JSFiddle - React, Tailwind, and code Playground

by Mike Kerney

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Assignment #6</title>
    <link href="newsiteStyle.css" rel="stylesheet" type="text/css">
    <script>
      var __adobewebfontsappname__ = "dreamweaver"

    </script>
    <script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js"></script>
    <script src="menu.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
      src = "Cards"

    </script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  </head>

  <body>

    <div id="mainwrapper">
      <header>

        <div id="logo"> <img src="logo.png" alt="" height="50"> </div>
        <nav>
          <ul id="sddm">
            <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()" onblur="mclosetime()" onfocus="mopen('m1')">Home</a>
              <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" onblur="mclosetime()" onfocus="mcancelclosetime()">
                <a href="index.html">Home</a>
              </div>
            </li>
            <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" onblur="mclosetime()" onfocus="mopen('m2')">Assignments</a>
              <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" onblur="mclosetime()" onfocus="mcancelclosetime()">
                <a href="assignment1.html">Assignment 1</a>
                <a href="Assignment2.html">Assignment 2 - Original Site</a>
                <a href="assignment3.html">Assignment 3 - Form Validation</a>
                <a href="assignment4.html">Assignment 4 - Function Calculator</a>
                <a href="assignment5.html">Assignment 5 - Random...

CSS

@charset "UTF-8";
.drop {
  float: left;
  width: 600px;
  height: 200px;
  background-color: grey;
  text-align: center;
}

#myCanvas {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 400px;
  height: 400px;
}

#formbox {
  align-content: center;
  background-color: #2E2D2D;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}

#mainwrapper header {
  /*Header */
  background-color: rgba(0, 0, 0, 1.00);
  overflow: auto;
  font-family: montserrat, sans-serif;
  font-style: normal;
  font-weight: 400;
}

#mainwrapper header #logo {
  /* Company Logo text */
  width: 28%;
  float: left;
  padding-left: 2%;
  padding-top: 0px;
  padding-bottom: 0px;
  color: black;
  background-color: #ADFF2F;
  margin-right: auto;
  margin-left: auto;
}

#mainwrapper header nav {
  /*Nav bar containing links in header */
  text-align: right;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 2%;
  width: 68%;
  float: left;
  color: #ADFF2F;
  background-color: #000000;
}

header nav a {
  /* Links in header */
  padding-right: 2%;
}

#content #mainContent h1,
#content #mainContent h2 {
  /* Styling for main headings */
  color: #ADFF2F;
  text-align: center;
  background-color: #2E2D2D;
}

#content #mainContent h3 {
  /*Captions ot Taglines */
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
  font-style: italic;
  font-weight: 200;
  color: #ADFF2F;
  display: list-item;
  background-color: #2E2D2D;
}

#content #mainContent #bannerImage {
  /*Container for main banner image */
  width: 100%;
  background-color: rgba(208, 207, 207, 1.00);
}

#content #mainContent p {
  /* All paragraphs under maincontent */
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  font-style: normal;
  font-weight: 200;
  text-align: center;
  color: #ADFF2F;
}

#content #mainContent #authorInfo {
  /* Author info section */
 ...

JavaScript

$(init);
              $('#deal').click(function() {
                dealCard(randomCard());
              });

              var cardsInDeck = new Array();
              var numberOfCardsInDeck = 5;
              cardsInDeck[0] = "AceHearts";
              cardsInDeck[1] = "Clubs2";
              cardsInDeck[2] = "ClubsAce";
              cardsInDeck[3] = "DiamondsKing";
              cardsInDeck[4] = "SpadesJack";

              function init() {
                $('.drop').droppable({
                  drop: handleDropEvent
                });
              }

              function dealCard(i) {

                if (numberOfCardsInDeck == 0) return false;
                var img = document.createElement("img");
                if (img && img.style) {
                  img.style.height = '100px'
                  img.style.width = '50px'
                }
                img.src = "https://cop4813eaglin.pbworks.com/f/" + cardsInDeck[i] + ".png";

                img.id = cardsInDeck[i];

                document.getElementById("demo").appendChild(img);
                //document.body.appendChild(img);
                removeCard(i);
                $('#' + img.id).draggable();

              }

              function randomCard() {
                return Math.floor(Math.random() * numberOfCardsInDeck);
              }

              function removeCard(c) {
                // simply make every higher numbered card move down 1
                for (j = c; j <= numberOfCardsInDeck - 2; j++) {
                  cardsInDeck[j] = cardsInDeck[j + 1];
                }
                numberOfCardsInDeck--;
              }

              function handleDropEvent(event, ui) {
                var draggable = ui.draggable;
                $('#drop').html('The card with ID "' + draggable.attr('id') + '" was dropped onto me!');

              }