I have a JavaScript library and it uses this function for example to convert English numbers to Persian:
persianJs("345").englishNumber().toString(); //returns: ۳۴۵
I have an html structure to show some dynamic numerical values like this:
<span class="price"><!-- price amount --></span>
How can I run the JavaScript function in header or footer to display any price amount in Persian format?
I Am trying to do my assignment (rock-paper-scissors) in javascript. After playing 5 times the reset button will show up as expected. My problem is when I click the reset button everything works except the finaltext (finalanswer) won't go away (text circled with red on the picture). I have tried all I can but no working. Also, there is a gap between my game title and the window frame(see the picture), please I want to remove the gap. Thanks
<!DOCTYPE html>
<html>
<head>
<title>Rock-Paper-Scissors</title>
<link rel="stylesheet" href="rock-paper-scissors-v1.2.css">
</head>
<header> <h1>ROCK-PAPER-SCISSORS</h1></header>
<style>
body{
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin: 0 auto;
background-color: antiquewhite;
}
header{
text-align: center;
height: 20%;
width: 100%;
background-color: red;
}
.container{
text-align: center;
}
.topContainer, .playBoxes, .resultPane{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.yourPane, .compPane{
display: flex;
flex-direction: column;
align-content: space-between;
justify-content: space-between;
border: 2px solid black;
width: 10%;
height: 200px;
border-radius: 20px;
}
.resultBoard{
display: flex;
flex-direction: column;
align-content: space-around;
justify-content: space-around;
width: 30%;
height: 250px;
border: 2px solid black;
border-radius: 20px;
align-content: space-around;
}
.yourScorePane, .compScorePane, .yourWin, .bothDraw, .compWin {
width: 90%;
height: 100px;
margin: 0 auto;
}
.yourWin, .bothDraw, .compWin {
width: 30%;
height: 100px;
margin: 0 20p;
}
.score, .ok, .scoreText1, .scoreText2, .yourSelect, span, .compSelect{
font-weight: bolder;
}
.score{
font-size: 50px;
margin-top: 0px;
}
.compSelect, .yourSelect {
font-size: 1.5rem;
}
.you, .comp {
color: white;
background-color: black;
height: 30px;
width: 100%;
border-top-left-radius: 19px;
border-top-right-radius: 19px;
font-size: 25px;
font-weight: bolder;
vertical-align: middle;
line-height: 1px;
padding-bottom: 10px;
}
.finalResultContainer{
width: 50%;
height: 200px;
border: 2px solid black;
margin-left: 25%;
margin-top: 30px;
border-radius: 10px;
}
button{
height: 40px;
width: 90px;
border-radius: 3px;
}
.box{
width: 15%;
height: 150px;
margin-left: 1.5%;
border: 2px solid black;
border-radius: 10px;
text-align: center;
font-size: 30px;
font-weight: bolder;
vertical-align: middle;
line-height: 150px;
color: rgb(100, 98, 98);
background-color: rgb(247, 245, 245);
}
.box:hover {
box-shadow: 2px 1px rgba(0, 0, 0, 0.2), -2px -1px rgba(0, 0, 0, 0.2) ;
background-color: rgb(31, 30, 30);
color: rgb(255, 255, 255);
}
</style>
<body>
<div class="container">
<!--TopContainer to hold all the result display-->
<div class="topContainer">
<!--yourPane to display your selection and score-->
<div class="yourPane">
<div class="you"><p>You</p></div>
<div class="yourScorePane">
<p>Won</p>
<p class="yourScore score">0</p>
</div>
<div><p class="yourSelect"></p></div>
</div>
<!--resultBoard to display every result-->
<div class="resultBoard">
<div class="resultPane">
<div class="yourWin">
<p class="ok">Won</p>
<p class="yourScore score">0</p>
</div>
<div class="bothDraw">
<p class="ok">Draw</p>
<p class="bothDrawScore score">0</p>
</div>
<div class="compWin">
<p class="ok">Won</p>
<p class="compScore score">0</p>
</div>
</div>
<div class="resultText">
<p class="scoreText1"></p>
<p class="scoreText2">Lets Play</p>
</div>
</div>
<!--compPane to display comp selection and score-->
<div class="compPane">
<div class="comp"><p>Comp</p></div>
<div class="compScorePane">
<p>Won</p>
<p class="compScore score">0</p>
</div>
<div><p class="compSelect"></p></div>
</div>
</div>
<div class="downContainer">
<p class="totalPlayed">Total Played:<span class="tPlayed">0</span> | Total Remaining:<span class="tRemaining">5</span></p>
<p class="instruction">Select Any Of The Box Below To Play!</p>
<!-- <button>Reset</button> -->
<div class="playBoxes">
<div id="rock" class="box">Rock</div>
<div id="paper" class="box">Paper</div>
<div id="scissors" class="box">Scissors</div>
</div>
</div>
</div>
<script>
function getComputerPlay() {
let selectAny = ["paper", "rock", "scissors"];
let randomReturn = Math.floor(Math.random() * selectAny.length);
return selectAny[randomReturn];
}
String.prototype.firstLetterCap = function() {
return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
}
Element.prototype.hide = function() {
this.style.display = 'none';
}
Element.prototype.show = function() {
this.style.display = '';
}
let yourWinCount = 0;
let compWinCount = 0;
let tieCount = 0;
let totalPlay = 0;
let totalRemaining = 5;
function selectChoice(e) {
let choice = document.querySelector(`div[id="${e.target.id}"]`);
if (!choice) return;
// console.log(choice.id);
compare(choice.id);
}
function compare(choice) {
let computerSelect = getComputerPlay();
let compChoice = document.querySelector(".compSelect");
let userChoice = document.querySelector(".yourSelect");
compChoice.textContent = `${computerSelect.firstLetterCap()}`;
userChoice.textContent = `${choice.firstLetterCap()}`;
if (choice === computerSelect) {
tieCount += 1;
totalPlay += 1;
totalRemaining -= 1;
return tie(choice, computerSelect)
}
if (choice === "paper") {
if (computerSelect === "rock") {
yourWinCount += 1;
totalPlay += 1;
totalRemaining -= 1;
return yourWin(choice, computerSelect);
}
else {
compWinCount += 1;
totalPlay += 1;
totalRemaining -= 1;
return compWin(choice, computerSelect);
}
}
if (choice === "rock") {
if (computerSelect === "scissors") {
yourWinCount += 1;
totalPlay += 1;
totalRemaining -= 1;
return yourWin(choice, computerSelect);
}
else {
compWinCount += 1;
totalPlay += 1;
totalRemaining -= 1;
return compWin(choice, computerSelect);
}
}
if (choice === "scissors") {
if (computerSelect === "rock") {
compWinCount += 1;
totalPlay += 1;
totalRemaining -= 1;
return compWin(choice, computerSelect);
} else {
yourWinCount += 1;
totalPlay += 1;
totalRemaining -= 1;
return yourWin(choice, computerSelect);
}
}
}
function yourWin(choice, computerSelect) {
let yourScores = document.querySelectorAll(".yourScore")
let tPlayed = document.querySelector(".tPlayed");
let tRemaining = document.querySelector(".tRemaining");
let scoreText1 = document.querySelector(".scoreText1");
let scoreText2 = document.querySelector(".scoreText2");
if (totalPlay === 5) {
yourScores.forEach(yourScore => yourScore.textContent = `${yourWinCount}`);
finalResult();
} else {
yourScores.forEach(yourScore => yourScore.textContent = `${yourWinCount}`);
tPlayed.textContent = `${totalPlay}`;
tRemaining.textContent = `${totalRemaining}`;
scoreText1.textContent = "Hey! You Win...";
scoreText2.textContent = `${choice.firstLetterCap()} beat ${computerSelect.firstLetterCap()}`;
}
}
function compWin(choice, computerSelect) {
let compScores = document.querySelectorAll(".compScore");
let tPlayed = document.querySelector(".tPlayed");
let tRemaining = document.querySelector(".tRemaining");
let scoreText1 = document.querySelector(".scoreText1");
let scoreText2 = document.querySelector(".scoreText2");
if (totalPlay === 5) {
compScores.forEach(compScore => compScore.textContent = `${compWinCount}`);
finalResult();
}else {
compScores.forEach(compScore => compScore.textContent = `${compWinCount}`);
tPlayed.textContent = `${totalPlay}`;
tRemaining.textContent = `${totalRemaining}`;
scoreText1.textContent = "Hey! You Lost...";
scoreText2.textContent = `${computerSelect.firstLetterCap()} beat ${choice.firstLetterCap()}`;
}
}
function tie(choice, computerSelect) {
let tieScore = document.querySelector(".bothDrawScore");
let tPlayed = document.querySelector(".tPlayed");
let tRemaining = document.querySelector(".tRemaining");
let scoreText1 = document.querySelector(".scoreText1");
let scoreText2 = document.querySelector(".scoreText2");
if (totalPlay === 5) {
tieScore.textContent = `${tieCount}`;
finalResult();
} else {
tieScore.textContent = `${tieCount}`;
tPlayed.textContent = `${totalPlay}`;
tRemaining.textContent = `${totalRemaining}`;
scoreText1.textContent = "Hey! It's A Tie... No Winner!";
scoreText2.textContent = `${computerSelect.firstLetterCap()} and ${choice.firstLetterCap()} are the same`;
}
}
function finalResult() {
let instruction = document.querySelector(".instruction");
let totalPlayed = document.querySelector(".totalPlayed");
let playBoxes = document.querySelector(".playBoxes");
totalPlayed.hide();
playBoxes.hide();
instruction.hide();
let finalResultContainer = document.querySelector("div.downContainer");
finalResultContainer.classList.add("finalResultContainer");
let finalText1 = document.createElement("p");
let finalText2 = document.createElement("p");
if (yourWinCount > compWinCount) {
finalText1.textContent = "Final Result... You Won!!!";
finalText2.textContent = `You won ${yourWinCount}times, Computer won ${compWinCount}times.`
} else if (yourWinCount < compWinCount) {
finalText1.textContent = "Final Result... You Lost!!!";
finalText2.textContent = `Computer won ${compWinCount}times, You won ${yourWinCount}times.`
} else {
finalText1.textContent = "Final Result... Its A Tie!!!";
finalText2.textContent = `Noooo Winner`
}
finalResultContainer.appendChild(finalText1);
finalResultContainer.appendChild(finalText2);
let button = document.createElement("button");
button.textContent = "Reset";
finalResultContainer.appendChild(button);
button.addEventListener("click", reset);
}
function reset() {
yourWinCount = 0;
compWinCount = 0;
tieCount = 0;
totalPlay = 0;
totalRemaining = 5;
let instruction = document.querySelector(".instruction");
let compScores = document.querySelectorAll(".compScore");
let yourScores = document.querySelectorAll(".yourScore")
let tieScore = document.querySelector(".bothDrawScore");
let tPlayed = document.querySelector(".tPlayed");
let tRemaining = document.querySelector(".tRemaining");
let scoreText1 = document.querySelector(".scoreText1");
let scoreText2 = document.querySelector(".scoreText2");
compScores.forEach(compScore => compScore.textContent = `${compWinCount}`);
yourScores.forEach(yourScore => yourScore.textContent = `${yourWinCount}`);
tieScore.textContent = `${tieCount}`;
tPlayed.textContent = `${totalPlay}`;
tRemaining.textContent = `${totalRemaining}`;
scoreText1.textContent = "";
scoreText2.textContent = "Lets Play!";
let finalResultContainer = document.querySelector("div.downContainer");
finalResultContainer.classList.remove("finalResultContainer");
let totalPlayed = document.querySelector(".totalPlayed");
let playBoxes = document.querySelector(".playBoxes");
totalPlayed.show();
playBoxes.show();
instruction.show();
let button = document.querySelector("button");
finalResultContainer.removeChild(button);
}
window.addEventListener("click", selectChoice);
</script>
</body>
</html>
i got an error like this:
core.js:6014 ERROR TypeError: Class constructor Observable cannot be invoked without 'new'
at new FirebaseObjectObservable (firebase_object_observable.js:16) at FirebaseObjectFactory (firebase_object_factory.js:7) at AngularFireDatabase.push../node_modules/angularfire2/database/database.js.AngularFireDatabase.object (database.js:18) at UserService.save (user.service.ts:12) at SafeSubscriber.next (app.component.ts:17) at SafeSubscriber.__tryOrUnsub (Subscriber.js:185) at SafeSubscriber.next (Subscriber.js:124) at Subscriber.next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49 at Notification.observe (Notification.js:20)
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase';
@Injectable()
export class UserService {
constructor(private db: AngularFireDatabase) { }
save(user: firebase.User){
this.db.object('/users/' + user.uid).update({
name:user.displayName,
email:user.email
});
}
}
I am writing a UserScript that will remove elements from a page that contain a certain string.
If I understand jQuery's contains() function correctly, it seems like the correct tool for the job.
Unfortunately, since the page I'll be running the UserScript on does not use jQuery, I can't use :contains(). Any of you lovely people know what the native way to do this is?
I'm able to copy the text from within the span class to the input field automatically on page load but I am unable to get FacetWP to respond and update the results even when using FWP.refresh()
https://facetwp.com/documentation/developers/javascript/facetwp-refresh/
Facet name - proximity
Span class - local-addrress-name
Input class - facetwp-location
window.addEventListener('load', function () {
var nodes = document.querySelectorAll('.local-address-name');
var last = nodes[nodes.length- 1];
document.querySelector('.facetwp-location').value =last.innerHTML;
setTimeout(function() {
FWP.refresh(); // Change a facet value
console.log( "ready!" );
}, 2000);
});<span class="local-address-name">Brunswick, GA, USA</span><input type="text" class="facetwp-location" value="" placeholder="Enter Zip or Address" id="facetwp-location" autocomplete="off">I need help with regular expression. I need a expression which allows only alphabets with space for ex. college name.
I am using :
var regex = /^[a-zA-Z][a-zA-Z\\s]+$/;
but it's not working.
i am using noUISlider on the facetwp plugin in wordpress and i made some customisations to make it work with inputs (i dont even think its a wordpress issue so i am posting that here)
Everything is working perfectly but only on the first time, when i am trying to change the slider value via input's the second time everything is switching to "0" so both input fields are behaving like this and nothing get's filtered what's obvious because the value is 0 both on min and max.
$(document).on('facetwp-loaded', function() {
var updateFWP = function(facet_name) {
FWP.frozen_facets[facet_name] = 'hard';
FWP.autoload();
};
var onChangeEvent = function(handle, t) {
var parent = $(t).closest('.facetwp-type-slider');
var slider = parent.find('.facetwp-slider');
slider[0].noUiSlider.setHandle(handle, t.value);
updateFWP(parent.attr('data-name'));
}
$('.facetwp-type-slider .facetwp-slider:not(.ready)').each(function() {
var $parent = $(this).closest('.facetwp-facet');
var facet_name = $parent.attr('data-name');
var opts = FWP.settings[facet_name];
// on first load, check for slider URL variable
if (false !== FWP.helper.get_url_var(facet_name)) {
FWP.frozen_facets[facet_name] = 'hard';
}
// fail on slider already initialized
if ('undefined' !== typeof $(this).data('options')) {
return;
}
// fail if start values are null
if (null === FWP.settings[facet_name].start[0]) {
return;
}
// fail on invalid ranges
if (parseFloat(opts.range.min) >= parseFloat(opts.range.max)) {
FWP.settings[facet_name]['lower'] = opts.range.min;
FWP.settings[facet_name]['upper'] = opts.range.max;
FWP.hooks.doAction('facetwp/set_label/slider', $parent);
return;
}
var inputMin = $(this).find('.slider-input-min');
var inputMax = $(this).find('.slider-input-max');
// custom slider options
var slider_opts = FWP.hooks.applyFilters('facetwp/set_options/slider', {
range: opts.range,
start: opts.start,
//step: parseFloat(opts.step),
connect: true
}, { 'facet_name': facet_name });
var slider = this;
noUiSlider.create(slider, slider_opts);
slider.noUiSlider.on('update', function(values, handle) {
var value = values[handle];
if (handle) {
inputMax.val(value);
} else {
inputMin.val(value);
}
FWP.settings[facet_name]['lower'] = values[0];
FWP.settings[facet_name]['upper'] = values[1];
FWP.hooks.doAction('facetwp/set_label/slider', $parent);
});
slider.noUiSlider.on('set', function() {
updateFWP(facet_name);
});
$(this).addClass('ready');
});
$('.slider-input-min').on('change', function () {
onChangeEvent(0, this);
});
$('.slider-input-max').on('change', function () {
onChangeEvent(1, this);
});
});
So basically everything is working nice when i am using the "slider" but not with the inputs... i tried to many things but have no idea why that's not working.
Maybe someone of you had a similar issue with the facetwp + nouislider issue?
thanks!
I have implemented authentication page in javascript for OpenWrt router and after successful login user is redirected to another web page. I need to hide the name of that page so that user is not able to bypass the authentication. Please help.
does anyone work with FacetWP? I am trying to reset certain filters if the user selects one of the radio options from the facet "ex_type".
If one any of the radio options are selected, I want this to then reset the other facets automatically.
Facetwp have a function "onclick="FWP.reset()" however from the backend I cannot access the radio buttons. I need to target the radio button choices with a separate jquery function as below, however my code is not working.
Here is the view from my backend:
<div class="group-individual">
<?php echo facetwp_display( 'facet', 'ex_type'); ?>
</div>
<div class="sub-filters">
<div class="day">
<?php echo facetwp_display( 'facet', 'day' ); ?>
</div>
<div class="time">
<?php echo facetwp_display( 'facet', 'time' ); ?>
</div>
</div><!--sub-filters-->
The actual code for the "ex_type" radio buttons displayed is this:
<div class="group-individual">
<div class="facetwp-facet facetwp-type-radio" data-name="ex_type" data-type="radio">
<div class="facet-wrapper">
<div class="facetwp-radio" data-value="classes">
"classes"</div>
<div class="facetwp-radio" data-value="individual">
"individaul"</div>
</div>
</div>
</div>
I have tried to refresh the other facet choices with a click function but it is not working. The code I have tried is:
<script>
$(document).ready(
function(){
$(".facetwp-radio").click(function () {
FWP.reset('day');
});
});
</script>
And also this:
<script>
$(document).ready(
function(){
$(".facetwp-radio").click(function () {
FWP.facets['day'] = [];
FWP.facets['time'] = [];
});
});
</script>
Any suggestions welcomed. Thank you.
I am developing a booking website.
i am using FacetWp bookings ad on plugin to filter my listings by date and I am using woocommerce bookings (Acccomadation Plugin) as well.
it was working fine before when I installed this plugin a month ago but from past few days its not working, nothing happens when I press the search button. I can see following error in the browser console related to this plugin, and I tried to reach FacetWp support team but so have not got any response from them. I do not know whats going on with the plugin. My website is useless without this filter. What is the use of buying a paid plugin when they cant even provide you a support. Here is the error.
Uncaught TypeError: Cannot read property 'remove' of undefined
at (index):1194
at a (front.min.js?ver=3.3.6:1)
at Object.doAction (front.min.js?ver=3.3.6:1)
at HTMLDivElement.<anonymous> (front.min.js?ver=3.3.6:1)
at Function.each (jquery.js:2)
at a.fn.init.each (jquery.js:2)
at Object.FWP.parse_facets (front.min.js?ver=3.3.6:1)
at facetWpRedirect ((index):588)
at HTMLInputElement.onclick ((index):555)
Thanks!
Well this Code of front.min.js file
Well Sorry its the way it is formatted in he JS file. I do not have much understanding of the code to format it in more readable form.
!function() {"use strict";var e;(e=window).FWP=e.FWP||{},e.FWP.hooks=e.FWP.hooks||new function(){function e(e,t,a,c){var o,s,i;if(n[e][t])if(a)if(o=n[e][t],c)for(i=o.length;i--;)(s=o[i]).callback===a&&s.context===c&&o.splice(i,1);else for(i=o.length;i--;)o[i].callback===a&&o.splice(i,1);else n[e][t]=[]}function t(e,t,a,c,o){var s={callback:a,priority:c,context:o},i=n[e][t];i?(i.push(s),i=function(e){for(var t,a,c,o=1,n=e.length;ot.priority;)e[a]=e[a-1],--a;e[a]=t}return e}(i)):i=[s],n[e][t]=i}function a(e,t,a){var c,o,s=n[e][t];if(!s)return"filters"===e&&a[0];if(o=s.length,"filters"===e)for(c=0;c":">",'"':""","'":"'"};return e.replace(/[&<>"']/g,function(e){return t[e]}).trim()},FWP.helper.detect_loop=function(e){for(var t=null,a=document.createNodeIterator(e,NodeFilter.SHOW_COMMENT,FWP.helper.node_filter,!1);t=a.nextNode();)if(8===t.nodeType&&"fwp-loop"===t.nodeValue)return t.parentNode;return!1},FWP.helper.node_filter=function(){return NodeFilter.FILTER_ACCEPT},FWP.autoload=function(){FWP.auto_refresh&&!FWP.is_refresh&&FWP.refresh()},FWP.refresh=function(){FWP.is_refresh=!0,FWP.is_reset||FWP.parse_facets(),FWP.loaded||FWP.load_from_hash(),e(document).trigger("facetwp-refresh"),FWP.loaded&&!FWP.is_popstate&&FWP.set_hash(),FWP.loaded||FWP.is_bfcache||!t(FWP_JSON.preload_data)?FWP.fetch_data():FWP.render(FWP_JSON.preload_data),e.each(FWP.frozen_facets,function(e,t){"hard"!==t&&delete FWP.frozen_facets[e]}),FWP.paged=1,FWP.soft_refresh=!1,FWP.is_refresh=!1,FWP.is_reset=!1},FWP.parse_facets=function(){FWP.facets={},e(".facetwp-facet").each(function(){var a=e(this),c=a.attr("data-name"),o=a.attr("data-type");FWP.facet_type[c]=o,FWP.hooks.doAction("facetwp/refresh/"+o,a,c);var n=!0;FWP.loaded&&(FWP.soft_refresh||t(FWP.frozen_facets[c]))&&(n=!1),n&&FWP.loading_handler({element:a,facet_name:c,facet_type:o})}),1'),a.find(".facetwp-overlay").css({width:a.width(),height:a.height()})}),e(document).on("facetwp-loaded",function(){a.find(".facetwp-overlay").remove()})}}else""==FWP_JSON.loading_animation&&t.element.html('')},FWP.build_query_string=function(){var t="",a=[],c=window.location.search.replace("?","").split("&");e.each(c,function(e,t){0!==t.split("=")[0].indexOf(FWP_JSON.prefix)&&a.push(t)}),a=a.join("&");var o=FWP.helper.serialize(FWP.facets,FWP_JSON.prefix);return""!==a&&(t+=a),""!==o&&(t+=(""!==a?"&":"")+o),t},FWP.set_hash=function(){var e=FWP.build_query_string();""!==e&&(e="?"+e),history.pushState&&history.pushState(null,null,window.location.pathname+e),FWP_HTTP.get={},window.location.search.replace("?","").split("&").forEach(function(e){var t=e.split("=");FWP_HTTP.get[t[0]]=t[1]})},FWP.load_from_hash=function(){var a=[],c=window.location.search.replace("?","").split("&");e.each(c,function(e,t){0===t.split("=")[0].indexOf(FWP_JSON.prefix)&&a.push(t.replace(FWP_JSON.prefix,""))}),a=a.join("&"),e.each(FWP.facets,function(e){FWP.facets[e]=[]}),FWP.paged=1,FWP.extras.sort="default",""!==a&&(a=a.split("&"),e.each(a,function(e,a){var c=a.split("=")[0],o=a.split("=")[1];if("paged"===c)FWP.paged=o;else if("per_page"===c||"sort"===c)FWP.extras[c]=o;else if(""!==o){var n=t(FWP.facet_type[c])?FWP.facet_type[c]:"";FWP.facets[c]="search"===n||"autocomplete"===n?decodeURIComponent(o):decodeURIComponent(o).split(",")}}))},FWP.build_post_data=function(){return{facets:JSON.stringify(FWP.facets),frozen_facets:FWP.frozen_facets,http_params:FWP_HTTP,template:FWP.template,extras:FWP.extras,soft_refresh:FWP.soft_refresh?1:0,is_bfcache:FWP.is_bfcache?1:0,first_load:FWP.loaded?0:1,paged:FWP.paged}},FWP.fetch_data=function(){FWP.jqXHR&&4!==FWP.jqXHR.readyState&&FWP.jqXHR.abort();var t="wp"===FWP.template?document.URL:FWP_JSON.ajaxurl,a={type:"POST",dataType:"text",data:{action:"facetwp_refresh",data:FWP.build_post_data()},success:function(t){try{var a=e.parseJSON(t);FWP.render(a)}catch(n){var c=t.indexOf('{"facets');if(-1c.length){var o=document.createElement("div");o.innerHTML=a.template;var n=FWP.helper.detect_loop(o);n&&(c=e(n).addClass("facetwp-template"))}if(01){var n=o.indexOf(c);-10)){var a=FWP.helper.detect_loop(document.body);if(!a)return;e(a).addClass("facetwp-template")}var c=e(".facetwp-template:first");FWP.template=c.is("[data-name]")?c.attr("data-name"):"wp",0'+FWP.helper.escape_html(t.label)+""}),a+=''+FWP.settings.labels[c]+": "+i+""}),""!==a&&(a="
Thanks again!
I am new to react-native, I was trying to implement tic tac toe in react native using hooks but it seems there is something wrong with the winner function and i couldn't figure out what... i dont knw if the logic is incorrect or there is something missing.. a little help would be appreciated :)
thanks in advance
import React, { useState } from 'react'
import { View, StyleSheet, TouchableOpacity, Button, Text, Alert } from 'react-native'
import { MaterialCommunityIcons as Icon } from '@expo/vector-icons'
function Board() {
return (
<Squares />
)
}
function Box(props) {
return (
<TouchableOpacity style={styles.square} onPress={props.onPress}>{props.value}</TouchableOpacity>
)
}
function Squares() {
const [gameState, setGameState] = useState(Array(9).fill(null))
const [currentPlayer, setCurrentPlayer] = useState(true)
const initialGameState = () => {
setGameState(Array(9).fill(null))
}
const gameHandler = (index) => {
const board = [...gameState]
if (board[index] || winnerHandler(gameState)) {
return
}
board[index] = currentPlayer ? (<Icon name="close" size={60} color="orange" />) : (<Icon name="circle-outline" size={60} color="green" />)
setGameState(board)
setCurrentPlayer(!currentPlayer)
}
const renderSquare = index => {
return <Box value={gameState[index]} onPress={() => gameHandler(index)} />
}
const winner = winnerHandler(gameState)
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
{winner ? <Text>Winner is {winner}</Text> : <Text>Player</Text>}
{currentPlayer ? (<Icon name="close" size={60} color="orange" />) : (<Icon name="circle-outline" size={60} color="green" />)}
<View style={styles.screen}>
<View>
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</View>
<View>
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</View>
<View>
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</View>
</View>
<Button title="Play Again" onPress={initialGameState} />
</View>
)
}
function winnerHandler(squares) {
const wLines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
]
for (let i = 0; i < wLines.length; i++) {
const [a, b, c] = wLines[i];
if (squares[a] && squares[a] === squares[b] && squares[b] === squares[c]) {
return Alert.alert("Congratulations", 'You win', [{ text: 'ok' }])
}
}
return null
}
const styles = StyleSheet.create({
screen: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20
},
square: {
height: 80,
width: 80,
borderWidth: 1,
alignItems: 'center',
justifyContent: 'center',
},
button: {
marginTop: 30
}
})
export default Board
I want to use QuickBlox for creating a chat app in react native. I don't know from where to start. Just need to know is there any library that provide quickblox chat for react native or creating bridge between ios/android and react native is only option.
I am writing a HTML,CSS,JS code for a portfolio enter image description here I have reviewed my js and html code and I believe they do not have any error
I have included the necessary references for css and js external files in the html file but the js code does not work nor does it give any error
The js code here is responsible to fill the circle/skill bar outline as per the data-percent
I am a beginner and I believe there is a very silly error which I am not able to resolve
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="project2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
<script type="text/javascript" src="project2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Resume</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<div class="resume">
<div class="base">
<div class="profile">
<div class="photo">
<!--<img src="" /> -->
</div>
<div class="info">
<img src="unnamed.png" height="100" width="100">
<h1 class="name">Japnit Singh</h1>
<h2 class="job">Software developer Coop</h2>
</div>
</div>
<div class="about">
<h3>About Me</h3>I'm a web designer for Fiserv, specializing in web design, graphic design, and UX.
Experienced with the Adobe Creative Suite, responsive design, social media management, and prototyping.
</div>
<div class="contact">
<h3>Contact Me</h3>
<div class="call"><a href="tel:2899-255-802"><i class="fa fa-phone"></i><span>2899255802</span></a></div>
<div class="address"><a
href="https://www.google.ca/maps/place/1280+Main+St+W,+Hamilton,+ON+L8S+4L8/@43.2618377,-79.9224208,17z/data=!3m1!4b1!4m5!3m4!1s0x882c84ad20954fad:0x28443fc4bf4d1fe!8m2!3d43.2618377!4d-79.9202321"><i
class="fa fa-map-marker"></i><span>McMaster<br> University</span></a>
</div>
<div class="email"><a href="mailto:singj36@mcmaster.ca"><i class="fa fa-envelope"></i><span>Japnit's
Email</span></a></div>
<div class="email"><a href="mailto:singj36@mcmaster.ca"><i class="fa fa-print"></i><span>Japnit's
Resume</span></a></div>
</div>
<div class="follow">
<h3>Follow Me</h3>
<div class="box">
<a href="https://www.facebook.com/japnit.singh.583" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://www.linkedin.com/in/japnit-singh-41788a157/" target="_blank"><i
class="fa fa-linkedin"></i></a>
<a href="https://github.com/JapnitS" target="_blank"><i class="fa fa-github"></i></a>
</div>
</div>
</div>
<div class="func">
<div class="work">
<h3><i class="fa fa-briefcase"></i>Experience</h3>
<ul>
<li><span>Technical Consultant -<br>Web Design</span><small>Fiserv</small><small>Apr 2018 - Now</small>
</li>
<li><span>Web Designer</span><small>Lynden</small><small>Jan 2018 - Apr 2018</small></li>
<li><span>Intern - Web Design</span><small>Lynden</small><small>Aug 2017 - Dec 2017</small></li>
</ul>
</div>
<div class="edu">
<h3><i class="fa fa-graduation-cap"></i>Education</h3>
<ul>
<li><span>Bachelor of Science<br>Web Design and Development</span><small>BYU-Idaho</small><small>Jan.
2016 - Apr. 2018</small></li>
<li><span>Computer Science</span><small>Edmonds Community College</small><small>Sept. 2014 - Dec.
2015</small></li>
<li><span>High School</span><small>Henry M. Jackson High School</small><small>Jan. 2013 - Jun.
2015</small></li>
</ul>
</div>
<div class="skills-prog">
<h3><i class="fa fa-code"></i>Programming Skills</h3>
<ul>
<li data-percent="100"><span>Python</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="90"><span>C++(OOP)</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="60"><span>JavaScript</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="50"><span>MySQL</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="40"><span>JSON</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="55"><span>Django</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="40"><span>MySQL</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
<li data-percent="80"><span>Bash</span>
<div class="skills-bar">
<div class="bar"></div>
</div>
</li>
</ul>
</div>
<div class="skills-soft">
<h3><i class="fa fa-laptop-code"></i>Software Skills</h3>
<ul>
<li data-percent="90">
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle class="cbar" cx="50" cy="50" r="45"></circle>
</svg><span>Git</span><small>90%</small>
</li>
<li data-percent="75">
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle class="cbar" cx="50" cy="50" r="45"></circle>
</svg><span>Node.js</span><small>75%</small>
</li>
<li data-percent="85">
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle class="cbar" cx="50" cy="50" r="45"></circle>
</svg><span>React.js</span><small>85%</small>
</li>
<li data-percent="65">
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle class="cbar" cx="50" cy="50" r="45"></circle>
</svg><span>Adobe XD</span><small>65%</small>
</li>
</ul>
</div>
<div class="interests">
<h3><i class="fa fa-star"></i>Interests</h3>
<div class="interests-items">
<div class="art"><i class="fa fa-artstation"></i><span>Art</span></div>
<div class="art"><i class="fa fa-book"></i><span>Books</span></div>
<div class="movies"><i class="fa fa-film"></i><span>Movies</span></div>
<div class="music"><i class="fa fa-headphones"></i><span>Music</span></div>
<div class="games"><i class="fa fa-gamepad"></i><span>Games</span></div>
</div>
</div>
</div>
</div>
</html>
JS CODE :
$(".skills-prog li")
.find(".skills-bar")
.each(function (i) {
$(this)
.find(".bar")
.delay(i * 150)
.animate({
width: $(this)
.parents()
.attr("data-percent") + "%"
},
1000,
"linear",
function () {
return $(this).css({
"transition-duration": ".5s"
});
}
);
});
$(".skills-soft li")
.find("svg")
.each(function (i) {
var c, cbar, circle, percent, r;
circle = $(this).children(".cbar");
r = circle.attr("r");
c = Math.PI * (r * 2);
percent = $(this)
.parent()
.data("percent");
cbar = (100 - percent) / 100 * c;
circle.css({
"stroke-dashoffset": c,
"stroke-dasharray": c
});
circle.delay(i * 150).animate({
strokeDashoffset: cbar
},
1000,
"linear",
function () {
return circle.css({
"transition-duration": ".3s"
});
}
);
$(this)
.siblings("small")
.prop("Counter", 0)
.delay(i * 150)
.animate({
Counter: percent
}, {
duration: 1000,
step: function (now) {
return $(this).text(Math.ceil(now) + "%");
}
});
});
}.call(this));
I am working in JavaScript and have a time slider that can be adjusted from both left and right.can some one please suggest how do I handle this ? Found few answers with java but I am looking for solution in JavaScript Thanks.
i have a array like rangeArray = ['0-30','31-60','61-90','91-180']
and array of object is
sales = [
{'product':'soap','range':'0-30','amount':76557}'
{'product':'soap','range':'31-60','amount':78889},
{'product':'soap','range':'61-90','amount':72123}]
and i need result like this
amountArray = [76557,78889,72123,0]
look into the above result missed sales range is to be become as zero
For example if I have array of numbers like 3,5,8,1,2,3 and my input 1 , I want to calculate percentage of times the number is above all other number.
Here is what I coded so far
var arr = [3, 5, 8, 1, 2, 3];
var input = 2;
var counter = 0;
for (var key in arr) {
if (input > arr[key]) counter++;
}
console.log(counter);I just came across this logic , but this does not give percentile between 0 to 100 , and also don't know it will be faster if I run with length of 1000 arrays.
When I see some python codes , its complex and not simple like this.. Please some one guide me to calculate percentile in fastest way possible via javascript.
I have a class Square with a getter method to determine if a square is valid or not. If my square has sides of 1 my code will return true. If my square has 4 sides of 5 it returns false. Can someone explain what is happening?
As you can see I accessed this in the browser and had the following results:
class Square extends Polygon {
get isValid() {
const testArray = Object.values(this);
return (testArray[0] == testArray[1] == testArray[2] == testArray[3]) ? true : false
}
I am trying to remove a property from an Person object like this:
const Person = {
firstname: 'John',
lastname: 'Doe'
}
console.log(Person.firstname);
// Output: "John"
delete Person.firstname;
console.log(Person.firstname);
// Output: undefinedWhen I am using this delete operator is working fine and Person.firstname log is showing as undefined as expected. But when I create a new object using this Person object using Object.create() method like this:
const Person = {
firstname: 'John',
lastname: 'Doe'
}
const Person2 = Object.create(Person);
console.log(Person2.firstname);
// Output: "John"
delete Person2.firstname;
console.log(Person2.firstname);
// expected output: undefined
// actual output: "John"You can see Person2.firstname is returning "John" in the end, when I was expecting it to work same way as done in the first snippet and return undefined.
So, my questions here are:
delete Person2.firstname not working?firstname property from the Person2 object?Thanks for your help.
I'm currently working on a quote form for web design prospects and new to JavaScript and been having a hard time with the JavaScript to determine the Project Completion Date based on the sum of the Project Duration (in # of days) + Project Start Date (Set to Today's Date by default in mm/dd/yyyy format).
Would definitely appreciate an experienced helper to get solve this beginner's problem very much.
function SetDate() {
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = month + "-" + day + "-" +year;
document.getElementById('Date').value = today;
document.getElementById('Project_Start_Date').value = today;
}<td>Projected Duration Estimate**:</td> <td><input type="text" name="Projected Duration" id="Projected_Duration"><label> Days</label></td><td>Project Start Date:</td><td><input type="text" name="Project Start Date" id="Project_Start_Date"></td><td>Project Completion Date:</td><td><input type="text" name="Project Completion Date" id="Project_Completion_Date"></td>I have an array and a function checkMember. I want to check, do the member have in the array? But checkMember function only true if I call checkMember('Cody'). I don't understand. Please help me!
var fe01 = [
{name: 'Giang', fee: 5, fea: 6},
{name: 'Zack', fee: 7, fea: 7},
{name: 'Henry', fee: 8, fea: 8},
{name: 'Cody', fee: 9, fea: 9}
];
function checkMember(name){
var result;
for(var i = 0; i < fe01.length; i++){
console.log(`${fe01[i].name}`)
if(fe01[i].name == name){
//console.log(true);
result = true;
} else{
//console.log(false)
result = false;
}
}
return result;
}
console.log(checkMember('Cody'));//true
console.log(checkMember('Giang'));//false