These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Sep 2017
Trommelochse
@Trommelochse
Sep 08 2017 00:08
@diegoignacious back again - looked at your app. adding the follwing css should help:
header.fixed .name span {
    color: #000;
}
JoeyRobertson
@JoeyRobertson
Sep 08 2017 00:31
Hello everyone! I just did the longest string problem in basic algorithm scripting and I am confused about something. ```
  var array = [];
  array = str.split(' ');

  var num = 0;

  for (var i = 0; i <= array.length; i++){

if I take away the equals sign in the for loop it works fine, but when i leave it in it returns the error

  for (var i = 0; i <= array.length; i++){

what is going on?

the error says ```TypeError: Cannot read property 'length' of undefined
Adam Faraj
@adamfaraj
Sep 08 2017 00:56
why doesn't my event fire when i hit enter?
var onEnterRequestForecast = function(e){
        if (e.which === 13){
            dom.searchButton.on('click', requestForecast);
        }
    }
    var bindHandlers = function() {
        dom.button.on('click', convertTemp);
        dom.searchButton.on('click keypress', requestForecast);
        dom.searchText.on('keydown', onEnterRequestForecast);
  };
    var onEnterRequestForecast = function(e){
        if (e.which === 13){
            dom.searchButton.on('click', requestForecast);
        }
    }
Trommelochse
@Trommelochse
Sep 08 2017 01:04
@adamfaraj in your first code snippet

replace

js dom.searchButton.on('click', requestForecast);

with

requestForecast();
currently you are only trying to attach an event handler on your searchButton, that already exists.
instead you just want to execute the function requestForecasts
Ken Haduch
@khaduch
Sep 08 2017 01:42
@JoeyRobertson - It doesn't look like you got an answer? For :point_up: September 7, 2017 8:31 PM The problem is this: If you use <= for iteration in a for loop for array.length, it will cause the loop to run one additional count past the actual end of the array. The array.length value is always the count of locations, but the indexing starts at 0, so if you have a length of 5, then you only want to run your loop to examine locations 0, 1, 2, 3, 4 - if you go to 5, then you get that error. Using i < array.length will run it right up to the index of 4, if you use i <= array.length, then you go one beyond the last available index in the array - I hope that helps?
Adam Faraj
@adamfaraj
Sep 08 2017 01:42
@Trommelochse didn't work?
 //binding event handlers
    var bindHandlers = function() {
        dom.button.on('click', convertTemp);
//        dom.searchButton.on('click keypress', requestForecast);
        requestForecast();
        dom.searchText.on('keydown', onEnterRequestForecast);
  };
    var onEnterRequestForecast = function(e){
        if (e.which === 13){
            dom.searchButton.on('click', requestForecast);
        }
    }
