creating a web application of shuffle card system using web html , javascript and css.it will shuffle card as user click on the button of shuffle card.
Working & Implementation of Card Shuffle
To start, create a project directory and add three essential files:
`index.html`
`style.css`
`script.js`
HTML: Specifies the layout of the webpage, which includes the shuffle button and deck display section.
CSS: Styles a webpage’s elements to give it an aesthetically pleasant, well-organized look.
JavaScript:
Deck Generation: Creates a standard 52-card deck by combining suits and values.
Rendering is what causes the cards to show up on the webpage.
- index.html
The HTML file (`index.html`) forms the backbone of your application. It includes a container for the deck of cards and a shuffle button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Shuffle Application</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button id="shuffleButton">Shuffle Cards</button>
<div class="deck" id="deck"></div>
</div>
<script src="script.js"></script>
</body>
</html>
- style.css
You have the ability to specify the look of the deck, cards, and button in the CSS file (`styles.css`) in order to enhance the visual appeal of the application.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color:beige;
}
.container {
text-align: center;
background-color:burlywood;
padding: 20px;
}
button {
color:beige;
background-color: black;
padding: 10px 20px;
font-size: 16px;
margin-bottom: 25px;
cursor: pointer;
}
.deck {
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
}
.card {
width: 60px;
height: 90px;
margin: 5px;
background-color: whitesmoke;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color:red;
}
- script.js
The main functions of the JavaScript file (`script.js`) include creating the card deck, mixing them up, and changing the user interface
document.addEventListener('DOMContentLoaded', () => {
const deck = document.getElementById('deck');
const shuffleButton = document.getElementById('shuffleButton');
const suits = ['♠', '♥', '♦', '♣'];
const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
function createDeck() {
let deck = [];
for (let suit of suits) {
for (let value of values) {
deck.push(`${value}${suit}`);
}
}
return deck;
}
function renderDeck(deck) {
deckElement.innerHTML = '';
for (let card of deck) {
let cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.innerHTML = card;
deckElement.appendChild(cardElement);
}
}
function shuffleDeck(deck){
for (let i = deck.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[deck[i], deck[j]] = [deck[j], deck[i]];
}
}
const deckElement = document.getElementById('deck');
let deckOfCards = createDeck();
renderDeck(deckOfCards);
shuffleButton.addEventListener('click', () => {
shuffleDeck(deckOfCards);
renderDeck(deckOfCards);
});
});
- OUTPUT
The ability to develop interactive online applications using HTML, CSS, and JavaScript is demonstrated by this straightforward card shuffle system. By constructing this project, you will obtain invaluable experience in the principles of web development. You can even expand its functionality by adding features like animations or card dealing capabilities.