Google Charts: simple example

googlecharts01

Code is here.

 

Advertisements

AngularJS: ng-class

Image

ng-class01
In the picture, we see that the Fantasy font is ON (html default) for list item 2, and off for list items 1 and 3, as [true] makes it use the stuffit css selector in these cases.

(Later: turns out that given differences between Chrome and IE, Impact font is a good synonym for Fantasy that seems to render the same in both)

CSS: useful linter for VSCode

This is a simple test after installing this linter in VSCode:

Now fixed, gives this:

 

CSS: simple example – external file


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
This is what we find
<h2>second level heading</h2>
<ol>
	<li>First entry</li>
	<li>Second entry</li>
	<li>Third entry</li>
</ol>
<ul>
	<li>First entry</li>
	<li>Second entry</li>
	<li>Third entry</li>
</ul>
</body>
</html>

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
color: #FF00FF
}
ul li {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 10px;
color: #FF9500
}

&nbsp;

CSS: simple example – inline


&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Document&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
color: #FF00FF
}
ul li {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 10px;
color: #FF9500
};
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
This is what we find
&lt;h2&gt;second level heading&lt;/h2&gt;
&lt;ol&gt;
	&lt;li&gt;First entry&lt;/li&gt;
	&lt;li&gt;Second entry&lt;/li&gt;
	&lt;li&gt;Third entry&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
	&lt;li&gt;First entry&lt;/li&gt;
	&lt;li&gt;Second entry&lt;/li&gt;
	&lt;li&gt;Third entry&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;