<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Translotor</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.dictionary {
margin-top: 20px;
}
.dictionary input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.results {
margin-top: 20px;
}
.results {
background: #e7f3fe;
padding: 10px;
border-radius: 5px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Translator</h1>
<p>Welcome to the translator page!</p>
<p>Here you can find definitions and meanings of various words.</p>
<div class="dictionary">
<input
type="text"
id="search"
placeholder="Search for a word..."
onkeyup="searchWord()"
/>
<div class="results" id="result"></div>
</div>
</div>
<script>
const dictionary = {
name: "नाम",
age: "उमेर",
country: "देश",
city: "सहर",
language: "भाषा",
school: "विद्यालय",
teacher: "शिक्षक",
student: "विद्यार्थी",
book: "पुस्तक",
pen: "कलम",
house: "घर",
family: "परिवार",
friend: "साथी",
water: "पानी",
food: "खाना",
rice: "भात",
time: "समय",
day: "दिन",
night: "रात",
morning: "बिहान",
evening: "साँझ",
work: "काम",
love: "माया",
money: "पैसा",
market: "बजार",
hospital: "अस्पताल",
road: "सडक",
car: "गाडी",
child: "बच्चा",
woman: "महिला"
};
function searchWord() {
const searchInput = document.getElementById("search").value.toLowerCase();
const resultsContainer = document.getElementById("result");
const translation = dictionary[searchInput];
if(translation){
resultsContainer.innerHTML = "The Nepali transaltor for " + searchInput + " is " + translation;
} else {
resultsContainer.innerHTML = "No results found";
}
}
</script>
</body>
</html>