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