var requestForecast = function(e) {
//        if (e.which === 13 || e.type === 'click') {
//        console.log(dom.searchText[0].value);
        var q = dom.searchText[0].value;
        let api = 'https://api.openweathermap.org/data/2.5/forecast?q=' + q + '&appid=4d8b02dd6a0915262d9f1d723f477f27&units=imperial'; 
            $.ajax({
                method:"GET",
                url: api,
                cache: false,
                datatype: "json"
..................
Gaurav
@gauravmagan
Sep 08 2017 01:45
most dependencies problems occur
Trommelochse
@Trommelochse
Sep 08 2017 01:46
@adamfaraj that's not what I meant - the only thing you should have changed is the block after (e.which === 13)
you don't want to access any dom elements in that block, just execute the function requestForecast
Adam Faraj
@adamfaraj
Sep 08 2017 01:48
@Trommelochse makes sense. it works now. thanks!
CamperBot
@camperbot
Sep 08 2017 01:48
adamfaraj sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @trommelochse |http://www.freecodecamp.com/trommelochse
Trommelochse
@Trommelochse
Sep 08 2017 01:48
like this:
var onEnterRequestForecast = function(e){
requestForecast();
}
yay, nice :)
Adam Faraj
@adamfaraj
Sep 08 2017 01:48
 var onEnterRequestForecast = function(e){
        if (e.which === 13){
            requestForecast();
        }
    }
Trommelochse
@Trommelochse
Sep 08 2017 01:48
ehm, yes, sorry :D
Adam Faraj
@adamfaraj
Sep 08 2017 01:49
haha. i just wanted to show you
no need to create that event listener when i already have it
right?
Trommelochse
@Trommelochse
Sep 08 2017 01:49
exactly
and even though your code might work now
it's probably best practice to everything in a form
and give your button type of submit
then Enter will automatically trigger the form to submit
then you can attach an onSubmit handler to your form, that handles all the functionality
but both ways work, of course :)
Mateus Oliveira
@mateusmlo
Sep 08 2017 02:27
Hey guys good night!
I downloaded a package via npm, a css framework (materialize btw)
it's been placed in a folder "node_modules"
I just call the files in my html from that folder, right? What happens if I move the files to other folders?
like removing materialize.css from the node_modules and put it into a css folder outside
Trommelochse
@Trommelochse
Sep 08 2017 02:32
@mateusmlo you should not touch your node_modules folder
Mateus Oliveira
@mateusmlo
Sep 08 2017 02:33
Oh fine then! I was just...afraid to get lost in so many files that were downloaded
Trommelochse
@Trommelochse
Sep 08 2017 02:33
nono, not a good idea to open that folder ;)
you just need to import the downloaded modules
Mateus Oliveira
@mateusmlo
Sep 08 2017 02:35
import...as in call the files in my html?
I'm trying a serious project for the first time and using git/yarn/wamp with it and setting things up btw
Trommelochse
@Trommelochse
Sep 08 2017 02:36
what are you planning on using for your FrontEnd?
quickspeedy
@quickspeedy
Sep 08 2017 03:26
I'm having issue with scrollspy as I don't see any links in my nav being active. I checked bootstrap docs for it and can't seem to pinpoint my mistake. Any help would be appreciated! https://codepen.io/quickspeedy/pen/BdeJEw
Mukul Agrawal
@mukul09
Sep 08 2017 04:42
could anyone here help me with front-end. The given link is of my project.everything is fine when the size of the website is large but when i decrease the size of the window vertically the moon and the text gets overlap. how can i remove this overlap?
https://codepen.io/mukul09/pen/vJqNbP?editors=0010
Minoy
@minoy
Sep 08 2017 04:45

Hello!
Trying to change the image on a web page by using setAttribute(). I selected the image using the ID as follows:

var logo = document.querySelector("#hplogo");

Then tried to change the image as follows:

logo.setAttribute("src","https://i.pinimg.com/736x/c1/54/14/c1541487db8bb1d075041f171312996d--short-legs-weheartit.jpg");

The image on the screen is not changing. However when I check the variable logo, it does show me the new image URL:

logo
<div style="background-size:272px 92px;height:92px;width:272px" title="Google" align="left" id="hplogo" onload="window.lol&amp;&amp;lol()" src="https://i.pinimg.com/736x/c1/54/14/c1541487db8bb1d075041f171312996d--short-legs-weheartit.jpg"><div class="logo-subtext">India</div></div>

Any ideas?

