INPUT BUTTON VALUE SWAP

Saturday, 8 December 2018

INPUT BUTTON VALUE SWAP

--------------------------------------------------------------------------------------------------------------
BUTTON VALUE SWAP
READ MORE:
http://fbgadgets.blogspot.com/2017/06/word-and-picture-game.html
--------------------------------------------------------------------------------------------------------------

<html>

<head>

</head>

var WordsArray=new Array ("Cherries",);

var TotalArray= new Array(1);

var ButtonArray= new Array(1);

var ButtonArray2= new Array(1);

var EmptyArray=new Array("","","");

var Test=1;

var Time=0;

function depart() {

Test=1;

ForMakes=1;

for (i=0; i<=1; i++)

numJeu=1;

melange();

EmptyArray=0;

compteur=0;

Test=0;

}

function melange() {

for (i=1; i<=1; i++) {

TotalArray[i]=i;

ButtonArray[i]=i;

ButtonArray2[i]=0;

}

function ButtonClick1(x) {

EmptyArray=x;

}

function ButtonClick2(x) {

if (Test==0) {

Test=1;

if (EmptyArray==0) {

ButtonArray[i]=ButtonArray2[x];

document.Forms.elements["base"+i].value=WordsArray

document.Forms.elements["Button"+x].value=" ";

Test=0;

}

else {

if ( document.Forms.elements["Button"+x].value==" " ) {

document.Forms.elements["base"+EmptyArray].value=" ";

document.Forms.elements["Button"+x].value=WordsArray;

ButtonArray2[x]=ButtonArray[EmptyArray];

ButtonArray[EmptyArray]=0;

n=0;

for (i=1; i<=ForMakes; i++) {

if (ButtonArray2[i]==0) {

n=1;

break;

}

if (n==0) {

nn=0;

}

else {

Test=0;

}

EmptyArray=0;

}

</script>

</br>

</form>

</body>

</html>

--------------------------------------------------------------------------------------------------------------
EMIR 97 MEMORY GAME IN JAVA SCRIPT ADD CSS CLASS
--------------------------------------------------------------------------------------------------------------

<html>

<title>Memory Game</title>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-width: 100%;
min-height: 100%;
background: #1F1F20;
}
#board{
background: #1F1F20;
width: 770px;
height: 650px;
padding: 25px;
margin: 10px auto;
overflow: hidden;
}
#board div{
border:#fff 1px solid;
width:100px;
height:100px;
float:left;
margin:10px;
padding:25px;
font-size:24px;
cursor:pointer;
text-align:center;
font-weight: bold;
background: #6F6C72;
box-shadow: 1px 1px 10px #fff;
}
#board div.clicked {
background: #fff;
}
</style>
<title>Memory Game</title>
</head>
<body>
<div id="board"></div>
<script>
var memoryItems = [ 'PR I', 'PR I', 'PR II', 'PR II', 'PR III', 'PR III', 'ADS', 'ADS',
'RS I', 'RS I', 'RS II', 'RS II', 'WRD', 'WRD', 'BP I', 'BP I',
'BP II', 'BP II', 'SMA', 'SMA', 'AR', 'AR', 'OS', 'OS', 'BI', 'BI',
'ASP', 'ASP', 'EJ I', 'EJ I' ];
var selectedItemValue = null;
var selectedItemID = null;
var flippedTiles = 0;
var flipped = 0;
Array.prototype.randomizeTiles = function () {
let i = 0;
while (i != this.length) {
let randomNumber = Math.floor(Math.random() * this.length);
let temp = this[randomNumber];
this[randomNumber] = this[i];
this[i] = temp;
i++;
}
};
flipTile = function (e){
var div = e.target;
if ((div.innerHTML == "" || div.innerHTML == null) && flipped < 2) {
div.innerHTML = memoryItems[Math.floor(div.id)];
div.classList.add("clicked");
if (flipped == 0) {
flipped++;
selectedItemID = div.id;
selectedItemValue = memoryItems[Math.floor(div.id)];
} else if (flipped == 1) {
flipped++;
if (selectedItemValue == memoryItems[Math.floor(div.id)]) {
flippedTiles += 2;
flipped = 0;
if (flippedTiles == memoryItems.length) {
alert("Congratulations...");
generateBoard();
}
}
else {
setTimeout( () => {
flipped = 0;
console.log(selectedItemID)
console.log(div);
let previousDiv = document.getElementById(selectedItemID);
previousDiv.classList.remove("clicked");
previousDiv.innerHTML = "";
div.classList.remove("clicked");
div.innerHTML = "";
}, 800);
}
}
}
};
generateBoard = function (){
console.log("Generating board...");
flipped = 0;
memoryItems.randomizeTiles();
let board = document.getElementById("board");
board.innerHTML = "";
for (let i = 0; i < memoryItems.length; i++) {
board.innerHTML += "<div id=\"" + i + "\"></div>";
}
let btns = board.getElementsByTagName("div");
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = flipTile;
}
};
generateBoard();
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------
OR USE ABOVE EMIR GAME CODE WITH HTML TAB
------------------------------------------------------------------------------------------------------------
<html>

