Code Palette

HTML Snippet

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Simple Page</title>
    </head>
    <body>
        <h1>Welcome to my page!</h1>
    </body>
</html>

HTML5 Audio Embed

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
</audio>

HTML Table

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
</table>

CSS Border Radius

button {
    background-color: #28a745;
    color: white;
    border-radius: 12px;
    padding: 10px 20px;
}

CSS Box Shadow

.card {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

CSS Hover Effect

a:hover {
    color: #28a745;
    text-decoration: underline;
}

JavaScript Toggle Visibility

function toggleVisibility() {
    var element = document.getElementById("toggleElement");
    element.style.display = (element.style.display === "none" ? "block" : "none");
}

JavaScript Array Filter

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

JavaScript Event Listener - Keypress

document.addEventListener("keypress", function(event) {
    console.log("Key pressed: " + event.key);
});

CSS Snippet

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
}
h1 {
    color: #28a745;
}

JavaScript Snippet

console.log("Hello, World!");

CSS Flexbox Example

.container {
    display: flex;
    justify-content: space-between;
}
.item {
    width: 30%;
    background-color: #28a745;
    padding: 10px;
}

JavaScript DOM Manipulation

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

HTML Form

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <input type="submit" value="Submit">
</form>