Category: javascript

There is function called getTimeRemaining, which shows always 15 minutes in countdown in pop-up banner. Banner is injected to the website via JS SDK. Problem is, banner shows always multiplied numbers in countdown after refresh. I call the function in another function, but i dont know, why is javascript remembering first number even after refresh, when there is no session/localStorage. Can you help me? Whan can i do to prevent this?

   return (function insertBanner(data) {
insertBanner.inPreview = false;
insertBanner.sdk = window.exponea;
insertBanner.data = data;
insertBanner.html = "<div class="weblayer--box-countdown">n    <div class="inner">n        <button aria-label="Close" class="close">n            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">n                <path d="M2.99867 13L12.998 3" stroke="rgba(255,255,255,0.5)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>n                <path d="M12.9987 13L2.998 3" stroke="rgba(255,255,255,0.5)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>n            </svg>n        </button>n        <h2 class="title">WINTER SALE</h2>n        <div class="countdown">n            <div class="time" style="display:none">n                <div class="number hours">00</div>n                <div class="unit">Hours</div>n            </div>n            <div class="time">n                <div class="number minutes">00</div>n                <div class="unit">Minutes</div>n            </div>n            <div class="time">n                <div class="number seconds">00</div>n                <div class="unit">Seconds</div>n            </div>n        </div>n        <h3 class="subtitle">Complete your order in 15 minutes and GET 15% OFF all eyewear.</h3>n        <div class="discount">n        t<p>use code: n        tt<span>GET15</span>n        t</p>n        t<button class="main-cta">COPY</button>n        </div>n        <p class="close-text">No, thank you, Iu2019d rather pay full price.</p>n    </div>n</div>";
insertBanner.style = "@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");n/*n * Jinja Params Start. Do not edit these values.n */nnnnnnnnnnnnnnnnnn/*n * Jinja Params Endn */n.weblayer--box-countdown {n  display: flex;n  box-sizing: border-box;n  font-family: "Lato", Arial, Helvetica, sans-serif;n  font-size: 1rem;n  /* to prevent inheriting fs of element it's appended to */n  line-height: normal;n  text-decoration: inherit;n  cursor: default;n  position: fixed;n  z-index: 2147483000;n  /* close to the highest possible z-index */n  width: 540px;n  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.4);n  border-radius: 5px;n  margin: 10px;n  overflow: hidden;n  background-color: #194E48;n  padding: 20px 0px;n}n.weblayer--box-countdown * {n  box-sizing: border-box;n}n.weblayer--box-countdown.horizontal-left {n  left: 0;n}n.weblayer--box-countdown.horizontal-right {n  right: 0;n}n.weblayer--box-countdown.horizontal-center {n  left: 50%;n  transform: translateX(-50%);n}n.weblayer--box-countdown.vertical-top {n  top: 0;n}n.weblayer--box-countdown.vertical-bottom {n  bottom: 0;n}n.weblayer--box-countdown.vertical-center {n  top: 50%;n  transform: translateY(-50%);n}n.weblayer--box-countdown.vertical-center.horizontal-center {n  transform: translate(-50%, -50%);n}n.weblayer--box-countdown > .inner {n  flex-wrap: wrap;n  display: flex;n  width: 100%;n  flex-direction: column;n  align-items: center;n  justify-content: center;n  padding: 1.5em;n  text-align: center;n  position: relative;n}n.weblayer--box-countdown > .inner > .close {n  /* inherits fs of 1rem defined in base styles */n  font-size: inherit;n  line-height: 1px;n  /* resets browser styles for button */n  color: transparent;n  background-color: transparent;n  top: -20px;n  right: 0;n  padding: 0.5em;n  /* resets browser styles for button */n  border: 0;n  position: absolute;n  /* base class + 1 to prevent colliding of layers of clickable elements */n  z-index: 2147483001;n}n.weblayer--box-countdown > .inner > .close:hover {n  cursor: pointer;n}n.weblayer--box-countdown > .inner > .close:focus {n  outline: none;n}n.weblayer--box-countdown > .inner .title {ntfont-family: 'Lato';ntfont-style: normal;ntfont-weight: bold;ntfont-size: 38px;ntline-height: 23px;nttext-align: center;ntcolor: #55DAB1;n}n.weblayer--box-countdown > .inner .subtitle {ntfont-family: 'Lato';ntfont-style: normal;ntfont-weight: bold;ntfont-size: 16px;nttext-align: center;ntcolor: #FFFFFF;ntpadding: 0 20%;n}n.weblayer--box-countdown > .inner .countdown {n  display: flex;n  justify-content: space-around;n  width: 100%;n  margin: 1.5em 0;n  padding: 0 25%;n}n@supports (display: grid) {n  .weblayer--box-countdown > .inner .countdown {n    display: grid;n    grid-template-columns: repeat(auto-fit, minmax(calc( 270px/3 - 3em), 1fr));n    grid-gap: 0.5em;n  }n}n.weblayer--box-countdown > .inner .countdown .time {n  n  font-family: Lato;n  n  background: #55DAB1;n  border-radius: 0;n  padding: 0.5em;n  color: #194E48;n  text-align: center;n  margin: 0 5pxn}n.weblayer--box-countdown > .inner .countdown .time .number {n  font-family: inherit;n  font-size: 50px;n  font-weight: 700;n  line-height: 1.3;n}n.weblayer--box-countdown > .inner .countdown .time .unit {n  font-family: inherit;n  font-size: 14px;n  font-weight: 400;n  line-height: 1.3;n  display: nonen}n.weblayer--box-countdown > .inner .btn {n  width: 100%;n  font-family: inherit;n  background: transparent;n  border: none;n  text-decoration: none;n  margin: 0;n  user-select: none;n  outline: none;n  color: #FFFFFF;n  background: #F84CAC;n  border-radius: 8px;n  cursor: pointer;n  n  font-family: Lato;n  n  font-size: 15px;n  font-weight: 900;n  line-height: 1.3;n  padding: 0.75em 1.5em;n}n.weblayer--box-countdown > .inner .btn:hover {n  filter: brightness(110%);n}n.weblayer--box-countdown > .inner .btn:focus {n  outline: none;n}n.weblayer--box-countdown .discount {n  width: 80%;n  background-color: #0D3C36;n  display: flex;n  flex-flow: row;n  font-family: 'Lato',sans-serif;n  justify-content: space-evenly;n  align-items: center;n  padding: 10px;n}nn.weblayer--box-countdown .discount p {n  font-style: normal;n  font-weight: normal;n  font-size: 16px;n  text-align: center;n  color: #fff;n}n.weblayer--box-countdown .discount span{n  color: #55DAB1;n}n.weblayer--box-countdown .discount .main-cta{n  width: 140px;n  height: 35px;n  background-color: #fff;n  border: none;n  cursor: pointer;n}nn.weblayer--box-countdown .close-text {ntcolor: #fff;nttext-decoration:underline;ntcursor: pointer;ntmargin-top: 20px;n}nn@media screen and (max-width: 600px) {nt.weblayer--box-countdown {nttwidth: 90%;nttmargin: 0;nt}nt.weblayer--box-countdown {nttflex-wrap: nowrap;tnt}nt.weblayer--box-countdown > .inner .countdown {nttdisplay: flex;nt}n}n";
insertBanner.script = function() { /**
 * Universal parameters
 */
var PARAM_showAfter = parseInt("0", 10);
var PARAM_removeAfter = parseInt("0", 10);
var PARAM_trigger = "On entry";
var PARAM_parentElement = "body";
var PARAM_positionVertical = "Center";
var PARAM_positionHorizontal = "Center";
var PARAM_enterAnimation = "None";

/**
 * Template specific parameters
 */
 
//var d = new Date();
//var PARAM_countdownDate = d.setHours(24,0,0,0) / 1000;

/*
if (PARAM_countdownDate === -1) {
    PARAM_countdownDate = +new Date() / 1000 + 3500;
}
*/

/**
 * Initialization
 */
 
var self = this;

self.clockInterval = NaN;

// Helper Id used to identify the banner on the website, not actual ID of the banner
var bannerSemiId = Math.random().toString(36).substring(5);

// Used in onExit banners to mark if the banner was triggered already
window['__exp_triggered-' + bannerSemiId] = false;

// Resetting some of the parameters while previewing the banner in the app to easily see its appearance
if (self.inPreview) {
    // reset the show delay while editing the banner in editor
    PARAM_showAfter = 0;

    // always append the banner to the body itself
    PARAM_parentElement = 'body';

    // always show the banner right away
    PARAM_trigger = 'On entry';
}

/**
 * Basic functions
 */

/**
 * Function used to register listener for the trigger that will display the banner
 */
function registerStartTrigger() {
    if (PARAM_trigger === 'On exit') {
        document.body.addEventListener('mouseout', onExitMouseOutHandler);
    } else if (PARAM_trigger === 'On scroll') {
        window.addEventListener('scroll', scheduleShowBanner);
    } else {
        // If 'On entry' or anything unknown start the banner right away
        scheduleShowBanner();
    }
}

/**
 * This function starts the showAfter timer and then displays the banner
 */
function scheduleShowBanner() {
    window.removeEventListener('scroll', scheduleShowBanner);

    setTimeout(function() {
        // Track show event after timer expired
        trackEvent('show', false);

        // Create and display the banner
        requestAnimationFrame(createBanner);

        // If removeAfter is provided start the removal timer
        if (PARAM_removeAfter > 0) {
            setTimeout(function() {
                removeBanner();
            }, PARAM_removeAfter);
        }
    }, PARAM_showAfter);
}

/**
 * Function used to insert the banner contents into the HTML and adding basic functionality
 */
function createBanner() {
    var placeholder = document.createElement('div');
    placeholder.insertAdjacentHTML('afterbegin', self.html);

    // get the banner reference
    var banner = placeholder.firstElementChild;

    // add close functionality to the close button
    banner.querySelector('.close').onclick = handleCloseButtonClick;

    // add classes specifying banner position and animation
    banner.className += ' ' + getPositionAndAnimationClasses();

    // insert banner CSS into the website
    banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');

    // track clicking on <a> in the banner
    var links = banner.querySelectorAll('a');
    for (var i = 0; i < links.length; i++) {
        trackLink(links[i], 'click', true);
    }
    
    banner.querySelector(".main-cta").addEventListener("click", copy_function);
    banner.querySelector(".close-text").addEventListener("click", removeBanner);
    
    //var minutesToAdd=15;
    //var currentDate = new Date();
    
    //var dt1 = (new Date()).getTime();
    //var PARAM_countdownDate = dt1+900000;
    var PARAM_countdownDate = new Date((new Date().getTime()) + 15*60000);
    
    //elf.clockInterval = NaN;
    //self.clockInterval = 0;
    self.clockInterval = initializeClock(banner, PARAM_countdownDate);
    
    attachBannerToDom(banner);
    console.log(self);
}

function copy_function() {
    var copyText = document.querySelector(".weblayer--box-countdown .discount span");
    var textArea = document.createElement("textarea");
    textArea.value = copyText.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
    textArea.remove();
}

/**
 * Function used to insert the banner HTML to the DOM
 * @param banner - html content of the banner
 */
function attachBannerToDom(banner) {
    var parentElement = document.querySelector(PARAM_parentElement);

    parentElement.insertAdjacentElement('afterbegin', banner);
    self.banner = banner;
}

/**
 * Creates banner in shadow dom
 * @param parentElement
 */
function createBannerInShadowDom(banner, parentElement) {
    var shadowHost = document.createElement('div');
    shadowHost.innerHTML = getFontsImport();

    var shadowRoot = shadowHost.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(banner);
    parentElement.insertAdjacentElement('afterbegin', shadowHost);
    self.banner = shadowHost;
}

/**
 * Function used to add fonts import to element
 * The font import does not work inside shadow DOM, it has to be declared outside
 * @returns string - style tag with fonts import
 */
function getFontsImport() {
    var results = self.style.match(/@import url(["'].+?['"])/g);
    return results && results.length ? '<style>' + results.join(';') + ';</style>' : '';
}

/**
 * Function used to remove the banner from the website
 */
function removeBanner() {
    if (self.banner && self.banner.parentNode) {
        self.banner.parentNode.removeChild(self.banner);
    }

    if (!isNaN(self.clockInterval)) {
        clearInterval(self.clockInterval);
        self.clockInterval = NaN;
    }
}

/**
 * Function triggered when the closing button is clicked
 * @param event - browser click Event
 * @returns {boolean}
 */
function handleCloseButtonClick(event) {
    removeBanner();
    trackEvent('close', true);

    // Stop the click event propagation onto parent HTML elements
    event.preventDefault();
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }

    return false;
}

/**
 * Function used to track single action
 * @param action - string
 * @param interactive - boolean
 */
function trackEvent(action, interactive) {
    self.sdk.track('banner', getEventProperties(action, interactive));
}

/**
 * Function used to add action tracking to element
 * @param link - element
 * @param action - string
 * @param interactive - boolean
 */
function trackLink(link, action, interactive) {
    var eventData = getEventProperties(action, interactive);
    eventData.link = link.href;
    self.sdk.trackLink(link, 'banner', eventData);
}

/**
 * Default attributes tracked with every banner event
 * @param action - string
 * @param interactive - boolean
 * @returns object - object to be tracked
 */
function getEventProperties(action, interactive) {
    return {
        action: action,
        banner_id: self.data.banner_id,
        banner_name: self.data.banner_name,
        banner_type: self.data.banner_type,
        variant_id: self.data.variant_id,
        variant_name: self.data.variant_name,
        interaction: interactive !== false,
    };
}

/**
 * Function used to start banners with onExit trigger
 * @param event - browser mouse event
 */
function onExitMouseOutHandler(event) {
    event = event ? event : window.event;
    var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    if (event.clientX >= (vpWidth)) {
        return;
    }
    if (event.clientY >= 50) {
        return;
    }
    var from = event.relatedTarget || event.toElement;

    if (!from && !window['__exp_triggered-' + bannerSemiId]) {
        window['__exp_triggered-' + bannerSemiId] = true;
        scheduleShowBanner();
    }
}

/**
 * Function that returns correct class
 */
function getPositionAndAnimationClasses() {
    var verticalClass = {
        Top: 'vertical-top',
        Center: 'vertical-center',
        Bottom: 'vertical-bottom',
    }[PARAM_positionVertical] || '';

    var horizontalClass = {
        Left: 'horizontal-left',
        Center: 'horizontal-center',
        Right: 'horizontal-right',
    }[PARAM_positionHorizontal] || '';

    var enterAnimationClass = {
        'Fade in': 'enter-fade',
        'Slide in': {
            Top: {
                Left: 'enter-slide-left',
                Center: 'enter-slide-up',
                Right: 'enter-slide-right',
            }[PARAM_positionHorizontal],
            Center: {
                Left: 'enter-slide-left',
                Center: 'enter-slide-up',
                Right: 'enter-slide-right',
            }[PARAM_positionHorizontal],
            Bottom: {
                Left: 'enter-slide-left',
                Center: 'enter-slide-down',
                Right: 'enter-slide-right',
            }[PARAM_positionHorizontal],
        }[PARAM_positionVertical],
    }[PARAM_enterAnimation] || '';

    return verticalClass + ' ' + horizontalClass + ' ' + enterAnimationClass;
}

/**
 * Template specific functions
 */

/**
 * Returns the remaining time of the countdown
 */
function getTimeRemaining(endtime) {
    var t = endtime - (new Date() / 1000);
    var seconds = Math.floor(t % 60);
    var minutes = Math.floor((t / 60) % 60);
    var hours = Math.floor((t / (60 * 60)) % 24);
    var days = Math.floor(t / (60 * 60 * 24));
    return {
        total: t,
        days: Math.max(days, 0),
        hours: Math.max(hours, 0),
        minutes: Math.max(minutes, 0),
        seconds: Math.max(seconds, 0),
    };
}

/**
 * Initializes the interval that updates the remaining time in the banner
 */
function initializeClock(banner, endtime) {
    //var hoursSpan = banner.querySelector('.hours');
    var minutesSpan = banner.querySelector('.minutes');
    var secondsSpan = banner.querySelector('.seconds');
    function updateClock() {
        var t = getTimeRemaining(endtime);
        //hoursSpan.innerHTML = ('0' + (t.hours + 24 * t.days)).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
        if (t.total <= 0 && self.inPreview !== true) {
            removeBanner();
        }
    }
    updateClock();
    return setInterval(updateClock, 1000);
}

/**
 * Register the start trigger and return required removal function
 */

registerStartTrigger();
return {
    remove: removeBanner,
}; };
insertBanner.remove = (insertBanner.script.call(insertBanner) || {} ).remove;
insertBanner.contextual_personalization = {};
return insertBanner;
})({"banner_group": "", "banner_id": "61f861078e99733a5b05d0cd", "banner_name": "AB - on-exit banner SK", "banner_type": "countdown", "variant_id": 0, "variant_name": "Variant A"});

I am trying to call a asyncronimous function inside a useEffect hook in order to avoid refetching my datas at every re-render but by doing that, my datas dosen’t update before the next re-render.

My datas should load a chart, so basically my chart shows up only after re-render.

const [PricesArray, setPricesArray] = useState([]);

useEffect(() => {
      const history = Fetcher.fetchPairReservesFromBlock(3, "0xa559D24c7f9534ec19676Cd98421267EA9e02478", blockNumber, 5);
      var cast = Promise.resolve(history);
      cast.then(function(value) {
        setPricesArray(value);
      });    

    }, [])

Later, i try to use PricesArray to populate my chart like this:

const data = {
  labels,
  datasets: [
    {
      label: 'Price in $',
      data: PricesArray,
      borderColor: 'rgb(39, 146, 214)',
      backgroundColor: 'rgb(255, 255, 255, 1)',
      borderWidth: 1,
    },
  ],
};

My chart finally load but only after a re-render caused by another function. This does not happen when i fetch my datas without useEffect (but then i get re-fetching at each render).

I tried to use another useEffect that is called on PricesArray’s update:

   useEffect(() => {
        setBeforePricesArray(PricesArray);
    }, [PricesArray])

I can check that this call is executed right after the first useEffect but my chart still dosen’t load before the next re-render.

              MERN stack. 

I was told to switch my front end to Heroku since my backend on heroku wont set cookies.

Now I switched my front to heroku but its still not setting cookies.

I’m not sure how to trouble shoot this.

So I feel whats most important is understanding how to trouble shoot this, not only jsut the answer.

My backend Logs me in

passport.use(
  new LocalStrategy(customFields, (username, password, done) => {
    User.findOne({ username: username })
      .then((user) => {
        if (!user) {
          console.log("No user");
          return done(null, false);
        } else {
          const isValid = validPassword(password, user.hash, user.salt);
          if (isValid) {
            console.log("Logged in");

            return done(null, user);
          } else {
            console.log("Wrong Password");
            return done(null, true);
          }
        }
      })
      .catch((err) => {
        done(err);
      });
  })
);

But then my Auth middleware sends the else statement because i get it logged on the front end.

module.exports.isAuth = (req, res, next) => {
  if (req.isAuthenticated()) {
    next();
    // res.status(200).json({ user: req.user, auth: true });
  } else {
    return res.status(401).json({ auth: false, msg: "Here" });
  }
};

Google told me to switch around stuff with proxy? I’m not familiar with those key values at all, but i tried it, using trustProxy on the cookie session

app.use(
  session({
    secret: "zdfbdaf",
    resave: false,
    saveUninitialized: false,
    store: sessionStore,
    cookie: {
      cookie: { secure: true },
      maxAge: 1000 * 60 * 60 * 24,
    },
  })
);