iso
@iso1048
Sep 08 2017 04:49
@mukul09 it appears to be because you are using percentages to position the elements. try using px or rem.
Mukul Agrawal
@mukul09
Sep 08 2017 04:50
@gothamknight I got that thanks
CamperBot
@camperbot
Sep 08 2017 04:50
mukul09 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 422 | @gothamknight |http://www.freecodecamp.com/gothamknight
Bakhtiiar Muzakparov
@muzakparov
Sep 08 2017 06:20
Hi guys, I have implemented grid via html + css+js, it is very short. Please give ideas to how to convert it to Reactjs: https://jsfiddle.net/fejb6f85/
Vignesh Ramesh
@VRamazing
Sep 08 2017 07:19
@minoy Could you share your pen.Its a bit difficult to understand.
@minoy change div tag to img tag and try it again.And remove the closing div.Src exists only in Img
LiciniusRex
@hashtagyolo1
Sep 08 2017 07:30
Can anyone help with why my @media itsn't working?
Works fine if I wrap the upper code, but not when I switch which code is wrapped and change from max to min
Vignesh Ramesh
@VRamazing
Sep 08 2017 07:34
Azel Alyne Tan
@azelalynetan
Sep 08 2017 08:31
have you tried adding this meta on the head section? <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
Ivan Ngundela
@ingundela
Sep 08 2017 10:37
hello everyone, could someone please guide me on best way to learn how to send email from my contact form using phpmailer
iso
@iso1048
Sep 08 2017 10:40
@ingundela i've never done it but someone posted the following link on here a while ago: http://blog.teamtreehouse.com/create-ajax-contact-form
heroiczero
@heroiczero
Sep 08 2017 10:42
Ivan Ngundela
@ingundela
Sep 08 2017 10:44
@gothamknight Thanks.... how do you test your website form before deploying?
CamperBot
@camperbot
Sep 08 2017 10:44
ingundela sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @gothamknight |http://www.freecodecamp.com/gothamknight
Ivan Ngundela
@ingundela
Sep 08 2017 10:45
@heroiczero Thanks I'm checking.
iso
@iso1048
Sep 08 2017 10:47
@ingundela no clue bro sorry
korzo
@korzo
Sep 08 2017 11:20
@ingundela It's not a easy task because of all validations to prevent spammers hijack your form.
Take a look here:
https://github.com/jemjabella/PHP-Mail-Form
Ivan Ngundela
@ingundela
Sep 08 2017 11:43
@korzo agree not easy at all.... I've been struggling for days to have it working... looking everywhere for solutions
I need to have this form working and this is one of the key requirements from my client...I know I first need to test it using a localhost and I now have the localhost working and testing the website..... now I'm trying to have the phpMailer to work with in the localhost..
Ivan Ngundela
@ingundela
Sep 08 2017 12:14
I've been following a lot of tutorial on using phpMailer but non of them are helping me....
NIKHIL CM
@softmantk
Sep 08 2017 12:22
Hi Guys, I need some help for developing a nodejs social media application. I would like to know how can we implement feeds and notification like facebook in realtime. Shall I use only socket.io or is there any other modules to use ? Need an urgent help for proposal for the project. Thank You
Jake
@JakeDVirus
Sep 08 2017 12:37
adding margin: 50px auto;to wrapper-twitch class created a margin of 50px to the whole html page but not to the block (of class wrapper-twitch).
and if i add any text in html before the placement of div with wrapper-twitchclass in html then the page is rendered as expected with the padding of 50px to wrapper-twich class block and not to the whole html page. why is this happening? and what is the solution?
https://codepen.io/neel111/pen/oerPzJ
Angelo
@TheCodingMeatball
Sep 08 2017 12:50
can anyone help me with my code? i made a questionnaire using javascript but it dont work.. dm please
just1witness
@just1witness
Sep 08 2017 13:04
@TheCodingMeatball Share your code
Fernando
@lestairon
Sep 08 2017 13:30
huh
How can i make a Twitter share button?
nvm
Daniel Romero
@Ranacode
Sep 08 2017 13:40
I'm little confusing with the template engine 'pug' that was renamed to 'jade' and now if I'm not mistaken its renamed again to 'pug'?
What's the actual, pug or jade?
JoeyRobertson
@JoeyRobertson
Sep 08 2017 14:03
@khaduch that makes perfect sense! thank you so much!
CamperBot
@camperbot
Sep 08 2017 14:03
joeyrobertson sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3277 | @khaduch |http://www.freecodecamp.com/khaduch
Jorge
@OrangeKulture
Sep 08 2017 14:33
looks like cbot is back from the dead
krckyboy
@krckyboy
Sep 08 2017 14:51

