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

Descargar tarjeta de aplicación

La leyenda de Zelda

Un código de Landingpage1

HTML

CSS

JS

Recomendado

Descargar tarjeta de aplicación

La leyenda de Zelda

Un código de Landingpage1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS