Category: javascript

I’m pretty sure this is simple but I am trying to print out the current time in 12-hour format without including the leading zero in the time string. So, for example.

09:30 AM should print as 9:30 AM.

The current code I have so far (which prints the version with the leading zero) is this:

var d = new Date();
var timeString = d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});

How can I change the above code to remove the leading zeros when they appear?

I am trying to build an app where I can store my code as a cheat sheet. I am using prisim.js to format the HTML.

The app works like this, the user writes the code in a text area and when they press submit, a new element gets added to the DOM with its respective classes that prisim.js use but for some reason, it’s not formating the code correctly.

<div class="cont">
    <div class="sub-cont">
      <h1 class="title">Code Snippet!</h1>
      <h3 class="title" for='tite-input'>Title</h3>
      <input id='tite-input'class='tite-input' type="text">
      <textarea name="codeText" id="code" cols="30" rows="10"></textarea>
      <button class="btn">Submit</button>
    </div>

<div class="code-cont">

      <div class="code-inner">
        <h3 class="code-title">Center a div</h3>
        <pre>
          <code class='language-css'>
                  Img {
                    background: url("link");
                    background-size: cover;
                    background-position-x: center;
                    background-position-y: center;
                    background-repeat: no-repeat;
                  }   
          </code>
        </pre>
        <button class="edit-btn">Edit</button>
        <button class="delete-btn">Delete</button>
      </div>

// DOM variables
let titleInput = document.querySelector('.tite-input').addEventListener('input', getTitleInputValue);

let textArea = document.querySelector('textarea').addEventListener('input', getTextAreaValue);

let submitBtn = document.querySelector('.btn').addEventListener('click', submitButton);

// values
let titleInputValue,
    textAreaValaue;


function getTitleInputValue(){
  titleInputValue = this.value
  console.log(titleInputValue)
}

function getTextAreaValue(){
  textAreaValaue = this.value;
  console.log(textAreaValaue)
}


function submitButton(){

  let codeCont = document.querySelector('.code-cont')
  let html = `
      <div class="code-inner">
        <h3 class="code-title">${titleInputValue}</h3>
        <div class="code-toolbar">
          <pre class='language-javascript' tabindex="0">
            <code class='language-css'>
                ${textAreaValaue}
            </code>
          </pre>
        </div>
        <button class="edit-btn">Edit</button>
        <button class="delete-btn">Delete</button>
      </div>`;

      // codeCont.appendChild(html[0])
    console.log(  codeCont)

    codeCont.insertAdjacentHTML("beforeend", html);




}

I’m trying to create a simple express project that shows a food menu and the details of each option. My problem is that if I try to set an optional parameter for a route (/:id?) my stylesheet does not load.

My router:

router.get('/detalle/:id?', controller.details)

My controller:

const controller = {
    home: function(req,res){
        return res.render('index.ejs', {platos: platos})
    },
    details: function(req,res){
        return res.render('detalleMenu.ejs', {platos: platos})
    }
}

If I load http://localhost:3000/detalle just like that I get the css stylesheet linked to detalleMenu.ejs without a problem.
The thing is that if I try to load for example http://localhost:3000/detalle/3 I get the detalleMenu.ejs but without the stylesheet!

Any ideas why this is happening?

Suppose I embed

https://gogoplay1.com/streaming.php?id=OTc2MzI=&title=Boruto%3A+Naruto+Next+Generations+Episode+1

This Video in my website and I know that they are use Adsterra(Ads Provider) Service to show their ads So is there any way to block ads using javascript that is coming from Adsterra…

I already used sandbox and and its sandbox protected
Here’s a shot:

Even if you can give me php script that would help me. I just want to remove ads from this player….

New, new, new to React. Downloaded the following sample of setState method in classes that extend React.Component. It works fine, but I’m not understanding why no object needs to be instantiated for App, since each user could be in a different location…

I somehow thought index.js would need:

const app = new App()

Is there a reason for this?

index.js

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';


