Console.log(“JS nhỏ”)

Dec 03 2022

Các dự án javascript nhỏ để bắt kịp các khái niệm cơ bản về JS..

Việc xây dựng thứ gì đó luôn khơi dậy sự phấn khích trong các trang web của nhà phát triển mới trong chúng ta. Là một người mới trong lĩnh vực phát triển web, tôi luôn muốn triển khai bất cứ điều gì mình đang học. Tất cả chúng ta luôn cảm thấy sợ hãi sau khi nhìn thấy những dự án lớn khổng lồ của các nhà phát triển chuyên nghiệp. Tại sao không bắt đầu với những đứa trẻ nhỏ —

JavaScript là một ngôn ngữ kịch bản cho phép bạn tạo nội dung cập nhật động, kiểm soát đa phương tiện, hình ảnh động và gần như mọi thứ khác . Để thành thạo một thứ gì đó, bạn cần thực hành nó, để hiểu các khái niệm cơ bản về JS, đây là 4 dự án thân thiện với người mới bắt đầu -

Máy bay chiến đấu biểu tượng cảm xúc

let fighters = ["", "", "","", "", "", "", "", "", "", "", "", "", "","", "", ""]

let stageEl = document.getElementById("stage")
let fightButton = document.getElementById("fightButton")

fightButton.addEventListener("click", function() {
    // Challenge:
    // When the user clicks on the "Pick Fighters" button, pick two random 
    // emoji fighters and display them as i.e. " vs " in the "stage" <div>.
    let randomIndexOne = Math.floor( Math.random() * fighters.length )
    let randomIndexTwo = Math.floor( Math.random() * fighters.length )
    console.log(fighters[randomIndexOne] + " vs " + fighters[randomIndexTwo])
})

2. Phân loại trái cây

Tạo một hàm đặt những quả táo vào AppleShelf và những quả cam vào OrangeShelf.

let fruit = ["", "", "", "", ""]
let appleShelf = document.getElementById("apple-shelf")
let orangeShelf = document.getElementById("orange-shelf")
function sortFruit() {
    for (let i = 0; i < fruit.length; i++) {
        if (fruit[i] === "") {
            appleShelf.textContent += ""
        } else if (fruit[i] === "") {
            orangeShelf.textContent += ""
        }
    }
}

sortFruit()

3. Trình tạo mật khẩu ngẫu nhiên

Khi người dùng nhấp vào nút tạo mật khẩu, 2 mật khẩu khác nhau sẽ được hiển thị trên màn hình.

const chars = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9","~","`","!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","[","}","]",",","|",":",";","<",">",".","?",
"/"];


let pass1 = document.getElementById("pass1")
let pass2 = document.getElementById("pass2")

let passLength = 12
function getChar(){
    let rnum = Math.floor(Math.random()*chars.length)
    return chars[rnum]
}

function generatePass(){
    let pass = ""
    for(let i=0;i<passLength;i++){
        pass+=getChar()
    }
    return pass
}

function copyToClipBoard(){
    navigator.clipboard.writeText(generatePass());
}


function generate(){
  pass1.textContent= generatePass()
  pass2.textContent=generatePass()  
}

Khả năng thiết lập độ dài mật khẩu.
Thêm “sao chép để nhấp”
Bật/tắt ký hiệu và số.

4. Bộ chuyển đổi đơn vị

Chuyển đổi giữa các số giữa các đơn vị hệ mét/đơn vị đo lường khi người dùng nhập một số bất kỳ và nhấp vào nút chuyển đổi.

let convertBtn = document.getElementById("convert")
let inputEl = document.getElementById("inputEl")
let val = document.getElementById("val")

const meterToFeet =  3.281
const literToGallon =  0.264
const kiloToPound =  2.204

convert.addEventListener("click", function() {
    let baseValue = inputEl.value
    
    val.textContent = `${baseValue} meter = ${baseValue * meterToFeet} feet` 
})

5. Thêm của bạn

Vui mừng để xem những gì nhà phát triển newbie trong bạn nghĩ ra. đây là liên kết đến repo của tôi, hãy thêm những đóng góp của bạn vào đó