<title>Memory Game</title>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-width: 100%;
min-height: 100%;
background: #1F1F20;
}
#board{
background: #1F1F20;
width: 770px;
height: 650px;
padding: 25px;
margin: 10px auto;
overflow: hidden;
}
#board div{
border:#fff 1px solid;
width:100px;
height:100px;
float:left;
margin:10px;
padding:25px;
font-size:24px;
cursor:pointer;
text-align:center;
font-weight: bold;
background: #6F6C72;
box-shadow: 1px 1px 10px #fff;
}
#board div.clicked {
background: #fff;
}
</style>
<title>Memory Game</title>
</head>
<body>
<div id="board">
<div id="0"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>
<div id="11"></div>
<div id="12"></div>
<div id="13"></div>
<div id="14"></div>
<div id="15"></div>
<div id="16"></div>
<div id="17"></div>
<div id="18"></div>
<div id="19"></div>
<div id="20"></div>
<div id="21"></div>
<div id="22"></div>
<div id="23"></div>
<div id="24"></div>
<div id="25"></div>
<div id="26"></div>
<div id="27"></div>
<div id="28"></div>
<div id="29"></div>
</div>
<script>
var memoryItems = [ 'A', 'A', 'PR II', 'PR II', 'PR III', 'PR III', 'ADS', 'ADS',
'RS I', 'RS I', 'RS II', 'RS II', 'WRD', 'WRD', 'BP I', 'BP I',
'BP II', 'BP II', 'SMA', 'SMA', 'AR', 'AR', 'OS', 'OS', 'BI', 'BI',
'ASP', 'ASP', 'EJ I', 'EJ I' ];
var selectedItemValue = null;
var selectedItemID = null;
var flippedTiles = 0;
var flipped = 0;
Array.prototype.randomizeTiles = function () {
let i = 0;
while (i != this.length) {
let randomNumber = Math.floor(Math.random() * this.length);
let temp = this[randomNumber];
this[randomNumber] = this[i];
this[i] = temp;
i++;
}
};
flipTile = function (e){
var div = e.target;
if ((div.innerHTML == "" || div.innerHTML == null) && flipped < 2) {
div.innerHTML = memoryItems[Math.floor(div.id)];
div.classList.add("clicked");
if (flipped == 0) {
flipped++;
selectedItemID = div.id;
selectedItemValue = memoryItems[Math.floor(div.id)];
} else if (flipped == 1) {
flipped++;
if (selectedItemValue == memoryItems[Math.floor(div.id)]) {
flippedTiles += 2;
flipped = 0;
if (flippedTiles == memoryItems.length) {
alert("Congratulations...");
generateBoard();
}
}
else {
setTimeout( () => {
flipped = 0;
console.log(selectedItemID)
console.log(div);
let previousDiv = document.getElementById(selectedItemID);
previousDiv.classList.remove("clicked");
previousDiv.innerHTML = "";
div.classList.remove("clicked");
div.innerHTML = "";
}, 800);
}
}
}
};
generateBoard = function (){
console.log("Generating board...");
flipped = 0;
memoryItems.randomizeTiles();
let btns = board.getElementsByTagName("div");
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = flipTile;
}
};
generateBoard();
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
OR USE CODE ABOVE CODE
ANONYMOUS FUNCTION CHANGE INTO SIMPLE FUNCTION
WITH E CHANGE INTO EVENT
SINGLE QUOTES INTO DOUBLE QUOTES
--------------------------------------------------------------------------------------------------------------
<html>

<title>Memory Game</title>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-width: 100%;
min-height: 100%;
background: #1F1F20;
}
#board{
background: #1F1F20;
width: 770px;
height: 650px;
padding: 25px;
margin: 10px auto;
overflow: hidden;
}
#board div{
border:#fff 1px solid;
width:100px;
height:100px;
float:left;
margin:10px;
padding:25px;
font-size:24px;
cursor:pointer;
text-align:center;
font-weight: bold;
background: #6F6C72;
box-shadow: 1px 1px 10px #fff;
}
#board div.clicked {
background: #fff;
}
</style>
<title>Memory Game</title>
</head>
<body>
<div id="board">
<div id="0"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
<script>
var bCards = ["A","A","B","B"];
var selectedItemValue = null;
var selectedItemID = null;
var flippedTiles = 0;
var flipped = 0;
Array.prototype.randomizeTiles = function () {
var i = 0;
};
flipTile = function (event){
var div = event.target;
if ((div.innerHTML == "" || div.innerHTML == null) && flipped < 2) {
div.innerHTML = bCards[(div.id)];
div.classList.add("clicked");
if (flipped == 0) {
flipped++;
selectedItemID = div.id;
selectedItemValue = bCards[(div.id)];
} else if (flipped == 1) {
flipped++;
if (selectedItemValue == bCards[(div.id)]) {
flippedTiles += 2;
flipped = 0;
if (flippedTiles == bCards.length) {
alert("Congratulations...");
generateBoard();
}
}
else {
function FunctionName(){
flipped = 0;
console.log(selectedItemID)
console.log(div);
var previousDiv = document.getElementById(selectedItemID);
previousDiv.classList.remove("clicked");
previousDiv.innerHTML = "";
div.classList.remove("clicked");
div.innerHTML = "";
}
setTimeout(FunctionName,800);
}
}
}
};
generateBoard = function (){
console.log("Generating board...");
flipped = 0;
bCards.randomizeTiles();
var btns = board.getElementsByTagName("div");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = flipTile;
}
};
generateBoard();
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
CHANGE DIV INTO BUTTON
--------------------------------------------------------------------------------------------------------------
<html>

