How to combine html, js and css from fiddle

Question

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;
  }
});

are you getting any error in console after you combine ?

Afsar
– Afsar

2015-12-02 10:08:35 +00:00
Commented Dec 2, 2015 at 10:08 — Afsar
– Afsar, Commented Dec 2, 2015 at 10:08
I'm getting {{y.data}} as output

insomniac
– insomniac

2015-12-02 10:13:49 +00:00
Commented Dec 2, 2015 at 10:13 — insomniac
– insomniac, Commented Dec 2, 2015 at 10:13
you are missing angularjs include in your page

Afsar
– Afsar

2015-12-02 10:15:07 +00:00
Commented Dec 2, 2015 at 10:15 — Afsar
– Afsar, Commented Dec 2, 2015 at 10:15

Saad · Accepted Answer · 2015-12-02 10:37:13Z

2

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>

edited Dec 2, 2015 at 10:37

answered Dec 2, 2015 at 10:10

Saad

54.7k22 gold badges79 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

insomniac Over a year ago

i added this as src attribute in script still it isn't working

Saad Over a year ago

Are you creating it as a separate <script> tag? Look at my revised answer.

Saad Over a year ago

You need to change <body> to <body ng-app="myApp">. It should work after that, it seems fine for me.

Saad Over a year ago

Glad to hear it. Just a tip: you can click on "HTML" in the JSFiddle window and it will show you what special attributes the fiddle has set for you. After clicking on "HTML" on your JSFiddle, you can see that it tells you what you should do for the <body> tag. You can click on "JavaScript" and "CSS" as well and you can find out info about them as well (clicking on JavaScript will show you that you are using an external js framework).

Collectives™ on Stack Overflow

How to combine html, js and css from fiddle

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related