I'm trying to make my header elements vertically aligned after floating first left, leaving the second one and the third one floating right. I cannot achieve that. Is it possible to vertically align elements when float is included?

Second, how do I center the middle element if first one is floated left and the last one floated right?

Third, so basically I want my three elements to be organized like this: first element to the left, middle one in the middle of the container and third one to the right end of the container. What is a clean way of doing that without the use of flexbox?

korzo
@korzo
Sep 08 2017 14:53
@OrangeKulture Looks like brownies are back on the menu, boys
Jorge
@OrangeKulture
Sep 08 2017 14:53
@krckyboy using floats to position is a pain in the a$% if u ask me
@korzo waahahah indeed
what about them legs? they dont need those ..
what would u not use flexbox? @krckyboy
or even bootstrap grid for that matter
krckyboy
@krckyboy
Sep 08 2017 14:54

@OrangeKulture Thought I would try to use the old style to practice and get better that way. What options do I have?

And I am not using flexbox because I heard from a YouTuber that I should learn the floats, inline-block thingies and whatnot before I start using flexbox - and I am a beginner.

@OrangeKulture Flexbox is sweet and all, and I know how to use Bootstrap, so I thought I should start making websites (locally) to practice floats, inline-block, position and all that. I just don't know the right way to do navigation and that it isn't flexbox and Bootstrap.

```<div id="FIRST">
<img src="">
<h3></h3>
</div>

<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

<div>
<a href=""><img src="facebook"></a>
<a href=""><img src="twitter"></a>
</div>
```

Jorge
@OrangeKulture
Sep 08 2017 14:57
hmm ok ... yeah i guess it's all personal preference .. i wouldnt even worry about floats if you are not going to use them. Ive been coding for about 3 years and ive used floats maybe twice. It all depends on what you wanna learn tho
most of the time you have to clear parent elements to get the floats to display properly
krckyboy
@krckyboy
Sep 08 2017 14:57
Oh I know how to use clearfix.
It's just I can't align them vertically.
Let me show you.
image.png
Jorge
@OrangeKulture
Sep 08 2017 14:58
yeah what i meant was that you some times deal with parten inline elements, and sometimes it's block level elements
oh yeah, i see what u mean .. i would play around with the display rule and see what happens
krckyboy
@krckyboy
Sep 08 2017 15:01
@OrangeKulture I think what bothers me is that once you float an element it goes up, to the top of the container, and other ones are usually at the bottom. So I don't know what to do with the middle div which isn't floated and I need to put it in the middle.
<header class="clearfix">

        <div class="logo">
            <div class="logo-pic"></div>
            <h3>
                <a href="#">Name LastName</a>
            </h3>
        </div>

        <nav>
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <div class="social">
            <div id="fb"></div>            
            <div id="twt"></div>
        </div>

    </header>
/********************************************************************
    GENERAL TWEAKING
********************************************************************/

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

a {
    text-decoration: none;
    color: black;
}

li {
    list-style-type: none;
}

* {
    box-sizing: border-box;
}


/********************************************************************
    HEADER
********************************************************************/

header {
    background-color: tomato;
}

h3 {
    font-size: 3rem;
    display: inline;
}

div.logo-pic {
    background-color: black;
    width: 45px;
    height: 45px;
    display: inline-block;
}

.logo {
    display: inline-block;
    float: left;
}

nav {
    text-align: center;
    display: inline-block;
    margin: 0 auto;
}

nav ul li {
    display: inline-block;
    font-size: 2rem;
}


.social {
    display: inline-block;
    float: right;
}

#fb, #twt {
    height: 30px;
    width: 30px;
    display: inline-block;
}

#fb {
    background-color: blue;
}

