Thursday 10 February 2022
JAVA SCRIPT BOOKS ONLINE
---------------------------------------------------------------------------------------------------------------------
JAVA SCRIPT BOOKS ONLINE
Read More:
---------------------------------------------------------------------------------------------------------------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style id="compiled-css" type="text/css">
#items { list-style: none; }
#items li {
margin: 0.5em;
padding: 0.5em;
border: 1px solid black;
border-radius: 5px;
width: 100px;
cursor: move;
}
#cart {
position: fixed;
top: 0;
right: 0;
height: 55px;
width: 150px;
border: 2px solid black;
text-align: center;
padding-top: 20px;
line-height: 10px;
box-sizing: border-box;
}
#cart.active {
border: 2px dotted black;
}
#cart.hover {
opacity: 0.5;
}
/* EOS */
</style>
<script id="insert"></script>
</head>
<body>
<ul id="items">
<li>Bananas</li>
<li>Apples</li>
<li>Grapes</li>
<li>Oranges</li>
<li>Watermelon</li>
<li>Strawberries</li>
</ul>
<div id="cart">
Cart - <span id="count">0</span> Item(s)
</div>
<script type="text/javascript">//<![CDATA[
$( "#items li" ).draggable({
cursor: "move",
revert: "invalid",
helper: "clone"
});
$( "#cart" ).droppable({
activeClass: "active",
hoverClass: "hover",
drop: function( event, ui ) {
var count = parseInt( $( "#count" ).text(), 10 );
$( "#count" ).text( ++count );
},
tolerance: "touch"
});
//]]></script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "PUVXn"
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
COLOR DRAG AND DROP IN BOX CODE
---------------------------------------------------------------------------------------------------------------------
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style id="compiled-css" type="text/css">
#colors {
position: absolute;
}
.ui-draggable {
width: 100px;
height: 100px;
margin: 20px;
cursor: move;
box-sizing: border-box;
border: 1px solid black;
}
#drop-zones {
position: absolute;
left: 200px;
}
#drop-zones > div {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 20px;
text-align: center;
padding-top: 40px;
box-sizing: border-box;
line-height: 10px;
}
/* EOS */
</style>
<script id="insert"></script>
</head>
<body>
<div id="colors"></div>
<div id="drop-zones"></div>
<script type="text/javascript">//<![CDATA[
function randomize( array ) {
return array.sort(function() {
return 0.5 - Math.random();
});
};
var i = 0,
colors = randomize([ "red", "blue", "green", "yellow", "purple", "black" ]);
for ( ; i < colors.length; i++ ) {
$( "<div>", { id: colors[ i ] } )
.css( "background", colors[ i ] )
.appendTo( "#colors" )
.draggable({ revert: "invalid", zIndex: 2 });
}
randomize( colors );
for ( i = 0; i < colors.length; i++ ) {
$( "<div>", { text: colors[ i ] })
.appendTo( "#drop-zones" );
}
$( "#drop-zones > div" ).droppable({
accept: function( draggable ) {
return $( this ).text() == draggable.attr( "id" );
},
drop: function( event, ui ) {
var color = ui.draggable.css( "background-color" );
$( this ).css( "background", color ).addClass( "filled" );
ui.draggable.hide( "puff" );
if ( $( ".filled" ).length === colors.length ) {
$( "<div><p>Nice job! Refreshing game.</p></div>" )
.dialog({ modal: true });
setTimeout(function() {
window.location = window.location;
}, 3000 );
}
}
});
//]]></script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "S7pdy"
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
---------------------------------------------------------------------------------------------------------------------
READ MORE:
---------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<textarea id="myInput">The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</textarea>
<button type="button" onclick="copy_data(myInput)">copy</button>
<br>
<hr>
<p>Try paste it here after copying</p>
<textarea></textarea>
<script>
function copy_data(containerid) {
var range = document.createRange();
range.selectNode(containerid); //changed here
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
alert("data copied");
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
VALUE COMPARE JAVASCRIPT WHEN VALUE EQUAL THEN VARIABLE TRUE ELSE FLASE VARIABLE
---------------------------------------------------------------------------------------------------------------------
<!-- https://www.codecademy.com/forum_questions/523a662aabf821b19c002ef5
https://stackoverflow.com/questions/56394757/javascript-compare-function-with-always-returning-false
-->
<script>
HtmlId.addEventListener("click",FunctionName,true);
function FunctionName(){
function compare(a, b) {
console.log(a,b)
if (a == b) {
var valid = true;
}
else {
var valid = false;
}
return valid;
}
function test(first, second) {
if(!isNaN(first) && !isNaN(second)){
alert(compare(first, second));
}
else {
alert('TRY AGAIN');
}
}
var firstStr = prompt('Enter first Number:');
var first = Number(firstStr);
var secondStr = prompt('Enter second Number:');
var second = Number(secondStr);
test(first, second);
}
</script>
<button id="HtmlId"onClick="FunctionName()">AddEventListener</button>
---------------------------------------------------------------------------------------------------------------------
Memory Game Marina
---------------------------------------------------------------------------------------------------------------------
<html>
<!-- https://marina-ferreira.github.io/projects/js/memory-game/ -->
<!-- https://codepen.io/veilan/pen/PboqrZ -->
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<style>
.memory-game {
width: 600px;
height: 600px;
margin-left:0px;
display: flex;
align-items:right;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 5px;
position: relative;
background-color:Green;
background:#fff url("https://marina-ferreira.github.io/memory-game/img/js-badge.svg")no-repeat;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
transition: all .5s;
transform-style: preserve-3d;
transform: scale(1);
}
.memory-card.flip {
background:#fff url("https://plchldr.co/i/180x250?bg=71BA51")no-repeat;
}
.memory-card:active {
transform: scale(0.97);
transition: transform .2s;
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #1C7CCC;
}
.front-face {
transform: rotateY(180deg);
}
@media screen and (max-width: 750px) and (max-height: 500px) {
.memory-game {
width: 50%;
height: 90%;
}
.memory-card {
}
.front-face,
.back-face {
padding: 10px;
width: 200px;
height: 200px;
}
}
</style>
</head>
<body>
<section class="memory-game">
<div class="memory-card" id="aurelia">A
</div>
<div class="memory-card" id="aurelia"> APPLE
</div>
<div class="memory-card" id="vue"> B
</div>
<div class="memory-card" id="vue"> BALL
</div>
</section>
<script>
var cards = document.querySelectorAll('.memory-card');
var hasFlippedCard = false;
var lockBoard = false;
var firstCard;
var secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (hasFlippedCard == false) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
var isMatch = firstCard.id === secondCard.id;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
var randomPos = Math.floor(Math.random() * 4);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));
</script>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment