𝑗𝑢𝑏𝑖𝑙𝑎𝑛𝑑

want to test these out ? click here !

change background on hover

this is like the one by sadgrl but the bg goes back to normal when not hovering over the image and you have the option to change the background size :)

example:

hover over the image below:

code:

</head>
<body id="bg">

hover over the image below:<br><br>

</div>

</div>
</div>

images.forEach((el) => {
            el.addEventListener('mouseover', (event) => {
                bg.style.backgroundImage = 'url(' + el.src + ')';
                bg.style.backgroundSize = el.getAttribute('data-background-size') || '50px';
                bg.style.backgroundRepeat = 'repeat';
            });

el.addEventListener('mouseout', (event) => {
                bg.style.backgroundImage = 'none'; /* put your default bg here */
            });
        });

numberDisplay.innerHTML = images.length;
    </script>

</body>
</html>

copy text

copy text when said text is clicked

example:

click on the text below and then paste into any textbox:

૮ ⸝⸝ > ꇴ < ⸝⸝づ━☆

code:

// Create a function to copy text to clipboard
    function copyTextToClipboard(text, element) {
      var textArea = document.createElement("textarea");

// Set the text to be copied
      textArea.value = text;

// Append the textarea to the body
      document.body.appendChild(textArea);

// Select the text inside the textarea
      textArea.select();

// Copy the text to the clipboard
      document.execCommand('copy');

// Remove the textarea
      document.body.removeChild(textArea);

// Remove the "copied" class from all elements
      var allCopyTextElements = document.querySelectorAll(".copy-text");
      allCopyTextElements.forEach(function(elem) {
        elem.classList.remove("copied");
        elem.textContent = elem.getAttribute("data-original-text");
      });

// Change the text color to pink and update the text content
      element.classList.add("copied")
      }

// Add event listener to elements with the same class for copying texts
    document.addEventListener("click", function(event) {
      if (event.target.classList.contains("copy-text")) {
        var textToCopy = event.target.getAttribute("data-original-text");
        // Call the function to copy the text
        copyTextToClipboard(textToCopy, event.target);
      }
    });
  </script>

</body>
</html>

copy text

password protection

example:

password invalid !

code:

copy text

scroll to top button

example:

click to scroll to top

code:

copy text

quiz

example:

code:

for (let i = 1; i <= 5; i++) {
                const userAnswer = document.querySelector('input[name="q' + i + '"]').value.trim().toLowerCase();

if (userAnswer === answers['q' + i]) {
                    score++;
                    document.getElementById('feedback' + i).textContent = "correct !";
                } else {
                    document.getElementById('feedback' + i).textContent = "wrong, the correct answer is " + answers['q' + i];
                }
            }

document.getElementById('score').textContent = "you got " + score + " out of 5";
        }
    </script>

</body>
</html>

copy text

modal

example:

click on the meow meow

code:

<html>
<head>
<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background:url("https://i.postimg.cc/J0n5Wnxw/gingham.jpg");
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
  border: 1.4px dotted #cbb0ad;
    border-radius: 5px;
}

.close {
  color: #af8f8b;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.gallery img {
width: 150px;
height: auto; }
</style>
</head>
<body>

function openModal(imageSrc) {
  var modal = document.getElementById("modal");
  var modalImg = document.getElementById("modalImg");
  
  modal.style.display = "block";
  modalImg.src = imageSrc;
  
  currentImageIndex = images.indexOf(imageSrc);
}

function closeModal() {
  var modal = document.getElementById("modal");
  modal.style.display = "none";
}

var gallery = document.querySelector('.gallery');
var imageUrls = ["https://i.ibb.co/SP5hyJk/IMG-2312.jpg"];

imageUrls.forEach(function(imageUrl) {
  var imageElement = document.createElement('div');
  imageElement.className = 'image';
  imageElement.innerHTML = `<img src="${imageUrl}" onclick="openModal('${imageUrl}')" alt="Image">`;
  gallery.appendChild(imageElement);
  images.push(imageUrl);
});
</script>

</body>
</html>

copy text

image slider

example:

code:

table img {
  width: 150px;
  height: auto;
}

.slide {
  display: none;
}

table button, table button:hover{
  color: #af8f8b;
  border: none;
  font-size: 30px;
  background: none;
}
</style>
</head>
<body>

function showSlide() {
  slides.forEach((slide, index) => {
    if (index === currentSlide) {
      slide.style.display = 'block';
    } else {
      slide.style.display = 'none';
    }
  });
}

function prevSlide() {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide();
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide();
}

showSlide();
</script>
</body>
</html>

copy text

tooltip

example:

code:

</head>
<body>

<span class="tooltip-element" data-tooltip="<img src='https://i.postimg.cc/fLpppmJk/IMG-2806.jpg' width='auto' height='120'>">hover over me !</span>

window.addEventListener('mousemove', (e) => {
        tooltip.style.top = e.clientY + 'px';
        tooltip.style.left = e.clientX + 'px';
    });

tooltipElements.forEach(element => {
        element.addEventListener('mouseover', () => {
            tooltip.innerHTML = element.getAttribute('data-tooltip');
            tooltip.style.display = 'block';
            tooltip.style.top = (event.clientY + window.scrollY) + 'px';
            tooltip.style.left = event.clientX + 'px';
            tooltip.style.opacity = 0;
            setTimeout(() => {
                tooltip.style.opacity = 1;
            }, 10);
        });

element.addEventListener('mouseout', () => {
            timeout = setTimeout(() => {
                tooltip.style.opacity = 0;
            }, 300);
        });

tooltip.addEventListener('mouseover', () => {
            clearTimeout(timeout);
        });

tooltip.addEventListener('mouseout', () => {
            tooltip.style.opacity = 0;
        });
    });
</script>

</body>
</html>

copy text

randomised link

example:

code:

copy text

curved text

example:

curved text example

code:

copy text

display rss feed on html page

don't know how to make an rss feed ? click here !

example:

loading rss feed ..

code:

</head>
<body>

<div id="rss-content">loading rss feed ..</div>

async function fetchRSS() {
            const rssUrl = 'https://jubiland.neocities.org/feed.xml'; // replace this part with your own rss feed
            const proxyUrl = 'https://api.allorigins.win/raw?url=';

try {
                const response = await fetch(proxyUrl + encodeURIComponent(rssUrl));
                const data = await response.text();
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(data, 'text/xml');
                
                const items = xmlDoc.querySelectorAll('item');
                let html = '<h2><center>updates</center></h2>';

items.forEach((item, index) => {
                    if (index < 5 /*/ put the amount of rss entrys you want to display here /*/ ) {
                        const title = item.querySelector('title').textContent;
                        const link = item.querySelector('link').textContent;
                        const pubDate = formatDate(item.querySelector('pubDate').textContent);
                        const description = item.querySelector('description').textContent;

html += ` 
                            <div>
                                <h3>${title}</h3>
                                <p>${pubDate}</p>
                                <p>${description}</p>
                                <a href="${link}">read more</a>
                            </div>
                        `;
                    }
                });

document.getElementById('rss-content').innerHTML = html;
            } catch (error) {
                console.error('error fetching rss feed :(', error);
                document.getElementById('rss-content').innerHTML = 'error loading rss feed, try again later !';
            }
        }

fetchRSS();
    </script>

</body>
</html>

copy text