JavaScript table example

Preview picture before upload

Text translator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Translation Example</title>
</head>
<body>
    <div id="output"></div>

// Create an Intl message formatter
        const formatter = new Intl.MessageFormat('Hello, {name}!', language);

// Example translation function
        function translate(key, params) {
            const message = {
                'en-US': 'Hello, {name}!',
                'fr-FR': 'Bonjour, {name}!',
                // Add more translations as needed
            };

const translatedMessage = formatter.format(message[key], params);
            return translatedMessage;
        }

// Example usage
        const translatedText = translate(language, { name: 'John' });
        document.getElementById('output').textContent = translatedText;
    </script>
</body>
</html>

Calendar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }

table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

th, td {
            padding: 10px;
            border: 1px solid #ddd;
        }

th {
            background-color: #f2f2f2;
        }

td {
            cursor: pointer;
        }

.prev, .next {
            cursor: pointer;
            font-size: 20px;
        }
    </style>
    <title>Simple Calendar</title>
</head>
<body>

document.addEventListener("DOMContentLoaded", displayCalendar);

function displayCalendar() {
            const monthYearElement = document.getElementById("month-year");
            const calendarBody = document.querySelector("#calendar tbody");

// Clear the previous content
            monthYearElement.textContent = "";
            calendarBody.innerHTML = "";

// Set the month and year
            monthYearElement.textContent = new Date(currentYear, currentMonth).toLocaleString('en-US', { month: 'long', year: 'numeric' });

// Get the first day of the month and the last day of the month
            const firstDay = new Date(currentYear, currentMonth, 1).getDay();
            const lastDay = new Date(currentYear, currentMonth + 1, 0).getDate();

let dayCounter = 1;

// Create calendar rows and cells
            for (let i = 0; i < 6; i++) {
                const row = document.createElement("tr");

for (let j = 0; j < 7; j++) {
                    const cell = document.createElement("td");

if ((i === 0 && j < firstDay) || dayCounter > lastDay) {
                        cell.textContent = "";
                    } else {
                        cell.textContent = dayCounter;
                        cell.onclick = function () {
                            alert(`You clicked on ${dayCounter}`);
                        };
                        dayCounter++;
                    }

row.appendChild(cell);
                }

calendarBody.appendChild(row);
            }
        }

function prevMonth() {
            currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
            currentYear = (currentMonth === 11) ? currentYear - 1 : currentYear;
            displayCalendar();
        }

function nextMonth() {
            currentMonth = (currentMonth === 11) ? 0 : currentMonth + 1;
            currentYear = (currentMonth === 0) ? currentYear + 1 : currentYear;
            displayCalendar();
        }
    </script>
</body>
</html>

Text to speak