new set of code examples
This commit is contained in:
JoChicau
parent
b987341759
commit
39a081d90c
@ -1,3 +1,7 @@
|
|||||||
Welcome to the folder with code examples of web documents by Joana Chicau.
|
Welcome to the folder with code examples of web documents by Joana Chicau.
|
||||||
|
|
||||||
You can start ny downloading the 'index-basic-example.html' and open it and edit it using a code editor and use a web browser to see your edits.
|
Follow the _"example-starter"_ for an introduction on how to set up an 'index.html' file connected to a stylesheet and scripts.
|
||||||
|
|
||||||
|
Follow the _"example-p5"_ for an example of how to implement an external JavaScript library in your 'index.html'.
|
||||||
|
|
||||||
|
After downloading the respective folder, open your files and edit them using a code editor if your choice. In parallel, open the HTML on a web browser and refresh the page to check your edits.
|
||||||
21
example-p5/JS/sketch.js
Normal file
21
example-p5/JS/sketch.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
var canvas;
|
||||||
|
var mic;
|
||||||
|
|
||||||
|
function windowResized() {
|
||||||
|
resizeCanvas(windowWidth,windowHeight)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setup () {
|
||||||
|
canvas = createCanvas(windowWidth,windowHeight)
|
||||||
|
canvas.position(0,0);
|
||||||
|
canvas.style('z-index', '-1')
|
||||||
|
mic = new p5.AudioIn();
|
||||||
|
mic.start()
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw () {
|
||||||
|
background('#88afff');
|
||||||
|
describe('canvas with light blue background');
|
||||||
|
var vol = mic.getLevel();
|
||||||
|
ellipse(width/2, height/2, vol*100)
|
||||||
|
}
|
||||||
36
example-p5/index-p5-example.html
Normal file
36
example-p5/index-p5-example.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- document language -->
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<!-- character encoding set -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>Welcome my HTML!</title>
|
||||||
|
|
||||||
|
<!-- Metadata -->
|
||||||
|
<meta name="Name" content="My name">
|
||||||
|
<meta name="Description" content="This is a description of this page. It can be useful to write a description if you want to take SEO (search engine optimization) into account.">
|
||||||
|
|
||||||
|
<!-- here is how to link to the P5.JS main library -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
|
||||||
|
<!-- here is how to link to the P5.JS sound library -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.js"></script>
|
||||||
|
|
||||||
|
<!-- here is how to link to the sketch -->
|
||||||
|
<script src="JS/sketch.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- Content goes here -->
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1 id="title">Testing P5.JS library</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<p>Allow the use of microphone in your browser and make some noise!!!</p>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
example-starter/CSS/my-style.css
Normal file
7
example-starter/CSS/my-style.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/* WELCOME TO THE STYLESHEET */
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 1rem;
|
||||||
|
font-family: "Helvetica", "Arial", sans-serif;
|
||||||
|
background: rgb(252,199,219);
|
||||||
|
}
|
||||||
14
example-starter/JS/script.js
Normal file
14
example-starter/JS/script.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
// * * * * * WELCOME TO THE JS FILE * * * * * //
|
||||||
|
|
||||||
|
// here is an example of a function for
|
||||||
|
// adding your prefered colour as a parameter
|
||||||
|
|
||||||
|
function changeColor(newColor) {
|
||||||
|
var elem = document.getElementById('title');
|
||||||
|
elem.style.color = newColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
// to call this function uncomment the line below:
|
||||||
|
// changeColor('blue')
|
||||||
|
|
||||||
|
|
||||||
46
example-starter/index.html
Normal file
46
example-starter/index.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- document language -->
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<!-- character encoding set -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>Welcome my HTML!</title>
|
||||||
|
|
||||||
|
<!-- Metadata -->
|
||||||
|
<meta name="Name" content="My name">
|
||||||
|
<meta name="Description" content="This is a description of this page. It can be useful to write a description if you want to take SEO (search engine optimization) into account.">
|
||||||
|
|
||||||
|
<!-- here is an example of how to link to a stylesheet -->
|
||||||
|
<link rel='stylesheet' href='CSS/my-style.css'/>
|
||||||
|
|
||||||
|
<!-- here is an example of how to link to a script -->
|
||||||
|
<script src="JS/script.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- Content goes here -->
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1 id="title">Javascript meets the DOM</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<p>This a sentence!</p>
|
||||||
|
|
||||||
|
<p id="empty"></p>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Image -->
|
||||||
|
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Wikipedia20_animated_Wikipedia_Globe_1MB.gif" width="20%" alt="Animated image of Planet Earth, source Wikimedia">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
alert('Hello, world!')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,39 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!-- document language -->
|
|
||||||
<html lang="en-US">
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<!-- character encoding set -->
|
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<title>Welcome my HTML!</title>
|
|
||||||
|
|
||||||
<!-- Metadata -->
|
|
||||||
<meta name="Name" content="My name">
|
|
||||||
<meta name="Description" content="This is a description of this page. It can be useful to write a description if you want to take SEO (search engine optimization) into account.">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- Content goes here -->
|
|
||||||
|
|
||||||
<h1>Main Heading (H1)</h1>
|
|
||||||
|
|
||||||
<h2>Second Heading (H2)</h2>
|
|
||||||
|
|
||||||
<p>This is my first sentence!</p>
|
|
||||||
|
|
||||||
<!-- Unordered List -->
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>list item 01</li>
|
|
||||||
|
|
||||||
<li>list item 02</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- Image -->
|
|
||||||
|
|
||||||
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Wikipedia20_animated_Wikipedia_Globe_1MB.gif" width="20%" alt="Animated image of Planet Earth, source Wikimedia">
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user