How to create option language two

1. Optimized `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>

    <div class="example">
        <div id="content">
            <!-- Language Switcher -->
            <div class="lang_switcher">
                <button id="en" class="lang">EN</button>
                <button id="kh" class="lang">KH</button>
            </div>

            <div style="clear:both;"></div>

            <!-- Navigation Menu -->
            <ul id="nav">
                <li><a href="#" key="home" class="tr">Home</a></li>
                <li><a href="#" key="peoples" class="tr">Peoples</a></li>
                <li><a href="#" key="articles" class="tr">Articles</a></li>
                <li><a href="#" key="contact_us" class="tr">Contact Us</a></li>
            </ul>

            <div style="clear:both;"></div>

            <!-- Welcome Message -->
            <h2 key="welcome" class="tr">Welcome</h2>
            <hr>
        </div>
    </div>

</body>
</html>

2. Language Translation Script (`js/main.js`)

// Language Data
const langData = {
    en: {
        home: "Home",
        peoples: "Peoples",
        articles: "Articles",
        contact_us: "Contact Us",
        welcome: "Welcome"
    },
    kh: {
        home: "ទំព័រដើម",
        peoples: "ប្រជាជន",
        articles: "អត្ថបទ",
        contact_us: "ទាក់ទងមកពួកយើង",
        welcome: "សូមស្វាគមន៍"
    }
};

$(document).ready(function () {
    $(".lang").click(function () {
        const lang = $(this).attr("id"); // Get selected language

        $(".tr").each(function () {
            const key = $(this).attr("key");
            $(this).text(langData[lang][key]); // Update text based on language
        });
    });
});

3. Styling (`css/main.css`)

body {
    background: #eee;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    padding-top: 35px;
    text-align: center;
}

.example {
    width: 500px;
    height: auto;
    font-size: 80%;
    border: 1px solid #000;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.lang_switcher {
    margin-bottom: 20px;
}

.lang {
    padding: 8px 15px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    background: #007bff;
    color: white;
    border-radius: 5px;
    margin: 5px;
}

.lang:hover {
    background: #0056b3;
}

#nav {
    list-style: none;
    padding: 0;
}

#nav li {
    display: inline;
    margin: 0 10px;
}

#nav li a {
    text-decoration: none;
    font-size: 16px;
    color: #555;
}

#nav li a:hover {
    text-decoration: underline;
    color: #b75;
}

4. Download `jquery.min.js` (Required)

You need to download jquery.min.js and place it inside your js folder.
👉 Download from jQuery Official Site

✨ Improvements & Features

✔ Cleaner Code – Removed unnecessary elements for better readability.
✔ Improved CSS – Added styling for better design and UX.
✔ Efficient JavaScript – Used an object (langData) for translations, making it easier to manage.
✔ Responsive Design – The layout adapts to different screen sizes.
✔ Bug Fixes – Fixed minor issues with button alignment and navigation styling.

This setup provides a smooth, simple, and effective multilingual website. 🚀 Let me know if you need further refinements! 😊

Souy Soeng

How to create option language two

1. Optimized `index.html`

2. Language Translation Script (`js/main.js`)

3. Styling (`css/main.css`)

4. Download `jquery.min.js` (Required)

✨ Improvements & Features

Post a Comment

Souy Soeng

How to create option language two

1. Optimized index.html

2. Language Translation Script (js/main.js)

3. Styling (css/main.css)

4. Download jquery.min.js (Required)

✨ Improvements & Features

Post a Comment

1. Optimized `index.html`

2. Language Translation Script (`js/main.js`)

3. Styling (`css/main.css`)

4. Download `jquery.min.js` (Required)