qwerty's Questions

qwerty

Asked: 2020-08-13 15:57:25 +0800 CST

How to modify "far" component data in Vue

1

How can I modify the data of a component from another "distant" component? I have the following structure:

Principal
   importa a secundario_1
       importa a secundario_2
           importa a secundario_3
           | secundario_3 debe modificar datos de Capa
Capa    <---

I just want to modify the abcLayer value from child_3

data:() => ({
    abc: 'hola mundo'
})

I tried with asyncand $emitbut it only works for me between parent and child. Thank you

qwerty

Asked: 2020-08-07 16:17:20 +0800 CST

How to get current coordinates in Vue2Leafet

2

I have a map using Vue2Leaflet, which I try to get the coordinates of the map every time the dragend event fires (when the map location is changed)

<template>
<div id="map" ref="map" style="height: 100vh">
   <client-only>
      <l-map @dragend="getCoords" :zoom=4 :center="[coords.lat, coords.lon]" :options="{zoomControl: false}">
          <l-tile-layer :url="themes.default"></l-tile-layer>
   </client-only>
</div>

I tried to access the object this.$refs.mapbut it doesn't show the coordinates, how can I get them?

qwerty

Asked: 2020-07-27 11:06:36 +0800 CST

Modify data of a parent component from a child

0

I am trying to modify the value of routingfrom the child component (First) on click but nothing happens

//- Padre
<template>
   <First @toggleContent="routing = !routing" />
</template>
<script>
export default {
  data() {
    return { routing: true }
  }
}
</script>

//- Hijo (First component)
<template>
  <div>
    <i class="bx bx-shape-triangle" @click="toggleContent()"></i>
    {{routing}}
  </div>
</template>
<script>
export default {
  props: {
    routing: Boolean
  },
  methods: {
    toggleContent() {
      this.$emit('toggleContent')
    }
  }
}
</script>

In the console I do not get any error, thanks.

qwerty

Asked: 2020-05-28 17:06:11 +0800 CST

Error setting value to a property of an object in a Firefox extension

1

I am trying to change the value of the referrerobject property documentin a Firefox extension with the following code

//Test.js
  Object.defineProperty(document, "referrer", {
   get: function() {
     return "Test"
   },
   set: function(a){},
     configurable: false
  })

manifest.json

  {
     "manifest_version": 2,
     "name": "Test addon",
     "version": "beta",
     "description": "Spoofing browser data",
          "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["test.js"],
          "run_at": "document_start"
        }
      ]
    }

I even tried with document.referrer=""but it doesn't work, if I execute another type of code like the typical example it document.body.style.border='1px solid red'works.

qwerty

Asked: 2020-03-11 12:44:51 +0800 CST

Remove class to elements

0

I want to remove the class activeto the elements that were not clicked, I am adding the class activewhen each element is clicked.

const tabs = document.querySelectorAll('.tab')
const slider = document.querySelector('.slider')

tabs.forEach((tab, i) => {
  tab.addEventListener('click', () => {
    let styles = `left: ${tab.offsetLeft}px;
       width: ${tab.offsetWidth}px;`;

    slider.style.cssText = styles
    tab.classList.add('active');
  })
})

body {
  display: flex;
  justify-content: center;
}

.tabs-container {
  position: relative;
  display: flex;
  margin-top: 55px;
  height: 35px
}

.tab {
  margin: 0px 20px;
  text-transform: capitalize;
  font-weight: bold;
  font-family: arial;
  font-size: .9em;
  cursor: pointer;
}

.tab.active {
  color: red;
}

.slider {
  background-color: red;
  height: 5px;
  width: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 300ms left ease-in-out, 300ms width ease-in-out
}

<div class="tabs-container">
  <div class="tab active" data-tab="general">general</div>
  <div class="tab" data-tab="business">business</div>
  <div class="tab" data-tab="technology">technology</div>
  <div class="tab" data-tab="health">health</div>
  <div class="slider"></div>
</div>