#twt {
    background-color: lightblue;
}
Jorge
@OrangeKulture
Sep 08 2017 15:03
the problem is that you are dealing with both block level and inline elements. so your other elements will behave differently
for instance, a nav element, is a block level .. so you will have funny looking stuff going on if you place it alongside other elements .. it can be done for sure, but its a lot of playing around with a lot of positioning rules
krckyboy
@krckyboy
Sep 08 2017 15:05
I assigned display: inline-block; to nav, though.
But yes, I get you, completely.
So do you think that I should just focus on flexbox and boostrap for positioning?
And skip floats?
quickspeedy
@quickspeedy
Sep 08 2017 15:06
I'm having issue with scrollspy as I don't see any links in my nav being active. I checked bootstrap docs for it and can't seem to pinpoint my mistake. Any help would be appreciated!
https://codepen.io/quickspeedy/pen/YxogXE
krckyboy
@krckyboy
Sep 08 2017 15:09

How can I vertically align these 3 parts of my header?

The first one is only sticking to the bottom while the other two aren't.

https://codepen.io/krcky/pen/MvMxry

Jorge
@OrangeKulture
Sep 08 2017 15:10
@krckyboy sry stepped away for a sec .. yeah for sure i would .. i mean if someone took the time to write this tools, why not use them?
its definitely a good thing to try and figure out how all of it works .. but in my experience, if you focus a lot on details at first, it's hard to kinda grasp the big picture. Once you start to do stuff, eventually u understand how it all works and comes together .. that's me tho, i do understand that people learn differently
krckyboy
@krckyboy
Sep 08 2017 15:15
@OrangeKulture What do you usually use for positioning and organizing? Flexbox, bootstrap? Absolute/relative position? I would really like to know what technique guys who are actually working, are using.
Jorge
@OrangeKulture
Sep 08 2017 15:16
@quickspeedy i guess you are supposed to add a class to the body as well?
i always go for bootstrap 3, so i havent played around with the 4th version a lot yet
@krckyboy i do a lot of freelance stuff , actually on the process of trying to get an angular dev job .. hopefully .. so im not really "working" working , but personally i always use both
quickspeedy
@quickspeedy
Sep 08 2017 15:18
@OrangeKulture I tried using a class in the body tag but no luck. So I figured why not move the class to the div and still no luck. I wanted to try out bootstrap 4 to learn some new features and keep it future proof.
Jorge
@OrangeKulture
Sep 08 2017 15:18
yeah no for sure ... its definitely a good thing to be using 4
im just kinda reading up on other stuff
krckyboy
@krckyboy
Sep 08 2017 15:19
@OrangeKulture I would just pull out the grid system from Bootstrap v4 and that's it.
Jorge
@OrangeKulture
Sep 08 2017 15:19
what i usually do is just fire up another Pen .. just for testing and start from 0 just building the component im having probs with
quickspeedy
@quickspeedy
Sep 08 2017 15:20
Yeah no problem. Unfortunately, there isn't a lot of good resources for spyscroll in bootstrap 4. Will do that. Thanks @OrangeKulture
CamperBot
@camperbot
Sep 08 2017 15:20
quickspeedy sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 461 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Sep 08 2017 15:20
yeah bootstrap nav class on its own its great .. @krckyboy so u dont event need to assign cols and rows if u dont want to
theres bootswatch, which i use alot in my projects .. its custom made boostrap themes, very helpful
@quickspeedy yeah i feel ya :joy: its an everyday thing
krckyboy
@krckyboy
Sep 08 2017 16:14

How can I make .logo stay on the left, .nav on the middle and .social to the right?

I tried with text-align center for nav, it won't work, along with margin: 0 auto;

Tried with text-align: right; for .social, and margin-left: auto; and it won't work.

I did assign 30% width of the header to .logo and .social and 40% to .nav, but still wasn't able to center it nicely.

https://codepen.io/krcky/pen/oerOQr

