These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Sep 2018
Christopher McCormack
@cmccormack
Sep 13 2018 00:00
:thumbsup:
Alex Coder
@jkid314159
Sep 13 2018 00:01
:)) Bye
mustimuu
@mustimuu
Sep 13 2018 04:22
hello guys
can someone help me ?
Morchid Chellali
@Morched23MJ
Sep 13 2018 05:45
What's up, @mustimuu?
Jack Lyons
@JackEdwardLyons
Sep 13 2018 10:29
hey guys i have a basic react question
could anyone help out?
Claudio Restifo
@Marmiz
Sep 13 2018 10:51
sure @JackEdwardLyons
Mel Macaluso
@MelMacaluso
Sep 13 2018 11:14
Hi Guys, posting here too maybe I will have more luck

Why a specific object property is not reactive and the rest are?

That's my vue loop:

                <div v-for="(trip,index) in trips" :key="index"  class="w-full md:w-1/4 p-8">
                    <div class="flex flex-col shadow">
                        <div class="flex h-48 w-auto">
                            <div class="w-full h-full bg-center bg-no-repeat bg-cover" :style="`background-image:url('${trip.acf.hero_image}');`"></div>
                        </div>
                        <div class="flex flex-col">
                            <div class="flex flex-col">
                                <pre>{{trip.country_color}}</pre>
                                <span>{{trip.title.rendered}}</span>
                                <span>{{trip.acf.trip_filter_preview.type}}</span>
                                <span>{{trip.acf.trip_filter_preview.duration}} Days</span>
                            </div>
                            <div class="flex flex-col">
                                <span>From {{trip.acf.budget.euros}}</span>
                                <span>Based on {{trip.acf.size}} Students</span>
                            </div>                            
                        </div>
                    </div>
                </div>
That's the script part:
(ignore the comments)
```
<script>
    import axios from 'axios'

    export default {
        name: 'tripfilter',
        data() {
            return {
            trips: []
            }
        },
        created() {
            // console.log(this.$children)
        },
        methods: {
            searchTrips(query){
                // console.log(`/wp-json/wp/v2/trip?${query}`)
                axios.get(`/wp-json/wp/v2/trip?${query}`)
                // .then(response => console.log(response))
                .then(response => {
                    // const tempTrips = response.data
                    // this.appendCountryColor(tempTrips)
                    // console.log(response.data)
                    this.trips = this.appendCountryColor(response.data)
                    // return this.appendCountryColor(tripsTemp)
                    // console.log(this.trips)
                    // this.trips = tempTrips
                    // console.log(this.trips)
                })
                // .then(tripsTemp => this.trips = tripsTemp)
                .catch(errors => console.log(errors))
            },
            getTaxonomyAndTermId() {
                const TaxonomyContainers = this.$refs.TripFilterContainer.querySelectorAll('.trip-filter-category')
                let query = ""
                TaxonomyContainers.forEach(TaxonomyContainer => {
                    const taxonomy = TaxonomyContainer.querySelectorAll('[data-trip-category]')[0].getAttribute('data-trip-category')
                    const termId = TaxonomyContainer.querySelectorAll('.trip-filter-button--active')[0].getAttribute('data-trip-filter-option')
                    // If All is selected then don't append anything to the query
                    termId !== 'All' ? query += `${taxonomy}=${termId}&` : ''
                })
                // remove the random & that this appends if the query is not empty
                query.length > 0 ? query = query.slice(0, -1) : ''
                this.searchTrips(query)
            },
            appendCountryColor(trips){
                const tripsToAmend = trips
                 tripsToAmend.forEach( tripToAmend => {
                    axios.get(`/wp-json/acf/v3/country/${tripToAmend.country}/country_color`)
                    .then(response => tripToAmend.country_color = response.data.country_color)
                    .catch(errors => console.log(errors))
                })
                return tripsToAmend
            }
        }
    }
</script>
```
<pre>{{trip.country_color}}</pre>
Seems not to work even thought in the console.log it is correctly returned
image.png
Alex Coder
@jkid314159
Sep 13 2018 13:56
Hello
I have a basic React question using CodePen
const element = <h1>Hello, world</h1> ReactDOM.render( element, document.getElementById('root') );
I set the js preprocessor to Babel and import the libs called "react.production.min.js" 16.4.2 and "react-dom.production.min.js" 16.5.0
The code does not render in CodePen
Appreciate ur suggestions
Mel Macaluso
@MelMacaluso
Sep 13 2018 14:00
Share the codepen link
Mel Macaluso
@MelMacaluso
Sep 13 2018 14:01
there you go
image.png
Alex Coder
@jkid314159
Sep 13 2018 14:02
I read this but did not understand
Eric Weiss
@eweiss17
Sep 13 2018 14:04
did you make sure to define ReactDOM?
Alex Coder
@jkid314159
Sep 13 2018 14:06
I put this in the JS window "import React from 'react';"
Also, "import ReactDOM from 'react-dom';"
It seems you were importing not the right scripts or whatever, official ones work
@eweiss17 ReactDOM is a global when you import as script tag, no need to define basically
Alex Coder
@jkid314159
Sep 13 2018 14:11
I see you using, "15.1.0/react.min.js"
Mel Macaluso
@MelMacaluso
Sep 13 2018 14:11
try to switch to latest and make sure they didn't change the global definition
and that you are importing compatible versions of react -> react-dom
Alex Coder
@jkid314159
Sep 13 2018 14:12
I used "15.1.0/react.min.js" and works
Mel Macaluso
@MelMacaluso
Sep 13 2018 14:12
Nice one
Alex Coder
@jkid314159
Sep 13 2018 14:12
16.4 does not seem to work
Mel Macaluso
@MelMacaluso
Sep 13 2018 14:12
Time to read the docs
They might have some breaking changes or similar
Alex Coder
@jkid314159
Sep 13 2018 14:13
In Pen Settings search box input react and 16.4 comes up. There is not option for 15.1
So, somehow 16.4 will work
???
Mel Macaluso
@MelMacaluso
Sep 13 2018 14:14
instead of relying on that, rely on what the official documentation suggests and import the url in that modal or as a normal <script src="#"> tag
Alex Coder
@jkid314159
Sep 13 2018 14:20
In codepen in the file CodePen(index.html) and the bottom in the index.html I see the import
Alex Coder
@jkid314159
Sep 13 2018 14:25
I tried to switch libraries and check where the <script src="#">tag is. Seems libraries are both imported through the Settings but does not work with 16.4 version
I ask at CodePen
@MelMacaluso TYVM
Goodbye
Nicolas Ramirez
@kamatheuska
Sep 13 2018 15:23

