jokes.js

const computerJokesArray = [
    {
        img: "./images/IT/defrag-zebra.jpg",
        alt: "When you finally defragment the zebra. The zebra is half white, half black."
    },
    {
        img: "./images/IT/qr-zebra.jpg",
        alt: "A zebra with a QR code instead of stripes says to a regular zebra: 'Update, bro!'"
    },
    {
        img: "./images/IT/insert-USB.jpg",
        alt: "when you insert an USB, it's two times the wrong way, the third time finally fits."
    },
    {
        img: "./images/IT/e-mail-attachment.jpg",
        alt: "When you forget to send an attachment, it's like leave passengers on the airport ground."
    },
    {
        img: "./images/IT/hall-computer.jpg",
        alt: "At a big hall computer: 'Someday you'll be able to hold one of these in the palm of your hand while you poop.'"
    },
    {
        img: "./images/IT/close-add-button.jpg",
        alt: "The close button on an ad is as small as Mercury on a picture, transiting the sun."
    },
    {
        img: "./images/IT/404-tp.jpg",
        alt: "404 error on an empty toilet roll. Page not found."
    },
    {
        img: "./images/IT/autocorrect.jpg",
        alt: "The man who invented autocorrect should burn in hello."
    },
    {
        img: "./images/IT/IT-support.jpg",
        alt: "Two little dogs in front of a baking sheet full of cookies: 'We are from IT support. We are here to delete your cookies.' "
    },
    {
        img: "./images/IT/different-error-message.jpg",
        alt: "An IT guy is happy: Wow, a different error message... Finally some progress!"
    },
    {
        img: "./images/IT/too-many-tabs-open.jpg",
        alt: "A guy to an IT guy: Close another tab. You can do it. Be strong, I'm here for you. Close that tab. You don't need 290 tabs open."
    }
];

const scienceyJokesArray = [
    {
        img: "./images/Sciencey/casual-dehyde.jpg",
        atl: "Formaldehyde formula and casual-dehyde, same formula in casual clothes."
    },
    {
        img: "./images/Sciencey/cat-physics.jpg",
        alt: "A cat defying physics by sitting on the side of a sofa."
    },
    {
        img: "./images/Sciencey/confused-machine-learning.jpg",
        alt: "A picture of blueberry muffins and chiwawa heads to confuse machine learning."
    },
    {
        img: "./images/Sciencey/cosmic-pans.jpg",
        alt: "Bottoms of frying pans looking like planets."
    },
    {
        img: "./images/Sciencey/doppler-cars.jpg",
        alt: "Doppler effect cars - coming car is blue, leaving car is red."
    },
    {
        img: "./images/Sciencey/engineering-flowchart.jpg",
        alt: "Engineering flowchart. Everything is fixable with duct tape or WD40 spray."
    },
    {
        img: "./images/Sciencey/globe-holder.jpg",
        alt: "A car crashed to a big pole, which seems to be one of the globus holders."
    },
    {
        img: "./images/Sciencey/imaginary-friend.jpg",
        alt: "A number six found an imaginary friend, a square root of -1."
    },
    {
        img: "./images/Sciencey/joking-scientist.jpg",
        alt: "A rocket scientist is about to blow a paper bag behind his colleague's back."
    },
    {
        img: "./images/Sciencey/Marco-Polo.jpg",
        alt: "A singing bat makes his food - flies - to sing too and hence show up."
    },
    {
        img: "./images/Sciencey/mintosis.jpg",
        alt: "Two mints performing mintosis."
    },
    {
        img: "./images/Sciencey/para-normal-distribution.jpg",
        alt: "A normal distribution chart and paranormal distribution ghost with eyes and linnen sheet."
    },
    {
        img: "./images/Sciencey/petrified.jpg",
        alt: "A tree was first afraid and then petrified."
    },
    {
        img: "./images/Sciencey/pyramids-conspiracy.jpg",
        alt: "Pyramids of Egypt drawn as cat's ears as a conspiracy theory."
    },
    {
        img: "./images/Sciencey/radiant-Marie.jpg",
        alt: "Marie Curie Sklodowska looking every day more radiant."
    },
    {
        img: "./images/Sciencey/Schrodingers-cupboard.jpg",
        alt: "Schroedinger's cupboard. The plates are considered broken and unbroken at the same time."
    },
    {
        img: "./images/Sciencey/short-end-only-blanket.jpg",
        alt: "At three o'clock at night, all sides of my blanket are short."
    },
    {
        img: "./images/Sciencey/sin-cos-cow.jpg",
        alt: "Picture of four bulls with horns in shapes of trigonometric functions"
    },
    {
        img: "./images/Sciencey/dinos-extinction.jpg",
        alt: "Flat earther's explanation of dinosaurs' extinction by falling off after asteroid hit."
    },
    {
        img: "./images/Sciencey/licence-plate-math.jpg",
        alt: "A formula on licence plate calculated in the bumper dust."
    },
    {
        img: "./images/Sciencey/Velociraptor-formula.jpg",
        alt: "Velociraptor and the dinosaur's velocity formula."
    },
    {
        img: "./images/Sciencey/mmm-pi.jpg",
        alt: "Mmm, pie licence plate."
    },
    {
        img: "./images/Sciencey/invasive-Larry.jpg",
        alt: "Three flowers and one other plant drinking coffee. One flower says:'Oh, don't mind Larry, he is a little invasive.'"
    },
    {
        img: "./images/Sciencey/naming-exoplanets.jpg",
        alt: "A scientist: Who the hell is in charge of naming new planets? Next picture: a cat on a keyboard."
    },
    {
        img: "./images/Sciencey/pizza-oven-layout.jpg",
        alt: "Two pizzas split in halves and arranged on oven rack, so they all fit. Caption: geniuses are often rejected by society."
    },
    {
        img: "./images/Sciencey/shelving-in-geology-section.jpg",
        alt: "In the library, geology section, selves are not even, as geologic layers"
    }
];

