These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Jun 2018
I don't know how to center .search-engine and h1 in here
they are both block elements
im trying to float them one left another to right and giving them
line-height: 100px;
the header tag's height is 100px;
i thought it would center them but it didnt
include*engine
@newtothat
Jun 14 2018 00:19
petshop.png
Ryan Williams
@Ryanwfile
Jun 14 2018 00:43
I am working on a multi level dropdown menu and I am having trouble closing a dropdown when another one is opened, how do I go about making sure when a new dropdown is selected the old one closes while also making sure the dropdown menu closes if the user clicks somewhere away from the menus? Here is the codepen, any help is greatly appreciated. https://codepen.io/Ryanwfile/pen/bMwYam
include*engine
@newtothat
Jun 14 2018 00:47
@Ryanwfile where you created class ? you have a div with id of app in html
is it possible to create it in js?
Ryan Williams
@Ryanwfile
Jun 14 2018 00:48
@newtothat Yes I'm trying to do it in React
include*engine
@newtothat
Jun 14 2018 00:48
cool
good luck
Ryan Williams
@Ryanwfile
Jun 14 2018 00:51
@newtothat Thank you
Mike Kordiak
@kordiak55
Jun 14 2018 00:58
@kordiak55
Question campers
I noticed the new certs are finally out
I also noticed I have green check boxes next to all the js algorithms cert
Anyone else complete the old front end cert and notice this?
roxxlen
@roxxlen
Jun 14 2018 01:15
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemCount: 0
    };
    // change code below this line
    this.handleClick = this.handleClick.bind(this.addItem());
    // change code above this line
  }
  addItem() {
    this.setState({
      itemCount: this.state.itemCount + 1
    });
  }
  render() {
    return (
      <div>
        { /* change code below this line */ }
        <button onClick={this.handleClick}>Click Me</button>
        { /* change code above this line */ }
        <h1>Current Item Count: {this.state.itemCount}</h1>
      </div>
    );
  }
};
what's wrong with this code ?
Brad
@bradtaniguchi
Jun 14 2018 01:16
@roxxlen What do you THINK is wrong? you getting errors?
roxxlen
@roxxlen
Jun 14 2018 01:17
it won't pass the test
Brad
@bradtaniguchi
Jun 14 2018 01:17
whats the test? Are you getting errors? anything in your dev tools
roxxlen
@roxxlen
Jun 14 2018 01:18
it says “_this.handleClick is undefined”
Brad
@bradtaniguchi
Jun 14 2018 01:18
The way your binding to this is not correct, you should pass this to the .bind() function
roxxlen
@roxxlen
Jun 14 2018 01:19
same error
i've tried "this" "addItem" "addItem()"
Brad
@bradtaniguchi
Jun 14 2018 01:19
In both areas you need to change?
roxxlen
@roxxlen
Jun 14 2018 01:20
another area ?
besides "bind" ?
Brad
@bradtaniguchi
Jun 14 2018 01:21
There are two parts of the code you need to update with bind, or at least 1 of them. I'm not a react guy so I can't say for sure tho
roxxlen
@roxxlen
Jun 14 2018 01:22
onClick is ok in the previous set
roxxlen
@roxxlen
Jun 14 2018 01:31
got it
Ceobustle
@ceobustle_twitter
Jun 14 2018 01:34
Hello, anyone in here to help?
Ryan Williams
@Ryanwfile
Jun 14 2018 01:44
I am working on a multi level dropdown menu using Bootstrap, Jquery in React and I'm having difficulty closing one of the menus when another one is selected, how do I go about closing an opened menu when another is selected or the user clicks away from the menus? Here is the codepen, any help is greatly appreciated.
https://codepen.io/Ryanwfile/pen/bMwYam
GSGV
@GSGV
Jun 14 2018 01:48
General Question to all:
When working with images for thumbnails, backgrounds, ect., where can you source them?
Everytime i find something i love and end up using from one of these free-photo sites, it disappears and messes up my portfolio page. Need a more permanent solution, preferably without added cost.
anthonygallina1
@anthonygallina1
Jun 14 2018 01:52
@roxxlen Something like this?
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemCount: 0
    };
    // change code below this line
   this.addItem = this.addItem.bind(this);
    // change code above this line
  }
  addItem() {
    this.setState({
      itemCount: this.state.itemCount + 1
    });
  }
  render() {
    return (
      <div>
        { /* change code below this line */ }
        <button onClick={this.addItem}>{this.state.toggle ? 'Click me' : 'Successfully clicked!'}>Click Me</button>
        { /* change code above this line */ }
        <h1>Current Item Count: {this.state.itemCount}</h1>
      </div>
    );
  }
};
Coy Sanders
@coymeetsworld
Jun 14 2018 02:01
@GSGV I used GitHub pages and store the images with my project, also used Dropbox for a while before that
anthonygallina1
@anthonygallina1
Jun 14 2018 02:03
Kingsley
@Kingwindie
Jun 14 2018 02:11
if (firstname.value === isNaN) {
    alert("Youm");
}
if firstname.value is not a number then alert "youm" right?
is that what it means?
Coy Sanders
@coymeetsworld
Jun 14 2018 02:13
@Kingwindie that's not how you check for isNaN
Kingsley
@Kingwindie
Jun 14 2018 02:14
@coymeetsworld thanks
Coy Sanders
@coymeetsworld
Jun 14 2018 02:14
np
AlbertoGiambone
@AlbertoGiambone
Jun 14 2018 05:55

