something is running
I by no means would consider myself someone who is “well versed” as a coder, so the fact that I got this working feels pretty good. It’s nothing special the self-portrait has three array, one for each column, oh yeah I added columns! hahaha. And for the chat I again added columns to center the chat in the window and added a background image. The code for both the self-portrait and the chat are below. If you want to look at either the self-portrait or the chat the links are below as well.
self-portrait: http://143.244.145.165/selfportrait3.html
<html>
<head>
<title>lihp idirac</title>
<link rel="icon" type="image/x-icon" href="images/favIcon.ico">
<script type="text/javascript">
var portImages = new Array();
portImages[0] = "images/00032.png";
portImages[1] = "images/01576.png";
portImages[2] = "images/03060.png";
portImages[3] = "images/04276.png";
portImages[4] = "images/Day7of50.png";
portImages[5] = "images/Day19of50.png";
portImages[6] = "images/Day34of50.png";
portImages[7] = "images/Divination_7g.png";
portImages[8] = "images/GetUpCircuit_schem.png";
portImages[9] = "images/IMG_0061.png";
portImages[10] = "images/IMG_0109.png";
portImages[11] = "images/IMG_5634.png";
portImages[12] = "images/IMG_6089.png";
portImages[13] = "images/MeMes-01.png";
portImages[14] = "images/PPC_0428.png";
portImages[15] = "images/PPC_3147.png";
portImages[16] = "images/PPC_5208.png";
portImages[17] = "images/prjkt3_3.png";
portImages[18] = "images/Room 1.16.png";
portImages[19] = "images/SLEEPtest.png";
portImages[20] = "images/Too_Cute_3_Small.png";
portImages[21] = "images/jekyll.png";
var currentImage = 0;
var lastImage = portImages.length -1;
var portImages2 = new Array();
portImages2[0] = "images/00545.png";
portImages2[1] = "images/01782.png";
portImages2[2] = "images/04256.png";
portImages2[3] = "images/04283.png";
portImages2[4] = "images/Adrfit_in_the_Ocean_Cover.png";
portImages2[5] = "images/Day10of50.png";
portImages2[6] = "images/Day20of50.png";
portImages2[7] = "images/Day51of50.png";
portImages2[8] = "images/Doandroidsdreamcover.png";
portImages2[9] = "images/hal.png";
portImages2[10] = "images/IMG_0064.png";
portImages2[11] = "images/IMG_4643.png";
portImages2[12] = "images/IMG_5817.png";
portImages2[13] = "images/IMG_6123.png";
portImages2[14] = "images/memind.png";
portImages2[15] = "images/PPC_0436.png";
portImages2[16] = "images/PPC_4302.png";
portImages2[17] = "images/PPC_5209.png";
portImages2[18] = "images/prjkt3_10.png";
portImages2[19] = "images/Roy_WK1.png";
portImages2[20] = "images/SportifyViz4.png";
portImages2[21] = "images/xyComparison-01.png";
var currentImage2 = 0;
var lastImage2 = portImages2.length -1;
var portImages3 = new Array();
portImages3[0] = "images/00956.png";
portImages3[1] = "images/04262.png";
portImages3[2] = "images/02163.png";
portImages3[3] = "images/04285.png";
portImages3[4] = "images/Art on Waters-2.png";
portImages3[5] = "images/Day12of50.png";
portImages3[6] = "images/Day27of50.png";
portImages3[7] = "images/Divination_1g.png";
portImages3[8] = "images/Features Image.png";
portImages3[9] = "images/Image2.png";
portImages3[10] = "images/IMG_0103.png";
portImages3[11] = "images/IMG_4647.png";
portImages3[12] = "images/IMG_5905.png";
portImages3[13] = "images/meInverted2.png";
portImages3[14] = "images/pcb_jcl.png";
portImages3[15] = "images/PPC_3059.png";
portImages3[16] = "images/PPC_5205.png";
portImages3[17] = "images/PPC_5211.png";
portImages3[18] = "images/prjkt3_12.png";
portImages3[19] = "images/Server_Room.1.599.png";
portImages3[20] = "images/StarTrailsCabin.png";
portImages3[21] = "images/sleepDS.png";
var currentImage3 = 0;
var lastImage3 = portImages3.length -1;
window.addEventListener("load", init);
function init() {
console.log("page is loaded");
}
function nextImage()
{
if (currentImage == lastImage)
{
currentImage = 0;
document.getElementById('portrait').src = portImages[currentImage];
}
else
{
currentImage++;
document.getElementById('portrait').src = portImages[currentImage];
}
}
function nextImage2()
{
if (currentImage2 == lastImage2)
{
currentImage2 = 0;
document.getElementById('portrait2').src = portImages2[currentImage2];
}
else
{
currentImage2++;
document.getElementById('portrait2').src = portImages2[currentImage2];
}
}
function nextImage3()
{
if (currentImage3 == lastImage2)
{
currentImage3 = 0;
document.getElementById('portrait3').src = portImages3[currentImage3];
}
else
{
currentImage3++;
document.getElementById('portrait3').src = portImages3[currentImage3];
}
}
</script>
<style>
body {
background-color: black;
}
div {
color: rgb(16, 139, 37);
}
#statement {
font-size: small ;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}
.responsive{
max-width: 100%;
height: auto;
}
.column {
float: left;
width: 30%;
padding: 1%;
}
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div id="statement">images...representative of my world, cunstructed, simulated</div>
<div class="row">
<div class="column">
<img src="images/00032.png" id="portrait" class="responsive" onclick="nextImage()">
</div>
<div class="column">
<img src="images/00545.png" id="portrait2" class="responsive" onclick="nextImage2()">
</div>
<div class="column">
<img src="images/00956.png" id="portrait3" class="responsive" onclick="nextImage3()">
</div>
</div>
<!-- // <img src="images/Day7of50.jpg" id="portrait" class="responsive" onclick="nextImage()"> -->
</body>
</html>Chat: http://143.244.145.165/index.html
<html>
<head>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
socket.on('connect', function() {
console.log("Connected");
});
// Receive from any event
socket.on('chatmessage', function (data) {
console.log(data);
document.getElementById('messages').innerHTML = "" + data +
+ "" + document.getElementById('messages').innerHTML;
});
var sendmessage = function(message) {
console.log("chatmessage: " + message);
socket.emit('chatmessage', message);
};
</script>
<style>
body {
/* background-color: black;
*/
background-image: url("chatImages/06975.png");
background-repeat: no-repeat;
background-size: 100%;
}
#messages {
color: chartreuse;
}
.column {
float: left;
width: 30%;
padding: 1%;
align-content: center;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
</div>
<div class="column">
<div id="messages">
No Messages Yet
</div>
<input type="text" id="message" name="message">
<input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">
</div>
<div class="column">
</div>