const thingsArray = [
    {
        img: "./images/things/LEDZeppelin.jpg",
        alt: "Band of LED diodes and resistors"
    },
    {
        img: "./images/things/O-canisters.jpg",
        alt: "Suprised canisters"
    },
    {
        img: "./images/things/Pirana-zipper.jpg",
        alt: "A red zipper looking like a pirana"
    },
    {
        img: "./images/things/Smiling-closet.jpg",
        alt: "Clothes caught in the closet door looks like face"
    },
    {
        img: "./images/things/Suspecting-pants.jpg",
        alt: "Pants' pockets looking like suspecting eyes"
    },
];

const miscArray = [
    {
        img: "./images/Misc/Be-rebel.jpg",
        alt: "A bird sitting on a sign 'no birds' is a rebel."
    },
    {
        img: "./images/Misc/Christmas-skeleton.jpg",
        alt: "Christmas trees' christmas tree is a man's skeleton."
    },
    {
        img: "./images/Misc/Coma.jpg",
        alt: "In a hospital room one man to another: don't talk to me, when my wife comes to visit, she thinks I'm in coma."
    },
    {
        img: "./images/Misc/Dead-snow-man.jpg",
        alt: "A snowman positioned on a car's windshield looking as fallen corps from above."
    },
    {
        img: "./images/Misc/Fat-dog.jpg",
        alt: "A wife saying her husband eats everything and doesn't gain weight. The dog eats it and is the one who gets fat."
    },
    {
        img: "./images/Misc/Haircut.jpg",
        alt: "Children with too long hair due to corona lockdown not distinguishig between mom and dad because of their long hair."
    },
    {
        img: "./images/Misc/Ja-pju-vsjo.jpg",
        alt: "A Duolingo task: translate to russian 'I dring everything', and two Duolingo messeges after that: 'Good job!' and 'Continue'"
    },
    {
        img: "./images/Misc/Kill-only-Tim.jpg",
        alt: "County of Union, New Jersey sign: Take only photos, leave only footprints, kill only tim, please stay on the trails. 'e' in time is missing."
    },
    {
        img: "./images/Misc/Married-mummies.jpg",
        alt: "Two egyptian mummies, only one is covered with a blanket - they were married."
    },
    {
        img: "./images/Misc/Menu-for-lions.jpg",
        alt: "A bumper sticker states how many persons are in the car. I lion says 'it must be some kind of menu'."
    },
    {
        img: "./images/Misc/No-faking-death.jpg",
        alt: "A pathologist tickles a corpse with a feather to make sure its really dead."
    },
    {
        img: "./images/Misc/Pandemia.jpg",
        alt: "Word pandemic is derived from word panda, because people in lockdown eat 12 hours like pandas do."
    },
    {
        img: "./images/Misc/Peeled.jpg",
        alt: "Bears watching people in jacuzzi saying 'good, they are already peeled'."
    },
    {
        img: "./images/Misc/Screem-lego.jpg",
        alt: "The famous painting 'scream' originally had another painting under it showing that the screaming person stepped on a lego block."
    },
    {
        img: "./images/Misc/Snail-gargle.jpg",
        alt: "A snail gargled salty water to fight the cold."
    },
    {
        img: "./images/Misc/Spadne-vsechno.jpg",
        alt: "A sign in a Czech-Vietnamese shop - we will help you or everything falls down!"
    },
    {
        img: "./images/Misc/Stephen-King.jpg",
        alt: "Young Stephen King reading his story from vacation to the class who looks terrifies."
    },
    {
        img: "./images/Misc/Throw-it.jpg",
        alt: "A dog saying to Discobolus statue: 'Jeeez man, hurry up and throw it!"
    },
    {
        img: "./images/Misc/Victim.jpg",
        alt: "A policeman is looking at hopscotch line instead the victim position line: 'Looks like the victim was brutally sliced in multiple pieces.'"
    },
    {
        img: "./images/Misc/Langos.jpg",
        alt: "Picture of langos with a scull shape on it."
    },
    {
        img: "./images/Misc/Pumpkin-of-wife.jpg",
        alt: "An old husband brings a cup of tea in the garden, announcing it to a big pumpkin, not his wife, who is dressed in orange pants."
    },
    {
        img: "./images/Misc/Select-your-spot.jpg",
        alt: "A bird at a computer, selecting his spot in the V shape, where he will be flying"
    },
    {
        img: "./images/Misc/Suspecting-son.jpg",
        alt: "A boy with dirty mouth and stained clothes to another: How did my mom know I went to get ice cream after school? She's either placed a tracking device on me, or she's tracking my phone."
    },
    {
        img: "./images/Misc/Teacher-in-mobile-frame.jpg",
        alt: "A teacher in a class teaching from a dummy smartphone window: Looks silly but the kids are finally listening to her."
    }
];