qwerty

Asked: 2020-02-02 12:27:34 +0800 CST

Upload files using curl

0

I am trying to send files plus the parameters through curl in the same request

 curl -k -X POST -F 'image=@/ruta/123.jpg' -F "title=test&description=tesst" http://localhost:3000/upload

But I get the following error

{"name":"MulterError","message":"Unexpected field","code":"LIMIT_UNEXPECTED_FILE","field":"image","storageErrors":[]}

Thanks in advance

qwerty

Asked: 2020-01-16 17:41:36 +0800 CST

Error comparing hashes in node.js using bcrypt

0

I have a user registration system that works well, however, when comparing the hash of the database with the one entered in an html field, it throws me the following error

Error: data and hash arguments required

I am sending 3 parameters just as it says in the documentation, which is the plain text password, the hash and a callback. Thanks in advance

'use strict';

 const bcrypt = require('bcrypt')

 module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define('User', {
  email: {
    allowNull: false,
    type: DataTypes.STRING,
    unique: true
  },
 password_hash: DataTypes.STRING,
 password: DataTypes.VIRTUAL
}, {});

 User.login = (email, password) => {
  return User.findOne({
     where: {
        email: email
    }
  }).then(user => {
      if(!user) return null
        return user.authenticatePassword(password).then(valid => valid ? user : null)
})
 }

 /* =============== */
 /* METODO PARA COMPARAR HASH */
 /* =============== */

 User.prototype.authenticatePassword = (password) => {
    return new Promise((res, rej) => {
    bcrypt.compare(password, this.password_hash, (err, valid) => {
      if(err) return rej(err)

      res(valid)
    })
   })
  }

 User.associate = function(models) {
  // associations can be defined here
 };
 User.beforeCreate((user, options) => {
   return new Promise((res, rej) => {
     if(user.password) {
         bcrypt.hash(user.password, 10, (err, hash) => {
            user.password_hash = hash
            res()
        })
    }
   })
   })
 return User;
 };

qwerty

Asked: 2020-01-14 11:53:57 +0800 CST

HTTP verbs in HTML forms

3

Why are HTTP verbs like PUTor DELETEnot available in HTML forms?

qwerty

Asked: 2020-12-02 09:56:16 +0800 CST

Error connecting to database in Laravel

0

Hello, I have a problem when trying to connect to the mysql database from angular when doing a migration

php artisan migrate

I get the following error

Illuminate\Database\QueryException : SQLSTATE[HY000] [1698] Access denied for user 'root'@'localhost' (SQL: select * from information_schema.tables where table_schema = laravel and table_name = migrations and table_type = 'BASE TABLE')

I already gave it access with grant on *.*from mysql but the error persists

.env

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=pass

qwerty

Asked: 2020-10-08 16:19:54 +0800 CST

I've tried to move the slider depending on the element that was clicked, but I can't. I managed to get the width of the item to modify it with respect to the content. I hope you can help me, thanks in advance

let items = document.querySelectorAll('.menu-item-category'),
                slider = document.querySelector('.slider')
            items.forEach((item, e) => {
                item.addEventListener('click', () => {
                    console.log(e)
                    let getWidth = item.offsetWidth
                    slider.style.width = getWidth + 'px'
                })
                
            })

.category-results {
	display: flex;
	align-items: center;
	position: relative;
}.menu-item-category:nth-child(1), .menu-item-category:nth-child(2) {
	margin-right: 25px;
}.menu-item-category {
	color: #262626;
	font-size: 1.3em;
	text-transform: capitalize;
	height: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: color 300ms ease-in-out;
}.slider {
	position: absolute;
	height: 3px;
	background: red;
	width: 39%;
	bottom: 0;
	display: block;
}

<div class="category-results">
	    		<div class="menu-item-category active">trending</div>
	    		<div class="menu-item-category">text too loooong</div>
	    		<div class="menu-item-category">test3</div>
                <div class="slider" style="width: 81px;"></div>
    		</div>

