HTML matinlar bilan ishlash

< h1> Hello World < /h1> < h2> Hello World < /h2> < h3> Hello World < /h3> < h4> Hello World < /h4> < h5> Hello World < /h5> < h6> Hello World < /h6>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
< p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, < /p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< code >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the < /code>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< i >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the < /i>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< em >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the < /em>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< b >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the < /b>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< strong >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the < /strong>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< del >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the < /del>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< ins >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the < /ins>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< small >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the < /small>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. < sup >Lorem Ipsum< /sup> has been the industry's standard dummy text ever since the< /p >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. < sub >Lorem Ipsum< /sub> has been the industry's standard dummy text ever since the< /p >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. < mark >Lorem Ipsum< /mark > has been the industry's standard dummy text ever since< /p >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. < kbd >Lorem Ipsum< /kbd > has been the industry's standard dummy text ever since< /p >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
< p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. < q >Lorem Ipsum< /q > has been the industry's standard dummy text ever since< /p >

HTML Formalar bilan ishlash


< input type="text">

< input type="number">

< input type="time">

< input type="date">

< input type="datetime-local">

< input type="month">

< input type="week">

< input type="password">

< input type="file">

< input type="radio">

< input type="color">

< input type="checkbox">

< input type="range">

< input type="button" value="Button">

< input type="search" placeholder="Thompson school">
<select>
< option value="Samsung">Samsung< /option>
< option value="Xiaomi">Xiaomi< /option>
< option value="Iphone">Iphone< /option>
< /select>
<textarea>< /textarea>

HTML Media bilan ishlash

rasim-nomi < img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220630132824/HTML-Full-Form.jpg" alt="rasim-nomi">
<video src="short-cartoon.mp4" controls>< / video>
<audio src="child.mp3" controls>< / audio>

HTML Iframelar bilan ishlash

<iframe src="https://www.youtube-nocookie.com/embed/Wlf1T5nrO50?si=H-sjhr5d3Wljmfia">< / iframe>
<iframe src="https://www.google.com/maps/ embed?pb=!1m13!1m8!1m3!1d5989.48282378463!2d69. 23971!3d41.357974!3m2!1i1024!2i768!4f13.1!3m 2!1m1!2zNDHCsDIxJzI4LjciTiA2OcKwMTQnMjMuMCJF!5e0! 3m2!1sen!2s!4v1759001475050!5m2!1sen!2s">< / iframe>
<iframe src="https://www.yellowpages.uz/en">< / iframe>

HTML Ro'yhat bilan ishlash

  • Olma
  • Anor
  • Limon
  • Shaftoli
< ul>
< li>Olma< / li>
< li>Anor< / li>
< li>Limon< / li>
< li>Shaftoli< / li>
< /ul>
  1. Olma
  2. Anor
  3. Limon
  4. Shaftoli
< ol>
< li>Olma< / li>
< li>Anor< / li>
< li>Limon< / li>
< li>Shaftoli< / li>
< /ol>
  1. Olma
  2. Anor
  3. Limon
  4. Shaftoli
< ol type="A">
< li>Olma< / li>
< li>Anor< / li>
< li>Limon< / li>
< li>Shaftoli< / li>
< /ol>
  1. Olma
  2. Anor
  3. Limon
  4. Shaftoli
< ol type="a">
< li>Olma< / li>
< li>Anor< / li>
< li>Limon< / li>
< li>Shaftoli< / li>
< /ol>
  1. Olma
  2. Anor
  3. Limon
  4. Shaftoli
< ol type="I">
< li>Olma< / li>
< li>Anor< / li>
< li>Limon< / li>
< li>Shaftoli< / li>
< /ol>
  • Olma
  • Anor
  • Limon
  • Shaftoli
< ul type="square">
< li>Olma< / li>
< li>Anor< / li>
< li>Limon< / li>
< li>Shaftoli< / li>
< /ol>
Ism Fan Bahosi
Davron Matematika 5
Aziza Ingliz tili 4
Javohir Fizika 5

