JS10 Day 8: Buttons Container

개요[ | ]

JS10 Day 8: Buttons Container

https://www.hackerrank.com/challenges/js10-buttons-container

해커랭크 10 Days of Javascript
#	문제	비고
8-9 Day e
23	JS10 Day 8: Create a Button
24	JS10 Day 8: Buttons Container
25	JS10 Day 9: Binary Calculator

js/buttonsGrid.js

document.getElementById("btn5").addEventListener("click",function() {
    let temp = document.getElementById("btn1").innerHTML;
    document.getElementById("btn1").innerHTML = document.getElementById("btn4").innerHTML;
    document.getElementById("btn4").innerHTML = document.getElementById("btn7").innerHTML;
    document.getElementById("btn7").innerHTML = document.getElementById("btn8").innerHTML;
    document.getElementById("btn8").innerHTML = document.getElementById("btn9").innerHTML;
    document.getElementById("btn9").innerHTML = document.getElementById("btn6").innerHTML;
    document.getElementById("btn6").innerHTML = document.getElementById("btn3").innerHTML;
    document.getElementById("btn3").innerHTML = document.getElementById("btn2").innerHTML;
    document.getElementById("btn2").innerHTML = temp;
});

index.html

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/buttonsGrid.css" type="text/css">
        <title>Buttons Grid</title>
    </head>
    <body>
        <div id="btns">
            <button id="btn1">1</button>
            <button id="btn2">2</button>
            <button id="btn3">3</button>
            <button id="btn4">4</button>
            <button id="btn5">5</button>
            <button id="btn6">6</button>
            <button id="btn7">7</button>
            <button id="btn8">8</button>
            <button id="btn9">9</button>
        </div>
        <script src="js/buttonsGrid.js" type="text/javascript"></script>
    </body>
</html>

css/buttonsGrid.css

#btns {
    width: 75%;
}
button {
    width: 30%;
    height: 48px;
    font-size: 24px;
}