import React, { useEffect, useState } from "react";
export default function TypenLearnApp() {
const [inputValue, setInputValue] = useState("");
const [images, setImages] = useState([]);
const [suggestion, setSuggestion] = useState("");
const searchImage = async () => {
setSuggestion("");
setImages([{ url: null, loading: true }]);
try {
const response = await fetch(
`https://api.unsplash.com/search/photos?query=${inputValue}&per_page=25&client_id=cPiY-biD3QpqmNZve3uZVvaEgM80DggOaYCH-YwHYHs`
);
if (!response.ok) throw new Error("Network error");
const data = await response.json();
if (data.results.length > 0) {
setImages(data.results.map((photo) => ({ url: photo.urls.regular })));
setTimeout(() => {
document.getElementById("imageContainer")?.scrollIntoView({ behavior: "smooth" });
}, 300);
} else {
setImages([]);
suggestSimilar(inputValue);
}
} catch (error) {
setImages([]);
suggestSimilar(inputValue);
}
};
const suggestSimilar = (word) => {
const suggestions = ["apple", "cat", "dog", "car", "tree"];
const match = suggestions.find((w) => w.startsWith(word.charAt(0)));
if (match) {
setSuggestion(`🤔 Did you mean ${match}? Try typing it!`);
}
};
const handleKeyPress = (char) => {
setInputValue((prev) => prev + char);
playKeySound();
};
const playKeySound = () => {
const audio = new Audio("https://www.soundjay.com/button/beep-07.wav");
audio.play();
};
const clearInput = () => setInputValue("");
const backspace = () => setInputValue((val) => val.slice(0, -1));
const handleSpeech = () => {
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = "en-US";
recognition.start();
recognition.onresult = (event) => {
setInputValue(event.results[0][0].transcript);
};
playKeySound();
};
const rowColors = [
["#f6d365", "#fda085"],
["#a1c4fd", "#c2e9fb"],
["#84fab0", "#8fd3f4"],
];
const rows = [
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
["A", "S", "D", "F", "G", "H", "J", "K", "L"],
["Z", "X", "C", "V", "B", "N", "M"],
];
return (
);
}
TypenLearn
Type or say a word to see matching pictures! Perfect for learning new words and having fun!
setInputValue(e.target.value)}
placeholder="Type a word..."
/>
{suggestion && (
)}
{rows.map((row, rowIndex) => (
{row.map((letter) => (
))}
))}
{images.length === 1 && images[0].loading ? (
))
)}
Loading pictures...
) : ( images.map((img, i) => (