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. |
|||
|
|||
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