Webleb - fragmentos de código - DICCIONARIO DE PALABRAS Y PRONUNCIACIÓN

HTML

CSS

body {
            display: flex;
            background-image: url('https://telegra.ph/file/ddf9087dae1e826d8b986.jpg');
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            font-family: Arial, sans-serif;
            flex-direction: column;
        }
        .container {
            background: #fff;
            border: 2px solid blue;
            padding: 20px 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: center;
            margin-top: 50px; /* Added margin to account for marquee */
        }
        input {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #2009f1;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 20px;
            border: none;
            background-color: #007BFF;
            color: white;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #00b336;
        }
        .definition {
            text-align: left;
            margin-top: 20px;
        }
        .definition p {
            margin: 0;
            padding: 5px 0;
            border-bottom: 1px solid #160101;
        }
        .marquee-container {
            color: rgb(248, 6, 6);
            height: 10%;
            width: 100%;
            position: fixed;
            top: 0;
            background-color: #0606f5; /* Optional background color for better visibility */
            z-index: 1000;
            padding: 5px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

JS

function speak() {
            var text = document.getElementById("word").value;
            var utterance = new SpeechSynthesisUtterance(text);
            speechSynthesis.speak(utterance);
        }

async function getDefinition() {
            const word = document.getElementById("word").value;
            const definitionDiv = document.getElementById("definition");
            definitionDiv.innerHTML = ''; // Clear previous definition

if (!word) {
                definitionDiv.innerHTML = '<p>Please enter a word.</p>';
                return;
            }

try {
                const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
                if (!response.ok) {
                    throw new Error('please provide Dictionary Words Only.         Best Regard: Kyekyeku-Tech');
                }
                const data = await response.json();
                const definitions = data[0].meanings[0].definitions;

definitions.forEach(def => {
                    const p = document.createElement('p');
                    p.textContent = def.definition;
                    definitionDiv.appendChild(p);
                });
            } catch (error) {
                definitionDiv.innerHTML = `<p>${error.message}</p>`;
            }
        };

DICCIONARIO DE PALABRAS Y PRONUNCIACIÓN

Recomendado

Página de contacto futurista

Un código de efficientcloud646

Un código de fastbug70

HTML

CSS

JS

Recomendado

Página de contacto futurista

Un código de efficientcloud646

Un código de fastbug70

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS