Console.log(“JS Kecil”)

Dec 03 2022

Proyek javascript kecil untuk mengejar konsep dasar JS..

Membangun sesuatu selalu membangkitkan kegembiraan dalam diri pengembang noob di dalam diri kita. Sebagai pemula di web dev, saya selalu ingin mengimplementasikan apa pun yang saya pelajari. Kita semua selalu merasa takut setelah melihat proyek raksasa besar dari pengembang ahli. Mengapa tidak mulai dari yang kecil —

JavaScript adalah bahasa skrip yang memungkinkan Anda membuat konten yang diperbarui secara dinamis, mengontrol multimedia, menganimasikan gambar, dan hampir semua hal lainnya . Untuk menguasai sesuatu, Anda perlu mempraktikkannya, untuk memahami konsep dasar JS, berikut adalah 4 proyek ramah-pemula yang mudah -

Pejuang Emoji

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. Menyortir Buah

Buat fungsi yang menempatkan apel ke appleShelf dan jeruk ke 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. Pembuat kata sandi acak

Ketika pengguna mengklik tombol buat kata sandi, 2 kata sandi yang berbeda ditampilkan di layar.

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()  
}

Kemampuan untuk mengatur panjang kata sandi.
Tambahkan "salin-ke-klik"
Mengaktifkan/menonaktifkan simbol & angka.

4. Konverter Satuan

Mengonversi angka antara satuan metrik/imperial saat pengguna memasukkan angka apa pun dan mengklik tombol konversi.

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. Tambahkan milik Anda

Bersemangat untuk melihat apa yang muncul dari pengembang pemula di dalam diri Anda. inilah tautan ke repo saya, tambahkan kontribusi Anda ke hal yang sama