These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Mar 2018
James Diaz
@clanmaster
Mar 09 2018 00:34 UTC
Good evening! The 24-7 freecode camp coding music rocks
@clanmaster the what
James Diaz
@clanmaster
Mar 09 2018 00:47 UTC
@moT01 the FreeCodeCamp radio
Listening to it as a code
James Diaz
@clanmaster
Mar 09 2018 00:58 UTC
indeed!
@moT01 thanks
CamperBot
@camperbot
Mar 09 2018 00:58 UTC
clanmaster sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1027 | @mot01 |http://www.freecodecamp.org/mot01
awesome thanks @clanmaster @gulsvi
CamperBot
@camperbot
Mar 09 2018 01:17 UTC
mot01 sends brownie points to @clanmaster and @gulsvi :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @clanmaster |http://www.freecodecamp.org/clanmaster
:star2: 2661 | @gulsvi |http://www.freecodecamp.org/gulsvi
abraham anak agung
@padunk
Mar 09 2018 02:03 UTC
why they don't put it on soundcloud?
Dan Malone
@danmalone89
Mar 09 2018 02:21 UTC
@padunk They explain in their blog post that they felt more campers were on youtube already watching tutorials...so they thought it would get more traffic to put the stream there too
I personally don't like it because I can't listen to it on my phone with the screen off unless I have youtube red or whatever
abraham anak agung
@padunk
Mar 09 2018 02:23 UTC
@danmalone89 exactly that is why i don't like it too :smile:
we should make radiotube for it
Lean Junio
@leanjunio
Mar 09 2018 03:39 UTC
Does anybody know if I can output pug strings into a custom currency or phone number format?
var string = “1234567890”
res.send(string) // (123)456-7890 or $1,234,567,890
Fabien SHAN
@X140hu4
Mar 09 2018 04:57 UTC
@leanjunio Maybe using regexp?
Lean Junio
@leanjunio
Mar 09 2018 04:58 UTC
you can use regexp to format outputs?
The challenge would be to recognize the pattern as being phone or currency then applying a regex on it
And building that regex in between :)
Lean Junio
@leanjunio
Mar 09 2018 05:02 UTC
i see, thx man
Max
@maxiwer
Mar 09 2018 06:57 UTC
Hi coders.
I just want to know why the heck is this returning false?
function palindrome(str) {
  // Good luck!
  return str == str.toLowerCase().replace(/[.*#_ ,]/gi, '').split("").reverse().join("");

//     return str.toLowerCase().replace(/[.*#_ ,]/gi, '').split("").reverse().join("");
}
palindrome("_eye");
Fabien SHAN
@X140hu4
Mar 09 2018 07:01 UTC
What does str.toLowerCase().replace(/[.*#_ ,]/gi, '').split("").reverse().join("") return?
Markus Kiili
@Masd925
Mar 09 2018 07:04 UTC
@maxiwer First cleanse the string (replace and lowercase). Then check for palindromicality.
So both sides of comparison need to be cleansed.
abraham anak agung
@padunk
Mar 09 2018 07:05 UTC
@Masd925 palindromicality is that a word? but i like how it sound
Markus Kiili
@Masd925
Mar 09 2018 07:06 UTC
@padunk I believe it is.
Max
@maxiwer
Mar 09 2018 07:07 UTC
@X140hu4 returning eye
@Masd925 you mean to divide the string and compare those two parts?
Markus Kiili
@Masd925
Mar 09 2018 07:09 UTC
@maxiwer I mean that you first need to lowercase and remove non-alphanumerics. Then compare that string with the reversed one. So don't compare with the original, like you do there.
Max
@maxiwer
Mar 09 2018 07:11 UTC
@Masd925 I think I'm doing the thing that you've said
Markus Kiili
@Masd925
Mar 09 2018 07:13 UTC
@maxiwer You are comparing for example _eye (original) with eye (cleansed and reversed). You need to be comparing eye (cleansed) with eye (cleansed and reversed).
Max
@maxiwer
Mar 09 2018 07:20 UTC
@Masd925 Thanks.
CamperBot
@camperbot
Mar 09 2018 07:20 UTC
maxiwer sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4719 | @masd925 |http://www.freecodecamp.org/masd925
Frosty427
@Frosty427
Mar 09 2018 07:22 UTC
@gulsvi woah bro can you show me how you changed my navbar? looks sick
Frosty427
@Frosty427
Mar 09 2018 07:30 UTC
because i dont fully understand it
i want to take the code but it would be a waste of time
Darren
@DarrenfJ
Mar 09 2018 07:33 UTC
evening fCC
coderNewby
@coderNewby
Mar 09 2018 07:35 UTC
@DarrenfJ :wave: and thanks for all the help today
CamperBot
@camperbot
Mar 09 2018 07:35 UTC
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2418 | @darrenfj |http://www.freecodecamp.org/darrenfj
Frosty427
@Frosty427
Mar 09 2018 07:44 UTC
i require assistance
Markus Kiili
@Masd925
Mar 09 2018 07:45 UTC
@Frosty427 Just post the question here.
go to my codepen
youll see the iphone x image is shoved into the top
thats when i added a link to it
and anchor
im trying to recreate the apple website
and the second i added an anchor it got shoved up to the top
Ian
@toianw
Mar 09 2018 08:01 UTC
@Frosty427 I think the problem is that you're giving a elements a height of 40px in your css (line 5)
Frosty427
@Frosty427
Mar 09 2018 08:01 UTC
@toianw oh sht
didnt even think of that
aadtyaraj01
@aadtyaraj01
Mar 09 2018 08:11 UTC
@maxiwer toLowerCase, then replace, then compare
Joshua Frias
@Juke-Magic
Mar 09 2018 10:10 UTC
guys
help
status doesnt record the variables in the array outside of the for loop
how do i fix it?
alpox
@alpox
Mar 09 2018 10:19 UTC
@Juke-Magic Inside of the for you make asynchronous api calls. This means that your console.log(status[0]) runs BEFORE any data came back and BEFORE status is filled.
You have to go on handling the response data at the point where you have it - in the callback of the $.getJSON. You can as example create a new function which takes a status as input and call that function from within the callback of jquery.
TJ Hardin
@AndroidNinjaX
Mar 09 2018 10:24 UTC
@Juke-Magic I called the function set and passed in samp as an argument below it. As well also I console.log(status) right after the push, ties into what @alpox was saying.
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:09 UTC
@ezioda004
I remember seeing the skill section on your portfolio, where did you get the percentages of your skills from?
Frosty427
@Frosty427
Mar 09 2018 11:36 UTC
can i get some help?
i fixed all the images but the homepod button is all messed up for some reason
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:39 UTC
@Frosty427 Which button?
Frosty427
@Frosty427
Mar 09 2018 11:39 UTC
button?
wdym
@MuhammedKarim
the homepod image
WAIT
LOL I PUT BUTTON
i meant image
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:45 UTC
@Frosty427 it looks fine?
No it doesnt
And does your last image have a shadow??
Frosty427
@Frosty427
Mar 09 2018 11:49 UTC
@MuhammedKarim screenshots
gotta retake it
and wdym it looks fine?
look at the homepod image
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:50 UTC
@Frosty427 got it
Frosty427
@Frosty427
Mar 09 2018 11:50 UTC
image.png
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:51 UTC
@Frosty427 Barely have a clue about bootstrap, sorry
Frosty427
@Frosty427
Mar 09 2018 11:51 UTC
@MuhammedKarim ok
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:52 UTC
@Frosty427 fixed it
Fabien SHAN
@X140hu4
Mar 09 2018 11:53 UTC
@Frosty427 Take out the col classes in your images...
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:53 UTC
@Frosty427
Fabien SHAN
@X140hu4
Mar 09 2018 11:53 UTC
@Frosty427 And check you closed your tags properly
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:54 UTC
image.png
You put 6 instead of 12
Frosty427
@Frosty427
Mar 09 2018 11:57 UTC
@X140hu4 i need those cols to make it look like the apple website
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:57 UTC
The cols are fine, just use them properly. Have you found your mistake? @Frosty427
Frosty427
@Frosty427
Mar 09 2018 11:58 UTC
@MuhammedKarim yup
he was right i had double col classes
i completely overlooked that
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 11:59 UTC
:+1:
Frosty427
@Frosty427
Mar 09 2018 11:59 UTC
@MuhammedKarim @X140hu4 thanks
CamperBot
@camperbot
Mar 09 2018 11:59 UTC
:cookie: 136 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
frosty427 sends brownie points to @muhammedkarim and @x140hu4 :sparkles: :thumbsup: :sparkles:
api offline
Frosty427
@Frosty427
Mar 09 2018 12:12 UTC
@MuhammedKarim would you know how to go about making a footeR?
image.png
similar to this one
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 12:23 UTC
@Frosty427 I'll give you a bit of a hint. Go and click inspect element on the Apple website. I have to go out now, if you still can't figure it out, let me know and I'll try to help.
LydaTech
@lydatech
Mar 09 2018 12:31 UTC
@Frosty427 still doing bootstrap for that?
Raghav Mundra
@Raghav17
Mar 09 2018 13:34 UTC
What is wrong ith this code? Codepen is showing error.
$.(".btn").on("click", function(){
   if(this.id ==="ac"){
     inputs = [""];
   }
 });
Nate Mallison
@NJM8
Mar 09 2018 13:38 UTC
@Raghav17 No dot after $
$(".btn").on
Raghav Mundra
@Raghav17
Mar 09 2018 13:40 UTC
@NJM8 Yeah, thanks buddy. I need to take a walk I think. :D
CamperBot
@camperbot
Mar 09 2018 13:40 UTC
raghav17 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Mar 09 2018 14:54 UTC
It happens, no problem
Frosty427
@Frosty427
Mar 09 2018 14:59 UTC
@lydatech thanks for some of the suggestions but im trying to make it like apple where if its small it shows the footers titles and when it goes large it shows everything
CamperBot
@camperbot
Mar 09 2018 14:59 UTC
frosty427 sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2693 | @lydatech |http://www.freecodecamp.org/lydatech
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 15:00 UTC
@Frosty427 Have you learnt Bootstrap?
Frosty427
@Frosty427
Mar 09 2018 15:01 UTC
@MuhammedKarim im still learning it
building the apple website as i go
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 15:02 UTC
There should be somewhere in bootstrap where if the screen is less than a certain size, a certain style is put into action. You may be able to do it with CSS as well... idk @Frosty427
Frosty427
@Frosty427
Mar 09 2018 15:03 UTC
@MuhammedKarim yea im trying to look for that
ehutchllew
@ehutchllew
Mar 09 2018 15:23 UTC
@Frosty427 you can define multiple col attributes to your HTML elements
@Frosty427 like class="col-md-6 col-xs-12"
so it will take up half the space using col-md-6 until it gets to an XS screen, then take up all the space.
Frosty427
@Frosty427
Mar 09 2018 15:24 UTC
@ehutchllew
give me a second
image.png
image.png
ehutchllew
@ehutchllew
Mar 09 2018 15:25 UTC
you could also use flexbox or grid, but they're a bit more complicated than bootstrap imo
Frosty427
@Frosty427
Mar 09 2018 15:25 UTC
this is what im trying to recreate
when it goes small
i want plus signs
ehutchllew
@ehutchllew
Mar 09 2018 15:26 UTC
ah, look up fontAwesome for the plus sign
ehutchllew
@ehutchllew
Mar 09 2018 15:34 UTC
@Frosty427 I'm not a CSS expert, but to achieve that you'd probably have to arrange everything in an <ul> then have a @media query to arrange everything into an accordion drop down when the screen size gets to like 740px or something.
Frosty427
@Frosty427
Mar 09 2018 15:35 UTC
oh boy
media queries
havent learned about them
ehutchllew
@ehutchllew
Mar 09 2018 15:38 UTC
it's not that bad, you just say something like @media screen and (max-width 740px) then write your css code for that condition underneath. But look up media queries on MDN, that will explain things way better than I can hehe.
Ronald Ceballos
@Ronald03
Mar 09 2018 17:47 UTC
Hey guys, I am trying to do something but its not working as i think it should work.
I am selecting all the '.cell' classes with jquery $('.cell').on('click', function(){ //code });
in the content of that function I am trying to -use $(this).css('background-color', 'red');
But it is not working
any idea why my logic is not working?
Michael Cordero
@CyberPutty
Mar 09 2018 18:04 UTC
@Ronald03 can you post your code?
@Ronald03 suggestion would be to console.log(this). and check the console to see what you are actually returning.
also you could try and access the event via function (event){ console.log(event); } this could be a solution if your .cell is returning more than one item.
Matej Bošnjak
@mbosnjak01
Mar 09 2018 18:31 UTC
@Ronald03 and, do you have jquery loaded in your script? :)
pragya1248
@pragya1248
Mar 09 2018 18:35 UTC
Hey!
Razvan Jackson
@RazvanJackson
Mar 09 2018 18:35 UTC
Hey
Michael Cordero
@CyberPutty
Mar 09 2018 18:36 UTC
Hi
Peaceultimatum
@Peaceultimatum
Mar 09 2018 18:36 UTC
Hey
Just joining this community!
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 09 2018 18:38 UTC
@Peaceultimatum Welcome!
jjzep
@jjzep
Mar 09 2018 19:20 UTC
Hey I’m trying to decrement an array of objects with setInterval, can anyone lend assistance into what it is I’m missing?
timers = [{key: 'cat', timeLeft: 5}, {key:'dog', timeLeft: 4}]

//Updates Array timeLeft by the second

function updateTime(arrayName) {

    arrayName.forEach(item => {
        let key = item.key

        let countDown = setInterval((item) => {
            let remainingTime = item['timeLeft'] - 1

            if(remainingTime < 0) {
                clearInterval(countDown)
                return
            }

            item['timeLeft'] = remainingTime
            console.log(item)
        }, 1000)
    });
}

updateTime(timers)
AlexJSx
@AlexJSx
Mar 09 2018 19:42 UTC
Hi guys. I`m trying to collapse just one section in fcc menu, anybody have any solution?
Miloud Bouzeboudja
@yassineldn29
Mar 09 2018 19:56 UTC
hello
Roman Struna
@RomchyFCC
Mar 09 2018 20:00 UTC
for the menu to stay collapsed you need to finish all challenges :D other than that, just click the topic @AlexJSx
Stephen James
@sjames1958gm
Mar 09 2018 20:01 UTC
@jjzep Your setInterval function is redefining item
Bin Gao
@gaobin1019
Mar 09 2018 20:14 UTC
@jjzep
timers = [{key: 'cat', timeLeft: 5}, {key:'dog', timeLeft: 4}]

//Updates Array timeLeft by the second

function updateTime(arrayName) {

    arrayName.forEach(item => {
        let key = item.key

        let countDown = setInterval(() => {
            item.timeLeft = item.timeLeft - 1

            if(item.timeLeft < 0) {
                clearInterval(countDown)
                return
            }

            console.log(item)
        }, 1000)
    });
}

updateTime(timers)
jjzep
@jjzep
Mar 09 2018 20:22 UTC
Thanks @sjames1958gm @gaobin1019
CamperBot
@camperbot
Mar 09 2018 20:22 UTC
jjzep sends brownie points to @sjames1958gm and @gaobin1019 :sparkles: :thumbsup: :sparkles:
api offline
:star2: 9076 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Matthew
@RoutinePoutine
Mar 09 2018 20:23 UTC
Is closure or lexical scope just the idea that children have more variables than the parent function?
Markus Kiili
@Masd925
Mar 09 2018 20:26 UTC
@RoutinePoutine Lexical scope means that scopes are defined by how the functions sit in the code in respect to each other.
Matthew
@RoutinePoutine
Mar 09 2018 20:28 UTC
Thanks
Thanks Markus
Markus Kiili
@Masd925
Mar 09 2018 20:30 UTC
@RoutinePoutine Functions have a variable environment and we talk about closure usually in the case when the variable environment would have vanished, but stays alive because some function has access to it. Usually when a function is returned from another function that finishes executing.
Another way to think about it is that all JS functions are closures, function and its variable environment.
Bin Gao
@gaobin1019
Mar 09 2018 20:32 UTC
@Masd925 lexical scope is the scope defined by source code, dynamic scope is defined at runtime using a stack usually
closure is an inner function have access to outer function's scope (exclude this and arguments)
Michael Cordero
@CyberPutty
Mar 09 2018 20:33 UTC
@RoutinePoutine https://www.youtube.com/watch?v=71AtaJpJHw0&t=2s techsith explains it very well.
Matthew
@RoutinePoutine
Mar 09 2018 20:38 UTC
Thanks! Douglas Crockford is hard for me to follow at the moment, on a free trial at Lynda.
John
@tertiaryidentifier
Mar 09 2018 20:53 UTC
Hi there, anyone available to help me debug my random quote generator?
Having trouble with getting my buttons to respond to JQuery ...
Matej Bošnjak
@mbosnjak01
Mar 09 2018 20:53 UTC
sure
just post your code in codepen / jsfiddle if possible
It actually seems like the API request just isn't working
Matej Bošnjak
@mbosnjak01
Mar 09 2018 20:55 UTC
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" this is your call .... orderby and posts_per_page are arguments that you need to insert
John
@tertiaryidentifier
Mar 09 2018 20:55 UTC
ohhh duh. thanks haha
Matej Bošnjak
@mbosnjak01
Mar 09 2018 20:55 UTC
also, I don't think this is how that api call is supposed to be, let me check quicly it's documentation
John
@tertiaryidentifier
Mar 09 2018 20:56 UTC
according to documentation I think the arguments are already in the URL
Matej Bošnjak
@mbosnjak01
Mar 09 2018 20:56 UTC
you're right, was reading wrong fiels
fields
@tertiaryidentifier oh i got it
@tertiaryidentifier it's not http, it's https
Xd
John
@tertiaryidentifier
Mar 09 2018 20:57 UTC
Oh, thanks. Is that a codepen thing?
Matej Bošnjak
@mbosnjak01
Mar 09 2018 20:57 UTC
no
and yes
codepen doesn't allow mixed content - http
always use https
Stephen James
@sjames1958gm
Mar 09 2018 21:01 UTC
@tertiaryidentifier The browser will not all API requests to an http endpoint from an https page. Codepen is loaded via https.
John
@tertiaryidentifier
Mar 09 2018 21:04 UTC
Does anyone know why this line of code would result in line breaks between each part?
$("#targ").append("<p>&#34;" + a[0].content + "&#34;</p>");
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:04 UTC
@tertiaryidentifier try this way. make 2 p tags in html, and in first you append quote text, and in the other you append an author
it will be much easier to do instead of doing it your way
John
@tertiaryidentifier
Mar 09 2018 21:05 UTC
okay, #targ is a div, I'll try to rearrange it
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:05 UTC
id "targ " is p xD
was :|
John
@tertiaryidentifier
Mar 09 2018 21:07 UTC
sorry, many changes!
It works now. Thanks all. Moving on to the next challenge :)
oh, wait, except for some other parts of this challenge ... blergh :/
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:07 UTC
@tertiaryidentifier how does it work? :P
from what I can see, it generates only one, same, quote
you should have more quotes and generate one random quote at a time on the screen
John
@tertiaryidentifier
Mar 09 2018 21:08 UTC
yes yes I know
working on it!
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:08 UTC
what's why it's called random quote challenge xD
John
@tertiaryidentifier
Mar 09 2018 21:10 UTC
okay, so I know I have to find a way to delete the old quotes and append new ones
but why wouldn't the code call the API each time I click on the button? shouldn't the code being appended at least be new quotes. the api call is nestled under ".on(click,"
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:11 UTC
the problem is, you're calling quotes like this a[0].content
a is an array here
and 0 is the first object inside the array
so it will always call that first
and second issue is [posts_per_page]=1 inside your link
John
@tertiaryidentifier
Mar 09 2018 21:12 UTC
yes but each time the API is called wouldn't a become a new array?
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:12 UTC
it will fetch only one quote obejct
John
@tertiaryidentifier
Mar 09 2018 21:12 UTC
so instead I should call like 50 and iterate through each time?
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:13 UTC
you call 50 inside your array, and when you click on a button, you get random number from 0 to that array length
to get a random quote
that a formula you gotta write there somewhere
xD
Might be interesting for web designers
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:16 UTC
@alpox nice post there
@tertiaryidentifier Just an observation. When you go with a counter thing, it's still not random because when you manage to call quotes with a counter+1, you'll just get the next in a row, not actually randomly chosen quote.
:D
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:24 UTC
not working XD
John
@tertiaryidentifier
Mar 09 2018 21:24 UTC
Working for me...
scroll down ...?
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:25 UTC
@tertiaryidentifier https://i.imgur.com/jvgFYdf.png this is what i get :| maybe it's my problem, wouldn't be the first time
John
@tertiaryidentifier
Mar 09 2018 21:25 UTC
Yeah sorry it works for me, don't know why it would say that
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:26 UTC
would be great if someone else besides me could test it :)
Brad
@bradtaniguchi
Mar 09 2018 21:29 UTC
@tertiaryidentifier It works, but it seems like once in a while it will break. Checking the browser console it see TypeError: a[rand] is undefined[Learn More] index.html:54:9
I'm also on firefox BTW.
John
@tertiaryidentifier
Mar 09 2018 21:30 UTC
might have something to do with how I' m randomizing numbers
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:30 UTC
I am using different approach to getting random quote, using array.length and slightly different composition of my api quotes file to call them easier
Brad
@bradtaniguchi
Mar 09 2018 21:30 UTC
My guess is the array a isn't the expected size.
Matej Bošnjak
@mbosnjak01
Mar 09 2018 21:30 UTC
so if u wanna check, it's on my github
John Roble
@JNZY
Mar 09 2018 21:44 UTC
hello guys what really causes net::err_aborted
here's the error
Brad
@bradtaniguchi
Mar 09 2018 22:09 UTC
@JNZY Can you post a picture of the error?
James Hwang
@Kiwilicious
Mar 09 2018 22:12 UTC
Can I get some feedback on the wiki viewer? https://codepen.io/Kiwilicious/pen/oBbXyP
Tiago Correia
@tiagocorreiaalmeida
Mar 09 2018 22:19 UTC
@Kiwilicious the functionality seems to be there maybe some colors, since its only black and white at the moment
goodjob
Leigh Hobson
@leighhobson89
Mar 09 2018 22:43 UTC
hi guys, my input field is pushing right out like this. any idea why when the columns either side are supposed to restrict the middle one? and could the code be written in a better way? as it happens, the icon wont appear unless i have both 3 and 4 bootstrap required, but 3 alone buggers up my layout. im stuck, heres the screenshot.
image.png
the only extra class is this one:
.middlerows {
  background-color: white;
  padding: 15px 25px 16px 25px;
  margin: 0px 10px 0px 10px;
  border: solid black;
  border-width: 0px 0px 1px 0px;
}
Leigh Hobson
@leighhobson89
Mar 09 2018 22:48 UTC
the input-group class seems to be affecting it but only when the span for the icon is there
James Hwang
@Kiwilicious
Mar 09 2018 22:54 UTC
@leighhobson89 Instead of having 2 empty cols, you could just center the middle one.
Leigh Hobson
@leighhobson89
Mar 09 2018 22:55 UTC
do you mean using offset and specifying a size for it?
James Hwang
@Kiwilicious
Mar 09 2018 22:56 UTC
<div class="row justify-content-md-center">
    <div class="col col-lg-3">
        centered
    </div>
</div>
Or offset yea.
Leigh Hobson
@leighhobson89
Mar 09 2018 22:57 UTC
thanks guys, any ideas why using input-group forces the input to be huge though? would this be fixed by implementing this change?
Eric Weiss
@eweiss17
Mar 09 2018 22:57 UTC
that link makes it so you don't need empty columns
Leigh Hobson
@leighhobson89
Mar 09 2018 22:58 UTC
thanks @eweiss17 @Kiwilicious
CamperBot
@camperbot
Mar 09 2018 22:58 UTC
leighhobson89 sends brownie points to @eweiss17 and @kiwilicious :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @kiwilicious |http://www.freecodecamp.org/kiwilicious
:cookie: 614 | @eweiss17 |http://www.freecodecamp.org/eweiss17
James Hwang
@Kiwilicious
Mar 09 2018 22:58 UTC
In your old code, I don't think you specified a width for the center col. The input element would just span the whole width then.
Eric Weiss
@eweiss17
Mar 09 2018 22:59 UTC
yes ^
Leigh Hobson
@leighhobson89
Mar 09 2018 22:59 UTC
ahh, i just thought it would span until it reached the next column that it wasnt inside
Eric Weiss
@eweiss17
Mar 09 2018 23:00 UTC
that would be overflow, right
Leigh Hobson
@leighhobson89
Mar 09 2018 23:00 UTC
thanks a lot
Eric Weiss
@eweiss17
Mar 09 2018 23:01 UTC
do you know how overflow works
Leigh Hobson
@leighhobson89
Mar 09 2018 23:01 UTC
i'll read up on it, i am actually trying to get to the javascript part of this challenge, my design is hazy at best!!
Eric Weiss
@eweiss17
Mar 09 2018 23:02 UTC
you are right, the js is more important in that one
James Hwang
@Kiwilicious
Mar 09 2018 23:03 UTC
@leighhobson89 https://jsfiddle.net/7dsyy0zd/7/ If you notice, the last div has no width modifier allowing the input to span the whole width.
Leigh Hobson
@leighhobson89
Mar 09 2018 23:06 UTC
right. i guess i made some assumptions about putting elements in columns, as eric said, the overflow factor has come in to play i think. its odd how it behaves perfectly if i take out the .input-group class and the span that puts the icon in though :/
Leigh Hobson
@leighhobson89
Mar 09 2018 23:11 UTC
one last thing
on this screenshot we can see that it is behaving better now, but i guess thye icon is being pushed out by the unspecified width of the input that fills the div, and so the icon overflows. the row is quite a bit wider, presumably i should reduce that, the size of the white box is how i would want it, so do i add the .col-lg-6 class to the row or something?
image.png
or resize the container that the row is in?
Leigh Hobson
@leighhobson89
Mar 09 2018 23:17 UTC
@gulsvi @sjames1958gm delayed brownie points sorry guys only just picked up the tips!!
James Hwang
@Kiwilicious
Mar 09 2018 23:17 UTC
@leighhobson89 You mean the col is wider. Just change the col-lg-6 to a smaller number. As for the input, one way to go about it is to define it's width to something less than 100%.
Ryan Williams
@Ryanwfile
Mar 09 2018 23:19 UTC
I'm trying to alternate 2 functions indefinitely that simply display text to the same html paragraph, what would be a good way to do this, here is the codepen so far https://codepen.io/Ryanwfile/pen/QQgjyM
Leigh Hobson
@leighhobson89
Mar 09 2018 23:24 UTC
thanks @Kiwilicious
CamperBot
@camperbot
Mar 09 2018 23:24 UTC
leighhobson89 sends brownie points to @kiwilicious :sparkles: :thumbsup: :sparkles:
api offline
Leigh Hobson
@leighhobson89
Mar 09 2018 23:25 UTC
that feels like a workaround, but it works, so thats good enough for me, plus its still relative
Leigh Hobson
@leighhobson89
Mar 09 2018 23:30 UTC
i´m going to try and work out how to put the icon inside the input instead, i dont like how it scales to other screensizes. i've learnt a bit about layouts though, so thanks guys
Leigh Hobson
@leighhobson89
Mar 09 2018 23:42 UTC
done guys, thank you! If you're interested I googled it and with a combination of your layout techniques, and another approach to the icon, I have the result I want, as follows:
image.png
you can see the new code above the old here