qwerty

Asked: 2020-08-14 10:05:09 +0800 CST

Access JSON object without knowing the name in PHP

1

I'm trying to access the thumbnail source, but the pageid changes dynamically and I can't find a way to access it. I am working with PHP and in this way I access the resources of the Wikipedia API

$wikipediaArticleImage = $wikipediaArticle['query']["pages"][36408]["thumbnail"]["source"]

Where the pageid [36408]changes dynamically depending on the article searched

Thank you

qwerty

Asked: 2020-08-11 12:59:52 +0800 CST

How to put a limit on a CSS property with Javascript?

2

I have one divthat can only be dragged up and down, but I want it to have a minimum of 250px and a maximum of 650px , I have already searched but have not been able to find a solution yet.
Here you can test the code I have so far.

var offset = [0];
		var divOverlay = document.querySelector(".panel__bottom-xs");
		var isDown = false;
		divOverlay.addEventListener('mousedown', function(e) {
		    isDown = true;
		    offset = [
		        divOverlay.offsetTop - e.clientY
		    ];
		}, true);
		document.addEventListener('mouseup', function() {
		    isDown = false;
		}, true);

		document.addEventListener('mousemove', function(e) {
		    event.preventDefault();
		    if (isDown) {
		        divOverlay.style.top  = (e.clientY + offset[0]) + 'px';
		        document.querySelector('span').innerHTML = divOverlay.style.top		    }
		}, true);

.panel__bottom-xs {
  position: fixed;
  bottom: 0px;
  background: red;
  height: 50px;
  width: 50px;
  left: 150px;
}

<div class="panel__bottom-xs"></div>
<span></span>

Thank you very much in advance for your help!

qwerty

Asked: 2020-08-02 09:07:26 +0800 CST

Use of ? when using an external cascading style sheet

0

Why is a '?' used? followed by some information?, I suppose that 'v' means version but without it the style sheet is completely the same.

qwerty

Asked: 2020-08-01 08:41:10 +0800 CST

Remove the outline of a button in Firefox

4

I have a few buttons that when clicked a border appears around, I tried with outline and border but it does not remove:

.btn-calc {
	margin: 4px;
	width: 45px;
	height: 45px;
	border: none;
	text-decoration: none;
	cursor: pointer;
	border-radius: 5px;
	text-transform: capitalize;
	font-size: .9em;
	background: transparent;
	color: #939393;
	outline: none !important;
}

<button class="btn-calc math" id="AC">c</button>

qwerty

Asked: 2020-07-18 09:03:48 +0800 CST

How to access the data of an object?

1

I have tried to access the title value inside the query, I am using the Wikipedia API, I have tried with:

query[search]
//También con
var obj = JSON.parse(query);
var nombre = obj['search'];

Request source code with jquery

$(".searchBox").on("change", function() {
        var searchTerm = $("#searchTerm").val();
        var url = "https://es.wikipedia.org/w/api.php?action=query&list=search&srprop=snippet&format=json&origin=*&utf8=&srsearch=" + searchTerm;
        $.ajax({
            url: url,
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: "json",
            success: function(data, status, jqXHR) {
                console.log(data);
                //no funciona
                console.log(query[search])
            }
        })
    });

qwerty

Asked: 2020-03-20 16:29:49 +0800 CST

Problem when modifying the size of an SVG

1

I've been thinking about it and can't resize an SVG properly, I add the source code.

