Polymer not working in Chrome (working in Firefox) - javascript

I'm running windows 7 with Firefox 43.0.1 and Chrome 47.0.2526.106 m
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer tutorial</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="hello-world.html" />
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
and the component is
<dom-module id="hello-world">
<template>
<h1>Hello, User</h1>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
Chrome refuses to render. Firefox has no probs.
I installed polymer by typing bower install polymer at the command line. bower.json says it's version 1.2.3


Try importing Polymer Library in the component's file like shown below,
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer tutorial</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="hello-world.html" />
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
Component
<link rel="import" href="bower_components/polymer/polymer.html" />
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer tutorial</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="hello-world.html" />
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>


index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer tutorial</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./hello-world.html" />
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
hello-world.html
<link rel="import" href="./bower_components/polymer/polymer.html" />
<dom-module id="hello-world">
<template>
<h1>Hello, User</h1>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>

Related

katex.render doesn't render equation

I am new for html, javascript, and katex. I wonder if you could tell me why the following simple html does not show the equation.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.16.3/dist/katex.css"
integrity="sha384-yW1frltt4cd2K6QCmOMx4M+ylOmyrGb+NDouZ1f5VL2f4NN7uBu5PQsmUSgWib1W" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.16.3/dist/katex.js"
integrity="sha384-ZfxPSr1+NHNHrv9KI48JF/1RkvdoxKWJPuYyfxE+iexlsGw8tyQR4OuNVNUuzwLN"
crossorigin="anonymous"></script>
<title>My app</title>
</head>
<body>
<span id="idequ">equation</span>
<script>
katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", document.getElementById("idequ"));
</script>
</body>

My CSS filepath is correct but it is not applying the css

Here is my code to the external CSS file. It was able to render my JavaScript but not my CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
<link rel="stylesheet" href="../src/styles.css" type="text/css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/jsx"></script>
</body>
</html>
This is the folder
What the website looks like

Simply put
<head>
<title>React App</title>
<link rel="stylesheet" href="./styles.css" type="text/css" />
</head>
OR
<head>
<title>React App</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>

Why did the vuejs mustache syntax doesn't work?

I start to learn vuejs and I can't explain this bug. The vuejs mustache syntax doesn't work in this exemple :
the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>test mustache syntax</h1>
</header>
<section id="user-goal">
<h2>titre</h2>
<p>{{ test }}</p>
</section>
</body>
</html>
the js file
const app = Vue.createApp({
data() {
return {
test: 'bonjour'
};
}
});
app.mount('#user-goal');
Can someone tell me why i get this result?

ReferenceError: ok is not defined at QUnitAsserter.assertTrue in Kotlin Javascript

Kotlin versions 1.0.x-1.1.0 support out of the box unit testing with QUnit but when I load tests it throws this exception:
ReferenceError: ok is not defined
at QUnitAsserter.assertTrue_4mavae$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:50:5)
at assertTrue (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:93:27)
at QUnitAsserter.assertTrue_o10pc4$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:47:5)
at QUnitAsserter.Asserter.assertEquals_lzc6tz$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:182:10)
at assertEquals (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:108:20)
at AppTest.myFirstTest (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/app_test.js:17:5)
at Object.<anonymous> (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/app_test.js:29:21)
This is my test class:
import org.junit.Test
import kotlin.test.assertEquals
class AppTest {
#Test fun myFirstTest() {
assertEquals(1, 1, "Test in test folder works")
}
}
This is the html code that loads the test:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fibonacci Counter</title>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.1.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<footer id="info">
<p>Placeholder</p>
</footer>
<span id="text"></span>
<script src="external_libs/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.1.1.js"></script>
<script src="lib/kotlin.js"></script>
<script src="lib/kotlin-test-js.js"></script>
<script src="app_main.js"></script>
<script src="app_test.js"></script>
</body>
</html>

The problem is in the version of QUnit 2.1.1, by using version 1.23.1 the problem is solved.
This is the html code that loads the test with the fix:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fibonacci Counter</title>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.23.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<footer id="info">
<p>Placeholder</p>
</footer>
<span id="text"></span>
<script src="external_libs/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.23.1.js"></script>
<script src="lib/kotlin.js"></script>
<script src="lib/kotlin-test-js.js"></script>
<script src="app_main.js"></script>
<script src="app_test.js"></script>
</body>
</html>

My page won't load (ReactJS)

I'm connected to my server via npm install -g http-server on Terminal, that's working fine. I just want to see if my h1 tag works so I can proceed to making a practice website. I feel like my mainPage.html may be a little off.
Here's my mainPage.html file:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" src="mainPage.js"></script>
</script>
</html>
Here's my mainPage.js file:
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));

You need to import babel.js, react and reactDOM
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>

Include the reference of react, react-dom and babel, Check this working code:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" >
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
</script>
</html>

Categories

Resources