Free Code Snippets!

Draggable divs

Allows for div elements with the "draggable" class to be draggable. It also allows for you to insert a link that the user will be directed to if the div is clicked.

HTML:

Paste this into your document's body wherever makes the most sense for your use case. Replace "your-link-here" with the link you want the image to direct to.

                
<div class="draggable" data-link="your-link-here"><img src="your-image-here" style="width: px;"></div>

CSS:

Put this wherever makes the most sense. In my case, it was at the very end of the CSS.

                
.draggable {
    position: absolute;
    z-index: 10;
    display: inline;
}

JavaScript:

Here is the JavaScript code. You can link it from a separate document, or include it in your HTML directly using the <script> tag.

                
// Make the DIV element draggable:
var mydivs = document.getElementsByClassName("draggable");
for (var i = 0; i < mydivs.length; i++) {
    dragElement(mydivs[i]);
}
                
function dragElement(elmnt) {
    var pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;
var isDragging = false; // Track if dragging is in progress
var clickTimeout; // Timer for click detection
                
if (elmnt.getElementsByClassName("mydivheader")[0]) {
// if present, the header is where you move the DIV from:
elmnt.getElementsByClassName("mydivheader")[0].onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
}
                
    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        isDragging = false; // Reset dragging state
        clickTimeout = setTimeout(() => {
            isDragging = true; // Set dragging state if not clicked
        }, 100); // Threshold for distinguishing click from drag
        document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
    }
                
    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = elmnt.offsetTop - pos2 + "px";
        elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
    }
                
    function closeDragElement() {
        // Stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
                
        // Clear the click timeout
        clearTimeout(clickTimeout);
                
        if (!isDragging) {
            // Only redirect if it was a click, not a drag
            const link = elmnt.dataset.link; // Assuming you have a data-link attribute
            if (link) {
            window.location.href = link; // Redirect to the link
            }
        }
    }
}

Adjustable pixel art maker

Creates an adjustable pixel art canvas. You can change the dimensions of the grid and draw with any custom color.

HTML:

Put this in your page's body wherever you want the canvas to be.

                <div class="navbar">
    <button class="btn">Reset</button>
    <input type="color" value="#00eeff" class="color">
    <input type="number" value="30" class="size">
</div>

<div class="container"></div>

<script src="pixel.js"></script>

CSS:

Put this wherever it makes sense to. In my case I put it at the end of my CSS.

                
.navbar, .container {
    background-color:#7b68ee;
    width: 800px;
    border-radius: 3px;
}

.navbar {
    padding: 1em;
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn, input {
    height: 35px;
    padding: 0 1em;
}

.color {
    padding: 0 .25em;
    width: 100px;
    margin: 0 1em;
}

.container {
    --size: 4;
    height: 800px;
    display: grid;
    grid-template-columns: repeat(var(--size),1fr);
    grid-template-rows: repeat(var(--size), 1fr);
    gap: 3px;
    padding: 3px;
}

.pixel {
    background-color: #ffffff;
    border-radius: 2px;
}

JavaScript:

You can include this by linking a separate document, or put it directly into your HTML.

                
// Make a container with input elements for size and color
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
let size = sizeEl.value
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')

let draw = false //Track whether user is currently drawing

//Create div elements based on specified size
function populate(size) {
    container.style.setProperty('--size', size)
    for (let i = 0; i < size * size; i++) {
        const div = document.createElement('div')
        div.classList.add('pixel')

        //Changes pixel color only if user is currently drawing
        div.addEventListener('mouseover', function(){
            if(!draw) return
            div.style.backgroundColor = color.value
        })

        //Changes pixel color when clicked, regardless of if user is currently drawing
        div.addEventListener('mousedown', function(){
            div.style.backgroundColor = color.value
        })

        container.appendChild(div)
    }
}

//Sets draw to true when mouse button is pressed
window.addEventListener("mousedown", function(){
    draw = true
})

//Sets draw to false when mouse button is released
window.addEventListener("mouseup", function(){
    draw = false
})

//Empties grid and recreates grid at current size
function reset(){
    container.innerHTML = ''
    populate(size)
}

//Reset grid button
resetBtn.addEventListener('click', reset)

//Updates size variable and resets the grid
sizeEl.addEventListener('change', function(){
    size = sizeEl.value
    reset()
})

//Grid is created according to specified size
populate(size)