to increase the size of css element 1.5 times I wrote this:

ball2 {

transform:scale(1.5);

}
but is not working, why?

Vladislav Ivanov
@developer4eto
Jun 14 2018 05:56
@AlbertoGiambone because it's wrong
DarkxPunk
@DarkxPunk
Jun 14 2018 06:37
I have spend all evening on taking my pure CSS hamburger button and making it as modular as possible… This is my attempt!
Vladislav Ivanov
@developer4eto
Jun 14 2018 06:59
@DarkxPunk good work
Josue Daniel Guerrero Ballestero
@yiosh
Jun 14 2018 08:09
Morning everyone, I have a question... maybe I'm not supposed to write it here. What is the deal with Vue.js? Am I missing something? I tried it and people tend to say it is easier than React, but I find React way simpler...
Simon Cordova
@gbsimon87
Jun 14 2018 08:36
@yiosh From my understanding, it's 'easier'' than React because of the more HTML like syntax it uses. It is nonetheless a full JS framework and will have its learning curve.
Simon Cordova
@gbsimon87
Jun 14 2018 09:27
Hey all!
After about 2.5 years working front-end, I'm thinking of starting to dive into the back end world.
Seeing that I especialise in JS, I'm thinking Node JS and perhaps MongoDB as well.
Anybody have any good/solid resources they recommend I look at?
Thanks in advance :)
Norvin Burrus
@ndburrus
Jun 14 2018 09:36
@gbsimon87 you might like this (for node) :sparkles:
Simon Cordova
@gbsimon87
Jun 14 2018 09:39
@ndburrus thanks a lot I appreciate it
Norvin Burrus
@ndburrus
Jun 14 2018 09:39
@gbsimon87 you're welcome! enjoy :palm_tree:
Mel Macaluso
@MelMacaluso
Jun 14 2018 10:13
@AlbertoGiambone ci sara' qualche bordo di default applicato, prova a metter border-width: 0;
Nemanja Simeunovic
@Saymon85
Jun 14 2018 11:54
@gbsimon87 https://university.mongodb.com/courses/M101JS/about I think this course is ok for Mongo... :smile:
Simon Cordova
@gbsimon87
Jun 14 2018 11:55
thanks @Saymon85
Nate Mallison
@NJM8
Jun 14 2018 12:40
@GSGV @anthonygallina1 I highly recommend getting yourself a google cloud storage account or amazon s3 for picture storage. A little more work and figuring things out to start but afterwords your content is yours, served on a CDN, and it won't go anywhere. I've had to change all my photo URL's twice in the last two months while using postimages.org. They have to change their URL's sometimes and you get no notification even if you have an account. Just go to your website one day and nothing is there! https://cloud.google.com/storage/
John Su
@JSN190
Jun 14 2018 12:48
I'm trying to get my vue template to switch between components, depending on what is selected at a given moment. Here's what I have so far. The template themselves are tested and working but I just can't get v-bind:is to work. Any obvious reason from the following?
            <div v-bind:is="selectedOperatingSystem"></div>
        </main>
    </div>
</template>
<script>
import MacOS from "../vue/macos.vue";

export default {
    components: {
        "macos": MacOS
    },
    data: {
        selectedOperatingSystem: "macos"
    }
}
</script>
Nate Mallison
@NJM8
Jun 14 2018 12:52
@JSN190 you don't want to use a div, use component
        <component :is="selectedComponent">
        </component>