class App extends React.Component {
    constructor ( props ) {
        super ( props );
        this.state={ latitude: null};

        window.navigator.geolocation.getCurrentPosition (
            ( postion ) => {
                this.setState( {latitude: postion.coords.latitude })
            },
            ( error ) => console.log ( error )
        );
    }

    render () {


        return (
            <div className="App">
                <header className="App-header">
                    <p>
                        LATITUDE: {this.state.latitude}
                    </p>
                </header>
            </div>
        );
    }
}

export default App;

I’m not looking for a way to do this in pure HTML, but I want a way to change password visibility with JavaScript. I don’t just want a show/hide password button, but instead a way to hide a character or the whole field when I want to, instead of relying on the built in password fields methods.

I would like to be able to download an image that has be cached by chrome to a specified folder using a chrome extension. Currently I am getting the url of the image and passing it to the background.js which then downloads the image. Yet on this specific website (the website this chrome extension is being built around), does not allow you to get the url of the image.

What changes to my code will I need to be able to do this?

(the extension flips to another page, and attempts to download around 50 images per subsection of the site. this site also does not have 1 class for each image, and regularly makes the class name or Id the token of the individual)

popup.js

 const scriptCodeCollect =
  `(function() {
        // collect all images 
    let images = document.querySelectorAll('img');
        let srcArray = Array.from(images).map(function(image) {
            return image.currentSrc;
        });
        chrome.storage.local.get('savedImages', function(result) {
                // remove empty images
                imagestodownload = [];
                for (img of srcArray) {
                    if (img) {
                        img.substring("data:image/".length, img.indexOf(";base64"));
                        console.log(img);   
                    }imagestodownload.push(img);
                };
                result.savedImages = imagestodownload;
                chrome.storage.local.set(result);
                console.log("local collection setting success:"+result.savedImages.length); 
            });
    })();`;

    const scriptCodeDownload =
    `(function() {
      chrome.storage.local.get('savedImages', function(result) {
        let message = {
          "savedImages" : result.savedImages
        };
        chrome.runtime.sendMessage(message, function(){
          console.log("sending success");
        });
        
      });
      })();`;

      function injectTheScript() {
        // Gets all tabs that have the specified properties, or all tabs if no properties are specified (in our case we choose current active tab)
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            // Injects JavaScript code into a page
            chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
        });
    }
    // adding listener to your button in popup window
    document.getElementById('flipbtn').addEventListener('click', injectTheScript);
    


document.getElementById("startbtn").addEventListener("click", function() {
if((url.includes('http://127.0.0.1:5500/example%20test/physics/'))) {
    document.getElementById("success").innerHTML = "<strong><u>In progress<br></u></strong> Currently downloading: <br>" +urlfilename

  
      setInterval(function(){ //Loops download
        
      
        chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
          let urlfilename = tabs[0].url.replace('http://127.0.0.1:5500/example%20test/', '').replace('.html', '').replace('?','');
              document.getElementById("success").innerHTML = "<strong><u>In progress<br></u></strong> Currently downloading: <br>" +urlfilename
          let bknb= tabs[0].url.replace('http://127.0.0.1:5500/example%20test/', '').replace('.html', '').replace('/',' ').replace('?', '').replace(/D/g, '');

        chrome.storage.local.set({'foo': urlfilename, 'bar': bknb}, function() {
          console.log('Settings saved');
          console.log(urlfilename);
        });
        function sleep (time) {
          return new Promise((resolve) => setTimeout(resolve, time));
        }
        

        sleep(5000).then(() => {  //Pauses so URL can write and display correctly
          chrome.tabs.executeScript({code : scriptCodeCollect}); //Collects Image (page is saved as image on the website)
          
          let textCollect = document.getElementById('textCollect');
          chrome.storage.local.get('savedImages', function(result) {
            textCollect.innerHTML = "collected "+ result.savedImages.length + " images"; 
          });
        });
          chrome.tabs.executeScript({code : scriptCodeDownload}); //Downloads Image

          document.getElementById("warning").innerHTML = "test"

          sleep(5000).then(() => { //Waits so image can download fully
              chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
              chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"}); //Injects Script to flip page
          });
        });
        });
    }, 10000); //Waits 10s and then loops
  

