Console.log (“ลิตเติ้ล JS”)

Dec 03 2022

โครงการจาวาสคริปต์ขนาดเล็กเพื่อให้ทันกับแนวคิดพื้นฐานของ JS..

การสร้างบางสิ่งบางอย่างมักจะกระตุ้นความตื่นเต้นในไซต์นักพัฒนา noob ภายในตัวเราเสมอ ในฐานะมือใหม่ในการพัฒนาเว็บ ฉันต้องการนำทุกสิ่งที่ฉันเรียนรู้ไปใช้เสมอ เราทุกคนมักจะรู้สึกหวาดกลัวหลังจากเห็นโปรเจกต์ขนาดใหญ่ของนักพัฒนาผู้เชี่ยวชาญ ทำไมไม่เริ่มที่เจ้าตัวเล็ก—

JavaScript เป็นภาษาสคริปต์ที่ช่วยให้คุณ สร้างเนื้อหา ที่อัปเดตแบบไดนามิก ควบคุมมัลติมีเดีย สร้างภาพเคลื่อนไหว และอื่นๆ อีกมากมาย คุณต้องฝึกฝนเพื่อทำความเข้าใจแนวคิดพื้นฐานของ JS นี่คือโครงการง่าย ๆ สำหรับผู้เริ่มต้น 4 โครงการ -

นักสู้อีโมจิ

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. การคัดแยกผลไม้

สร้างฟังก์ชันที่วางแอปเปิ้ลไว้บน appleShelf และวางส้มไว้บน 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. เครื่องสร้างรหัสผ่านแบบสุ่ม

เมื่อผู้ใช้คลิกปุ่มสร้างรหัสผ่าน รหัสผ่านที่แตกต่างกัน 2 รายการจะแสดงบนหน้าจอ

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

ความสามารถในการกำหนดความยาวของรหัสผ่าน
เพิ่ม “คัดลอกเพื่อคลิก”
สลับสัญลักษณ์และตัวเลข เปิด/ปิด

4. ตัวแปลงหน่วย

แปลงตัวเลขระหว่างหน่วยเมตริก/อิมพีเรียล เมื่อผู้ใช้ป้อนตัวเลขใดๆ และคลิกที่ปุ่มแปลง

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. เพิ่มของคุณ

ตื่นเต้นที่จะได้เห็นว่านักพัฒนามือใหม่ในตัวคุณคิดอย่างไร นี่คือลิงค์ไปยัง repo ของฉัน เพิ่มการมีส่วนร่วมของคุณในสิ่งเดียวกัน