From 39a081d90cb7c88ba8f3542b1828bd5440bdfbc4 Mon Sep 17 00:00:00 2001 From: JoChicau Date: Fri, 1 Jul 2022 15:52:00 +0100 Subject: [PATCH] new set of code examples --- READ-ME.md | 6 ++++- example-p5/JS/sketch.js | 21 +++++++++++++++ example-p5/index-p5-example.html | 36 +++++++++++++++++++++++++ example-starter/CSS/my-style.css | 7 +++++ example-starter/JS/script.js | 14 ++++++++++ example-starter/index.html | 46 ++++++++++++++++++++++++++++++++ index-basic-example.html | 39 --------------------------- 7 files changed, 129 insertions(+), 40 deletions(-) create mode 100644 example-p5/JS/sketch.js create mode 100644 example-p5/index-p5-example.html create mode 100644 example-starter/CSS/my-style.css create mode 100644 example-starter/JS/script.js create mode 100644 example-starter/index.html delete mode 100644 index-basic-example.html diff --git a/READ-ME.md b/READ-ME.md index 70e9f1c..e761259 100644 --- a/READ-ME.md +++ b/READ-ME.md @@ -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/example-p5/JS/sketch.js b/example-p5/JS/sketch.js new file mode 100644 index 0000000..90f5511 --- /dev/null +++ b/example-p5/JS/sketch.js @@ -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) +} \ No newline at end of file diff --git a/example-p5/index-p5-example.html b/example-p5/index-p5-example.html new file mode 100644 index 0000000..f38f50d --- /dev/null +++ b/example-p5/index-p5-example.html @@ -0,0 +1,36 @@ + + + + + + + + + Welcome my HTML! + + + + + + + + + + + + + + + + + + +
+

Testing P5.JS library

+
+ +

Allow the use of microphone in your browser and make some noise!!!

+ + + + diff --git a/example-starter/CSS/my-style.css b/example-starter/CSS/my-style.css new file mode 100644 index 0000000..236d5f9 --- /dev/null +++ b/example-starter/CSS/my-style.css @@ -0,0 +1,7 @@ +/* WELCOME TO THE STYLESHEET */ + +body { + margin: 1rem; + font-family: "Helvetica", "Arial", sans-serif; + background: rgb(252,199,219); +} diff --git a/example-starter/JS/script.js b/example-starter/JS/script.js new file mode 100644 index 0000000..a43b301 --- /dev/null +++ b/example-starter/JS/script.js @@ -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') + + diff --git a/example-starter/index.html b/example-starter/index.html new file mode 100644 index 0000000..6a0be90 --- /dev/null +++ b/example-starter/index.html @@ -0,0 +1,46 @@ + + + + + + + + + Welcome my HTML! + + + + + + + + + + + + + + + +
+

Javascript meets the DOM

+
+ +

This a sentence!

+ +

+ + + + + Animated image of Planet Earth, source Wikimedia + + + + + + + + diff --git a/index-basic-example.html b/index-basic-example.html deleted file mode 100644 index 52dc660..0000000 --- a/index-basic-example.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - - Welcome my HTML! - - - - - - - - - - -

Main Heading (H1)

- -

Second Heading (H2)

- -

This is my first sentence!

- - - - - - - - Animated image of Planet Earth, source Wikimedia - - -