blackjack html
unknown
html
2 years ago
2.7 kB
5
Indexable
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Black Jack</title> <link rel="stylesheet" href="blackjack.css"> <script src="blackjack.js"></script> </head> <body> <h2>Dealer: <span id="dealer-sum"></span></h2> <div id="dealer-cards"> <img id="hidden" src="./cards/BACK.png"> </div> <h2>You: <span id="your-sum"></span></h2> <div id="your-cards"></div> <br> <button id="hit">Hit</button> <button id="stay">Stay</button> <p id="results"></p> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color picker</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; background-color: red; display: flex; align-items: center; justify-content: center; } .wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: rgba(255,255,255,0.3); } .holder { padding: 25px; min-width: 200px; min-height: 100px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; } input { display: none; } label { width: 160px; height: 50px; background-color: red; border-radius: 50px; } </style> </head> <body> <div class="wrapper"> <div class="holder"> <label for="color"></label> <input type="color" id="color" /> </div> </div> <script> const colorInput = document.getElementById("color"); colorInput.addEventListener("input", () => { const colorCode = document.getElementById("color").value; document.getElementsByTagName("body")[0].style.backgroundColor = colorCode; document.getElementsByTagName("label")[0].style.backgroundColor = colorCode; }) </script> </body> </html>
Editor is loading...