< table style="color: black; width: 100%;">
< tr>
< th style="border: 1px solid black; text-align: center; background-color: lightgray;">Ism< /th>
< th style="border: 1px solid black; text-align: center; background-color: lightgray;">Fan< /th>
< th style="border: 1px solid black; text-align: center; background-color: lightgray;">Bahosi< /th>
< /tr>
< tr>
< td style="border: 1px solid black; text-align: center;">Davron< /td>
< td style="border: 1px solid black; text-align: center;">Matematika< /td>
< td style="border: 1px solid black; text-align: center;">5< /td>
< /tr>
< tr>
< td style="border: 1px solid black; text-align: center;">Aziza< /td>
< td style="border: 1px solid black; text-align: center;">Ingliz tili< /td>
< td style="border: 1px solid black; text-align: center;">4< /td>
< /tr>
< tr>
< td style="border: 1px solid black; text-align: center;">Javohir< /td>
< td style="border: 1px solid black; text-align: center;">Fizika< /td>
< td style="border: 1px solid black; text-align: center;">5< /td>
< /tr>
< /table>
<div style="width: 200px; height: 200px; background-color: yellow;">< /div
Link < a href="https://www.google.com/">Link< /a>
STOP
<div style="width: 200px; height: 200px; border-radius: 50%; background-color: yellow; display: flex; justify-content: center; align-items: center;">
<div style="width: 150px; height: 150px; border-radius: 50%; background-color: blue; display: flex; justify-content: center; align-items: center;">
<div style="width: 100px; height: 100px; border-radius: 50%; background-color: green; display: flex; justify-content: center; align-items: center;">
<b style="color: red; font-weight: bold;">STOP< /b>
< /div>
< /div>
< /div>

CSS Texnologiyasi bilan ishlash

Hello world

< p style="color: red; font-weight: bold;">Hello world< /p>
< div style="width: 200px; height: 200px; background-color: blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-top: 5px solid blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-right: 5px solid blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-bottom: 5px solid blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-left: 5px solid blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border: 5px solid blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-top: 5px dashed blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-right: 5px dashed blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-bottom: 5px dashed blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-left: 5px dashed blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border: 5px dashed blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-top: 5px dotted blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-right: 5px dotted blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-bottom: 5px dotted blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-left: 5px dotted blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border: 5px dotted blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-top: 5px double blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-right: 5px double blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-bottom: 5px double blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-left: 5px double blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border: 5px double blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-top: 5px solid blue; border-right: 5px double blue; border-bottom: 5px dashed blue; border-left: 5px dotted blue;">< /div>
< div style="width: 200px; height: 200px; background-color: yellow; border-top-left-radius: 40px;">< /div >
< div style="width: 200px; height: 200px; background-color: yellow; border-top-right-radius: 40px;">< /div >
< div style="width: 200px; height: 200px; background-color: yellow; border-bottom-left-radius: 40px;">< /div >
< div style="width: 200px; height: 200px; background-color: yellow; border-bottom-right-radius: 40px;">< /div >
< div style="width: 200px; height: 200px; background-color: yellow; border-top-left-radius: 40px; border-bottom-left-radius: 40px;">< /div >
< div style="width: 200px; height: 200px; background-color: yellow; border-radius: 40px;">< /div >
< div style="width: 200px; height: 200px; background-color: yellow; border-radius: 50%; border: 5px double blue;">< /div>

This text is normal.


< div style="width: 400px; border: 3px solid green;"> < p style="padding-top: 5px;">This text is normal.< /p> < /div>

This text is normal.


< div style="width: 400px; border: 3px solid green; text-align: center;"> < p style="padding-top: 5px;">This text is normal.< /p> < /div>

This text is normal.