but that didn’t work. I put

app.set("trust proxy", 1);

above it and it still didnt work, so i deleted it.

I’ve been trying to deploy this for a week now and still running into issues that seem so hard to figure out.

Heres my node app.js

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const session = require("express-session");
const passport = require("passport");
const crypto = require("crypto");
const routes = require("./routes");
const isAuth = require("./routes/authMiddleware").isAuth;
const connection = require("./config/database");
const http = require("http");
const { Server } = require("socket.io");
// app.use((req, res, next) => {
//   res.header("Access-Control-Allow-Origin", "*");
// });
const cors = require("cors");
app.use(
  cors({
    origin: [
      "http://2607:fb90:b6e0:a363:f89f:be4b:a976:9ed0:3001",
      "https://fullfrontend.herokuapp.com",
      "http://localhost:3001",
      "localhost:3001",
      "http://localhost:3000",
      "localhost:3000",
    ],
    credentials: true,
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  })
);

const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: [
      "http://2607:fb90:b6e0:a363:f89f:be4b:a976:9ed0:3001",
      "https://fullfrontend.herokuapp.com/",
      "http://fullfrontend.herokuapp.com/",
      "http://localhost:3001",
      "localhost:3001",
    ],
    credentials: true,
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  },
});

io.on("connection", (socket) => {
  console.log(`Connected: ${socket.id}`);
  socket.on("disconnect", () => {
    console.log(`Disconnected user: ${socket.id}`);
  });
  socket.on("send_message", (data) => {
    // const mes = {
    //   userid: data.sender,
    //   messages: [{ user: data.sender, message: data.message }],
    // };
    const mes = {
      user: data.sender,
      message: data.message,
    };

    User.updateOne(
      {
        _id: data.receiver,
        "chats.userid": data.sender,
      },
      { $push: { "chats.$.messages": mes } },
      {
        upsert: true,
      },
      (err, result) => {
        if (!err) {
          console.log(result);
        } else {
          console.log(err);
        }
      }
    );
    // User.findOne(
    //   {
    //     _id: data.receiver,
    //     : data.sender,
    //   },
    //   (err, result) => {
    //     if (!err) {
    //       console.log(err);
    //     } else {
    //       console.log(result);
    //     }
    //   }
    // );

    // function (err, docs) {
    //   if (!err) {
    //     User.updateOne(
    //       { _id: data.receiver },
    //       { $push: { chats: mes } },

    //       function (err, result) {
    //         if (err) {
    //           console.log(err);
    //         } else {
    //           console.log(result);
    //         }
    //       }
    //     );
    //   } else {
    //     console.log(err);
    //   }
    // }
  });
});

