100-JS-Projects-Challenge/Multi-LanguageTranslator.html at main · AkhtarZeb5101/100-JS-Projects-Challenge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Language Translator</title>

    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            background-color: #f0f8ff;
            font-family: 'Arial', sans-serif;
        }

        .header {
            background-color: #4e73df;
            color: white;
            text-align: center;
            border-radius: 0.75rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            padding: 1em 0px;
        }

        .header p {
            font-size: 1.2rem;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        .card {
            border-radius: 1rem;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }

        .card-body {
            padding: 1.5rem;
        }

        .btn-translate,
        .btn-reset {
            background-color: #4e73df;
            border-radius: 0.5rem;
            color: white;
            padding: 5px;
            margin: 0.5em 0px;
            font-size: 1.2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            transition: background-color 0.3s ease;
        }

        .btn-translate:hover,
        .btn-reset:hover {
            background-color: #2e59d9;
        }

        textarea {
            border-radius: 0.5rem;
            margin-top: 1rem;
            font-size: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            padding: 1em;
        }

        .form-label {
            font-size: 1.1rem;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div class="header">
        <h1>Multi-Language Translator</h1>
    </div>

    <div class="container">
        <div class="card">
            <div class="card-body">
                <div class="mb-3">
                    <label for="language-select" class="form-label">Select Language:</label>
                    <select id="language-select" class="form-select">
                        <option value="---">----</option>
                        <option value="fr">French</option>
                        <option value="es">Spanish</option>
                        <option value="de">German</option>
                        <option value="it">Italian</option>
                        <option value="ja">Japanese</option>
                        <option value="ko">Korean</option>
                        <option value="zh">Chinese</option>
                        <option value="ar">Arabic</option>
                        <option value="ru">Russian</option>
                        <option value="pt">Portuguese</option>
                        <option value="hi">Hindi</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label for="input-text" class="form-label">Enter Text:</label>
                    <textarea id="input-text" class="form-control" placeholder="Type text here..."></textarea>
                </div>

                <button id="btn-translate" class="btn btn-translate">Translate</button>
                <button id="btn-reset" class="btn btn-reset">Reset</button>

                <div class="mb-3">
                    <label for="output-text" class="form-label">Translated Text:</label>
                    <textarea id="output-text" class="form-control" placeholder="Your translation will appear here..."
                        readonly></textarea>
                </div>
            </div>
        </div>
    </div>

    <script>
        var inputText = document.querySelector('#input-text');
        var outputText = document.querySelector('#output-text');
        var buttonTranslate = document.querySelector('#btn-translate');
        var buttonReset = document.querySelector('#btn-reset');
        var languageSelect = document.querySelector('#language-select');

        // Mock translation function (just returns a static translation for demonstration purposes)
        function mockTranslate(text, lang) {
            // This is a simple mock translation for the sake of demonstration.
            const translations = {
                fr: "Texte en français",
                es: "Texto en español",
                de: "Text auf Deutsch",
                it: "Testo in italiano",
                ja: "日本語のテキスト",
                ko: "한국어 텍스트",
                zh: "中文文本",
                ar: "نص باللغة العربية",
                ru: "Текст на русском",
                pt: "Texto em português",
                hi: "हिंदी में टेक्स्ट"
            };

            return translations[lang] || "Translation not available";
        }

        // Main translation function when the button is clicked
        function clickHandler() {
            var text = inputText.value;
            var targetLanguage = languageSelect.value;

            // Mock translation logic
            if (targetLanguage === '---') {
                alert("Please select a language.");
                return;
            }

            // Use the mockTranslate function to simulate the translation
            var translatedText = mockTranslate(text, targetLanguage);
            outputText.value = translatedText;
        }

        // Reset function to clear input and output fields
        function resetHandler() {
            inputText.value = '';
            outputText.value = '';
            languageSelect.value = '---'; // Reset to default state
        }

        // Event listeners for translate and reset buttons
        buttonTranslate.addEventListener("click", clickHandler);
        buttonReset.addEventListener("click", resetHandler);
    </script>

    <!-- Popper.js and Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>

</html>