<title>Memory Game</title>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-width: 100%;
min-height: 100%;
background: #1F1F20;
}
#board{
background: #1F1F20;
width: 770px;
height: 650px;
padding: 25px;
margin: 10px auto;
overflow: hidden;
}
#board button{
border:#fff 1px solid;
width:100px;
height:100px;
float:left;
margin:10px;
padding:25px;
font-size:24px;
cursor:pointer;
text-align:center;
font-weight: bold;
background: #6F6C72;
box-shadow: 1px 1px 10px #fff;
}
#board button.clicked {
background: #fff;
}
</style>
<title>Memory Game</title>
</head>
<body>
<div id="board">
<button id="0"></button>
<button id="1"></button>
<button id="2"></button>
<button id="3"></button>
</button>
<script>
var bCards = ["A","A","B","B"];
var selectedItemValue = null;
var selectedItemID = null;
var flippedTiles = 0;
var flipped = 0;
function MatchingFunction(event) {
if ((event.target.innerHTML == "" || event.target.innerHTML == null) && flipped < 2) {
event.target.innerHTML = bCards[(event.target.id)];
event.target.classList.add("clicked");
if (flipped == 0) {
flipped++;
selectedItemID = event.target.id;
selectedItemValue = bCards[(event.target.id)];
} else if (flipped == 1) {
flipped++;
if (selectedItemValue == bCards[(event.target.id)]) {
flippedTiles += 2;
flipped = 0;
if (flippedTiles == bCards.length) {
alert("Congratulations...");
generateBoard();
}
}
else {
function FunctionName(){
flipped = 0;
console.log(selectedItemID)
console.log(event.target);
var previousDiv = document.getElementById(selectedItemID);
previousDiv.classList.remove("clicked");
previousDiv.innerHTML = "";
event.target.classList.remove("clicked");
event.target.innerHTML = "";
}
setTimeout(FunctionName,800);
}
}
}
};
for (var i = 0; i < document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener('click',MatchingFunction,true);
}
</script>
</body>
</html>

--------------------------------------------------------------------------------------------------------------
MEMORY GAME JAVASCRIPT CSS TO JAVASCRIPT
OR REMOVE CSS PART AND ADD LINE
<img src="https://goo.gl/FJpwnu" class="flag japan">
<img src="https://goo.gl/FJpwnu" class="flag japan">
<img src="https://goo.gl/4svvdA" class="flag sweden">
<img src="https://goo.gl/4svvdA" class="flag sweden">
--------------------------------------------------------------------------------------------------------------

<html>

<head>

<style>

