Console.log("작은 JS")

Dec 03 2022

JS의 기본 개념을 따라잡기 위한 작은 자바스크립트 프로젝트..

무언가를 구축하면 항상 우리 내부의 멍청한 개발자 사이트에서 흥분이 일어납니다. 웹 개발의 초보자로서 저는 항상 제가 배우는 모든 것을 구현하고 싶었습니다. 우리 모두는 전문 개발자의 거대한 프로젝트를 보고 나면 항상 겁을 먹게 됩니다. 왜 작은 것부터 시작하지 않겠습니까 —

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. 당신의 것을 추가하세요

당신의 초보 개발자가 무엇을 생각해낼지 기대됩니다. 여기 내 저장소에 대한 링크가 있습니다. 귀하의 기여도를 동일하게 추가하세요