< div style="width: 400px; border: 3px solid green; text-align: right;"> < p style="padding-top: 5px;">This text is normal.< /p> < /div>
Forest < img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="100%" height="200" style="object-fit: cover; opacity: 1">
Forest < img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="100%" height="200" style="object-fit: cover; opacity: 0.5">
Forest < img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="100%" height="200" style="object-fit: cover; opacity: 0.3">
< div class="box" style="width: 200px; height: 200px;">< /div> < style>
.box {background-color: yellow; transition: background-color 1s;}
.box:hover {background-color: red;}
< /style>
< div class="box-right" style="width: 200px; height: 200px;">< /div> < style>
.box-right {background-color: yellow; border-right: 0 solid blue; transition: background-color 1s, border-right 1s;}
.box-right:hover {background-color: aqua; border-right: 75px solid blue;}
< /style>
< div class="box-bottom" style="width: 200px; height: 200px;">< /div> < style>
.box-bottom {background-color: yellow; border-bottom: 0 solid blue; transition: background-color 1s, border-bottom 1s;}
.box-bottom:hover {background-color: aqua; border-bottom: 75px solid blue;}
< /style>
< div class="box-left" style="width: 200px; height: 200px;">< /div> < style>
.box-left {background-color: yellow; border-left: 0 solid blue; transition: background-color 1s, border-left 1s;}
.box-left:hover {background-color: aqua; border-left: 75px solid blue;}
< /style>
< div class="box-top" style="width: 200px; height: 200px;">< /div> < style>
.box-top {background-color: yellow; border-top: 0 solid blue; transition: background-color 1s, border-top 1s;}
.box-top:hover {background-color: aqua; border-top: 75px solid blue;}
< /style>
< div class="box-border" style="width: 200px; height: 200px;">< /div> < style>
.box-border {background-color: yellow; border: 0 solid blue; transition: background-color 1s, border 1s;}
.box-border:hover {background-color: aqua; border: 100px solid blue;}
< /style>
< div class="dumoloq" style="width: 200px; height: 200px;">< /div> < style>
.dumoloq {background-color: green; border-radius: 0px; transition: background-color 1s, border-radius 1s;}
.dumoloq:hover {background-color: red; border-radius: 50%;}
< /style>
< div class="rang" style="width: 200px; height: 200px; background-color: yellow;">< /div> < style>
.rang {animation-name: ozgaruvchi; animation-duration: 4s; animation-iteration-count: infinite;} @keyframes ozgaruvchi { 0% {background-color: red;} 25% {background-color: black; border-radius: 50%;} 50% {background-color: blue; border-radius: 50%;} 100% {background-color: green;} }
< /style>
< div class="shadow-effect" style="width: 200px; height: 200px; margin-left: 120px;">< /div> < style>
.shadow-effect {animation-name: effect; animation-duration: 4s; animation-iteration-count: infinite;} @keyframes effect { 0% {background-color: red;} 100% {background-color: firebrick; box-shadow: 10px 10px;}}
< /style>
Hello World
< div class="surf-box-round" style="display: flex; justify-content: center; align-items: center; border: 5px dashed blue;"> Hello World < /div> < style>
.surf-box-round{position: relative; width: 200px; height: 200px; background-color: black; border-radius: 50%; color: white;}
.surf-box-round {animation: spin 4s infinite linear;} @keyframes spin { from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
< /style>

< div style="width: 200px; height: 200px; background-color: yellow; border: 1px solid black; position: relative;">
< div style="width: 50px; height: 50px; background-color: blue; position: absolute; animation: moveCube 2s linear infinite alternate;">< /div>
< /div>
< style>@keyframes moveCube { from {left: 0;} to {left: 150px;}}< /style>

< div style="width: 200px; height: 200px; background-color: yellow; border: 1px solid black; position: relative;">
< div style="width: 50px; height: 50px; background-color: blue; position: absolute; animation: moverightCube 2s linear infinite alternate;">< /div>
< /div>
< style>@keyframes moverightCube { from {right: 0;} to {right: 150px;}}< /style>

< div style="width: 200px; height: 200px; background-color: yellow; border: 1px solid black; position: relative;">
< div style="width: 50px; height: 50px; background-color: blue; position: absolute; animation: movebottomCube 2s linear infinite alternate;">< /div>
< /div>
< style>@keyframes movebottomCube { from {bottom: 0;} to {bottom: 150px;}}< /style>

< div style="width: 200px; height: 200px; background-color: yellow; border: 1px solid black; position: relative;">
< div style="width: 50px; height: 50px; background-color: blue; position: absolute; animation: moveBox 3s linear infinite alternate;">< /div>
< /div>
< style>@keyframes moveBox { 0% {top: 0; left: 0;} 50% {top: 150px; left: 0;} 100% {top: 150px; left: 150px;} }< /style>

< div style="width: 200px; height: 200px; background-color: yellow; border: 1px solid black; position: relative;">
< div style="width: 50px; height: 50px; background-color: blue; position: absolute; animation: qovun 4s linear infinite;">< /div>
< /div>
< style>@keyframes qovun { 0% {top: 0; left: 0;} 25% {top: 150px; left: 0;} 50% {top: 150px; left: 150px;} 75% {top: 0; left: 150px;} 100% {top: 0; left: 0;} }< /style>
< div class="typing-text" style="width: 100%; height: auto; background-color: black; border: 5px double lightgreen; color: lightgreen; text-align: justify;">< /div> < script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.js">< /script>
 < script>
const typing = document.querySelector('.typing-text');
const biography = "Biografiya yozamiz bu joyga"
if (typing) {
var typed = new Typed(".typing-text", { strings: [`${biography}`], typeSpeed: 50, });
}
< /script>
tv

Телевизор Xiaomi Mi TV P1 50

tv

LG Wallpaper OLED 4K TV

tv

Samsung Wallpaper OLED 4K TV

tv

Samsung Wallpaper OLED 4K TV

< div class="owl-carousel owl-theme" style="width: 100%; height: auto;">
< div class="card" style="width: 18rem; display: inline-block;">
< img src="https://cdn.mos.cms.futurecdn.net/96voSBURJRtEmN6FMH8YXd.jpg" class="card-img-top" alt="tv" style="width: 100%; height: 230px; object-fit: cover;">
< div class="card-body">
< p class="card-text">Телевизор Xiaomi Mi TV P1 50< /p>
< /div>
< /div>
< div class="card" style="width: 18rem; display: inline-block;">
< img src="https://i.pinimg.com/originals/be/55/5f/be555f488f2f054d51ceadf922b0ebfa.jpg" class="card-img-top" style="width: 100%; height: 230px; object-fit: cover;">
< div class="card-body">
< p class="card-text">LG Wallpaper OLED 4K TV< /p>
< /div>
< /div>
< div class="card" style="width: 18rem; display: inline-block;">
< img src="https://www.reliant.co.uk/blog/wp-content/uploads/2023/10/TVLIFE.jpg" class="card-img-top" alt="tv" style="width: 100%; height: 230px; object-fit: cover;">
< div class="card-body">
< p class="card-text">Samsung Wallpaper OLED 4K TV< /p>
< /div>
< /div>
< div class="card" style="width: 18rem; display: inline-block;">
< img src="https://www.golem.de/2011/151889-247727-247726_rc.jpg" class="card-img-top" alt="tv" style="width: 100%; height: 230px; object-fit: cover;">
< div class="card-body">
< p class="card-text">Samsung Wallpaper OLED 4K TV< /p>
< /div>
< /div>
< /div>
 < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
< script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js">< /script>
< script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js">< /script>
< script>$('.owl-carousel').owlCarousel({items: 4, lazyLoad: true, loop: true, responsiveClass: true, autoplay: true, autoplayTimeout: 3000, autoplayHoverPause: true});< /script>
< div class="clock">
< div class="hour">
< div class="hr" id="hr">< /div>
< /div>
< div class="min">
< div class="mn" id="mn">< /div>
< /div>
< div class="sec">
< div class="sc" id="sc">< /div>
< /div>
< /div> < style>
.clock { width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; background: url(https://lokeshpareek-mob.github.io/img/clock.png); background-size: cover;}
.clock:before { content: ""; position: absolute; width: 15px; height: 15px; background: #fff; border-radius: 50%; z-index: 10000;}
.clock .hour,
.clock .min,
.clock .sec {position: absolute;}
.clock .hour,
.hr {width: 160px; height: 160px;}
.clock .min,
.mn {width: 190px; height: 190px;}
.clock .sec,
.sc {width: 230px; height: 230px;}
.hr,
.mn,
.sc {display: flex; justify-content: center; position: absolute; border-radius: 50%;}
.hr:before {content: ""; position: absolute; width: 6px; height: 80px; background: #bb86fc; z-index: 10; border-radius: 6px 6px 0 0;}
.mn:before {content: ""; position: absolute; width: 4px; height: 90px; background: #fff; z-index: 11; border-radius: 6px 6px 0 0;}
.sc:before {content: ""; position: absolute; width: 2px; height: 150px; background: #70efde; z-index: 12; border-radius: 6px 6px 0 0;}
< /style>

< script>
const deg = 6;
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
setInterval(() => {
let day = new Date();
let ms = day.getMilliseconds() * deg;
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg + ms / 1000;
hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
}, 1);
< /script>
< div style="width: 100%; height: auto;">
< div class="container-all">
< div class="calculator dark">
< div class="display-screen">
< div id="display">< /div>
< /div>
< div class="buttons">
< table>
< tr>
< td>
< button class="btn-operator" id="clear">C< /button>
< /td>
< td>
< button class="btn-operator" id="/">÷< /button>
< /td>
< td>
< button class="btn-operator" id="*">×< /button>
< /td>
< td>
< button class="btn-operator" id="backspace"><< /button>
< /td>
< /tr>
< tr>
< td>
< button class="btn-number" id="7">7< /button>
< /td>
< td>
< button class="btn-number" id="8">8< /button>
< /td>
< td>
< button class="btn-number" id="9">9< /button>
< /td>
< td>
< button class="btn-operator" id="-">-< /button>
< /td>
< /tr>
< tr>
< td>
< button class="btn-number" id="4">4< /button>
< /td>
< td>
< button class="btn-number" id="5">5< /button>
< /td>
< td>
< button class="btn-number" id="6">6< /button>
< /td>
< td>
< button class="btn-operator" id="+">+< /button>
< /td>
< /tr>
< tr>
< td>
< button class="btn-number" id="1">1< /button>
< /td>
< td>
< button class="btn-number" id="2">2< /button>
< /td>
< td>
< button class="btn-number" id="3">3< /button>
< /td>
< td rowspan="2">
< button class="btn-equal" id="equal">=< /button>
< /td>
< /tr>
< tr>
< td>
< button class="btn-operator" id="(">(< /button>
< /td>
< td>
< button class="btn-number" id="0">0< /button>
< /td>
< td>
< button class="btn-operator" id=")">)< /button>
< /td>
< /tr>
< /table>
< /div>
< /div>
< /div>
< /div>
 < style>
.container-all {
height: 120vh;span>
width: 100vw;span>
display: gridspan>;
place-items: center;
}
.calculator {
position: relative;
height: auto;
width: auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 30px #000;
}
#display {
margin: 0 10px;
height: 150px;
width: auto;
max-width: 270px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
font-size: 30px;
margin-bottom: 20px;
overflow-x: scroll;
}
#display::-webkit-scrollbar {
display: block;
< style="padding-left: 25px;">height: 3px;
}
.container-all button {
height: 60px;
width: 60px;
border: 0;
border-radius: 30px;
margin: 5px;
font-size: 20px;
cursor: pointer;
transition: all 200ms ease;
}
.container-all button:hover {
transform: scale(1.1);
}
.container-all button#equal {
height: 130px;
}
.calculator {
background-color: #fff;
}
.calculator #display {
color: #0a1e23;
}
.calculator button#clear {
background-color: #ffd5d8;
color: #fc4552;
}
.calculator button.btn-number {
background-color: #c3eaff;
color: #000000;
}
.calculator button.btn-operator {
background-color: #ffd0fb;
color: #f967f3;
}
.calculator button.btn-equal {
background-color: #adf9e7;
color: #000;
}
.calculator.dark {
background-color: #071115;
}
.calculator.dark #display {
color: #f8fafb;
}
.calculator.dark button#clear {
background-color: #2d191e;
color: #bd3740;
}
.calculator.dark button.btn-number {
background-color: #1b2f38;
color: #f8fafb;
}
.calculator.dark button.btn-operator {
background-color: #2e1f39;
color: #aa00a4;
}
.calculator.dark button.btn-equal {
background-color: #223323;
color: #ffffff;
}
< /style>