.japan{

background-color: #ccc;

display: inline-block;

width:226px;

height:141px;

margin:5px;

background:url(https://goo.gl/FJpwnu);

}

.sweden{

background-color: #ccc;

display: inline-block;

width:226px;

height:141px;

margin:5px;

background:url(https://goo.gl/4svvdA);

}

</style>

window.onload=function(){

var flagQueue = [];

function pickFlag(event){

flagQueue.push(event.target.className);

if (flagQueue.length == 2) {

if (flagQueue[0] == flagQueue[1]) {

alert('Congratulations');

}

else {

alert('Try again');

}

flagQueue.length = 0;

}

var flags = document.querySelectorAll('.flag');

for (var i = 0; i < flags.length; i++) {

flags[i].addEventListener('click', pickFlag);

}

</script>

</head>

<body>

</body>

</html>

-----------------------------------------------------------------------

OTHER CODE
http://qaru.site/sitemap_file_148.xml
http://qaru.site/search?query=button%20id%20matching%20game%20javascript
https://codereview.stackexchange.com/questions/172417/simple-memory-game-in-javascript

-------------------------------------------------------------------------
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>

---------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
flagQueue.push(e.target.id);
---------------------------------------------------------------------------------------------------------------
<button id="btn1">A</button>
<button id="btn2">a</button>
<button id="btn3">B</button>
<button id="btn4">b</button>
<script>
var bCards=[btn1,btn2,btn3,btn4];
var flagQueue = [];
for(var i = 0; i < bCards.length; i++){
bCards[i].addEventListener("click",openCard,true);
}
function openCard(e){
flagQueue.push(e.target.id);
if (flagQueue.length == 2) {
if (flagQueue[0] == flagQueue[1]) {
alert('Congratulations');
}
else {
alert('Try again');
}
flagQueue.length = 0;
}
}
</script>
------------------------------------------------------------------------------------------------------------
SIMPLE MATCHING GAME WITHOUT EXCLAMATION MARK ❗
--------------------------------------------------------------------------------------------------------------
<html>




<head>
<meta charset="utf-8">
<style>
body{
text-align: center;
margin: 0;
}
h1 {
font-family: "Raleway", sans-serif;
font-weight: 400;
color: #0d2c40;
font-size: 45px;
letter-spacing: 1px;
margin: 0;
color: white;
}
p {
font-family: "Droid Serif", serif;
line-height: 26px;
font-size: 18px;
}
a {
font-family: raleway;
text-decoration: none;
color: #F15B31;
letter-spacing: 1px;
font-weight: 600;
font-size: 18px;
}
h2 {
font-family: raleway;
font-size: 20px;
color: #0d2c40;
letter-spacing: 1px;
font-weight: 600;
}
header {
background-color: #F15B31;
padding: 30px 20px 30px 20px;
}
main {
width: 850px;
margin: 35px auto
}
a {
margin: 0 20px;
color: white;
}
nav a:hover {
border-bottom: 2px solid white;
}
nav {
background-color: #00A6B3;
padding: 20px 0;
}
img {
margin: 40px 8px 0 8px;
}
footer {
text-transform: uppercase;
padding: 0 20px;
background-color: #0D2C40;
color: white;
letter-spacing: .08em;
font-weight: 500;
}
.copyright {
float: left;
}
.message {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
content: " ";
clear: both;
height: 0;
font-size: 0;
}
.name {
color: #F15B31;
font-weight: 700;
}
#game-board{
width: 1200px;
}
</style>
<title>Memory card game</title>
</head>
<body>
<header>
<h1>Memory Game</h1>
</header>
<nav>
<p><a href="#">INSTRUCTIONS</a><a href="#"> GAME</a></p>
</nav>
<main>
<h2>INSTRUCTIONS</h2>
<p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.</p>
<div id="game-board" class="board clearfix"></div>
</main>
<footer>
<div class="clearfix">
<p class="copyright">Copyright 2017</p>
<p class="message">Created with &hearts; by <span class="name">GA</span></p>
</div>
</footer>
</body>
</html>
<script type="text/javascript">
var cards = [
{
rank: "Queen",
suit: "Hearts",
cardImage: "http://via.placeholder.com/350x150?text=QueenHeartsfront"
},
{
rank: "Queen",
suit: "Diamonds",
cardImage: "http://via.placeholder.com/350x150?text=QueenDiamondsfront"
},
{
rank: "King",
suit: "Hearts",
cardImage: "http://via.placeholder.com/350x150?text=KingHeartsfront"
},
{
rank: "King",
suit: "Diamonds",
cardImage: "http://via.placeholder.com/350x150?text=KingDiamondsfront"
}
];
//1 CREATE BOARD
function createBoard() {
for (var i = 0; i < cards.length; i++) {
var cardElement = document.createElement('img');
// console.log(cardElement);
cardElement.setAttribute('src', 'http://via.placeholder.com/350x150?text=back');
cardElement.setAttribute('data-id', i);
document.getElementById('game-board').appendChild(cardElement);
cardElement.addEventListener('click', flipCard);
cardElement.style.width = '210px';
}
}
createBoard();
var prev = "";
//2 FLIPCARD
function flipCard () {
var cardId = this.getAttribute('data-id');
cardsInPlay.push(cards[cardId].rank);
this.setAttribute('src', cards[cardId].cardImage);
console.log(cardsInPlay[0]);
console.log(cardsInPlay[1]);
if (cardsInPlay.length === 2) {
if (cardsInPlay[0] === cardsInPlay[1]) {
alert("You found a match!");
cardsInPlay = [];
}
else {
alert("Sorry, try again.");
cardsInPlay = [];
// cardsInPlay.pop();
// cardsInPlay.pop();
// console.log(cardsInPlay);
try{
prev.setAttribute('src', 'http://via.placeholder.com/350x150?text=back');
}catch(e){}
this.setAttribute('src', 'http://via.placeholder.com/350x150?text=back');
}
}
prev = this;
}
var cardsInPlay = [];
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
SIMPLE MATCHING JAVA SCRIPT
--------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>Memory Game</title>

<style>

div#TextBox1 {

background-color: coral;

color: blueviolet;

text-align: center;

font:20px bold;

display: block;

}

#play{

display: flex;

flex-wrap: wrap;

justify-content: center;

}

button{

background-color: rgba(216, 231, 234, 0.3);

border-right: 1px solid #929292;

border-bottom: 1px solid #929292;

color: #000000;

display: block;

font-weight: bold;

padding: 10px;

text-align: center;

text-decoration: none;

min-width: 42px;

display: block;

}

.matched {

background:Green;

}

</style>

</head>

<body>

for (var i = 0; i < 10; i++) {

play.innerHTML += '<div><button></button></div>';

}

var numsToAssign = [];

for (var i = 0; i < 10 / 2; i++) {

numsToAssign.push(i, i);

}

var randomNum = Math.floor(Math.random() * 10);

var randomTile = document.querySelectorAll('button')[randomNum];

for (var i = 0; i < 10; i++) {

do {

if (!randomTile.innerHTML) {

randomTile.innerHTML = numsToAssign.shift();

}

randomNum = Math.floor(Math.random() * 10);

randomTile = document.querySelectorAll('button')[randomNum];

} while (randomTile.innerHTML && numsToAssign.length > 0)

}

var Array = document.querySelectorAll('button');

var firstClickedTile;

var secondClickedTile;

for (var i = 0; i < Array.length; i++) {

Array[i].addEventListener('click', MatchingFunction,true);

}

function MatchingFunction(event) {

if (!firstClickedTile) {

firstClickedTile = event.target.parentNode;

}

else if (event.target.parentNode !== firstClickedTile) {

secondClickedTile = event.target.parentNode;

TextBox1.innerHTML = "TryAgain";

if (firstClickedTile.firstChild.innerText == secondClickedTile.firstChild.innerText) {

firstClickedTile.classList.add('matched');

secondClickedTile.classList.add('matched');

TextBox1.innerHTML = "Good Job";

}

setTimeout(() => {

firstClickedTile = undefined;

}, 400);

}

</script>

</body>

</html>

------------------------------------------------------------------------

OR USE ABOVE CODE WITH HTML TILES BUTTON

------------------------------------------------------------------------

<html>

<head>

<title>MEMORY GAME WITHOUT BUTTONS WITHOUT SLIDER AND RANDOM CODE</title>

<style>

#play{

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.tile {

height: 110px;

width: 110px;

margin: 20px;

border: 1px solid;

background: linear-gradient(rgba(255, 0, 0, .6), brown);

cursor: pointer;

}

p {

font-size: 30px;

margin: 0;

padding: 35%;

position: relative;

top: 50%;

transform: translateY(-50%);

filter: blur(20px);

user-select: none;

}

.matched {

background:Green;

}

</style>

</head>

<body>

</div>

var firstClickedTile;

var secondClickedTile;

var tiles = document.querySelectorAll('.tile');

for (var i = 0; i < tiles.length; i++) {

tiles[i].addEventListener('click', matching);

}

function matching(e) {

if (!firstClickedTile) {

firstClickedTile = e.target.parentNode;

firstClickedTile.firstChild.style.filter = 'blur(0px)';

}

else if (e.target.parentNode !== firstClickedTile) {

secondClickedTile = e.target.parentNode;

secondClickedTile.firstChild.style.filter = 'blur(0px)'

if (firstClickedTile.firstChild.innerText == secondClickedTile.firstChild.innerText) {

firstClickedTile.classList.add('matched');

secondClickedTile.classList.add('matched');

firstClickedTile.removeEventListener('click', matching);

secondClickedTile.removeEventListener('click', matching);

firstClickedTile.firstChild.style.filter = 'blur(0px)';

secondClickedTile.firstChild.style.filter = 'blur(0px)';

}

else {

setTimeout(() => {

firstClickedTile.firstChild.style.filter = 'blur(15px)';

secondClickedTile.firstChild.style.filter = 'blur(15px)';

}, 400);

}

setTimeout(() => {

firstClickedTile = undefined;

}, 400);

}

</script>

</body>

</html>

------------------------------------------------------------------------

CHANGE ABOVE HIDE CODE WITHOUT NO TILE CLASS

------------------------------------------------------------------------

<html>

<head>

<title>MEMORY GAME WITHOUT BUTTONS WITHOUT SLIDER AND RANDOM CODE</title>

<style>

#play{

display: flex;

flex-wrap: wrap;

justify-content: center;

}

button{

height: 110px;

width: 110px;

margin: 20px;

border: 1px solid;

background: linear-gradient(rgba(255, 0, 0, .6), brown);

font-size: 30px;

margin: 0;

padding: 35%;

position: relative;

top: 50%;

transform: translateY(-50%);

filter: blur(20px);

}

.matched {

background:Green;

}

</style>

</head>

<body>

</div>

var firstClickedTile;

var secondClickedTile;

for (var i = 0; i < document.querySelectorAll("button").length; i++) {

document.querySelectorAll("button")[i].addEventListener('click',MatchingFunction,true);

}

function MatchingFunction(event) {

if (!firstClickedTile){

firstClickedTile = event.target.parentNode;

firstClickedTile.firstChild.style.filter = 'blur(0px)';

}

else if (event.target.parentNode !== firstClickedTile) {

secondClickedTile = event.target.parentNode;

secondClickedTile.firstChild.style.filter = 'blur(0px)'

if (firstClickedTile.firstChild.innerText == secondClickedTile.firstChild.innerText) {

firstClickedTile.classList.add('matched');

secondClickedTile.classList.add('matched');

firstClickedTile.removeEventListener('click',MatchingFunction);

secondClickedTile.removeEventListener('click',MatchingFunction);

firstClickedTile.firstChild.style.filter = 'blur(0px)';

secondClickedTile.firstChild.style.filter = 'blur(0px)';

}

else {

setTimeout(() => {

firstClickedTile.firstChild.style.filter = 'blur(15px)';

secondClickedTile.firstChild.style.filter = 'blur(15px)';

}, 400);

}

setTimeout(() => {

firstClickedTile = undefined;

}, 400);

}

</script>

</body>

</html>

-----------------------------------------------------------------------

ABOVE HIDE REDUCE CODE

-----------------------------------------------------------------------

<html>
<!-- https://codereview.stackexchange.com/questions/172417/simple-memory-game-in-javascript -->
<head>
<title>MEMORY GAME WITHOUT BUTTONS WITHOUT SLIDER AND RANDOM CODE</title>
<style>
#play{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
button{
height: 110px;
width: 110px;
margin: 20px;
border: 1px solid;
background: linear-gradient(rgba(255, 0, 0, .6), brown);
font-size: 30px;
margin: 0;
padding: 35%;
position: relative;
top: 50%;
transform: translateY(-50%);
filter: blur(20px);
}
</style>
</head>
<body>
<div id="TextBox1"></div>
<div id="play">
<div><button>0</button></div>
<div><button>0</button></div>
<div><button>1</button></div>
<div><button>1</button></div>
<div><button>2</button></div>
<div><button>2</button></div>
<div><button>3</button></div>
<div><button>3</button></div>
<div><button>4</button></div>
<div><button>4</button></div>
</div>
<script>
var firstClickedTile;
var secondClickedTile;
for (var i = 0; i < document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener('click',MatchingFunction,true);
}
function MatchingFunction(event) {
if (!firstClickedTile){
firstClickedTile = event.target.parentNode;
}
 else if (event.target.parentNode !== firstClickedTile) {
secondClickedTile = event.target.parentNode;
TextBox1.innerHTML = "TryAgain";
if (firstClickedTile.firstChild.innerText == secondClickedTile.firstChild.innerText) {
TextBox1.innerHTML = "Good Job";
firstClickedTile.removeEventListener('click',MatchingFunction);
secondClickedTile.removeEventListener('click',MatchingFunction);
firstClickedTile.firstChild.style.filter = 'blur(0px)';
secondClickedTile.firstChild.style.filter = 'blur(0px)';
}
setTimeout(() => {
firstClickedTile = undefined;
}, 400);
}
}
</script>
</body>
</html>

-------------------------------------------------------------------------------------------------------------

OR CHANGE JAVA SCRIPT HTML CODE INTO SIMPLE HTML
READ MORE:
https://en.wikibooks.org/wiki/JavaScript/Anonymous_functions
https://www.sitepoint.com/jquery-settimeout-function-examples/
-----------------------------------------------------------------------------------------------------------
TIME OUT FUNCTION CAN BE WRITE AS A SIMPLE WAY
-----------------------------------------------------------------------------------------------------------
function setTimeout(){
firstClickedTile = undefined;
}
setTimeout(400);
-----------------------------------------------------------------------------------------------------------
TIME OUT FUNCTION CAN BE WRITE AS ANONYMOUS WAY
-----------------------------------------------------------------------------------------------------------
setTimeout(function(){
firstClickedTile = undefined;
}, 400);

---------------------------------------------------------------------------------------------------------------
ASYNCHRONOUS OR ARROW FUNCTION IN JAVA SCRIPT
---------------------------------------------------------------------------------------------------------------
READ MORE:
https://eloquentjavascript.net/11_async.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://javascript.info/async-await
https://www.sitepoint.com/jquery-settimeout-function-examples/
---------------------------------------------------------------------------------------------------------------

setTimeout(() => {

firstClickedTile = undefined;

}, 400);

---------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>Memory Game</title>

<style>

div#TextBox1 {

background-color: coral;

color: blueviolet;

text-align: center;

font:20px bold;

display: block;

}

#play{

display: flex;

flex-wrap: wrap;

justify-content: center;

}

button{

background-color: rgba(216, 231, 234, 0.3);

border-right: 1px solid #929292;

border-bottom: 1px solid #929292;

color: #000000;

display: block;

font-weight: bold;

padding: 10px;

text-align: center;

text-decoration: none;

min-width: 42px;

display: block;

}

.matched {

background:Green;

}

</style>

</head>

<body>

</div>

var firstClickedTile;

var secondClickedTile;

for (var i = 0; i < document.querySelectorAll("button").length; i++) {

document.querySelectorAll("button")[i].addEventListener('click', MatchingFunction,true);

}

function MatchingFunction(event) {

if (!firstClickedTile) {

firstClickedTile = event.target.parentNode;

}

else if (event.target.parentNode !== firstClickedTile) {

secondClickedTile = event.target.parentNode;

TextBox1.innerHTML = "TryAgain";

if (firstClickedTile.firstChild.innerText == secondClickedTile.firstChild.innerText) {

firstClickedTile.classList.add("matched");

secondClickedTile.classList.add("matched");

TextBox1.innerHTML = "Good Job";

}

setTimeout(() => {

firstClickedTile = undefined;

}, 400);

}

</script>

</body>

</html>

-------------------------------------------------------------------------

OR USE ABOVE CODE WITH INNER HTML WITHOUT DIV TAG WITHOUT BUTTON CSS

IF WE TRACE VALUE WE NEED TO SOME CHANGES BELOW CODE

1)NEED TextBox2

2)NEED CSS CODE FOR