Abdullah Clute
@abdullahbc989
Sep 08 2017 16:32
can anybody lend me a hand in reviewing my code and letting me know why my get request isn't going through?
https://codepen.io/Abdullahbc989/pen/yodZWd?editors=1010
Trommelochse
@Trommelochse
Sep 08 2017 16:36
the Wikipedia API doesn't allow CORS requests by default, but you can enable it somehow - google probably helps there
@abdullahbc989
Abdullah Clute
@abdullahbc989
Sep 08 2017 16:37
Okay, thanks for the pointer! How do I give kudos again? Been a while lol
Trommelochse
@Trommelochse
Sep 08 2017 16:37
just say thanks @trommelochse
CamperBot
@camperbot
Sep 08 2017 16:37
sorry trommelochse, you can't send brownie points to yourself! :sparkles: :sparkles:
Abdullah Clute
@abdullahbc989
Sep 08 2017 16:38
thanks @Trommelochse lmbo
CamperBot
@camperbot
Sep 08 2017 16:38
abdullahbc989 sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @trommelochse |http://www.freecodecamp.com/trommelochse
Trommelochse
@Trommelochse
Sep 08 2017 16:38
:)
piteto
@piteto
Sep 08 2017 16:41
@krckyboy Flexbox is an option. add this to your header:
  display: flex; 
  justify-content: space-between;
adjust alignment with margins after that
piteto
@piteto
Sep 08 2017 16:52