let arrayOfAllJokes = [computerJokesArray, scienceyJokesArray, thingsArray, miscArray];
let randomArrayOfAllJokes = arrayOfAllJokes[Math.floor(Math.random() * arrayOfAllJokes.length)];

function getData() {
    let htmlPage = document.body.id;
    switch(htmlPage) {
        case 'homepage':
            const homepageJoke = document.getElementById('random-joke');
            randomJoke(randomArrayOfAllJokes, homepageJoke);
            break;
        case 'computer-page':
            const computerColumns = document.getElementById('computer');
            sortArray(computerJokesArray);
            fillColumns(computerJokesArray, computerColumns, 10);
            break;
        case 'sciencey-page':
            const scienceyColumns = document.getElementById('sciencey');
            sortArray(scienceyJokesArray);
            fillColumns(scienceyJokesArray, scienceyColumns, 20);
            break;
        case 'things-page':
            const thingsColumns = document.getElementById('things');
            sortArray(thingsArray);
            fillColumns(thingsArray, thingsColumns, 30);
            break;
        case 'misc-page':
            const miscColumns = document.getElementById('misc');
            sortArray(miscArray);
            fillColumns(miscArray, miscColumns, 40);
            break;
    }
}
getData();

function fillColumns (arr, section, prefix) {
    arr.forEach(item => {
        const joke = document.createElement('img');
        joke.setAttribute('src', item.img);
        joke.setAttribute('alt', item.alt);
        joke.setAttribute('data-id', prefix + arr.indexOf(item));
        joke.setAttribute('class', "joke")
        section.appendChild(joke);
    })
}

function sortArray(arr) {
    arr.sort(() => 0.5 - Math.random());
}

function randomJoke(arr, section) {
    let randomIndex = Math.floor(Math.random() * arr.length)
    const featuredJoke = document.createElement('img');
    featuredJoke.setAttribute('src', arr[randomIndex].img);
    featuredJoke.setAttribute('alt', arr[randomIndex].alt);
    featuredJoke.setAttribute('class', "featured-joke");
    section.appendChild(featuredJoke);
}