div#TextBox2{background-color:black;color:RED;text-align:center;font:20px bold;display:block;}

3)NEED HTML CODE FOR TextBox2 CODE

<div id="TextBox1"></div> <div id="TextBox2"></div>

4)NEED JAVASCRIPT CODE TO CHANGE
function MatchingFunction(event){
TextBox2.innerHTML = !firstClickedTile;
or use this code
TextBox2.innerHTML = this.innerHTML;

-------------------------------------------------------------------------

<html>

<head>

<title>Memory Game</title>

<style>

div#TextBox1 {

background-color: coral;

color: blueviolet;

text-align: center;

font:20px bold;

display: block;

}

.matched {

background:Green;

}

</style>

</head>

<body>

var firstClickedTile;

var secondClickedTile;

for (var i = 0; i < document.querySelectorAll("button").length; i++) {

document.querySelectorAll("button")[i].addEventListener('click', MatchingFunction,true);

}

function MatchingFunction(event) {

if (!firstClickedTile) {

firstClickedTile = event.target;

}

else if (firstClickedTile!== event.target) {

secondClickedTile = event.target;

TextBox1.innerHTML = "TryAgain";

if (firstClickedTile.innerHTML == secondClickedTile.innerHTML) {

firstClickedTile.classList.add("matched");

secondClickedTile.classList.add("matched");

TextBox1.innerHTML = "Good Job";

}

function setTimeout(){

firstClickedTile = undefined;

}

setTimeout(400);

}

</script>

</body>

</html>

-------------------------------------------------------------------------

WHEN ID MATCH IN JAVA SCRIPT
ADVANTAGE: WE CAN USE DIFFERENT INNER HTML
-----------------------------------------------------------------
FOR VALUE MATCHING GAME CHANGE CODE HTML AND JAVASCRIPT

<button value="0">APPLE</button>

CHANGE LINE IN JAVASCRIPT

if (firstClickedTile.value == secondClickedTile.value) {

------------------------------------------------------------------

FOR NAME MATCHING GAME CHANGE CODE HTML AND JAVASCRIPT

<button name="0">APPLE</button>

CHANGE LINE IN JAVASCRIPT

if (firstClickedTile.name == secondClickedTile.name) {

-------------------------------------------------------------------------

<html>
<!-- https://codereview.stackexchange.com/questions/172417/simple-memory-game-in-javascript -->
<head>
<title>Memory Game</title>
<style>
div#TextBox1 {
background-color: coral;
color: blueviolet;
text-align: center;
font:20px bold;
display: block;
}
.matched {
background:Green;
}
</style>
</head>
<body>
<div id="TextBox1"></div>
<button id="0">A</button>
<button id="0">APPLE</button>
<button id="1">B</button>
<button id="1">BALL</button>
<script>
var firstClickedTile;
var secondClickedTile;
for (var i = 0; i < document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener('click', MatchingFunction,true);
}
function MatchingFunction(event) {
if (!firstClickedTile){
firstClickedTile = event.target;
}
else if (firstClickedTile!== event.target) {
secondClickedTile = event.target;
TextBox1.innerHTML = "TryAgain";
if (firstClickedTile.id == secondClickedTile.id) {
firstClickedTile.classList.add("matched");
secondClickedTile.classList.add("matched");
TextBox1.innerHTML = "Good Job";
}


console.log(event.target.id); //CONSOLE ID 

function setTimeout(){
firstClickedTile = undefined;
}
setTimeout(400);
}
}
</script>
</body>
</html>

---------------------------------------------------------------------------------------------------------------
HTML 5 MEMORY GAME
https://www.taniarascia.com/how-to-create-a-memory-game-super-mario-with-plain-javascript/
---------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>Memory Game</title>

<style>

.card {

float:left;

}

.card,

.back,

.front {

height: 127px;

width: 227px;

}

.back,

.front {

position: absolute;

}

.match .front {

background:Green !important;

}

div#TextBox1 {

background-color: coral;

color: blueviolet;

text-align: center;

font:20px bold;

display: block;

}

</style

</head>

<body>

var cardsArray = [{

'name': 'Image1',

'img': 'https://goo.gl/FJpwnu'

}, {

'name': 'Image2',

'img': 'https://goo.gl/4svvdA'

}

];

TextBox1.innerHTML = "BEST OF LUCK";

var gameGrid = cardsArray.concat(cardsArray).sort(function () {

return 0.5 - Math.random();

});

var firstGuess = '';

var secondGuess = '';

var count = 0;

var previousTarget = null;

var grid = document.createElement('section');

grid.setAttribute('class', 'grid');

game.appendChild(grid);

gameGrid.forEach(function (item) {

var name = item.name,

img = item.img;

var card = document.createElement('div');

card.classList.add('card');

card.dataset.name = name;

var front = document.createElement('img');

front.classList.add('front');

front.style.backgroundImage = 'url(' + img + ')';

card.appendChild(front);

grid.appendChild(card);

});

var match = function match() {

var selected = document.querySelectorAll('.selected');

selected.forEach(function (card) {

card.classList.add('match');

TextBox1.innerHTML = "Good Job";

});

};

function GameResetFunction() {

firstGuess = '';

secondGuess = '';

count = 0;

previousTarget = null;

var selected = document.querySelectorAll('.selected');

selected.forEach(function (card) {

card.classList.remove('selected');

});

};

grid.addEventListener("click",GRID,true);

function GRID(event){

if (event.target === previousTarget ) {

return;

}

if (count < 2) {

count++;

if (count === 1) {

firstGuess = event.target.parentNode.dataset.name;

console.log(firstGuess);

console.log(count);

event.target.parentNode.classList.add('selected');

}

else {

secondGuess = event.target.parentNode.dataset.name;

console.log(secondGuess);

event.target.parentNode.classList.add('selected');

}

if (firstGuess && secondGuess) {

if (firstGuess === secondGuess) {

setTimeout(match);

}

TextBox1.innerHTML = "Try Again";

setTimeout(GameResetFunction);

}

previousTarget = event.target;

}

};

</script>

</body>

</html>

----------------------------------------------------------------------------------------------------------------

3 comments:

John Smith16 December 2018 at 21:00
This comment has been removed by the author.
ReplyDelete
Replies
John Smith23 December 2018 at 15:18
Access to computers and other control systems which might provide you with information about the way the world revolves around technology should be unlimited and total. All information should be free and accessible to all. That is why we at INTEGRATEDHACKS have come up with a team of highly motivated and dedicated hackers to help you get access to information you are being deprived of. Our services include and are not limited to hacking of social media accounts,email accounts, tracking of phones hacking of bank cards and many more.
Have you ever been hacked? Need to recover your stolen account, Want to monitor your kids,spouse or partner, Change your school results track messages from an email or mobile number and many more, INTEGRATEDHACKS is the one for you. Hundreds of our clients have their phones, social media accounts, emails, servers, may bots and PCs hacked consistently and efficiently. Our professional hackers for hire team is highly qualified and can hack anything or device you desire without giving the target any form of notification which makes us one of the best.

★ Contact Us For Your Desired Hacking services via : integratedhacks@protonmail.com and experience cyber hacking like never before.
ReplyDelete
Replies
Anonymous26 April 2020 at 11:24
Full Guideline On Newsletter Template In Magento 2

Posted by Vũ Nghĩa

For some, various purposes, store heads can make the same number of bulletin layouts as they need. Magento Newsletter layouts can be altered utilizing HTML markup or plain content. The thing that matters is plain content bulletins have no pictures, rich content, or organized connection.

Magento-pamphlet layout

>>> Don't miss this: Magento Tutorial for eCommerce Website!

To make a Magento pamphlet layout:

On the Admin sidebar, click Marketing. After that under Communications, click Newsletter Template.

To include another layout, click the Add New Template button. From that point forward, follow these means:

In the Template Name input name for inner reference.

In the Template Subject box, portray the motivation behind the bulletin.

In the Sender Name box, input the name of the individual who is to show up as the sender of the pamphlet.

In the Sender Email box, input the email address of the pamphlet sender.

Magento-pamphlet format

>>> Don't miss this: Magento Breadcrumb to backtrack the clients' means!

At the Template Content box, click Show/Hide Editor to show the WYSIWYG editorial manager. From that point forward, update the substance varying. To find out additional, see: Using the Editor.

The withdraw connect at the base of the format substance ought not be evacuated in light of the fact that the law requires the withdraw interface in certain wards.

In the Template Styles box, input the CSS announcements expected to arrange the substance.

Magento-pamphlet layout

>>> Read progressively: Easy approach to introduce Magento Meta Information to make your own shocking site!

Snap Preview Template to perceive what it looks like. From that point onward, roll out any improvements that are required.

At the point when complete, click Save Template.

After you spare a format, a Save As catch shows up whenever you alter the layout. It tends to be utilized to spare varieties of the Magento pamphlet layout without overwriting the first.

This is the technique to set-up Magento Newsletter Templates!

To change over the Magento bulletin format to plain content:

At the highest point of the page, click Convert to Plain Text. Snap OK after affirmed.

To review the plain content rendition of the layout, click Preview Template. The see opens in another program tab.

To spare the plain content rendition, click Save Template.

To reestablish the HTML:

At the highest point of the page, click Return HTML Version.

To see the HTML variant of the layout, click Preview Template. The review opens in another program tab.
magento tutorials
magento newsletter template
magento meta keywords
To spare the HTML form, click Save Template.
ReplyDelete
Replies

Add comment

FbGadgets

Saturday, 8 December 2018

INPUT BUTTON VALUE SWAP

3 comments:

SPONSORS ❤ ☕ ❀ ✿ ❁ ✾ ✽ ❃ ❋

RANDOM POST

RANDOM

RECENT POST MULTI COLOR

Learning Codes

Labels

RECENT COMMENTS AVATAR