JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#Dars16 #HTML #JS
1⃣… JS da avvalo buyruq berish uchun unga tugmani, matnni, ekranni va hokazolarni tanitish zarur.
2⃣… Tanitish uchun let, var va const ishlatiladi.

ℹ️ let va var ga qayta qiymat berish mumkin. Constda esa yoʻq

let ism = document.querySelector('.text1')
var tugma = document.querySelector("button")
const title = document.querySelector("h1")

HTML

da ular takrorlangan boʻlsa, ularga class berish kerak. JS da
.(nuqta) va class nomi yoziladi.

🔗 t.me/absJavaScript

⚡2❤‍🔥1👍1🔥1🏆1

61 viewsedited 07:56

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#Foydali #Tutorial #HTML

🤔 Tekstni qanday qilib kichik/KATTA/Bosh Harf Bilan yozish mumkin

text-transform

xususiyatidan foydalaniladi. Bu xususiyat matn konvertatsiyasini boshqaradi va harflarning katta-kichikligini o'zgartirish uchun bir nechta qiymatlarni qabul qilishi mumkin.

🚩https://t.me/absJavaScript

#⃣1⃣ uppercase
Bu Tekst Katta Harflarda Bo'ladi

.uppercase {
    text-transform: uppercase;
}

#⃣2⃣ lowercase
tekstni kichik harflar va oddiy yozish

.lowercase {
    text-transform: lowercase;
}

#⃣3⃣ capitalize
HAR BIR SO'ZNI BOSH HARF BILAN YOZISH

.capitalize {
    text-transform: capitalize;
}

#⃣4⃣ none
Tekstni oddiy yozish (yo'q / bekor qilish)

.none {
    text-transform: none;
}

Javobni bilsangiz 👍, bilmasangiz 🔥 qo'ying

🔗 t.me/absJavaScript

👍2🔥2⚡1❤‍🔥1🆒1

54 viewsedited 07:45

JavaScript | 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹 𝗰𝗵𝗮𝗻𝗻𝗲𝗹

#challenge #HTML #CSS #JS
Nima chiqdi? Comment goo…

✅ HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="orange" class="box"></div>
    <div id="green" class="box"></div>
    <div id="blue" class="box"></div>
    <div id="red" class="box"></div>
    <div id="yellow" class="box"></div>
    <script src="./app.js"></script>
</body>

</html>

✅ CSS:

body {
    display: flex;
    gap: 50px;
}

.box {
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.box:nth-child(1) {
    background-color: orange;
    border-radius: 100%;
}

.box:nth-child(2) {
    background-color: green;
    border-radius: 100%;
}

.box:nth-child(3) {
    background-color: blue;
    border-radius: 100%;
}

.box:nth-child(4) {
    background-color: red;
    border-radius: 100%;
}

.box:nth-child(5) {
    background-color: yellow;
    border-radius: 100%;
}

✅ JS:

let box = document.querySelectorAll('.box')
let body = document.querySelector('body')

for (let i = 0; i < box.length; i++) {
    box[i].addEventListener('click', function () {
        body.style.background = box[i].id
    })
}

⚡️JavaScript

💫 Hoziroq obuna bo'ling va do'stlarga ham ulashib qo'ying

✅ https://t.me/absJavaScript

👍2🆒2❤‍🔥1⚡1

76 viewsedited 10:14

About

Blog

Apps

Platform