Hi, I will provide a free code for all of you on my YouTube channel, in learning Create Language Translator using HTML CSS and Javascript. The learning is very easy, simple and easy to understand for beginners, good luck, good luck, my advice is don't forget to keep learning and repeat until you can, happy coding. have a nice day friend.
This is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
The best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. Code HTML
<! DOCTYPE html >
< html lang ="en" dir ="ltr" >
< head >
< meta charset ="utf-8" >
< title > Translation Language</ title >
< link rel ="stylesheet" href ="style.css" >
< meta name ="viewport" content ="width=device-width,
initial-scale=1.0">
< link rel ="stylesheet" href ="https://
cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.3/css/all.min.css" />
</ head >
< body >
< div class ="hero" >
< p > About 3,470,000 results (0.22 seconds)</ p >
< button > TRANSLATE</ button >
< ul class ="button" >
< li class ="row from" >
< select ></ select >
</ li >
< li class ="change" >< i class ="fas
fa-exchange-alt"></ i ></ li >
< li class ="row to" >
< select ></ select >
</ li >
</ ul >
< div class ="groupy" >
< div class ="text-input" >
< textarea spellcheck ="false" class ="from-text"
placeholder"Type your text" >
</textarea >
< textarea spellcheck ="false" readonly disabled
class"to-text"
placeholder"Translation" ></ textarea >
</ div >
</ div >
< p > Open in Translate - Feedback</ p >
</ div >
< script src ="countries.js" ></ script >
< script src ="script.js" ></ script >
</ body >
</ html >
2. CSS
* {
margin : 0 ; padding : 0 ;
box-sizing : border-box ;
font-family : 'montserrat' , sans-serif ;
text-decoration : none ;
list-style : none ;
outline : none ;
}
body {
display : flex ;
padding : 0 10px ;
min-height : 100vh ;
align-items : center ;
justify-content : center ;
background : #181818 ;
}
.hero {
max-width : 690px ;
width : 100% ;
padding : 30px ;
text-align : center ;
background : #fff ;
box-shadow : 0 10px 20px rgba (0 ,0 ,0 ,0.01 );
}
.hero p {
font-size : 13px ;
}
.hero button {
width : 30% ;
padding : 14px ;
border : none ;
margin-top : 9px ;
font-size : 17px ;
background : #181818 ;
border-radius : 100px ;
color : #fff ;
cursor : pointer ;
}
.button {
list-style : none ;
padding : 12px 0 ;
}
.button , li , i {
display : flex ;
align-items : center ;
justify-content : space-between ;
}
.button .row select {
color : #333 ;
padding : 5px 10px ;
font-size : 18px ;
border : 2px solid #080808 ;
background : none ;
}
.button .change {
color : #DD5353 ;
cursor : pointer ;
font-size : 20px ;
transition : transform 0.2s ease ;
}
.button i:active {
transform : scale (0.9 );
}
.groupy {
border : 2px solid #080808 ;
background : #fccaca ;
}
.groupy .text-input {
display : flex ;
}
.text-input .to-text {
border-left : 2px solid #080808 ;
}
.text-input textarea {
resize : none ;
height : 100px ;
width : 100% ;
background : none ;
border : none ;
font-size : 18px ;
padding : 10px 15px ;
}
3. Javascript
const fromText = document .querySelector (".from-text" ),
toText = document .querySelector (".to-text" ),
exchageIcon = document .querySelector (".change" ),
selectTag = document .querySelectorAll ("select" ),
icons = document .querySelectorAll (".row i" );
translateBtn = document .querySelector ("button" ),
selectTag .forEach ((tag , id ) => {
for (let country_code in countries ) {
let selected = id == 0 ? country_code == "en-GB" ?
"selected""" :
country_code"hi-IN" ? "selected" : "" ;
let option = `<option ${ selected } value=" $
{country_code } ">
${countries [country_code ]} </option>` ;
tag .insertAdjacentHTML ("beforeend" , option );
}
});
exchageIcon .addEventListener ("click" , () => {
let tempText = fromText .value ,
tempLang = selectTag [0 ].value ;
fromText .value = toText .value ;
toText .value = tempText ;
selectTag [0 ].value = selectTag [1 ].value ;
selectTag [1 ].value = tempLang ;
});
fromText .addEventListener ("keyup" , () => {
if (!fromText .value ) {
toText .value = "" ;
}
});
translateBtn .addEventListener ("click" , () => {
let text = fromText .value .trim (),
translateFrom = selectTag [0 ].value ,
translateTo = selectTag [1 ].value ;
if (!text ) return ;
toText .setAttribute ("placeholder" , "Translating..." );
let apiUrl = `https://api.mymemory.
translated.net/get?q=${ text }
&langpair=${ translateFrom } | ${ translateTo } ` ;
fetch (apiUrl ).then (res => res .json ()).then (data => {
toText .value = data .responseData .translatedText ;
data .matches .forEach (data => {
if (data .id === 0 ) {
toText .value = data .translation ;
}
});
toText .setAttribute ("placeholder" , "Translation" );
});
});
4. Javascript Add (Countries)
const countries = {
"id-ID" : "Indonesian" ,
"ar-SA" : "Arabic" ,
"de-DE" : "German" ,
"it-IT" : "Italian" ,
"es-ES" : "Spanish" ,
"ja-JP" : "Japanese" ,
"en-GB" : "English" ,
}
For more details, you can see the link YouTube below :
VIDEO
https://www.youtube.com/watch?v=q8c6KqFt_vI
Support my channel. Comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Download Free Code ZIP : DOWNLOAD NOW
Postingan terkait:
Belum ada tanggapan untuk "Create Language Translator using HTML CSS and Javascript"
Post a Comment