These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Oct 2018
AJ Brommy
@AJ-Brommy
Oct 22 2018 07:34
@lwears im not sure what you mean, it's not telling it to do anything, so nothing will happen.
Kirk Clemons
@kcclemo
Oct 22 2018 11:26
Good morning all!
Hussein Zaki
@Hussein90
Oct 22 2018 11:32
Good morning
Victor Popescu
@VicPopescu
Oct 22 2018 11:37
Morning
Kirk Clemons
@kcclemo
Oct 22 2018 12:32
Anyone working on anything interesting? Or maybe participating in Hacktoberfest?
Hussein Zaki
@Hussein90
Oct 22 2018 14:53

hi i have create a function delete button in my project , here is my updated code

import React, { Component } from 'react';
import './App.css';

class App extends Component {
 constructor(props) {
    super(props);
    this.state = {
      data: {posts: null, categories: null}
    };
  }
  componentDidMount() {
    let url = "http://localhost:3001/db";
    fetch(url).then(data => data.json()).then(json => {
      console.log(json)
      this.setState({data: json})
    })
  }

  deleteUser=(index, e) => {
    const dataposts= Object.assign(null, this.state.data.posts);
    dataposts.splice(index, 1);
    this.setState({data:dataposts});

  }

  render() {
    const categories = this.state.data.categories
    const posts = this.state.data.posts
    console.log(posts)
    return (
      <div className="App">
      <ul className="posts">

        {
          posts && posts.map(post => (
            <div key={post.id}>
              <li>{post.title}</li>

              <button onclick={delEVent}>Delete</button>
              <ul>
                <li>{post.name}</li>
              </ul>
              <li>{post.tags}</li>
              <li>{post.duedate}</li>
            </div>
          ))
        }
        </ul>
        <ul className="categories">
        {
         categories && categories.map(category => (
            <div key={category.id}>
              <li>{category.name}</li>
            </div>
          ))
        }
        </ul>
      </div>
    );
  }
}



export default App;

i stuck to where to put the code

delEVent={this.deleteUser.bind(this, index)}

to make the button work

Eric Weiss
@eweiss17
Oct 22 2018 15:03
would it be similar to delete user?
Hussein Zaki
@Hussein90
Oct 22 2018 15:03
more like todo task delete task
Hussein Zaki
@Hussein90
Oct 22 2018 15:39
can anyone help me
here is the updated code
import React, { Component } from 'react';
import './App.css';

class App extends Component {
 constructor(props) {
    super(props);
    this.state = {
      data: {posts: null, categories: null, subtasks: null}
    };
  }
  componentDidMount() {
    let url = "http://localhost:3001/db";
    fetch(url).then(data => data.json()).then(json => {
      console.log(json)
      this.setState({data: json})
    })
  }

  deletePost=(index, e) => {
    const dataposts= Object.assign(null, this.state.data.posts);
    dataposts.splice(index, 1);
    this.setState({data:dataposts});

  }

  render() {
    const subtasks = this.state.data.subtasks
    const categories = this.state.data.categories
    const posts = this.state.data.posts
    console.log(posts)
    return (
      <div className="App">
      <ul className="posts">

        {
          posts && posts.map(post => (
            <div key={post.id}>
              <li>{post.title}</li>

              <button >Delete</button>
              <ul>
                <li>{post.name}</li>
              </ul>
              <li>{post.tags}</li>
              <li>{post.duedate}</li>
            </div>
          ))
        }
        </ul>
        <ul className="categories">
        {
         categories && categories.map(category => (
            <div key={category.id}>
              <li>{category.name}</li>
            </div>
          ))
        }
        </ul>
        <ul>
        {
         subtasks && subtasks.map(subtask => (
            <div key={subtask.id}>
              <li>{subtask.item}</li>
            </div>
          ))
        }
        </ul>
      </div>
    );
  }
}