const User = mongoose.models.User;

const bodyParser = require("body-parser");

const MongoStore = require("connect-mongo")(session);

// require("dotenv").config({ path: `.env` });

app.use(express.json());
// app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.urlencoded({ extended: true }));

const sessionStore = new MongoStore({
  mongooseConnection: mongoose.connection,
  collection: "sessions",
});


app.use(
  session({
    secret: "zdfbdaf",
resave: false,
    saveUninitialized: false,
    store: sessionStore,
    cookie: {
      cookie: { secure: true },
      maxAge: 1000 * 60 * 60 * 24,
    },
  })
);

require("./config/passport");

app.use(passport.initialize());
app.use(passport.session());

app.use("/", routes);

server.listen(process.env.PORT || 3000);

I’m not following any tutorial, I went full Send on this as my first project and its definitely very hard.

I should add that locally this was working, everything was gravy.

TL;DR: Do you use multiple html files for multi-pages website?

I started learning HTML and CSS, I have worked with WordPress in the past but there wasn’t a lot of custom code or whatever with what I was working on before. I have also studied basic JS as one of my course in my multimedia studies, but again, I was never really inclined to pursue development full time so my knowledge would be at best, of a beginner.

I’m still on my second week of learning html and css, and aside from following a course, watching other people code, I’ve also started doing these challenges from Frontend Mentor.