@abdullahbc989

    if (key == 13) {
      e.preventDefault();

So the form doesn't cancel your request

Abdullah Clute
@abdullahbc989
Sep 08 2017 16:54
:O
do forms automatically cancel requests?
btw thanks @piteto
CamperBot
@camperbot
Sep 08 2017 16:54
abdullahbc989 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 68 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Sep 08 2017 16:55
@abdullahbc989 Forms submit data to another server by default, preventDefault() lets you submit to the same page / server
Abdullah Clute
@abdullahbc989
Sep 08 2017 16:56
Ahhh dope. Thanks a lot!
If I would've used jquery and the ajax function would that have already cancelled the default of the form? Because I didn't use preventDefault when I used jquery
piteto
@piteto
Sep 08 2017 16:59
@abdullahbc989 No, jQuery doesn't cancel the default for the form - still need to use preventDefault. In fact, with a form, you can monitor submit instead of keypress and avoid the need of triggering on key == 13
(but still need to do preventDefault)
Abdullah Clute
@abdullahbc989
Sep 08 2017 17:00
Oh! You're right lol! thanks @piteto
CamperBot
@camperbot
Sep 08 2017 17:00
abdullahbc989 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
Mike
@MikeJSchorah
Sep 08 2017 17:39
How much easier is it to use WordPress over Drupal?
krckyboy
@krckyboy
Sep 08 2017 17:47
@piteto Oh I know that I can do that with flexbox, it's just I want to see if I can do it without. I got an advice that I should learn how to do without flexbox and bootstrap first. Dunno if that's right, though.
piteto
@piteto
Sep 08 2017 18:06
@krckyboy I don't really agree with that advice, but it depends on the customer's browsers in the end. Float your logo to the left, the social icons to the right, and absolute position your nav in the center to go without flexbox.
Trommelochse
@Trommelochse
Sep 08 2017 18:10
@krckyboy I think the advice you got is valid. Even there might be better options out there, nowadays, it's definitely important to understand the more basic properties of CSS - like float etc.
krckyboy
@krckyboy
Sep 08 2017 18:11

@piteto This is how I did it. I had to use position: absolute and margin to the social icons on the right, so I would vertically align the elements. https://codepen.io/krcky/pen/VzJJdd

I don't like how float pushes elements to the top of the container, and the ones that I am not floating are left on the bottom of the container. Any tips? Should I just go wild with randomly picking margins / paddings or what? I am just afraid that by using margins and position: absolute; I might make it hard for responsiveness or something. Does that make any sense? I don't want my design to break at any point.

piteto
@piteto
Sep 08 2017 18:14
You can calculate exact margin requirements - something you have to do if you use floats
floats are what we used before flexbox, we used tables before that
It's still good to understand how things were done in the past, but since ~97% of browsers in use support flexbox now...it isn't something I'd spend too much time figuring out
Mike
@MikeJSchorah
Sep 08 2017 18:30
Has anyone here used Drupal?
quickspeedy
@quickspeedy
Sep 08 2017 18:51
Hello, I am still struggling in trying to make spyscroll work using bootstrap 4. I looked at the docs and searched online for help but can't seem to figure out the problem. Any help would be appreciated! https://codepen.io/quickspeedy/pen/rzEbbq
piteto
@piteto
Sep 08 2017 19:04
@quickspeedy In your navbar, replace the class sticky-top with fixed-top. In your CSS for body,html replace height: 100vh with min-height: 100vh. In your JavaScript settings, add popper.js before bootstrap.js
quickspeedy
@quickspeedy
Sep 08 2017 19:08
@piteto It worked! Could you explained why popper.js is required and why bootstrap 4 didn't mention about it?
piteto
@piteto
Sep 08 2017 19:11
@quickspeedy I don't know why - must be a new requirement for bootstrap 4. The dev console kept showing an error that popper.js was required and it seemed to have been one of the missing pieces to make scrollspy work
quickspeedy
@quickspeedy
Sep 08 2017 19:14
@piteto That made sense. What's the difference between min-height and height? I noticed that with min-height it helped spyscroll to work and not height.
piteto
@piteto
Sep 08 2017 19:15
@quickspeedy min-height allows the element to grow vertically as content fills it without overflowing
quickspeedy
@quickspeedy
Sep 08 2017 19:16
@piteto Ok, I see. Thanks!
CamperBot
@camperbot
Sep 08 2017 19:16
quickspeedy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 69 | @piteto |http://www.freecodecamp.com/piteto
Abdullah Clute
@abdullahbc989
Sep 08 2017 19:31
I wonder if I'm having scoping issues or accessibility issues because now I can't iterate through the Object although having received it.
Trommelochse
@Trommelochse
Sep 08 2017 19:34
@abdullahbc989 the function returns the server response, not the data. You have to select the the response's query property
i.e.
const data = response.query;
for (let i=0; i<data.length; i++) {
  const page = data[i];
  // have fun
}
Abdullah Clute
@abdullahbc989
Sep 08 2017 19:37
lol
const data = response.query; for (let i=0; i<data.length; i++) { const page = data[i]; console.log(page); }
should log the page constant right? cause if it is it isn't.
I've tried that, and response.query.pages[i]. I even tried running a for loop to just log the response variable and nothing was logged.
piteto
@piteto
Sep 08 2017 19:49
@abdullahbc989
  var response = JSON.parse(this.responseText);
  const data = response.query;
  for (let page in data.pages) {
    console.log(data.pages[page].title);
  }
Abdullah Clute
@abdullahbc989
Sep 08 2017 19:51
i had tried to use a for in statement before but did in data. How does in data.pages differ from using in data and why didn't return anything?
piteto
@piteto
Sep 08 2017 19:52
the only property in data is pages
all of your pages are listed as individual objects in data.pages
Might be a little easier to parse with the way you were trying earlier if you add &formatversion=2 to your api URL
Abdullah Clute
@abdullahbc989
Sep 08 2017 19:56
Okay. Thanks @piteto and thanks @Trommelochse I appreciate ya'll help.
CamperBot
@camperbot
Sep 08 2017 19:56
abdullahbc989 sends brownie points to @piteto and @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @trommelochse |http://www.freecodecamp.com/trommelochse
:cookie: 71 | @piteto |http://www.freecodecamp.com/piteto
Engjell Bislimi
@Engjell00
Sep 08 2017 20:25
anyone know's how I can put the text side by side and the same size https://codepen.io/EngjellBislimi/pen/dzxypV
iso
@iso1048
Sep 08 2017 20:31
@Engjell00 perhaps the following:
.top-text
{
  width: 49%;
  margin: 0 auto;
  border:1px solid black;
  display: inline-block;
}
.bottom-text
{
  width: 49%;
  margin: 0 auto;
  border:1px solid black;
  display: inline-block;
}
Engjell Bislimi
@Engjell00
Sep 08 2017 20:34
thank you!
Also could you tell me how can I put a border between 2 text
horizontally
i could do border-bottom or border-top but I feel the border isn't space equally between both of the text
iso
@iso1048
Sep 08 2017 20:37
@Engjell00 not sure if it would work exactly how you want but you could look into using <hr>
Engjell Bislimi
@Engjell00
Sep 08 2017 20:42
ok perfect! hmm also
how can you make 2 border
like -------------- </> ------------------
iso
@iso1048
Sep 08 2017 20:53
not sure sorry
piteto
@piteto
Sep 08 2017 21:11
@Engjell00 Use the :after pseudo class and relative positioning on a <hr> element
Gaurav
@gauravmagan
Sep 08 2017 21:37
''''''
let params = {
Bucket: documentInfo.bucketName,
Key: documentInfo.s3Directory + '/'+ documentInfo.userId +'/' + documentInfo.fileName,
Body: new Buffer(fileData, 'base64'),
ContentEncoding: 'base64',
ContentType: documentInfo.type,
ACL:'authenticated-read',
};'''
CamperBot
@camperbot
Sep 08 2017 21:37
:bulb: to format code use backticks! ``` more info
Gaurav
@gauravmagan
Sep 08 2017 21:37
@piteto whats the let params saying
Mercy Manrique
@mers89
Sep 08 2017 22:53
Can someone help me get the search topic for what I need. So I managed to split up the data for the twitch api and split it into different divs. (logo, status, display name). Now I need help manipulating the data almost like a table.
I was looking into stringify json but Im not sure that's the correct term I should be looking into
I figured if I break up the data by user and then somehow manage to insert breaks <p> </p> in between without having to rewrite the api call 100 times
iso
@iso1048
Sep 08 2017 22:58
you can use <br> for breaks. Could you link your pen so I could see what you are trying to do?
Mercy Manrique
@mers89
Sep 08 2017 22:59
@gothamknight so the info from the api is all scrunch together and you cant tell which one is for what user
iso
@iso1048
Sep 08 2017 23:04
@mers89 hi. Maybe you could set a constant height for each div and img (i.e. <div>" + data3.status + "</div>, <div>" + data3.name+ "</div>, <img src='"+ data3.logo + "'>which is sufficient to hold all the info?
Mercy Manrique
@mers89
Sep 08 2017 23:10
Would that lets say align user 1's image to its status and to its display name and then repeat for each user. I wanted to kinda look like an excel sheet
iso
@iso1048
Sep 08 2017 23:12
@mers89 in my mind it should do. But have not tried it so cannot say for sure
Mercy Manrique
@mers89
Sep 08 2017 23:19
@gothamknight thanks Ill try it.
CamperBot
@camperbot
Sep 08 2017 23:19
mers89 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 424 | @gothamknight |http://www.freecodecamp.com/gothamknight
Mercy Manrique
@mers89
Sep 08 2017 23:45
@gothamknight um had anotuher question. So should I somehow set it up more or less like the one you sent me instead of the 3 appends that I have
iso
@iso1048
Sep 08 2017 23:49
@mers89 the three appends you have should be fine. Just give all the divs in those appends a class, then give that class the appropriate height value.
Mercy Manrique
@mers89
Sep 08 2017 23:53
@gothamknight k Ill research more into the topic :) thanks
CamperBot
@camperbot
Sep 08 2017 23:53
mers89 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
api offline