export default App;
Christopher McCormack
@cmccormack
Oct 22 2018 15:48
@Hussein90 you may want to break this out into a codepen or codesandbox project so we can more easily help. It's also frowned upon to post large blocks of text/code like this
Hussein Zaki
@Hussein90
Oct 22 2018 15:49
okay
Hussein Zaki
@Hussein90
Oct 22 2018 15:56
here is the link on codesandbox
https://codesandbox.io/s/wy34yom6nl
Christopher McCormack
@cmccormack
Oct 22 2018 16:02
Please ask a specific question as well @Hussein90 . What are you trying to do, what's not working.
Hussein Zaki
@Hussein90
Oct 22 2018 16:04
okay i am trying to make a delete button so when i click on it delete the post which is beside it
Christopher McCormack
@cmccormack
Oct 22 2018 16:09
@Hussein90 so you want to add a click handler to your button, correct? Do you know how to add handlers to elements?
BrianWilliams28
@BrianWilliams28
Oct 22 2018 16:40
could someone assist as to why the following javascript function isn't working? it shows the element but will not hide it upon second+ click
const login = document.querySelector(".log-in");
const dropdown = document.querySelector("ul.nav-child.unstyled.small");

const showHide = function(){
 if (login.text !== "Log in") {
   console.log(login.text);
   login.setAttribute("href", "javascript: void(0)");
   if (dropdown.style.visibility = "hidden") {
     dropdown.style.visibility = "visible";
   } else {
       dropdown.style.visibility = "hidden";
   }
}
}