Here’s what I’ve created so far, this is not mobile-responsive yet as I am still very early in learning css, and still got a lot a long way to go.

My question is that, how do you create multi-pages websites? Do you create multiple html files for each page and link them? Or is everything inside a single html file? I’m not quite sure if this got mentioned in the course that I am watching but there was a part in the course when the mentor clicked on one of her links and changed the content of her website (much like went to another page), which got me kind of confused, on how did they do that exactly? Does it have to do with the visibility and display? If you could point me to any additional resources as well, that would be great!

I’m sorry if my question isn’t articulate enough but here’s the course I am following for reference.

https://youtu.be/TdqQqyc7pfU

Could you please tell me how to dispatch the resize event in iOS15 mobile Safari?

The website is originally designed to be responsive.
I want to switch to desktop mode view even with a button on the page,
so I enabled to overwrite HTML element meta viewport from JavaScript.

<meta name="viewport" content="width=device-width,initial-scale=1">

Just replace the above part with the following, Android Chrome and Firefox instantly resize it on their own without reloading.

<meta name="viewport" content="width="> 

In Safari, when I scroll up, the address bar is displayed and the resizing is triggered.
At that time, the media query in CSS is reflected and redrawn with the automatic scale.

I’ve tried dispatching the resize event and switching style.display property, but it doesn’t respond until the user scrolls down/up.

We are implementing sharing screen with audio using Screen Capture API(getDisplayMedia) by using JavaScript. To get the requested screen we passed the below constraints in getDisplayMedia(constraints),

constraints = {audio: {echoCancellation:true,echoCancellationType:'browser',autoGainControl:true,noiseSuppression:true}, video: true};

then we shared promised stream via webRTC,

Let’s consider A and B users are there,
A is sharing the screen and screen got shared to B via webRTC
then user B is getting ECHO issue(while talking to user A),

Note: if user A share specific tab/window screen then ECHO is not there at user B(while talking to user A)

