JoChicau
2 years ago
7 changed files with 129 additions and 40 deletions
@ -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. |
||||
@ -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) |
||||
|
} |
||||
@ -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> |
||||
@ -0,0 +1,7 @@ |
|||||
|
/* WELCOME TO THE STYLESHEET */ |
||||
|
|
||||
|
body { |
||||
|
margin: 1rem; |
||||
|
font-family: "Helvetica", "Arial", sans-serif; |
||||
|
background: rgb(252,199,219); |
||||
|
} |
||||
@ -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')
|
||||
|
|
||||
|
|
||||
@ -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