login.addEventListener("click", showHide);
});
Eric Weiss
@eweiss17
Oct 22 2018 16:45
should it be decalred as a const?
maybe that doesn't matter
if (dropdown.style.visibility = "hidden") {
that is wrong
switch to ==
BrianWilliams28
@BrianWilliams28
Oct 22 2018 16:52
@eweiss17 thanks but that actually breaks it...1 equal sign is correct syntax
it shows on initial click but does not hide
Eric Weiss
@eweiss17
Oct 22 2018 16:54
wait what? if you have only = then it will always be true
BrianWilliams28
@BrianWilliams28
Oct 22 2018 16:54
oh
you mean in the first if statement
Eric Weiss
@eweiss17
Oct 22 2018 16:54
ya
BrianWilliams28
@BrianWilliams28
Oct 22 2018 16:54
1 sec
Eric Weiss
@eweiss17
Oct 22 2018 16:54
no in the dropdown.style.visibility if statement
BrianWilliams28
@BrianWilliams28
Oct 22 2018 16:55
yeah ok you're right
that fixed it
@eweiss17 thanks
Hussein Zaki
@Hussein90
Oct 22 2018 17:05
@cmccormack yes, check it i updated

the problem is i don't know where to put

delEvent={this.deletePost.bind(this, index)}

this code

Hussein Zaki
@Hussein90
Oct 22 2018 17:16
@cmccormack
Christopher McCormack
@cmccormack
Oct 22 2018 17:26

@Hussein90

<button onclick={delEvent}>Delete</button>

Can you not just replace delEvent with your code?

Hussein Zaki
@Hussein90
Oct 22 2018 17:27
@cmccormack i tried but not working
Christopher McCormack
@cmccormack
Oct 22 2018 17:28
And what troubleshooting have you done?
you don't have a valid json file in your codesandbox, how can you be troubleshooting at all?
You can use the link I sent you yesterday to test in codesandbox
Hussein Zaki
@Hussein90
Oct 22 2018 17:31
i updated it
Christopher McCormack
@cmccormack
Oct 22 2018 17:33
you have an error in your code; review the error and continue troubleshooting
Hussein Zaki
@Hussein90
Oct 22 2018 17:33
okay
yeah the index is not identify
onclick={this.deletePost.bind(this, index)}
Christopher McCormack
@cmccormack
Oct 22 2018 17:43
@Hussein90 in React you should use onClick
You need to create index somewhere... maybe in posts.map(post => (?
Hussein Zaki
@Hussein90
Oct 22 2018 17:44
like that
var index =   ???
Christopher McCormack
@cmccormack
Oct 22 2018 17:45
well that's one way to do it
but you need to figure that out. This is basic JavaScript, if you don't have a variable declared, you can't reference it
hint: the map callback has multiple arguments. MDN
@Hussein90 have you gone through the React course on FCC? It may be a good refresher that can fill in some concerns/gaps
Hussein Zaki
@Hussein90
Oct 22 2018 17:56
it works now but it delete all
Christopher McCormack
@cmccormack
Oct 22 2018 18:02
@Hussein90 I can tell you that deletePost is coded incorrectly. Walk through your logic and try to determine what's going on
Hussein Zaki
@Hussein90
Oct 22 2018 18:02
i am doing that now
Aita Kane
@aita-kane
Oct 22 2018 18:55
hello anyone where I can volunteer as a developper please ?
Hussein Zaki
@Hussein90
Oct 22 2018 19:03
@cmccormack
i figured it because of that
Object.assign([], this.state.posts);
Christopher McCormack
@cmccormack
Oct 22 2018 19:04
@Hussein90 what are you assigning to data in your setState?
And I'm not asking because I don't know, I want you to dig into it
Hussein Zaki
@Hussein90
Oct 22 2018 19:06

i know because of that thank you

data: dataposts

under deletePost

Eric Weiss
@eweiss17
Oct 22 2018 19:14
@aita-kane look for an opensource project and try to contribute that way
Hussein Zaki
@Hussein90
Oct 22 2018 19:26

i changed to

this.state.posts

and to this

this.posts

and i also changed the 'setState' assign to

dataposts: dataposts
Kirk Clemons
@kcclemo
Oct 22 2018 19:28
@aita-kane You can browse through this collection of open source projects to see if there are any that fit your niche or interests:
https://firstcontributions.github.io/
Christopher McCormack
@cmccormack
Oct 22 2018 19:33
@Hussein90 that isn't the problem
think about what you are assigning to data
Hussein Zaki
@Hussein90
Oct 22 2018 19:34
 data: { posts: null, categories: null, }
Christopher McCormack
@cmccormack
Oct 22 2018 19:35
@Hussein90 if you assign const dataposts = Object.assign([], this.state.data.posts); dataposts to data, what do you think data will look like then?
Hussein Zaki
@Hussein90
Oct 22 2018 19:35
it will be mess
@cmccormack
Christopher McCormack
@cmccormack
Oct 22 2018 19:37
@Hussein90 can you be more specific? You need to figure out what will happen and then you can figure out how to fix it
Hussein Zaki
@Hussein90
Oct 22 2018 19:38

because i get data from

this.state.data.posts

and then resend it again to data.posts

@cmccormack
Christopher McCormack
@cmccormack
Oct 22 2018 19:39
@Hussein90 that is not what you are doing
how about logging the value of your state after you update and see for yourself?
don't guess, log!
Hussein Zaki
@Hussein90
Oct 22 2018 19:41

i made a

console.log(dataposts)

and it comes

undefined
Christopher McCormack
@cmccormack
Oct 22 2018 19:41
ok.. you need to figure out why
Hussein Zaki
@Hussein90
Oct 22 2018 19:41
that the point i didn't get it
Brad
@bradtaniguchi
Oct 22 2018 19:42
so you have given up at this point?
Hussein Zaki
@Hussein90
Oct 22 2018 19:42
no i am still thinking
but i am stuck with it
Brad
@bradtaniguchi
Oct 22 2018 19:47
like @cmccormack said, time to work the issue now. Try different things. When stuff goes wrong you start programming, until then your just typing :P
Hussein Zaki
@Hussein90
Oct 22 2018 19:48
okay
Hussein Zaki
@Hussein90
Oct 22 2018 20:07
@bradtaniguchi i am trying
Hussein Zaki
@Hussein90
Oct 22 2018 21:37
i am really stuck until now i don't know what is the problem really!!!!!!
i am really trying very hard
Brad
@bradtaniguchi
Oct 22 2018 21:39
@Hussein90 You have the code your having issues with on codepen?
Hussein Zaki
@Hussein90
Oct 22 2018 21:39
yes but in codesandbox
here is the link
Brad
@bradtaniguchi
Oct 22 2018 21:42
So whats the issue again?
What have you tried? And what are you trying todo?
Hussein Zaki
@Hussein90
Oct 22 2018 21:43
when i click on it ,it delete every thing in the page i want only to be indiviual
Brad
@bradtaniguchi
Oct 22 2018 21:47
click on what? What do you mean by "i want only to be individual"
Hussein Zaki
@Hussein90
Oct 22 2018 21:48
when i click on delete button i want only which is beside it to be delete not all the page
Brad
@bradtaniguchi
Oct 22 2018 21:51
@Hussein90 Have you looked at the docs for splice?
Hussein Zaki
@Hussein90
Oct 22 2018 21:52
not really i am looking at it now
Brad
@bradtaniguchi
Oct 22 2018 21:53
Yea I recommend making sure you understand what your using, and not just copy-pasting code.
Hussein Zaki
@Hussein90
Oct 22 2018 21:53
okay
Brad
@bradtaniguchi
Oct 22 2018 21:57
@cmccormack you still around to help @Hussein90 ?
Christopher McCormack
@cmccormack
Oct 22 2018 21:58
working atm
I know the answer and have pointed directly at it @Hussein90 you need to put some logs in and try to figure out what you're changing that is breaking it
Take your current function and at least try to log something...
  deletePost = (index, e) => {
    const dataposts = Object.assign([], this.state.data.posts);
    dataposts.splice(index, 1);
    this.setState({ data: dataposts }, () => console.log(this.state.data));
  };
above I added a log statement that will run when setState has completed
try that, then try to determine why your code will fail after running the deletePost method
Hussein Zaki
@Hussein90
Oct 22 2018 22:07
now in console.log it changed to an object and still disappear all
Brad
@bradtaniguchi
Oct 22 2018 22:08
What is in the object, since that's the state of the app
Hussein Zaki
@Hussein90
Oct 22 2018 22:09
getting the info of the first post
in arry like
{title: "CopyRight Automatico", tags: "[JS]", id: 1, userId: 1, name: "Shopping", …
Christopher McCormack
@cmccormack
Oct 22 2018 22:11
yup, and what was data prior to that?
  deletePost = (index, e) => {
    console.log(this.state.data) // <= Add this log
    const dataposts = Object.assign([], this.state.data.posts);
    dataposts.splice(index, 1);
    this.setState({ data: dataposts }, () => console.log(this.state.data));
  };
Hussein Zaki
@Hussein90
Oct 22 2018 22:15
now when i click on for example one the first button the info of the second appear and vise versa also the same
on console
Christopher McCormack
@cmccormack
Oct 22 2018 22:20
@Hussein90 I have no idea what you mean, can you show us?
Hussein Zaki
@Hussein90
Oct 22 2018 22:26
Opera Snapshot_2018-10-23_002142_localhost.png
the red arrrow for the first button info up of it and other arrow for the second button and info up of it also
here is the console appear after i click on the first button
2018-10-23_0-23-42.jpg
@cmccormack
Hussein Zaki
@Hussein90
Oct 22 2018 22:37
you can check it by yourself at
https://codesandbox.io/s/wy34yom6nl
Christopher McCormack
@cmccormack
Oct 22 2018 22:39
@Hussein90 notice how the first log statement (above undefined) is an object, and the second log statement (below undefined) is an array?
Hussein Zaki
@Hussein90
Oct 22 2018 22:39
yes
Christopher McCormack
@cmccormack
Oct 22 2018 22:43
@Hussein90 Should it?
Hussein Zaki
@Hussein90
Oct 22 2018 22:43
no
i think
Christopher McCormack
@cmccormack
Oct 22 2018 22:49
No, it should not, it should have the same structure. You are overriding data with your posts array, but data should contain a posts property and a categories property, correct?
Hussein Zaki
@Hussein90
Oct 22 2018 22:50
correct
but i want for every property it's individual delete button
Christopher McCormack
@cmccormack
Oct 22 2018 22:54
Right...
You are overwriting your entire data object with an array, that's why it isn't working.
you aren't deleting any single item, you're completely destroying your state structure
Hussein Zaki
@Hussein90
Oct 22 2018 22:55
when i am click on delete i destroy the whole app
Christopher McCormack
@cmccormack
Oct 22 2018 22:57
You are turning state: { data: { posts: [...], categories: [...] } } into state: { data: [...] }
That's the best I'm going to be able to do to help right now @Hussein90 , I have to go for a while.
Hussein Zaki
@Hussein90
Oct 22 2018 23:04

now it get

@Hussein90 notice how the first log statement (above undefined) is an object, and the second log statement (below undefined) is an array?
it returns now is null

this.setState({  data: { posts: [], categories: [] } }, () => console.log(this.state.data));
Hussein Zaki
@Hussein90
Oct 22 2018 23:48
anyone here help me to finish this please
Brad
@bradtaniguchi
Oct 22 2018 23:48
@Hussein90 sounds like you already figured it out?
Hussein Zaki
@Hussein90
Oct 22 2018 23:49
still not working
still all disappear
Brad
@bradtaniguchi
Oct 22 2018 23:51
@Hussein90 Have you inspected the html to see what actually is left? (hint: there is stuff there)
Using your dev tools, to see what is left over in the view
it's actually really obvious once you see what is currently there after you hit delete
Hussein Zaki
@Hussein90
Oct 22 2018 23:53
@bradtaniguchi these appear
{posts: Array(0), categories: Array(0)}////
Brad
@bradtaniguchi
Oct 22 2018 23:53
yea... so if your posts and categories are empty what do you render to the use according to the react code you currently hav?
Hussein Zaki
@Hussein90
Oct 22 2018 23:54
they are not empty at all
Brad
@bradtaniguchi
Oct 22 2018 23:54
whats not empty?
Hussein Zaki
@Hussein90
Oct 22 2018 23:54
Opera Snapshot_2018-10-23_002142_localhost.png
@bradtaniguchi from these is coming so
the posts nad categories are not empty at all
Brad
@bradtaniguchi
Oct 22 2018 23:55
after you hit delete?
Hussein Zaki
@Hussein90
Oct 22 2018 23:55
no before
Brad
@bradtaniguchi
Oct 22 2018 23:56
....idk what your trying to say, I'm only trying to help you with the bug where everything "disappears" when you hit delete.
When you hit delete inspect the page for the html and look at what actually is rendered
Hussein Zaki
@Hussein90
Oct 22 2018 23:56
yes
i am sorry
@bradtaniguchi
there is nothing
not before or after
<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"><div class="App"><ul class="posts"><form><input placeholder="enter your task here" value=""><button type="submit">add</button></form><div><li>CopyRight Automatico</li><button>Delete</button><ul><li>Shopping</li></ul><li>[JS]</li><li></li></div><div><li>HtmlWebpackPlugin Multiples HTML files</li><button>Delete</button><ul><li>Cooking</li></ul><li>[JS, webpack]</li><li></li></div></ul><ul class="categories"><div><li>Personal</li></div><div><li>Work</li></div></ul></div></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><div id="ghostery-purple-box" class="ghostery-bottom ghostery-right ghostery-none ghostery-collapsed"><div id="ghostery-box"><div id="ghostery-count" style="background: none; color: rgb(255, 255, 255);">0</div><div id="ghostery-pb-icons-container"><span id="ghostery-breaking-tracker" class="ghostery-pb-tracker" title="Broken Page Trackers" style="background: url(&quot;data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPHRpdGxlPmJyZWFraW5ncGFnZTwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSJQdXJwbGUtQm94IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQxNi4wMDAwMDAsIC00NTMuMDAwMDAwKSIgaWQ9ImJhbSEtYnJlYWtpbmctdGhlLXBhZ2UtY29weS0yIiBmaWxsPSIjRkNCQTMzIj4NCiAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQxNi4wMDAwMDAsIDQ1My4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOSwwLjE5NTY1MjE3NCBDNC4xNDQzNjAyNSwwLjE5NTY1MjE3NCAwLjE5NTY1MjE3NCw0LjE0NDM2MDI1IDAuMTk1NjUyMTc0LDkgQzAuMTk1NjUyMTc0LDEzLjg1NTYzOTggNC4xNDQzNjAyNSwxNy44MDQzNDc4IDksMTcuODA0MzQ3OCBDMTMuODU1NjM5OCwxNy44MDQzNDc4IDE3LjgwNDM0NzgsMTMuODU1NjM5OCAxNy44MDQzNDc4LDkgQzE3LjgwNDM0NzgsNC4xNDQzNjAyNSAxMy44NTU2Mzk4LDAuMTk1NjUyMTc0IDksMC4xOTU2NTIxNzQgWiBNMTEuNDg1NTg5OSwxMy40MTA0NDQxIEwxMS4wNzcwNzk4LDEzLjAyMDY3NjggTDEyLjEwMDQ3MTEsMTIuMjE2OTU3OSBMMTEuMDQ2MjQ1MSwxMi4yMTY5NTc5IEwxMS4yMzQ0NzgxLDEwLjg3MDcwODcgTDkuODAzMTgxNDIsMTEuNzk1NzUxMiBMOS40MDMzMzczNCw5LjM0NTA5MzkyIEw4LjY5NDc0MjY5LDExLjA4NjU1MTkgTDcuMzI1NzIwMDksMTAuMTcwOTgxNSBMNy43NTI1Njk3NywxMS45Mjk1NyBMNi41NTQyNDY3MywxMi4zMTE0Nzc1IEw3Ljg4MjM1Nzg3LDEzLjQxMDQ0NDEgTDExLjQ4NTU4OTksMTMuNDEwNDQ0MSBaIE02LjcxNTY3NTcyLDEzLjQxMDQ0NDEgTDUuMDI4NjMxOTcsMTIuMDA2NzU3NiBMNi44Njg0Mzg3MywxMS40MzE5ODE4IEw2LjE2Mzg3NDc3LDguNDg4NTczMDkgTDguMzQ5MzEyODgsOS45NTk5NzUxMiBMOS43MDQwMjY1NCw2LjYxMjQ5MDE1IEwxMC4zNTAzNDcxLDEwLjU1NjcxODIgTDEyLjE5NDk5MDcsOS4zNzY1MzMyOCBMMTEuODk4OTM2OCwxMS40NzY5MjM5IEwxNC4yNjI5MzQzLDExLjQ3NjkyMzkgTDEyLjIxMjkyNzIsMTMuMDc4OTIwMiBMMTIuNTY3MjI0NSwxMy40MTA0NDQxIEwxNS4zMzEyNjc3LDEzLjQxMDQ0NDEgTDE0LjQ3Mzk0MDcsMTIuNTk4NjYzOSBMMTcuMjA3MzUwNiwxMC40NjY4MzM5IEwxMy4wNjA3ODIxLDEwLjQ2NjgzMzkgTDEzLjQ5NjI5NzcsNy4zNDg2OTUgTDExLjA5OTg1MzIsOC44Nzg5NDUwNSBMMTAuMTIxMjAyNiwyLjg5Mjc3MTMgTDcuODc3NzIyNTgsOC40MjU0OTI4NSBMNC41NzA1NDQ0Nyw2LjIwMzk4MDEgTDUuNjY1NDgwNDEsMTAuNzUwMzkyNyBMMi45NTEwMTQ3MiwxMS41OTgyNDc2IEw1LjEzNjQ1MjgzLDEzLjQxMDQ0NDEgTDYuNzE1Njc1NzIsMTMuNDEwNDQ0MSBaIiBpZD0iYnJlYWtpbmdwYWdlIj48L3BhdGg+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=&quot;); opacity: 0.5;"></span><span id="ghostery-slow-tracker" class="ghostery-pb-tracker" title="Slow Trackers" style="background: url(&quot;data:image/svg+xml