# HTML

<br>

## Dynamic Form

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

```html
<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>
```

```javascript
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();
}
```

<br>

## Button Video Overlay

Simple video overlay with play icon.

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

```css
.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;
}
```

```javascript
$('.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();
    }
});
```

<br>

## Custom Cursor

Replace cursor pointer with custom svg.

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

```css
* {
    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;
    }
}
```

```javascript
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)`;
    }
});
```

<br>

## Modal

Simple modal created from scratch.

```html
<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>
```

```css
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%;
    }
}
```

```javascript
$(".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:

```css
.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 */
}
```

<br>

## 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`.

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

<br>

## HTML Accordion element

```html
<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>
```

<br>

## HTML Progress Bar element

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sbdevs-organization.gitbook.io/sbdev-docs/docs/docs-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.