can't covert css to rtl using javascript library - javascript

I am beginner in JavaScript and I am trying to use rtlcss library to conver css files from ltr to rtl. I am using this code but it displays 2 errors:
Uncaught SyntaxError: Illegal return statement
Uncaught ReferenceError: require is not defined
My code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>convert css to rtl</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/rtlcss/src/rtlcss.js"></script>
</head>
<body>
<textarea id="source_textarea" placeholder="place your css" ></textarea>
<button id="convert_btn">Convert</button>
<textarea id="result_textarea"></textarea>
<script>
(function myfunction() {
rtlcss = require('rtlcss');
var output = rtlcss.process('css/main.css');
console.log(output);
$("#result_textarea").val(output);
})();
</script>
</body>
</html>
I believe i am doing something wrong, it's not library problem.. so anyone can help?

This is a node package, as #haakym mentioned, you should be using NPM (node package manager). For more details on how to install and use NPM, follow the Getting Started guide.
If you want to use it in the browser, you can use Browserify; it lets you require('modules') in the browser by bundling up all of your dependencies.
After you have node/npm setup complete, do the following:
From the command line, run these commands to install RTLCSS and Browserify
npm install rtlcss
npm install -g browserify
Create a file with the following contents and save it as main.js :
rtlcss = require('rtlcss');
Run this command to create a browser usable bundle:
browserify main.js -o bundle.js
Include the resulting script in your page:
<script src="bundle.js"></script>
That's all, Now you'll be able to use it in the browser:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>convert css to rtl</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="bundle.js"></script>
</head>
<body>
<textarea id="source_textarea" placeholder="place your css" ></textarea>
<button id="convert_btn">Convert</button>
<textarea id="result_textarea"></textarea>
<script>
$('button').click(function(){
var output = rtlcss.process($('#source_textarea').val());
$("#result_textarea").val(output);
});
</script>
</body>
</html>
Online Demo

Related

Run Mocha.js in the browser via npm script [duplicate]

Is it just me, or does their documentation not explain how to run the tests in the browser at all?
Do I have to create that HTML file that they show in the example? How do I make it run my specific set of test cases for my project then?
I want the same output as running mocha from project root. All subdirectories inside the test folder need to be included
If we need to run our tests in a browser, we need to set up a simple HTML page to be our test runner page. The page loads Mocha, the testing libraries and our actual test files. To run the tests, we’ll simply open the runner in a browser.
example html code :
<!DOCTYPE html>
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd')</script>
<!-- load code you want to test here -->
<!-- load your test files here -->
<script>
mocha.run();
</script>
</body>
</html>
Setting up a Directory Structure
You should put your tests in a separate directory from your main code files. This makes it easier to structure them, for example if you want to add other types of tests in the future (such as integration tests or functional tests).
The most popular practice with JavaScript code is to have a directory called test/ in your project’s root directory. Then, each test file is placed under test/someModuleTest.js.
Important things :
We load Mocha’s CSS styles to give our test results nice formatting.
We create a div with the ID mocha. This is where the test results are
inserted.
We load Mocha and Chai. They are located in subfolders of the
node_modules folder since we installed them via npm.
By calling mocha.setup, we make Mocha’s testing helpers available.
Then, we load the code we want to test and the test files. We don’t
have anything here just yet.
Last, we call mocha.run to run the tests. Make sure you call this
after loading the source and test files
I thought the documentation wasn't entirely clear too, but I figured it out eventually and got it set up. Here's how:
Include the Mocha script and CSS in Index.html. Also include a div with id "Mocha" for the output to be inserted into. Include the test script you'd like to execute.
<link href="lib/mocha/mocha.css" rel="stylesheet" />
<script src="lib/mocha/mocha.js"></script>
<script src="test/my_mocha_test.js"></script>
<div id="mocha"></div>
In your test file (my_mocha_test.js in this example) include this setup line at the top:
// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');
Now with the test and the Mocha content all loaded, you can run the tests with this command:
mocha.run();
You can add that to an event listener and trigger it on a button push or other event, or you can just run it from the console, but it should put the test output in the div with the "mocha" id. Here's a page with all this set up with code viewable on GitHub for you to
https://captainstack.github.io/public-stackhouse/
My way to do it with:
ES6, import, export, chai
Used mocha 6.1.4 and chai 4.2.0.
src/MyClass.js:
export default class MyClass { }
test/MyClass.js:
import MyClass from "../src/MyClass.js";
let assert = chai.assert;
describe('MyClass tests', function () {
describe('The class', function () {
it('can be instantiated', function () {
assert.isObject(new MyClass());
});
});
});
test/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mocha</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mocha.css">
<script src="mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script type="module" class="mocha-init">
mocha.setup('bdd');
</script>
<!-- ------------------------------------ -->
<script type="module" src="test.js"></script>
<!-- ------------------------------------ -->
<script type="module">
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
The mocha.js and mocha.css files were created via mocha init test, but can also be found in node_modules/mocha.
If this is improvable, let me know. The answer is insprired by this post.
Here's the most basic chai/mocha test in the browser.
mocha.setup('bdd');
describe('test', () => {
it('passes', () => {
chai.expect(1).to.eql(1);
});
it('fails', () => {
chai.expect(1).to.eql(2);
});
});
mocha.run();
<div id="mocha" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.0.1/mocha.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>

