Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
How to keep navbar section link (state=active) after clicking on it?
Having problems keeping the link in active state/highlighted. Thank you!
Code (HTML, CSS, Javascript) can be found here: https://drive.google.com/drive/folders/1SbnbS7SxSFJz_ceuhjhq5vLWtQtz4b45?usp=sharing
So first main has only one child which is why I selected the child blades as var blades = main.children[0]; then I am trying to loop through and just eliminate the children within blades from [3] through [7] but for some reason when doing this on the console it won’t work.
function deleteBlades() {
var main = document.getElementById("id-9a1e3f8f48548d4c2c422b1f92cb749a");
var blades = main.children[0];
for (var i = 0; i < blades.length; i++) {
if( i >= 3 || i <= 7)
{
blades.children[i].remove();
}
}
}
deleteBlades();
Any ideas on what am I doing wrong?
I want to programmatically update the value of an AngulrJS input field model with plain javascript from the browser console.
If I just use element.value = 0.5 it displays the new value but doesnt update the real model value that is associated with the input. Therefore no update event is triggered. Is this possible through the console?
I’m having an issue with saving a file and I can’t tell why it’s not working. This is original code. I believe I’m commenting out the variables incorrectly or adobe syntax is incorrect. Does anyone have experience with this? (part that is broken: ,app.activeDocument.saveAs(File('"+psdpath+"'/' + doc.name.replace('PLACEHOLDER', '"+parentdirectory+"'))";). Quote variations are important otherwise it doesn’t properly send to illustrator.
Full script:
#target photoshop
//run action in photoshop
app.doAction ("action name", "action set name");
//get path of the open document
var psdpath = activeDocument.path.fsName;
//get directory name of psd, to use in filename later
var parentdirectory = activeDocument.path.name;
//start bridgetalk
var bt = new BridgeTalk;
//targets version 25. v26 crashes if window isnt active at run
bt.target = "illustrator-25";
//run action in illustrator (which opens an eps w/linked file and performs certain tasks) and then save the document
var script = "app.doScript('action name', 'action set name'),app.activeDocument.saveAs(File('"+psdpath+"'/' + doc.name.replace('PLACEHOLDER', '"+parentdirectory+"'))";
//the entire action must be within double quotes
// var script = alert("test", "this sends alert to photoshop");
// var script = "alert('test', 'this sends alert to illustrator'),alert('"+psdpath+"', '"+psdpath+"')"; //psdpath is properly sent to illustrator
bt.body = script;
bt.send();
Im new to JavaScript and programming anything other than a basic programs in general. I figure that building something is a good way to learn.
At the moment I’m trying to use the Youtube Data API. What I want to do is use OAuth to pull a list of subscriptions from any Youtube account that’s authorized and save it in an array. I followed the JavaScript Quickstart on the Google Developers website. That was easy enough to do. I added code that stores key/value pairs from ‘title’ into an array called ‘allSubs’
<script>
/**
* Sample JavaScript code for youtube.subscriptions.list
* See instructions for running APIs Explorer code samples locally:
* https://developers.google.com/explorer-help/code-samples#javascript
*/
allSubs = [];
function authenticate() {
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
.then(function() { console.log("Sign-in successful"); },
function(err) { console.error("Error signing in", err); });
}
function loadClient() {
gapi.client.setApiKey("API_KEY");
return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then(function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); });
}
// Make sure the client is loaded and sign-in is complete before calling this method.
function execute() {
return gapi.client.youtube.subscriptions.list({
"part": [
"snippet,contentDetails"
],
"maxResults": 50,
"mine": true,
"order": "alphabetical"
})
.then(function(response) {
// Handle the results here (response.result has the parsed body).
items = response.result.items;
itemsLength = items.length;
for (i=0; i<itemsLength; i++){
x = response.result.items[i].snippet.title;
allSubs.push(x);
}
console.log(allSubs);
},
function(err) { console.error("Execute error", err); });
}
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: "CLIENT_ID"});
});
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
The issue I ran into is pagination. The limit on ‘maxResults’ is 50. If you subscribe to more than 50 channels, the code won’t pick them up. I have to use ‘nextPageToken’ to loop through as many times as needed to get the full list.
I read the Google Developer ‘Implementation: Pagination’ page but I didn’t find it helpful. I then read many forums (including this one) and watched many videos that covered the topic. The closest I have gotten is the following code:
<script>
/**
* Sample JavaScript code for youtube.subscriptions.list
* See instructions for running APIs Explorer code samples locally:
* https://developers.google.com/explorer-help/code-samples#javascript
*/
var allSubs = [];
function authenticate() {
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
.then(function() { console.log("Sign-in successful"); },
function(err) { console.error("Error signing in", err); });
}
function loadClient() {
gapi.client.setApiKey("API_KEY");
return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then(function() { console.log("GAPI client loaded for API"); },
function(err) { console.error("Error loading GAPI client for API", err); });
}
// Make sure the client is loaded and sign-in is complete before calling this method.
function execute(pageToken, finished) {
request = gapi.client.youtube.subscriptions.list({
"part": [
"snippet,contentDetails"
],
"maxResults": 50,
"mine": true,
"order": "alphabetical",
pageToken: pageToken
});
request.execute(function(response) {
items = response.result.items;
itemsLength = items.length;
for (i=0; i<itemsLength; i++){
x = response.result.items[i].snippet.title;
//y = response.result.items[i].snippet.resourceId.channelId;
//z = [x,y];
allSubs.push(x);
}
if (!response.nextPageToken)
finished();
else
execute(response.nextPageToken, finished);
});
console.log(allSubs);
}
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: "CLIENT_ID"});
});
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>
The good news is I have a complete list now.
But now I have two new problems.
On top of giving me the array I wanted I also have a number of other arrays that are subsets of the main array in 50 intervals. I want a single array. I’m clearly messing up the loop somehow. Maybe the scope is incorrect but I haven’t been able to figure it out; and
I get an error that says ‘example.html:48 Uncaught TypeError: finished is not a function’. Makes sense since I had never defined ‘finished()’. But the code doesn’t seem to work if I don’t include this function. I have no idea why.
Any help would be greatly appreciated, either about this specific problem or about program problem solving generally. There’s probably an easy solution that I’m oblivious to. Again Im a beginner and am probably making some dumb mistakes here. But I figure failing is a good way to learn.
I have implemented a leaflet vue map by following this link: https://vue2-leaflet.netlify.app/quickstart/#hello-map and also this git repo guide:
https://github.com/CodingGarden/colorado-covid-vaccine-map
I have a map with some pin/marker, but I want to create my own custom marker with like round circle and have some initiial in it ( please see image below),
have tried certain things but is not working.
Any help will be appreciated. Thanks in Advance!
my code:
circleMarker = LMarker.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}),
data() {
return {
// more data here
//iconUrl: "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png",
iconUrl: circleMarker,
}
}
//And adding the iconUrl in the <l-icon component:
<l-marker v-for="place in places" :key="place.address" :lat-lng="[place.location.latitude, place.location.longitude]">
<l-icon :icon-url="iconUrl" :icon-size="iconSize" class="dl-marker" />
<l-popup>
// some code here
</l-popup>
</l-marker>
I want to replace the ‘P’ marker with round circle marker with name initial as below ( second image);
I need to display a lot of images in a web page, NFTs images.
I have a list of 8000 CIDs of json files saved in IPFS, I need to display those images in a webpage.
How can I do this?
Let’s say that I need to display 10 images at a time, can I fecth the first 10 images from the file and query IPFS then the next 10 images when the user changes page to see the next 10 images?
So I will deploy my html code with my js code AND this big json file with 8000 entries (simple strings as I said)…is this doable? Is this the right way to handle things?
When I load the page the scroll is set at the top but after refreshing pressing F5 the scroll goes to the bottom.
Is there anybody who experience that wired thing?
If so, Please let me know.
I Have two Array of Objects :
Array 1:
"salesData": [
{
"id": "weekly",
"labelName": "WEEKLY",
"chartData": {
"dataSets": [
{
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"borderColor": "#951DAC",
"backgroundColor": "#951DAC",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"borderColor": "#FA9610",
"backgroundColor": "#FA9610",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
}
]
}
},
{
"id": "monthly",
"labelName": "MONTHLY",
"chartData": {
"dataSets": [
{
"id": "target-qty",
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "net-sales",
"borderColor": "#951DAC",
"backgroundColor": "#951DAC",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "gap",
"borderColor": "#FA9610",
"backgroundColor": "#FA9610",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
}
]
}
}
]
Array 2 :
"salesData": [
{
"id": "weekly",
"chartData": {
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"id": "target-qty",
"type": "bar",
"label": "Target Qty",
"data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
},
{
"id": "net-sales",
"type": "bar",
"label": "Net Sales Qty",
"data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
},
{
"id": "gap",
"type": "line",
"label": "Gap",
"data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]
}
]
}
},
{
"id": "monthly",
"chartData": {
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"id": "target-qty",
"type": "bar",
"label": "Target Qty",
"data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
},
{
"id": "net-sales",
"type": "bar",
"label": "Net Sales Qty",
"data": [450, 480, 379, 325, 425, 287, 274, 499, 333, 401, 123, 444]
},
{
"id": "gap",
"type": "line",
"label": "Gap",
"data": [450, 480, 470, 420, 425, 436, 401, 411, 422, 433, 499, 444]
}
]
}
}
]
I need to merge these, to eventually get this array (Basically the Datasets have to be merged into one) :
Expected Result –
"salesData": [
{
"id": "weekly",
"chartData": {
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"id": "target-qty",
"type": "bar",
"label": "Target Qty",
"data": [
450,
480,
379,
325,
425,
287,
274,
499,
333,
401,
123,
444
],
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "net-sales",
"type": "bar",
"label": "Net Sales Qty",
"data": [
450,
480,
379,
325,
425,
287,
274,
499,
333,
401,
123,
444
],
"borderColor": "#951DAC",
"backgroundColor": "#951DAC",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "gap",
"type": "line",
"label": "Gap",
"data": [
450,
480,
470,
420,
425,
436,
401,
411,
422,
433,
499,
444
],
"borderColor": "#FA9610",
"backgroundColor": "#FA9610",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
}
]
}
},
{
"id": "monthly",
"labelName": "TARGET",
"chartData": {
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"datasets": [
{
"id": "target-qty",
"type": "bar",
"label": "Target Qty",
"data": [
950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
],
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "net-sales",
"type": "bar",
"label": "Net Sales Qty",
"data": [
950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
],
"borderColor": "#951DAC",
"backgroundColor": "#951DAC",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
},
{
"id": "gap",
"type": "line",
"label": "Gap",
"data": [
950, 980, 379, 325, 925, 287, 279, 999, 333, 901, 123, 999
],
"borderColor": "#FA9610",
"backgroundColor": "#FA9610",
"fill": "false",
"pointRadius": "3",
"pointHoverRadius": "4",
"borderWidth": "2"
}
]
}
}
]
I have tried the following and other various permutations/combinations, checked out many answers on this site but none worked:
if (salesLabelData?.salesData && salesAPIData?.salesData) {
const array1 = salesLabelData.salesData;
const array2 = salesAPIData.salesData;
array1?.map((data, index) => {
if (data.id === array2[index].id) {
const labelData = {
...data,
...array2[index],
};
salesBarChartData.push(labelData);
}
return salesBarChartData;
});
}I am missing something, not sure what and hence am not able to get the desired result, Any Help is sincerely appreciated.
I have written this code using Tailwind CSS.
I am trying to build something similar to the horizontal container from unsplash.com
Suppose the category array has about 15 strings contained.
<ul className="flex items-center overflow-scroll whitespace-nowrap">
<button onClick={(e) => console.log(e)}>
<Chevron_left className="mr-2 w-3" />
</button>
{categories.map((category, i) => (
<li
key={i}
className="rounded-full border border-gray-300 px-2 hover:bg-slate-100"
>
<button>{category}</button>
</li>
))}
<button>
<Chevron_right className="ml-2 w-3" />
</button>
</ul>
I’m not quite sure why but I’m getting the aforementioned error when execution hits the ‘setFormMessage()’ function. Inside this function, I have a ‘classList.remove’ method that is supposed to remove any current messages in the form if any, then add any new errors to the form. Obviously, it’s not working.
Here is pertinent code:
index.html
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<h3 class="form_message form__message--success"></h3>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" id="firstName" class="form__input" autofocus placeholder="First Name">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" id="lastName" class="form__input" autofocus placeholder="Last Name">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" id="signupEmail" class="form__input" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" id="signupPassword" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" id="confirmPassword" class="form__input" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
<a class="form__link" href=".." id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
index.js
let firstName = '';
let lastName = '';
let email = '';
let password = '';
let confirmPassword = '';
//signing new users up
const signupForm = document.querySelector('#createAccount');
signupForm.addEventListener('submit', (e) => {
e.preventDefault();
//get user info
firstName = signupForm['firstName'].value
lastName = signupForm['lastName'].value
email = signupForm['signupEmail'].value
password = signupForm['signupPassword'].value
confirmPassword = signupForm['confirmPassword'].value
if (validate(firstName, lastName, email, password)) {
console.log('user created', email);
}
createUserWithEmailAndPassword(auth, email, password)
.then((cred) => {
console.log('creating user credentials in firebase')
})
.catch((err) => {
const errorCode = err.code
const errorMessage = err.message
console.log(errorCode + " " + errorMessage)
})
let createdNote = 'User successfully created';
setSuccess(signupForm, createdNote)
}); //end signupForm
//signing in existing users
const logInForm = document.querySelector('#login');
logInForm.addEventListener('submit', (e) => {
e.preventDefault();
email = logInForm['signInUserName'].value
password = logInForm['signInPassword'].value
signInWithEmailAndPassword(auth, email, password)
.then((cred) => {
if (validate(email, password)) {
console.log("user signed in ", cred.user)
logInForm.reset()
}
})
.catch((err) => {
console.log(err.message)
setFormMessage(logInForm, "error", err.message);
//setInputError(logInForm, "error", err.message)
})
console.log("logInForm: " + firstName, lastName, email);
});
function setFormMessage(formElement, type, message) {
console.log('entering setFormMessage function')
const messageElement = document.getElementsByClassName(".form__message");
messageElement.textContent = message;
//****************************************************************************
// **error occurs on the next line here:**
// Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
//****************************************************************************
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
console.log('entering setInputError function');
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
console.log('entering clearInputError function')
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
function setSuccess(inputElement, message) {
console.log('entering setSuccess function')
inputElement.classList.add("form__message--success");
inputElement.parentElement.querySelector(".form_message--success").textContent = message;
}
function validate(firstName, lastName, email, password) {
console.log('entering validate function')
let nameregex = /[a-zA-Z]+/;
let emailregex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
let passwordregex = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/;
let confirmPW = confirmPassword;
let lowerCaseLetters = /[a-z]/g;
let upperCaseLetters = /[A-Z]/g;
let numbers = /[0-9]/g;
let specialChar = /[!@#$%&’*]/g;
if (!nameregex.test(firstName)) {
console.log('problem with firstName')
alert("the name should only contain alphabetical characters");
return false;
}
if (!nameregex.test(lastName)) {
console.log('problem with lastName')
alert("the name should only contain alphabetical characters");
return false;
}
if (!emailregex.test(email)) {
let message = 'Please enter a valid email address.'
setFormMessage('createAccount', 'error', message);
return false;
}
if (!passwordregex.test(password)) {
console.log('problem with password')
let message = "passwords must contain at least one of each: upper and lower case letters, " +
"numbers and special characters."
setFormMessage('createAccount', 'error', message);
return false;
}
if (confirmPW !== password) {
console.log('passwords don't match')
let message = "passwords don't match."
setSuccess("createAccount", 'error', message)
}
return true;
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
//setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", e => {
clearInputError(inputElement);
});
});
});
main.css
body {
--color-primary: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-error: #cc3333;
--color-success: #4bb544;
--border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
background-size: cover;
}
.container {
width: 400px;
max-width: 400px;
margin: 1rem;
padding: 2rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background: #ffffff;
}
.container,
.form__input,
.form__button {
font: 500 1rem 'Quicksand', sans-serif;
}
.form--hidden {
display: none;
}
.form > *:first-child {
margin-top: 0;
}
.form > *:last-child {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
}
.form__message {
text-align: center;
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
color: var(--color-error);
}
.form__input-group {
margin-bottom: 1rem;
}
.form__input {
display: block;
width: 100%;
padding: 0.75rem;
box-sizing: border-box;
border-radius: var(--border-radius);
border: 1px solid #dddddd;
outline: none;
background: #eeeeee;
transition: background 0.2s, border-color 0.2s;
}
.form__input:focus {
border-color: var(--color-primary);
background: #ffffff;
}
.form__input--error {
color: var(--color-error);
border-color: var(--color-error);
}
.form__input-error-message {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: #ffffff;
border: none;
border-radius: var(--border-radius);
outline: none;
cursor: pointer;
background: var(--color-primary);
}
.form__button:hover {
background: var(--color-primary-dark);
}
.form__button:active {
transform: scale(0.98);
}
.form__text {
text-align: center;
}
.form__link {
color: var(--color-secondary);
text-decoration: none;
cursor: pointer;
}
.form__link:hover {
text-decoration: underline;
}
Where did I go wrong? Thanks in advance.I have tried using remove(...MessageElement.classList); based on SO research at Clear element.classList
In fact, if I comment out that line of code, the error goes on to the following line and identifies “classList.add()” as the culprit.
Please help me understand the problem.
I am looking for a pattern match with certain string before and after the uuid.
e.g.user/a24a6ea4-ce75-4665-a070-57453082c256/photo/a24a6ea4-ce75-4665-a070-57453082c256
const regexExp = new RegExp(/^user/[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i);
console.log(regexExp.test("user/a24a6ea4-ce75-4665-a070-57453082c256")); // true
console.log(regexExp.test("user/a24a6ea4-ce75-4665-a070-57453082c256/photo")); // false
What I am expecting is to match user/{uuid}/* How to use a wildcard after the uuid?
The question requires us to create two objects of the Student class and have 5 variables. The variables will be assigned a value each through user input.
I was wondering if there is any way to use a loop or anything else to take the user inputs from there instead of writing each variable individually using the dot operator.
Here is the code:
public class Main{
public static void main(String[] args) {
Scanner input = new Scanner(System.in);
Student student1 = new Student();
Student student2 = new Student();
//Input for student 1
student1.name = input.nextLine();
student1.gender = input.next().charAt(0);
student1.cgpa = input.nextDouble();
student1.roll[0] = input.nextInt();
student1.age = input.nextInt();
//Input for student 2
student2.name = input.nextLine();
student2.gender = input.next().charAt(0);
student2.cgpa = input.nextDouble();
student2.roll[0] = input.nextInt();
student2.age = input.nextInt();
}
}
class Student{
String name;
char gender;
double cgpa;
int[] roll;
int age;
}
When i console.log the winConditions array it shows all zeroes when its supposed to have some 1’s in it aswell.
I’m changing the value of a, b and c at the click event listener but idk why they are not changing
Someone please help me
let a = 0,
b = 0,
c = 0,
d = 0,
e = 0,
f = 0,
g = 0,
h = 0,
i = 0;
const test = document.querySelector(".gameboard");
test.addEventListener("click", () => {
a = 1;
b = 1;
c = 1;
gameBoard.applyWinConditions;
console.log(gameBoard.winConditions)
gameBoard.gameFlow.checkScore();
});
const gameBoard = (() => {
let gameBoard = {};
let applyWinConditions = () => {
gameBoard.winConditions = [[a, b, c], [a, d, g], [a, e, i], [b ,e, h], [c, e, g], [c, f, i], [d, e, f], [g, h, i]];
return gameBoard.winConditions;
}
const gameFlow = (function() {
const _isEveryElementOne = (arr) => {
return arr.every(el => el === 1)
}
const _announceWinner = () => console.log("game ends");
return {
checkScore: () => {
console.log(gameBoard.winConditions);
if (gameBoard.winConditions.some(cond => _isEveryElementOne(cond))) return _announceWinner()
console.log("game continues")
},
};
})();
return {
gameFlow,
applyWinConditions: applyWinConditions(),
winConditions: gameBoard.winConditions,
}
})();
gameBoard.applyWinConditions;
console.log(gameBoard.applyWinConditions)
I’m working on React based on NextJS code.
If I manually enter values in form fields and submit the form, I get all the values in the component function.
But if I dynamically display values in a form field like value={query.campaignid}, the component does not collect any value.
import { Button, Input } from "@chakra-ui/react";
import { Field, Form, Formik } from "formik";
import { useRouter } from "next/router";
export default function FormikExample() {
const { query } = useRouter();
return (
<>
<Formik
initialValues={
{
// campaignid: " ",
}
}
onSubmit={(values) => {
setTimeout(() => {
console.log(values);
});
}}
>
{(props) => (
<Form>
<Field name="campaignid">
<Input value={query.campaignid} />
</Field>
<Button id="submited" isLoading={props.isSubmitting} type="submit">
Submit
</Button>
</Form>
)}
</Formik>
</>
);
}