We are using getDisplayMedia(constraints) like below,

if (navigator.mediaDevices.getDisplayMedia) {
       navigator.mediaDevices.getDisplayMedia(constraints).then(function (stream) { /*adding stream to webRTC and sharing to user B*/ }, function (error) { /*handling errors*/ });
} else {
       navigator.getDisplayMedia(constraints).then(function (stream) { /*adding stream to webRTC and sharing to user B*/ },function (error) { /*handling errors*/ });
}

Any help would be appreciated. Thanks.

I have to find inside a json array some value of a given key, and return the value of another key of the found object.

I have made this function:

const findValueByKey = ({
  jsonArray,
  keyToSearch,
  valueToSearch,
  keyOfTheValueToReturn,
  defaultMessage
}) => {
  const foundObject = jsonArray.find((obj) => obj[keyToSearch] === valueToSearch);
  if (foundObject) return foundObject[keyOfTheValueToReturn];
  return defaultMessage || 'not found';
};

But my question is if there’s something similar with Lodash, I don’t want to reinventing the wheel.

I know that I can find an object given some criteria, like:

_.find(jsonArray, (object) => object[keyToSearch] === valueToSearch);

But then I should extract the key that I need, etc.

I’ve created a register page using php, and the the form successfully submits data to the database.

The problem is, I’m trying to prevent client side submission, but I can’t get the form to stop submitting, even with nothing in the input fields.

I’ve even temporarily removed the php, and I’m still having the same issue.

Before I do any further form validation, I need to the form to stop submitting.

it also submits every time and I refresh the page, and I’m not sure why.

Register page with html and php

<?php
require_once "connection.php";

session_start();  //intiate session for current user on site 

if (isset($_SESSION["email"]) && isset($_SESSION["password"])) {
    header("location: index.php");
}

$email = filter_input(INPUT_POST, "email", FILTER_SANITIZE_STRING);
$password = filter_input(INPUT_POST, "password");

$hashed_password = password_hash($password, PASSWORD_DEFAULT);

//database entry
$create_account = $pdo->prepare("INSERT INTO users (email,password) VALUES (:email, :password)");
$create_account->bindParam(':email', $email);
$create_account->bindParam(':password', $hashed_password);
$create_account->execute();
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Food Roulette</title>
    <link rel="stylesheet" href="style.css">

</head>

<body class="colorThis">

    <div class="oneForm">
        <form action="register.php" id="signupForm" method="POST">
            <h1 class="register"> Register now </h1><br>
            <label class="emailOne" for="email"> Email Address </label><br>
            <input type="email" id="email" name="email"><br>

            <label class="passwordOne" for="password"> Password </label><br>
            <input type="password" id="password" name="password"><br>
            <button onsubmit="validateRegistrationForm()" class="registerBtn" name="register_button">Login</button>
        </form>
    </div>


    <script src="app.js"></script>
</body>

</html>

App.js with form validation

function validateRegistrationForm() {
    const email = document.getElementById(email);
    const password = document.getElementById(password);

    form.addEventListener("submit", (e) => {
        e.preventDefault();

    })

}

$(‘.bxslider’).bxSlider({
controls: true,
pager: true,
speed: 1000,
responsive: true
});

I use the OrbitControl on my project, and thought to add the ability to rotate and change the position of the camera using form input. But I am encountering some issues.

I added an event listener to the input which triggers an event when the user changes the value of the input.

setPositionByInput(x, y, z){
    camera.position.x = x
    camera.position.y = t
    camera.position.z = z
}

After calling this method I call the Three.ja function which renders again the object.

The function works fine, but when trying to move the Three.js object using the OrbitControl the position changed automatically to the position was before running the function above.

I am trying to load the scripts in index.html dynamically which are loading in the iframe index.html, not in the parent index.html.

Here is the dynamic scripts loading in angular constructor code:

constructor() {
  const paymentGPIUS = [
    'href="https://sc-ols-onlinebooking-dev.s3-us-west-2.amazonaws.com/ols-onlinebooking-ui/add-card-widget/styles.css',
    'http://127.0.0.1:5500/dist/ols-onlinebooking-ui/add-card-widget/element.js'
  ];
  const node = document.createElement('script');
  node.src = paymentGPIUS[0];
  node.type = 'text/javascript';
  node.async = false;
  document.body.appendChild(node);
  // document.head.appendChild(node);
  const node2 = document.createElement('link');
  node2.rel = 'stylesheet'
  node2.href = paymentGPIUS[1];
  document.body.appendChild(node2);
}