you'll also need to import the other components you want to use yeah?
John Su
@JSN190
Jun 14 2018 12:54
It seems I can't refer to my data using {{ variableName }} either. Is there something off with the data declaration?
Nate Mallison
@NJM8
Jun 14 2018 12:55
in .vue single file templates data needs to return an object
check out that
John Su
@JSN190
Jun 14 2018 12:56
Oh right... thanks, everything works now
What's the technical reason for needing data to be returned as an object?
Nate Mallison
@NJM8
Jun 14 2018 12:58
sure thing, if you are getting started with Vue definitely check out Max's course on Udemy: https://www.udemy.com/vuejs-2-the-complete-guide/ Very thorough and he is still active in helping people and adding content
Also join Vue Discord chat: https://vue-land.js.org/
"Instead, a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object:"
John Su
@JSN190
Jun 14 2018 13:02
oh, makes sense
Nate Mallison
@NJM8
Jun 14 2018 13:02
Let me know if you have any other Vue questions, I've been working with it for a few months and I really enjoy it
Marc
@MWBauer
Jun 14 2018 13:22
Hey folks, quick question.
I'm building my js page and I'm trying to link to a folder of images, the images are in an array.
console.log("<img src = \"C:\Devfun\ServerTests\public\JSforProgexamples\ch08\fig08_07" + pictures[Math.floor(Math.random() * 7)] + ".gif\" /
I don't want a specific image, but the folder. Do I just back it up to ch08\ ?
Tom
@moT01
Jun 14 2018 13:27
@MWBauer im not sure what you're trying to do - i think the <img> tag can only accept a single image as a source
Marc
@MWBauer
Jun 14 2018 13:28
I have an array that has a number of images specified. The program will randomly pick one image and display it. So it steps through the array of images and picks ones
Tom
@moT01
Jun 14 2018 13:28
you should be able to insert a random number into the src string with js
so whats the problem
richRocksCodeBlocks
@richRocksCodeBlocks
Jun 14 2018 13:33
@MWBauer Are you running a server on your local development environment? I believe you will need to place the images in a subdirectory of your local servers public_html directory and then link to them as such if your index page is at public_html/index.html then and your images are at /public_html/img/
then your would link to them as such img/${imageVar}
Marc
@MWBauer
Jun 14 2018 13:34
:thumbsup:
richRocksCodeBlocks
@richRocksCodeBlocks
Jun 14 2018 13:36
most browsers prevent scripts from accessing files and reading files locally. It would be a security venerability to allow access of local files via the browser.
include*engine
@newtothat
Jun 14 2018 13:36
.search-box:hover > .search-text{
width: 240px;
padding: 0 6px;
}
what it means when you compare two classes like that?
Marc
@MWBauer
Jun 14 2018 13:40
Well, it displays the Refresh line. lol
Simon Cordova
@gbsimon87
Jun 14 2018 13:49
@newtothat the :hover pseudo-selector is for when you hover over an element, and the '>' refers to children of that element
that example states that .search-text is a child of search-box
richRocksCodeBlocks
@richRocksCodeBlocks
Jun 14 2018 13:56
@MWBauer what does?
mpmaan
@mpmaan
Jun 14 2018 14:20
Can anybody tell why is it not working?
Kaz Baig
@kbaig
Jun 14 2018 14:28
@mpmaan Why is what not working?
mpmaan
@mpmaan
Jun 14 2018 14:29
margin-left of first column should be zero.
Nate Mallison
@NJM8
Jun 14 2018 14:30
:first-child selects the first child of all divs, with window being the parent
see basic example
Kaz Baig
@kbaig
Jun 14 2018 14:30
@mpmaan You're setting the margin-left of the row there, not the first column
should be .column:first-child
Nate Mallison
@NJM8
Jun 14 2018 14:31
that is kinda weird, I haven't used child selectors much, but that's confusing
mpmaan
@mpmaan
Jun 14 2018 14:31
thanks
Kaz Baig
@kbaig
Jun 14 2018 14:31
The child in child selector refers to the fact that you select a child amongst a set of siblings
That's how I look at it
mpmaan
@mpmaan
Jun 14 2018 14:32
i was reading about about Trees and graphs yesterday..that's how i got confused.
Nate Mallison
@NJM8
Jun 14 2018 14:32
sure but it doesn't follow normal language relationships
if I say who is my first child you wouldn't say me
you aren't technically accessing a child of .row, which is why it didn't work, it doesn't make sense semantically. It should be something like .column:first-in-set
ah well. If all programming made semantic sense it would be easy and they wouldn't need more of us. Haha
Kaz Baig
@kbaig
Jun 14 2018 14:39
@NJM8 first-of-type exists
include*engine
@newtothat
Jun 14 2018 15:33
@gbsimon87 thanks simon
Josh Single
@jkyereh
Jun 14 2018 20:00
Thinking of resetting my progress on FCC n starting afresh
Been away for so long..
Need to get back j
Need to get back in the coding mood and spirit
Tom
@moT01
Jun 14 2018 20:10
:thumbsup: @jkyereh
Josh Single
@jkyereh
Jun 14 2018 20:52
@moT01
Christopher McCormack
@cmccormack
Jun 14 2018 21:24
Finished the product landing page, what do you all think? How can I improve it? https://codepen.io/cmccormack/pen/wXqNxB
Kaz Baig
@kbaig
Jun 14 2018 21:26
@cmccormack have an evga card up there too ;)
@cmccormack I'd prob apply some styling to the email input and some padding to the CTA below it
Christopher McCormack
@cmccormack
Jun 14 2018 21:27
@kbaig hah I didn't really do any research, just grabbed a list of cards and picked three that were different enough
Kaz Baig
@kbaig
Jun 14 2018 21:27
Sorry I'm just a fanboy
"Fastest Video Card on the Planet!" doesn't seem styled like a heading to me
I think if you just changed it to the same styling as the headings like NVIDIA PASCAL and INNOVATIVE DESIGN but larger font it'd look more cohesive
Christopher McCormack
@cmccormack
Jun 14 2018 21:28
Cool I"ll try that out
Thanks @kbaig
Kaz Baig
@kbaig
Jun 14 2018 21:29
Pleasure @cmccormack :)
Christopher McCormack
@cmccormack
Jun 14 2018 21:29
It's fun using normal CSS and HTML after working on a couple long React/Node projects, I wish there were more to do
Kaz Baig
@kbaig
Jun 14 2018 21:30
I get frustrated without my tools. I would still use pug/sass
Christopher McCormack
@cmccormack
Jun 14 2018 21:30
don't get me wrong I am using sass haha
but to me that's still mostly css :)
Kaz Baig
@kbaig
Jun 14 2018 21:31
nono not SCSS
SASS
I'm one of those people
Christopher McCormack
@cmccormack
Jun 14 2018 21:32
haha I never wanted to use SASS when SCSS was so much closer to actual CSS
I don't use all the features, mostly just nesting for specificity
My projects lately have all been CSS-in-JS which gives way more power
Kaz Baig
@kbaig
Jun 14 2018 21:33
Yeah I noticed and wanted to ask you about that but never got around to it
Where can I learn about the flavor you use?
I've never been happy with just using classnames on components to do styling
Christopher McCormack
@cmccormack
Jun 14 2018 21:36
I used styled-components for my voting app, that was pretty nice as you use template literals to write the css
My last project I used Material UI and it has an HoC that you can inject an object and receive a prop called classes which you can use in your className attribute
I have 0 stylesheets in the last project and it wasn't too bad - Material UI will take care of a lot of the theming so you don't have to worry about it
semi-steep learning curve though
with styled-components I felt like I had too many wrappers, and that made my code a little less reusable. With Material UI, I found it somewhat difficult to target nested selectors. Not sure if you can.
Christopher McCormack
@cmccormack
Jun 14 2018 21:42
@kbaig updated it per your feedback/user stories :D
Still no evga though
Kingsley
@Kingwindie
Jun 14 2018 23:17
var fullImage = document.querySelector(".fullImage");
var smallImgs = document.querySelectorAll(".thumbs img");


for (var i = 0; i <= smallImgs.length; i++) {
    smallImgs[i].addEventListener("click", function (e) {
        fullImage.src = e.target.src;

    });
    console.log(smallImgs[i]);
}

    <div class="fullImage">
        <img src="imgs/cute-baby.jpeg" alt="">
    </div>



    <div class="thumbs">
        <img src="imgs/cute-baby.jpeg" alt="">
        <img src="imgs/leaf.jpeg" alt="">
        <img src="imgs/Mclaren.jpeg" alt="">
    </div>
someone help me look ove this code,it says smallthings[i] on line 6 is undefined,how is it not defined?
it's obviously logging the same thing in the console without any problem
Kaz Baig
@kbaig
Jun 14 2018 23:51
@cmccormack you added an evga card lol 10/10
Stephen James
@sjames1958gm
Jun 14 2018 23:57
@Kingwindie <= length is wrong it will overrun the array