HTML

GitBook docs section concerning HTML context.

Dynamic Form

Forms with dynamic addition of new fields (and removal).

<div id="wrapper">
    <div id="form">
        <form method="post" action="action.php">
            <table id="employee_table">
                <tr>
                    <td><input type="text" name="name[]" placeholder="Enter Name"></td>
                    <td><input type="text" name="age[]" placeholder="Enter Age"></td>
                    <td><input type="text" name="job[]" placeholder="Enter Job"></td>
                </tr>
            </table>
            <input type="button" value="ADD ROW" onclick="addRow()">
            <input type="submit" value="submit_row" value="SUBMIT">
        </form>
    </div>
</div>

function add_row()
{
    rowno = $("#employee_table tr").length;
    rowno = rowno + 1;
    $("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='name[]' placeholder='Enter Name'></td><td><input type='text' name='age[]' placeholder='Enter Age'></td><td><input type='text' name='job[] 'placeholder='Enter Job'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}

function delete_row(rowno)
{
    $('#' + rowno).remove();
}

Button Video Overlay

Simple video overlay with play icon.

<div class="wrapper">
    <video class="video">
        <source src="video.mp4" type="video/mp4" />
    </video>
    <div class="playpause"></div>
</div>

.video {
    width: 100%;
    border: 1px solid black;
}
.wrapper {
    display: table;
    width: auto;
    position: relative;
    width: 50%;
}
.playpause {
    background-image: url(play.png);
    background-repeat: no-repeat;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    margin: auto;
    background-size: contain;
    background-position: center;
}

$('.video').parent().click(function () {
    if($(this).children(".video").get(0).paused){
        $(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut();
    }
    else{
        $(this).children(".video").get(0).pause();
        $(this).children(".playpause").fadeIn();
    }
});

Custom Cursor

Replace cursor pointer with custom svg.

<div id="cursor">
    <img alt="Cursor Hand" src="castom-cursor.svg"/>
</div>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

* {
    box-sizing: border-box;
}
body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 8.33vh;
}
.left,
.right,
.container {
    width: 100%;
    height: 100%;
}
.container {
    display: flex;
    cursor: none;
    * {
        cursor: inherit;
    }
}
.left {
    background-color: #fafaaa;
}
.right {
    background-color: #aafafa;
}
#cursor {
    position: absolute;
    left: -42px;
    top: -48px;
    will-change: transform;
    pointer-events: none;
    img {
        will-change: transform;
        transition: all 0.5s cubic-bezier(0.6, 1.46, 0.53, 0.92);
        opacity: 0;
        width: 96px;
        height: 96px;
    }
}

let currentCursorPos;
const cursorEl = document.querySelector("#cursor");
const cursorImageEl = document.querySelector('#cursor > img');

window.addEventListener("mousemove", event => {
    currentCursorPos = { x: event.clientX, y: event.clientY };
    if (document.querySelector(".container:hover")) {
        cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;
        cursorImageEl.style.opacity = "1";
        cursorEl.style.display = "inline-block";
    } else {
        cursorEl.style.display = "none";
    }
    if (document.querySelector(".left:hover")){
        cursorImageEl.style.transform = `rotate(-270deg)`;
    } else if (document.querySelector(".right:hover")){
        cursorImageEl.style.transform = `rotate(-90deg)`;
    } else {
        cursorImageEl.style.transform = `rotate(180deg)`;
    }
});

Modal

Simple modal created from scratch.

<a href="#" class="js-open-modal">open modal</a>
<div class="modal">
    <div class="modal_header">
        modal header
        <a href="#" class="js-close-modal">X</a>
    </div>
    <p>hey there, I'm the modal</p>
</div>

body {
    background: #00E5FF;
    padding: 20px;
}
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    width: 320px;
    height: 320px;
    text-align: center;
    box-sizing: border-box;
    box-shadow:0 0 20px rgba(0,0,0,.2);
    &.visible {
        display: block;
    }
}
.modal_header {
    color:white;
    background: #333;
    line-height: 50px;
    text-align: center;
    position: relative;
    height: 50px;
    box-sizing: border-box;
    a {
        position: absolute;
        top: 0;
        right: 0;
        text-decoration: none;
        color: white;
        font-weight: bold;
        display: block;
        padding: 0 20px;
        font-size: 16px;
        background: #555;
        height: 100%;
    }
}

$(".js-open-modal").click(function(){
    $(".modal").addClass("visible");
});
$(".js-close-modal").click(function(){
    $(".modal").removeClass("visible");
});
$(document).click(function(event) {
    // if you click on anything except the modal itself or the "open modal" link, close the modal
    if (!$(event.target).closest(".modal,.js-open-modal").length) {
        $("body").find(".modal").removeClass("visible");
    }
});

For disabling events on background when modal is showing up, wrap it in a div ("overlay") with style like this:

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgbba(128,128,128,0.5);
    display none; /* make it hidden by default, make it visible when modal pops up */
}

HTML anchor with Map reference

To insert an anchor element with maps reference in HTML page use the code below. The same logic is reusable for mailto and tel.

<a href="map:21th,High Street, London">Location</a>

HTML Accordion element

<details>
    <summary>Open Me</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec auctor est. Suspendisse sit amet urna neque. Integer non urna vel metus faucibus placerat ac in sapien.</p>
</details>

HTML Progress Bar element

<label for="ability">Web Dev Skills</label>
<progress id="ability" value="50" max="100"></progress>