Here is code to load scripts but it’s loading into iframe inde.html:

In the above image, scripts are loading below styles both link and scripts into iframe, not in parent index.html

I’m trying to add a thousands separator for the .htm(price * num) result by adding .digits(); to the var sub. How do I get the thousands seperator to work on the result of the var sub? Since they are not val do I need to convert the result into a number before adding the digits(); function?

$(document).ready(function() {
  $.fn.digits = function() {
    return this.each(function() {
      $(this).val(
        $(this)
        .val()
        .replace(/(d)(?=(ddd)+(?!d))/g, "$1,")
      );
    });
  };
  var total = $(".slider__total").html();
  var sold = $(".sold").html();
  var available = total - sold;
  var price = $(".cost").html();
  var num = $("#num").html();
  $(".item__available").html(available);
  var sub = $("#slider_subtotal")
    .html(price * num)
    .digits();
  $(".qty").attr({
    max: available
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
sold<span class="sold">3</span>total<span class="slider__total">10</span>available<span class="item__available"></span><input type="range" min="1" value="1" class="qty" name='quantity' oninput="num.value = this.value"><output id="num">0</output>unit:
$
<span class="cost">500</span>subtotal: $<span id="slider_subtotal">0</span>

I am creating a home page in react using bootstrap but everything is coming automatically using different margins in both sides on the container. How to make the ‘section’ container so that it will cover both sides in any screen size.
P.S. I have tried putting marginBotton:-10rem but as soon as screen size changes it distorts everything,

class Home extends Component {


render() {
    return (
      <div>
         <div className="container">
                <Navbar style={{marginBottom: "0"}} inverse className="fixed-top collapseOnSelect nav-bar" bg='dark' expand='sm'>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                <a href="/alogin" class="navbar-brand text-white">Tailoring Store</a>
                <Nav className="ms-auto navbar-dark py-3">
                
                    
        <NavLink className= "d-inline p-2 bg-dark text-white" style={{textDecoration:'none'}} to="/alogin">Login as Admin</NavLink>
                    <NavLink className= "d-inline p-2 bg-dark text-white" style={{textDecoration:'none'}} to="/tlogin">Login as Tailor</NavLink>
                    <NavLink className= "d-inline p-2 bg-dark text-white" style={{textDecoration:'none'}} to="/clogin">Login as Customer</NavLink>
                </Nav>
                </Navbar.Collapse>
            </Navbar>
            </div>
        <div
          className="bg-dark text-light p-5 text-center text-sm-start"
          style={{ marginTop: "4.5rem", marginLeft:"0", padding:"0"  }}
          inverse
        >
          <div className="container">
            <div className="d-sm-flex align-items-center justify-content-between">
              <div>
                <h1>
                  Welcome to the
                  <span className="text-warning">Tailoring Store</span>
                </h1>
                <p className="lead my-5">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
                  in dolores impedit ipsam voluptatibus reprehenderit suscipit.
                  Unde quos voluptas explicabo?
                </p>
              </div>
              <img
                className="img-fluid w-30 d-none d-sm-block"
                src="https://seeklogo.com/images/T/tailor-store-logo-22F77490D5-seeklogo.com.png"
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;

I am new to NEXT.JS and I am having some trouble deploying a static site. I have a component Nav.tsx that looks like this:

const Nav = () => {
    return (
        <nav className='nav p-3 border-bottom'>
            <Link href='/' passHref>
                <h2 className='pointer my-auto'>Blog </h2>
            </Link>
            <Link href='/about' passHref>
                <p className='ms-5 pointer lead my-auto'>Who We Are</p>
            </Link>
            <Link href='/services' passHref>
                <p className='ms-5 pointer lead my-auto'>Services</p>
            </Link>
            <Link href='/contact' passHref>
                <p className='ms-5 pointer lead my-auto'>Contact</p>
            </Link>
        </nav>
    );
};
export default Nav;

When I run my development server locally, I can use those links to navigate around my site. But when I build, using next build && next export the links do not work for navigation. All of those links (/about, /services, /contact) are files in my pages directory. Have I written something incorrect in Nav.tsx, or am I misunderstanding how NEXT works? Thank you!