< script>
const display = document.querySelector("#display");
const buttons = document.querySelectorAll("button");
buttons.forEach((item) => {
item.onclick = () => {
if (item.id == "clear") {
display.innerText = "";
} else if (item.id == "backspace") {
let string = display.innerText.toString();
display.innerText = string.substr(0, string.length - 1);
} else if (display.innerText != "" && item.id == "equal") {
display.innerText = eval(display.innerText);
} else if (display.innerText == "" && item.id == "equal") {
display.innerText = "Empty!";
setTimeout(() => (display.innerText = ""), 2000);
} else {
display.innerText += item.id;
}
};
});
< /script>
< div class="container-xxl">
< div class="row">
< div class="col-12 col-sm-12 col-md-6 col-lg-6" style="height: 300px; background-color: blue;">
< textarea class="text-one" style="width: 100%; height: 200px; margin-top: 50px; border-radius: 12px;">< /textarea>
< /div>
< div class="col-12 col-sm-12 col-md-6 col-lg-6" style="height: 300px; background-color: green;">
< textarea class="text-two" style="width: 100%; height: 200px; margin-top: 50px; border-radius: 12px;">< /textarea>
< /div>
< div class="col-6 col-sm-6 col-md-6 col-lg-6" style="height: 50px; background-color: blue;">
< select class="lang-one" style="width: 100%; height: 30px; margin-top: 10px; border-radius: 12px; text-align: center;">
< option value="en">En< /option>
< option value="ru">Ru< /option>
< option value="uz">Uz< /option>
< /select>
< /div>
< div class="col-6 col-sm-6 col-md-6 col-lg-6" style="height: 50px; background-color: green;">
< select class="lang-two" style="width: 100%; height: 30px; margin-top: 10px; border-radius: 12px; text-align: center;">
< option value="en">En< /option>
< option value="ru">Ru< /option>
< option value="uz">Uz< /option>
< /select>
< /div>
< /div>
 < script>
const translate = (text, translateFrom, translateTo, callback) => {
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${translateFrom}&tl=${translateTo}&dt=t&q=${encodeURIComponent(text)}`;
fetch(url)
.then(response => response.json())
.then(data => {
if (data && data[0] && data[0][0] && data[0][0][0]) {
callback(data[0][0][0]);
}
})
.catch(error => console.error('Error:', error));
};
const updateTranslation = () => {
const textToTranslate = $('.text-one').val();
const translateFrom = $('.lang-one').val();
const translateTo = $('.lang-two').val();
translate(textToTranslate, translateFrom, translateTo, (translatedText) => {
$('.text-two').val(translatedText);
});
};
setInterval(updateTranslation, 1000);
$('.lang-one, .lang-two').on('change', updateTranslation);
< /script>