Member Avatar for arctushar

Hi
I want to make a dictionry using html5.
For example I have words
1. good
2. bad
3. hot
4. cold
Now I want that in index page this words will be shown as 3 column.
If I click on any word, the meaning of the word should display. Meaning can be displayed in a div or as popup. Please help me.
Basicaly I want to make a important word dictionary in Beangali for mobile.
Thankx

  • 2 Contributors
  • 3 Replies
  • 206 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

A short, practical pattern to turn the word list that has into a simple, mobile-friendly Bengali mini-dictionary. asked for code, so below is a minimal, single-file starter that is semantic, responsive and accessible. Replace the placeholder meanings with real Bengali text and save the file as UTF-8.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Mini dictionary</title>
  <style>
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.5rem}
    .word{padding:.5rem;border:1px solid #ddd;background:#f8f8f8;border-radius:4px;text-align:left}
    @media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
    #meaning{position:fixed;left:0;right:0;bottom:0;background:#fff;padding:1rem;border-top:1px solid #ccc;max-height:40vh;overflow:auto}
  </style>
</head>
<body>
  <div id="dict" class="grid">
    <button class="word" data-meaning="bhalo (Bengali meaning here)">good</button>
    <button class="word" data-meaning="kharap (Bengali meaning here)">bad</button>
    <button class="word" data-meaning="gorom (Bengali meaning here)">hot</button>
    <button class="word" data-meaning="thanda (Bengali meaning here)">cold</button>
  </div>

  <div id="meaning" aria-live="polite">Tap a word to see meaning.</div>

  <script>
    document.getElementById('dict').addEventListener('click', function(e){
      var btn = e.target.closest('.word');
      if(!btn) return;
      document.getElementById('meaning').textContent = btn.dataset.meaning;
    });
  </script>
</body>
</html>

Notes and troubleshooting: always save pages as UTF-8 so Bengali script renders; use real Bengali script in the data-meaning or load meanings from a JSON file if the list grows. Prefer <button> for keyboard access and use an aria-live region or a proper dialog if showing popups. For large vocabularies add client-side search, lazy rendering or alphabetic paging and consider localStorage for offline use. If Bengali text shows boxes, check font support and file encoding.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Ok, what do you have so far as far as HTML code? Upload that or provide the URL, or put your code on jsfiddle.net.

Member Avatar for arctushar

I have no code. I have only words and meanings

Member Avatar for JorgeM

I see. I have time to help with issues and guidance but If you need someone to develop this for you, you may consider asking for a developer in the business exchange area.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.