CODEWITHSUNDEEP
javascripthtmlcssjsfiddle
insomniac
insomniac

Reputation: 155

How to combine html, js and css from fiddle

I know the Question is silly and fiddle is only for testing your code, but combining that into one code via putting JS under script<> and css under style<> is not working for me!

link to my code

I have used the following way as suggested by others:

<html>

<head>
<style type="text/css">
table tr td {
  border: 1px solid;
  padding: 4px;
}


<body>
 <div ng-controller="MyCtrl">
<button ng-click="processData(allText)">
  Display CSV as Data Table
</button>
<div id="divID">
  <table style="border:1px solid">
    <tr ng-repeat="x in data">
      <td ng-repeat="y in x" rowspan="{{y.rows}}" colspan="{{y.cols}}">{{ y.data }}</td>
    </tr>
  </table>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script language="JavaScript" type="text/javascript">
var myApp = angular.module('myApp', []);

 myApp.controller("MyCtrl", function($scope) {
  $scope.allText = "RS#2|Through Air CS#2|Over Surface CS#2|\nin.|mm|in.|mm|\nB |3/32\n (a)|2.4 \n (a)|3/32 \n (a)|2.4 \n (a)|\nD |1/16\n (a)|1.6 \n (a)|1/8 \n (a)|3.2 \n (a)|\n";
  $scope.processData = function(allText) {
    // split content based on new line
    var allTextLines = allText.split(/\|\n|\r\n/);
    var lines = [];
    var r, c;
    for (var i = 0; i < allTextLines.length; i++) {
      // split content based on comma
      var data = allTextLines[i].split('|');

      var temp = [];
      for (var j = 0; j < data.length; j++) {
        if (data[j].indexOf("RS") !== -1) {
          r = data[j].split("#").reverse()[0];
        } else {
          r = 0;
        }
        if (data[j].indexOf("CS") !== -1) {
          c = data[j].split("#").reverse()[0];

        } else {
          c = 0;
        }
        temp.push({
          "rows": r,
          "cols": c,
          "data": data[j].replace(/RS#.*$/, '').replace(/CS#.*$/, '')
        });
      }
      lines.push(temp);

    }
    alert(JSON.stringify(lines));
    $scope.data = lines;
  }
});

Upvotes: 2

Views: 1240

Answers (1)

Saad
Saad

Reputation: 53799

The problem is that you are using an external JS framework, AngularJS. You will have to create another script tag which loads Angular as well. There are two ways you can do this: you can either download the angular source code and then load that into your HTML, or use a CDN.

To use the CDN, you can just add the following above your current <script> tag:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Your final output should look like this:

<html>
<head>
<style type="text/css">
    // CSS Content
    </style>
</head>
<body ng-app="myApp">
 <!-- some html elements -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script language="JavaScript"  type="text/javascript">
        // more js here.
    </script>   
</body>

Upvotes: 2

Related Questions