.st0{fill:#FE3D50;}
	.st1{fill:#51E4C2;}
	.st2{fill:#E5F9F4;}
	.st3{fill:#FFFFFF;}
	.st4{opacity:0.2;fill:#51E4C2;enable-background:new    ;}
	.st5{fill:#2283F6;}
	.st6{opacity:0.3;fill:#252528;enable-background:new    ;}
	.st7{fill:none;}
	.st8{fill:#F8E71C;}
	.st9{opacity:0.2;fill:#F8E71C;enable-background:new    ;}
	.st10{opacity:0.1;fill:#534741;enable-background:new    ;}
	.st11{fill:#534741;}
	.st12{opacity:0.2;fill:#DF71F5;enable-background:new    ;}
	.st13{opacity:0.2;fill:#534741;enable-background:new    ;}
	.st14{opacity:0.5;fill:#FFFFFF;enable-background:new    ;}
	.st15{fill:#DF71F5;}
	.st16{fill:#E4EFEC;}
	.st17{fill:#3ECCA6;}
	.st18{opacity:0.1;fill:#1F211E;enable-background:new    ;}
	.st19{opacity:0.1;fill:#51E4C2;enable-background:new    ;}
	.st20{opacity:0.1;fill:#DF71F5;enable-background:new    ;}
	.st21{fill:none;stroke:#534741;stroke-width:6;stroke-linecap:round;stroke-miterlimit:10;}
	.st22{fill:none;stroke:#FE3D50;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st23{opacity:0.1;fill:#FE3D50;enable-background:new    ;}
	.st24{opacity:0.2;fill:#252528;enable-background:new    ;}
	.st25{opacity:0.2;fill:#2283F6;enable-background:new    ;}
	.st26{opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
	.st27{opacity:0.2;fill:#FE3D50;enable-background:new    ;}
	.st28{fill:#F9EDED;}
	.st29{opacity:0.4;fill:#FE3D50;enable-background:new    ;}
	.st30{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
	.st31{opacity:0.1;fill:#2283F6;enable-background:new    ;}
	.st32{opacity:0.3;fill:#2283F6;enable-background:new    ;}
	.st33{fill:#F0F2F1;}
	.st34{fill:none;stroke:#E8EDEB;stroke-miterlimit:10;}
	.st35{fill:#E8EDEB;}
	.st36{fill:none;stroke:#F8E71C;stroke-miterlimit:10;}
	.st37{opacity:0.4;fill:#F8E71C;enable-background:new    ;}
	.st38{fill:none;stroke:#E23B53;stroke-miterlimit:10;}
	.st39{fill:none;stroke:#F8E71C;stroke-width:2;stroke-miterlimit:10;}
	.st40{fill:#2283F6;fill-opacity:0.3;}
	.st41{opacity:0.5;fill:#FE3D50;enable-background:new    ;}
	.st42{fill:#E2E6E8;}
	.st43{opacity:0.5;fill:#2283F6;enable-background:new    ;}
	.st44{opacity:0.3;fill:#51E4C2;enable-background:new    ;}
	.st45{fill:none;stroke:#F5F7F6;stroke-miterlimit:10;}
	.st46{opacity:0.4;fill:#51E4C2;enable-background:new    ;}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" height="200px" viewBox="0 0 1600 1200" width="200px" style="enable-background:0 0 200px 200px;">
  <g style="">
	<circle class="st15" cx="683.7392" cy="268.5" r="80"></circle>
	<circle class="st1" cx="683.7392" cy="268.5" r="55.88454"></circle>
	<path class="st16" d="M738.06525,316.16577l-114.89941-11.27325c-1.0993-0.10785-1.90302-1.08646-1.79517-2.18573l7.85675-80.07739
		c0.10785-1.09929,1.08643-1.90302,2.18573-1.79515l114.89941,11.27324c1.09924,0.10786,1.90295,1.08644,1.7951,2.18573
		l-7.85669,80.07739C740.14313,315.46991,739.16455,316.27362,738.06525,316.16577z"></path>
	<path class="st3" d="M741.46472,310.73096H626.01361c-1.10455,0-2-0.89545-2-2v-80.4619c0-1.10457,0.89545-2,2-2h115.45111
		c1.10461,0,2,0.89543,2,2v80.4619C743.46472,309.83551,742.56934,310.73096,741.46472,310.73096z"></path>
	<polygon class="st17" points="683.7392,278.5 702.90662,259.33258 738.44812,294.87415 738.44812,305.73096 683.73914,305.73096 	
		"></polygon>
	<circle class="st9" cx="719.56879" cy="273.63794" r="14.30533"></circle>
	<circle class="st8" cx="719.56879" cy="273.63794" r="8.97336"></circle>
	<path class="st1" d="M629.01379,283.55862c2.86639-2.28229,35.72925-35.72925,35.72925-35.72925l58.04626,58.0463h-93.77551
		V283.55862z"></path>
	<ellipse class="st18" cx="648.32654" cy="277.74991" rx="6.47058" ry="3.81927"></ellipse>
	<rect x="647.61292" y="268.21634" class="st11" width="1.42719" height="9.53357"></rect>
	<circle class="st17" cx="648.32654" cy="264.46155" r="6.47058"></circle>
</g>
</svg>

qwerty

Asked: 2020-02-08 17:39:58 +0800 CST

Calculate the factorial of a number and print the process

2

I have code that calculates the factorial of a number in JavaScript, but what I want it to display are the numbers just like in the image.

var n = 5,
  t = 1,
  q = document.querySelector('.n');


for (i = 0; i < n; i++) {
  t = t * (n - i);
}

q.innerHTML = (n + '! = ' + t);

<span class="n"></span>

qwerty

Asked: 2020-01-30 14:50:13 +0800 CST

Detect which elements were not clicked

1

I have the following code that identifies which element has been clicked, but how can I tell which element has not been clicked?

$('body').on('click', '.container-abd a', function(){
        var element = $(this).attr('href');
        alert(element)
    })

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-abd sticky-top">
      <ul>
        <a href="#ebasic-profile">
          <li><i class='bx bx-layer'></i>Basic</li>
        </a>
        <a href="#security">
          <li><i class='bx bx-shield'></i>Security</li>
        </a>
      </ul>
    </div>
    
    </body>

qwerty

Asked: 2020-01-21 20:49:16 +0800 CST

For what purposes is class or id added to script tags?

2

I have seen some pages add class or id to a script

Example:

<script class="script">
    alert(1)
</script>

Why is this practice done?

Screenshot of the Twitter source code where they assign an ID to a script

qwerty

Asked: 2020-01-03 14:00:21 +0800 CST

How to give clip-path a transition?

1

I have a div with a clip-path that forms a triangle, when hovering it becomes a square, but no corresponding animation is made with the transition.

$(".brush_about").hover(function () {
        $(this).children("video")[0].play();
        $('.text-container-about').fadeOut(1000);
    }, function () {
        var el = $(this).children("video")[0];
        el.pause();
        $('.text-container-about').fadeIn(1000);
    });

.brush_container {
  filter: drop-shadow(0px 10px 5px #0003); }
 .brush_container .brush_about {
    position: relative;
    height: 200px;
    width: 200px;
    -webkit-clip-path: polygon(100% 34%, 0 9%, 23% 100%);
    clip-path: polygon(100% 34%, 0 9%, 23% 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease; }
    .brush_container .brush_about .vid_ {
      position: relative;
      height: 100%; }
    .brush_container .brush_about:hover {
      -webkit-clip-path: none;
      clip-path: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="brush_container">
   <div class="brush_about">
     <video class="vid_" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
   </div>
</div>

How to modify "far" component data in Vue

How to get current coordinates in Vue2Leafet

Modify data of a parent component from a child

Error setting value to a property of an object in a Firefox extension

Remove class to elements

Upload files using curl

Error comparing hashes in node.js using bcrypt

HTTP verbs in HTML forms

Error connecting to database in Laravel

Move slider in Javascript

Access JSON object without knowing the name in PHP

How to put a limit on a CSS property with Javascript?

Use of ? when using an external cascading style sheet

Remove the outline of a button in Firefox

How to access the data of an object?

Problem when modifying the size of an SVG

Calculate the factorial of a number and print the process

Detect which elements were not clicked

For what purposes is class or id added to script tags?

How to give clip-path a transition?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?

qwerty's questions