No module named 'theblockchainapi' in pyscript

I have wirtten some lines in python and want to integrate them into my website. As soon as I want to use them I recieve an error-message stating that the module can't be found:
JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 429,
in eval_code .run(globals, locals) File "/lib/python3.10/site-packages/_pyodide/_base.py",
line 300, in run coroutine = eval(self.code, globals, locals) File "", line 1,
in ModuleNotFoundError: No module named 'theblockchainapi' )
The html is very basic:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<title>Document</title>
</head>
<body>
<div>
<input type="text" id = "address"> <br>
<button id="button">Verify NFT</button>
<div id="out">none</div>
</div>
</body>
</html>
<py-env>
- theblockchainapi
</py-env>
<py-script>
from theblockchainapi import SolanaAPIResource, SolanaNetwork
</py-script>
The package theblockchainapi requires the SSL module. The SSL modules, along with requests are not supported in web browsers. This is a security limitation for all browser applications and not just PyScript.
The solution will require modifying theblocckchainapi package to use supported browser APIs.

Error when using "import" statement in Javascript

I have a following code and get "TypeError: Error resolving module specifier: solc/wrapper" error. I followed these instructions https://github.com/ethereum/solc-js#browser-usage to put the code together.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://solc-bin.ethereum.org/bin/list.js"></script>
<script type="text/javascript" src="https://solc-bin.ethereum.org/bin/soljson-v0.5.1+commit.c8a2cb62.js"></script>
<script type="module" defer>
import * as wrapper from 'solc/wrapper';
</script>
</head>
<body>
</body>
</html>
Please any suggestions where is the problem? Thank you.
I don't know what the problem was, since I've never seen that ES6 import syntax before, but I fixed it by specifying exactly where to import from:
<!DOCTYPE html>
<html>
<head>
<script type="module" defer>
// debugging
document.getElementById("runninate").addEventListener("click", function(e){var code=document.getElementById('miniconsole').value; console.log('> ' + code); console.log(eval(code))})
import * as wrapper from 'https://ethereum.github.io/solc-bin/bin/soljson-v0.5.0-nightly.2018.10.15+commit.b965fd6e.js';
const solc = wrapper(window.Module);
</script>
</head>
<body>
<input id="miniconsole" />
<button id="runninate">Runninate!</button>
</body>
</html>
I'm not confident enough to say that the syntax was wrong, but considering that they had a typo in the Node.JS example I doubt they tested this.
Note that this fails to import properly because the thing that's being imported doesn't quite work.
I have to install solc npm package
npm install solc
in order to make the code running.

AngularJS error while using ngAudio

I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js

How do you use Coffeescript?

I want to use coffeescript in a website, but something doesn't seem to be working. I have my coffeescript in a external file and it is linked to the html file. I have the coffeescript compiler also linked to the html file. What's wrong?
HTML:
<html>
<head>
<script type="text/javascript" src="coffee-script.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script type='text/coffeescript' src='Test.coffee'></script>
</head>
<body>
</body>
</html>
Coffeescript:
$->
random = (number) ->
console.log Math.ceil(Math.random() * number)
$("body").append(number)
random(2)
Try to compile your Coffeescript to Javascript before publication:
Once installed, you should have access to the coffee command, which
can execute scripts, compile .coffee files into .js, and provide an
interactive REPL.
Source: http://coffeescript.org/#usage

Categories

Resources