background.js

let downloadsArray= [];
let initialState = {
    'savedImages': downloadsArray
};
chrome.runtime.onInstalled.addListener(function() {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [
                new chrome.declarativeContent.PageStateMatcher({
                    css: ['img'],
                    css: ['img[input[type="image"[aspect-ratio[attr(1000)/attr(1419)]]]]'],
                    css: ['id[image]']
                })],
            actions: [ new chrome.declarativeContent.ShowPageAction() ]
        }]);
    });
    chrome.storage.local.set(initialState);
    console.log("initialState set");
});


//chrome.downloads.onChanged.addListener(function() {
    chrome.storage.local.get(['foo', 'bar'], function(items) {
        var urlfilename = items.foo
        console.log(urlfilename)
        var bkpg= items.bar
//  });

    chrome.runtime.onMessage.addListener(
        function(message, callback) {
        console.log("message coming");
        console.log(message);
        let srcArray = message.savedImages;
        var counter = bkpg-1;
        for (let src of srcArray) {
            console.log(src);
            chrome.downloads.download({url:src, filename:urlfilename + ".png"});
        };
    });
    });

I’m new to React native and I’m experimenting to understand some things. In the flatlist below, I am replacing the element at index 0 in the list variable with onPress. I learned that the extraData props are used to reflect the changes. However, in the example below, even if there is no extraData, the changes are reflected on the screen because the state has changed. So why do we need extraData then?

import React, { useState } from 'react'
import { FlatList, Text, TouchableOpacity, View } from 'react-native'

let data = [{ id: 1, word: "Strong" }, { id: 2, word: "Support" }, { id: 3, word: "Discovery" }]

export default function WordSelect() {

  const [list, setList] = useState(data)
  const [selectedId, setSelectedId] = useState(null)

  const onPress = () => {
    list[0] = { id: 4, word: "Together" }
  }

  return (
    <FlatList
      data={list}
      // extraData={selectedId}
      keyExtractor={(data) => data.id.toString()}
      renderItem={({ item }) => (
        <TouchableOpacity
          onPress={() => {
            onPress()
            setSelectedId(item.id)
          }}
        >
          <View style={{ paddingTop: 30, alignSelf: 'center' }}>
            <Text >{item.word}</Text>
          </View>
        </TouchableOpacity>
      )}
    />
  )
}

I am new to MERN and following the following tutorial https://www.youtube.com/watch?v=7CqJlxBYj-M When I try to access localhost the connection times out even though the back end is running (server running on port 5000) as well as the front end (when I run npm run start it starts up and says I can run the project on http://localhost:3000 or http://172.17.0.12:3000)

I am trying to include a section under a previous section but it doesn’t show and align the way I want it to be. The first section is a text section with video background but the next section added doesn’t show in the preview. Even in the stack overflow snippet the “about us” section is behind the video section. How can I solve this problem?

const menuToggle = document.querySelector('.toggle');
     const showcase = document.querySelector('.showcase');

     menuToggle.addEventListener('click', () => {
       menuToggle.classList.toggle('active');
       showcase.classList.toggle('active');
     })

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}