Hey everyone! can someone give me a hand with the Cash Register challenge? I am a bit stuck...https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register

here is what I have done so far: https://repl.it/@kamatheuska/DisloyalGoldenNotifications

Vikrant Singh
@VikrantSingh13
Sep 13 2018 16:38
and let me know if this works for you thanks
Brad
@bradtaniguchi
Sep 13 2018 17:07
@VikrantSingh13 it does not look like the first quote is ever different (its not random) and the "new" button does nothing. Tweet works tho
Candis Wasell
@CandiW
Sep 13 2018 17:39
Hello - is there anyone here that can put some eyes on my Drum Machine?
or am I in the wrong room?
I'm having trouble passing test #5 and #6....it says a sound is not played when the "Q" key is pressed but that's not true!! I used sounds I found on the forum from amazonaws/freecodecamp and I'm unsure what the problem is. All the id's are correct and all that so I don't know what the issue is. Here's the link to my codepen:
Christopher McCormack
@cmccormack
Sep 13 2018 17:48
@CandiW doesn't work for me when I try it using the keyboard
Candis Wasell
@CandiW
Sep 13 2018 18:45
@cmccormack Ok - you mean using certain keys? I didnt' see that as a requirement on the challenge?? I didn't build it with that capability.
Christopher McCormack
@cmccormack
Sep 13 2018 18:45

@CandiW

it says a sound is not played when the "Q" key is pressed but that's not true!!

not sure what you mean
did you mean the button labeled Q is clicked?
all of those letters correspond to keyboard keys on the left side of the keyboard, it wants you to be able to hit them on the keyboard
not just press the button with your mouse
rk
@rajkumart08_twitter
Sep 13 2018 19:34

hi,

  • I am trying to learn d3 maps.
  • so I took a below example and included in my stackblitz.
  • but right now I am facing an error due to jquery
  • I am implementing one by one so that I will learn
  • can you tell me how to fix it.
  • providing stackblitz and code below

https://medium.com/@andybarefoot/making-a-map-using-d3-js-8aa3637304ee

https://stackblitz.com/edit/angular-d3-v4-barchart-5pkcdj?file=app/shared/barchart/barchart.component.ts


let svg = d3
      .select("#map-holder")
      .append("svg")
      // set to the same size as the "map-holder" div
      .attr("width", $("#map-holder").width())
      .attr("height", $("#map-holder").height())
      // add zoom functionality
      //.call(zoom)
      ;

VM17251:37 ERROR ReferenceError: $ is not defined
    at BarchartComponent.createChart (barchart.component.ts:82)
    at BarchartComponent.ngOnInit (barchart.component.ts:49)
    at checkAndUpdateDirectiveInline (provider.js:252)
    at checkAndUpdateNodeInline (view.js:472)
    at checkAndUpdateNode (view.js:415)
    at debugCheckAndUpdateNode (services.js:504)
    at debugCheckDirectivesFn (services.js:445)
    at Object.eval [as updateDirectives] (HomeComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (services.js:425)
    at checkAndUpdateView (view.js:382)
Brad
@bradtaniguchi
Sep 13 2018 19:39
@rajkumart08_twitter $ is jquery, and your getting an error since jquery isnt defined.
probably because it does not exist on the page
Christopher McCormack
@cmccormack
Sep 13 2018 19:51
you can replace $("#map-holder") with document.getElementById('map-holder')
rk
@rajkumart08_twitter
Sep 13 2018 19:58
@bradtaniguchi hey can you update in my stackblitz its so confusing
Brad
@bradtaniguchi
Sep 13 2018 20:01
@rajkumart08_twitter just do what @cmccormack said