Console.log(“リトル JS”)

Dec 03 2022

JS の基本概念に追いつくための小さな JavaScript プロジェクト..

何かを構築することは、私たちの内にある初心者の開発者の居住地の興奮を常に跳ね返します。Web 開発の初心者として、私は常に、学んだことは何でも実装したいと考えていました。専門の開発者による巨大で巨大なプロジェクトを見た後、私たちはいつも恐怖に陥ります。小さな子供たちから始めてみませんか —

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. あなたのものを追加

あなたの中の新人開発者が何を思いつくか楽しみです。これが私のレポへのリンクです。あなたの貢献を同じものに追加してください