header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo
{
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}
.toggle
{
  position: relative;
  width: 60px;
  height: 60px;
  background: url(https://i.ibb.co/HrfVRcx/menu.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}
.toggle.active
{
  background: url(https://i.ibb.co/rt3HybH/close.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  cursor: pointer;
}
.showcase
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000000;
  transition: 0.5s;
  color: #ffff;
  z-index: 2;

}
.showcase.active
{
  right: 300px;
}



.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0394f4;
  mix-blend-mode: overlay;
  color: #001540;
}
.text
{
  position: relative;
  z-index: 10;
}

.text h2
{
  font-size: 2.5em;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
}
.text h3
{
  font-size: 5em;
  font-weight: 700;
  color: #64A8F0;
  line-height: 1em;
  text-transform: uppercase;
}
.text p
{
  font-size: 1.1em;
  color: #fff;
  margin: 20px 0;
  font-weight: 400;
  max-width: 700px;
}
.text a
{
  display: inline-block;
  font-size: 1em;
  background: #fff;
  padding: 10px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
}
.text a:hover
{
  letter-spacing: 6px;
}



.social
{
  position: absolute;
  z-index: 10;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social li
{
  list-style: none;
}
.social li a
{
  display: inline-block;
  margin-right: 20px;
  filter: invert(1);
  transform: scale(0.5);
  transition: 0.5s;
}
.social li a:hover
{
  transform: scale(0.5) translateY(-15px);
}


.menu
{
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000026;

}
.menu ul
{
  position: relative;
}
.menu ul li
{
  list-style: none;
}
.menu ul li a
{
  text-decoration: none;
  font-size: 24px;
  color: #ffff;
}
.menu ul li a:hover
{
  color: #64A8F0;
}



.section{
    width: 100%;
    min-height: 100vh;
    background-color: #ddd;
}
.container{
    width: 80%;
    display: block;
    margin:auto;
    padding-top: 100px;
}
.content-section{
    float: left;
    width: 55%;
}
.image-section{
    float: right;
    width: 40%;
}
.image-section img{
    width: 100%;
    height: auto;
}
.content-section .title{
    text-transform: uppercase;
    font-size: 28px;
}
.content-section .content h3{
    margin-top: 20px;
    color:#5d5d5d;
    font-size: 21px;
}
.content-section .content p{
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 1.5;
}
.content-section .content .button{
    margin-top: 30px;
}
.content-section .content .button a{
    background-color: #3d3d3d;
    padding:12px 40px;
    text-decoration: none;
    color:#fff;
    font-size: 25px;
    letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
    background-color: #a52a2a;
    color:#fff;
}
.content-section .social{
    margin: 40px 40px;
}
.content-section .social i{
    color:#a52a2a;
    font-size: 30px;
    padding:0px 10px;
}
.content-section .social i:hover{
    color:#3d3d3d;
}
@media screen and (max-width: 768px){
    .container{
    width: 80%;
    display: block;
    margin:auto;
    padding-top:50px;
}
.content-section{
    float:none;
    width:100%;
    display: block;
    margin:auto;
}
.image-section{
    float:none;
    width:100%;

}
.image-section img{
    width: 100%;
    height: auto;
    display: block;
    margin:auto;
}
.content-section .title{
    text-align: center;
    font-size: 19px;
}
.content-section .content .button{
    text-align: center;
}
.content-section .content .button a{
    padding:9px 30px;
}
.content-section .social{
    text-align: center;
}



@media (max-width: 991px)
{
  .showcase,
  .showcase header
  {
    padding: 40px;
  }
  .text h2
  {
    font-size: 1.5em;
  }
  .text h3
  {
    font-size: 3em;
  }

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

  <title>Think Tank</title>

</html>
<head>

</head>

<body>
  <style>
      @import url('styles.css');
  </style>

<section class="showcase">

   <header>
     <h2 class="logo"></h2>
     <div class="toggle"></div>
   </header>

   <video src="webasset.mov" muted loop autoplay></video>
   <div class="overlay"></div>
   <div class="text">
     <h2>Willkommen auf </h2>
     <h3>Think Tank</h3>
     <p>Beispiel.</p>
     <a href="#">THINK kaufen</a>
   </div>
   <ul class="social">
     <li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
     <li><a href="https://twitter.com/ThinkTank__?t=RxrP3KIpS8-L6UOfjpd7Ww&s=08"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
     <li><a href="https://www.instagram.com/think.tank.official/"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
   </ul>
 </section>
 <div class="menu">
   <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="section">Unser Token</a></li>
     <li><a href="#">NFT (COMING SOON)</a></li>
     <li><a href="#">Das Team</a></li>
     <li><a href="#">Kontakt</a></li>
   </ul>
 </div>


    <div class="section">
        <div class="container">
            <div class="content-section">
                <div class="title">
                    <h1>About Us</h1>
                </div>
                <div class="content">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat.</p>
                    <div class="button">
                        <a href="">Read More</a>
                    </div>
                </div>
                <div class="social">
                    <a href=""><i class="fab fa-facebook-f"></i></a>
                    <a href=""><i class="fab fa-twitter"></i></a>
                    <a href=""><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div class="image-section">
                <img src="image/img one.jpg">
            </div>
        </div>
    </div>


         <!--===== MAIN JS =====-->
       <script src="main.js"></script>

</body>
</html>

The result of escape/unescape in node.js wants the same result in Go.

utf8.DecodeRuneInString(src) I couldn’t solve it.

node.js

  escape("111번과 동일")
  result : "111%uBC88%uACFC%20%uB3D9%uC77C"
  unescape("111%uBC88%uACFC%20%uB3D9%uC77C") 
  result : "111번과 동일"

Go

func main() {
    uniStr := "111%uBC88%uACFC%20%uB3D9%uC77C"
    plainStr := strings.Split(uniStr, "%")
    for i, v := range plainStr {
        var err error
        plainStr[i], err = strconv.Unquote(`"` + v + `"`)
        if err != nil {
            fmt.Errorf("Fail to Unicode to String: %v", err)
        }
    }
    fmt.Printf(strings.Join(plainStr, "")) 
}
result : "I번과동일"

I would like to use this API
https://restcountries.com/#api-endpoints-v3-all

This is the link
https://restcountries.com/v3.1/all

In this object, countries are not alphabetically sorted. How can I do it within the function?

const btn = document.querySelector("button");
const output = document.querySelector("#output");
const intake = document.querySelector("input");
const url = "https://restcountries.com/v3.1/all";
let myData = {};
fetch(url).then(function (res) {
    return res.json()
}).then(function (data) {
    myData = data;
    buildSelect(data);
})
    function buildSelect(d) {
        let select = document.createElement('select');
        d.forEach(function (item, index) {
            let option = document.createElement('option');
            console.log(item,index);
            option.value = index;
            option.textContent = item.name.common;
            
            select.appendChild(option);
        })
        document.querySelector('body').appendChild(select);
    }

The code belongs to Laurence Svekis, I’m doing his course, but in his version it’s sorted by API side already.

Thank you!

I wonder which one it is. I go to w3school and I paste this code.I change the {1} but still nothing working when I click the Test.
What it asks is

to make the AnotherFunction(event) not be in used when I click the
DIV.

 <html>
    <body onclick="AnotherFunction(event)">
    <div onclick="myFunction(event)">Test</div>
    <script>
      function myFunction(event) {  1 }
    </script>
    </body>
    </html>

I have 4 cases that I can use to replace the {1}

1.event.preventDefault()
2.this.id = false
3.event.stopPropagation()
4.Event.cancel = true

I have checked 4 no one is working.Is it right all 4choices are solution?

Cannot call function from js as it will call the main function responsible for rendering the whole page in Views.py

SO functionality should be like:

1 Category clicked
2 List of items in that category changes without loading the whole page

Q2 Is there any way to re run a part of code in HTML

like

{% block run_it_again_ %}

code

{% end block%}

So I am integrating the option to upload an image to the server using react-native-image-crop-picker. Beside the ugliness of the crop picker it is very, very slow. When I take a picture it’s fine to the point where I click on okay. Then it loads for 5-20 seconds (depends heavily on the device I am using) and after that time the image is ready. If I now look at nearly every other app out there (also big players like Instagram, Snapchat, etc.) There Image Cropping Page is out of this world: Fast, Beautiful, Easy to use, etc.. Now I searched for alternatives but I didn’t find anything. Is it really that hard to use another cropping tool/library or even writing his own cropping component in RN?

I would be pleased if you can help me 🙂