For Connections Lab project 2, I constructed a simple website that allows two users to interact with the site and cause elements to change on their counterpart’s site.
The premise is based on research regarding Bioprospecting and uses the form of the Surrealist exquisite corpse as a means of visualizing some of the creatures harvested, dismantled and extracted from for medicine purposes.
Bioprospecting (also known as biodiversity prospecting)
My preconceptions of bioprospecting are rooted in a strong anti-capitalist cynicism – it is a horrible drain on the ecology of the Deep and will have lasting, irreversible effects on our environment in general.
The use of sea creatures for medicinal uses has been practiced in China for over 600 centuries ( Hunt, Bob, and Vincent, Amanda C. J.”Scale and Sustainability of Marine Bioprospecting for Pharmaceuticals”). Marine animals such as turtles (for their shells), sea horses, and sharks (for their fins) are consumed for their healing or biologically balancing properties. In the case of shark fins, the consumption of “shark fin soup” is compounded by socio-economic implications due to its expense, preparation and presentation.
These creatures are all assemblages of bio organisms which are used by R&D labs in major pharmaceutical companies in the hopes of analyzing and synthetically reproducing effective compounds for cancer pain, neurological damage, etc.
I found the basic HTML, JS and CSS to be manageable this time around but struggled again with some of the more advanced coding. With assistance from Craig (for the slide carousel – which has a clear logic to it – and activating the dual user effects with Socket) and Mathura (for some basic Github issues) those were finally solved and the site was working – until I deleted my entire desktop/files and lost the last bit of coding.
Socket remains a bit confusing to me.
Also, my thanks to:
Stack overflow
HTML:
<script>
var socket = io(“http://localhost:3000”);
socket.on(‘connect’, function() {
document.getElementById(“button”).addEventListener(“click”, function () {
socket.emit(“clicked”);
});
});
socket.on(‘clicked’, function() {
console.log(‘clicked’);
document.getElementById(“alert”).innerHTML = “send clicked”;
});
</script>
<script type=”text/javascript”>
function onClickHandler(elem) {
elem.style.background = ‘red’;
elem.style.color = ‘black’;
}
</script>
Index.js
socket.on(‘clicked’, function() {
var button = document.getElementById(‘button’);
console.log(‘clicked’);
document.getElementById(“alert”).innerHTML = “send clicked”;
onClickHandler(button);
});
Codeacademy
David Shipley, Coding Train
Leave a Reply