StoicWanderer
StoicWanderer
Explore posts from servers
KPCKevin Powell - CommunityNNuxtPPrismaKKinde
PostsComments
KPCKevin Powell - Community
Created by StoicWanderer on 10/1/2023 in #front-end
Regex pattern returns true, while inside function returns false
Hello everyone, I am working on a little project to dive deeper into HTML,CSS and Javascript and I came across rpoblem in one of my functions, where I use a fully working regex pattern. I tested it in console.log, it always returns true for the strings i am checking. Here is the pattern: 
const regex = /^[\p{L}\s]+$/giu;
const regex = /^[\p{L}\s]+$/giu;
Now my function in which i am using it always returns true, according to console.log. Here is the code for the function: 
function validateFirstName(firstName) {
    const regex = /^[\p{L}\s]+$/giu;
    console.log(firstName);
    console.log('firstname validation with regex',regex.test(firstName));
    return regex.test(firstName);
};
function validateFirstName(firstName) {
    const regex = /^[\p{L}\s]+$/giu;
    console.log(firstName);
    console.log('firstname validation with regex',regex.test(firstName));
    return regex.test(firstName);
};
Is there something I don't understand here, because when i run the following if statement or simply logging the validateFirstName function, it returns false, regardless the regex pattern. Here is how i checked: 
console.log('Before validateForm');

    if (!validateFirstName(firstName)) {
        console.log('Validation failed');
        alert('First Name must consist of letters and/or spaces');
        return false;
    }

    console.log('Validation passed');
console.log('Before validateForm');

    if (!validateFirstName(firstName)) {
        console.log('Validation failed');
        alert('First Name must consist of letters and/or spaces');
        return false;
    }

    console.log('Validation passed');
58 replies
KPCKevin Powell - Community
Created by StoicWanderer on 9/3/2023 in #front-end
How to create a custom calendar in Javascript(Next.js)
Hello team, I have started creating a custom calendar, fetching data from a CMS I use and displaying it in NExt.js. I am stuck at the point where I need to adjust the displayed days to ending of the previous month. How can i display it in an HTML tbale to start counting from where the last month has ended. Each month has 32-33 days. I've got to the point where I can display the days correctly, but how do i adjust that when the last month ends on the 4th day of the week, then the next month starts at the 5day of the week?
7 replies
KPCKevin Powell - Community
Created by StoicWanderer on 4/23/2023 in #front-end
Z-indexnot working on pseudo-elements
Hello team, I am working on some pseudo-elements with backgroung-images, and my problem is that no matter if i set the ::before and the ::after with pisition: absolute and z-index lower than the parent element, they don't go under the parent element covering my patent element. Why is that? And how can i solve it? 
.tartkozep::before {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -20px;
  z-index: -1;
  background-image: url('/tart-szel.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.tartkozep::after {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 350px;
  z-index: -1;
  background-image: url('/tart-szel.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.tartkozep {
  margin: 0 0;
  width: 100%;
  position: relative;
  top: 20px;
  left: 0px;
  z-index: 1;
  background-image: url('/tart-kozep.jpg');
  background-size: contain;
  background-repeat: repeat-y;
  height: 420px;
}
.tartkozep::before {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -20px;
  z-index: -1;
  background-image: url('/tart-szel.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.tartkozep::after {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 350px;
  z-index: -1;
  background-image: url('/tart-szel.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.tartkozep {
  margin: 0 0;
  width: 100%;
  position: relative;
  top: 20px;
  left: 0px;
  z-index: 1;
  background-image: url('/tart-kozep.jpg');
  background-size: contain;
  background-repeat: repeat-y;
  height: 420px;
}
4 replies