These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Feb 2018
Arun Shah
@ameeno
Feb 15 2018 00:08
@sjames1958gm Hiya i am having a really tough time trying to make my images change based on mood selection.
could you give me some ideas on how to do it?
Varun Singhai
@vsinghai
Feb 15 2018 00:15
@gulsvi what css link would that be. Also, when using jQuery, what links should i always put into my main html file?
Brad
@bradtaniguchi
Feb 15 2018 00:22
@vsinghai What error are you getting? I think you have everything setup correctly
Stephen James
@sjames1958gm
Feb 15 2018 00:31
@ameeno Not sure what you mean by mood selection
DMsalati
@DMsalati
Feb 15 2018 00:34
@sjames1958gm im just not understanding the documentations and parameters its so compilicated
alpox
@alpox
Feb 15 2018 01:06
@DMsalati you can test it in the apu sandbox. You gotta use the action opensearch and
Use the search parameter for search inputs
DMsalati
@DMsalati
Feb 15 2018 01:07
whats a sandbox?
alpox
@alpox
Feb 15 2018 01:07
You may also want to specify a namespace for the search
DMsalati
@DMsalati
Feb 15 2018 01:07
whats a namespace?
This is the api sandbox
You can put your request together there and test what you get from it
A namespace is just kind of in what categories you want to search - you may not need to specify it.
DMsalati
@DMsalati
Feb 15 2018 01:10
@alpox oh i see, so it sets it up for you kind of? before having to link ajax with it? thank you so much
CamperBot
@camperbot
Feb 15 2018 01:10
dmsalati sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1539 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Feb 15 2018 01:10
Well it creates an url for you which you then have to use for an ajax request
But inside of the sandbox you can make requests just to test what you get
Most likely you will need action=opensearch&search=<yoursearchterm>
Sunghyun Lim
@zzhydezz
Feb 15 2018 01:11
Hey Guys I am newbie to fronend world!
alpox
@alpox
Feb 15 2018 01:11
Where you replace <yoursearchterm> with whatever you want to search
DMsalati
@DMsalati
Feb 15 2018 01:11
@alpox yeah thats what i meant like the link before adding it to ajax
alpox
@alpox
Feb 15 2018 01:12
Yea
DMsalati
@DMsalati
Feb 15 2018 01:12
thats mainly what ive been struggling with
cuz theres just so much information and some of it was really advanced i didnt know most of it
alpox
@alpox
Feb 15 2018 01:13
Yes its a bit weird that they throw that api on you so early... The wiki api is kinda confusing
There are tons of apis which are easier to interpret and better documented
DMsalati
@DMsalati
Feb 15 2018 01:15
@alpox yeah i thought so too, but wasnt sure. like i didnt have an issue with the weather, quote, and twitter api
but the wiki one was hella confusing
Gulsvi
@gulsvi
Feb 15 2018 01:26
@vsinghai Add this to your <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
Animate CSS Library Website: https://daneden.github.io/animate.css/
Shvetal
@verv0eren
Feb 15 2018 01:54
Good morning from India
abraham anak agung
@padunk
Feb 15 2018 02:28
@verv0eren Good morning
Varun Singhai
@vsinghai
Feb 15 2018 03:39
@bradtaniguchi the jQuery wasn't working on my page, but now it is
@gulsvi that worked, thank you! Do i always have to add that now when I use jQuery?
CamperBot
@camperbot
Feb 15 2018 03:40
vsinghai sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2605 | @gulsvi |http://www.freecodecamp.org/gulsvi
hensn5250
@hensn5250
Feb 15 2018 03:42
hello
abraham anak agung
@padunk
Feb 15 2018 03:44
@hensn5250 :wave:
hensn5250
@hensn5250
Feb 15 2018 03:44
@padunk hey
@padunk are you ok with JS? looking for someone to collab with
abraham anak agung
@padunk
Feb 15 2018 03:45
@hensn5250 prhaps :smile:
hensn5250
@hensn5250
Feb 15 2018 03:47
@would you like to collab on some code I have? Just need a second opinion on what I'm doing.
Tom
@moT01
Feb 15 2018 03:47
give it a share
i can comment
hensn5250
@hensn5250
Feb 15 2018 03:47
cool
abraham anak agung
@padunk
Feb 15 2018 03:47
@hensn5250 what code?
Tom
@moT01
Feb 15 2018 03:52
looks like some bugs in that feature
hensn5250
@hensn5250
Feb 15 2018 03:53
yes
abraham anak agung
@padunk
Feb 15 2018 03:54
@hensn5250 what opinion you need?
Tom
@moT01
Feb 15 2018 03:54
cool feature though once its working
hensn5250
@hensn5250
Feb 15 2018 03:54
I need to show you the code. its a bit complicated to explain
abraham anak agung
@padunk
Feb 15 2018 03:54
yes, live colaboration...
@hensn5250 is this your code ?
//get all left shift buttons
var top_btn_lf_collec = document.querySelectorAll('div.top_images .shift_btn_lf');
var top_btn_rt_collec = document.querySelectorAll('div.top_images .shift_btn_rt');
console.log(top_btn_rt_collec);
//apply click listener function
for(let [index, item] of top_btn_lf_collec.entries() ){
    item.onclick = left_btn_fucn;
}



//Left Button Click Function
function left_btn_func(){

    //if the parent of the clicked button's index is 0 do nothing

  //else shift parent(div) of clicked button to the right to reveal hidden div to its left
      // get last displayed div (on the right) , set it to display: none
    // get div to the left of clicked button's parent, set that div to display: block 
    //Fix Media Query to prevent conflict if screen size changes: 
        //set 
}
hensn5250
@hensn5250
Feb 15 2018 03:55
yes thats the JS portion
Tom
@moT01
Feb 15 2018 03:55
typo
hensn5250
@hensn5250
Feb 15 2018 03:55
i just started on it. much of the code is HTMLand CSS
Tom
@moT01
Feb 15 2018 03:56
item.onclick = leftbtnfunc
hensn5250
@hensn5250
Feb 15 2018 03:57
yea i think i misspelled the function name there
Tom
@moT01
Feb 15 2018 03:57
put it in codepen
here is a link to the full code
Tom
@moT01
Feb 15 2018 04:04
so whats up
abraham anak agung
@padunk
Feb 15 2018 04:04
@hensn5250 so what do you want to do?
a carousel?
hensn5250
@hensn5250
Feb 15 2018 04:05
if you adjust the side of the screen you can see that the amount of divs being displayed changes
Yes
I want a carousel effect where each click causes the display to shift right or left
the problem is creating a carousel will effect the screen resize effect done by the media queries
Randy
@RandyGoldsmith
Feb 15 2018 04:10
does anyone know how to center content? i want my h1, h2, and image in my header to be in "moved" down more vertically in the center
abraham anak agung
@padunk
Feb 15 2018 04:11
@hensn5250 so you need to hide other div, and display it 1 by 1 right?
Tom
@moT01
Feb 15 2018 04:11
@RandyGoldsmith i use flexbox for that
Randy
@RandyGoldsmith
Feb 15 2018 04:12
@moT01 do you know how to do it the old school way? trying to do things without flexbox first and then ill use it
Tom
@moT01
Feb 15 2018 04:13
well, you could use position: relative with top: 50px or something
that wont center it
hensn5250
@hensn5250
Feb 15 2018 04:13
@padunk yes, display by 1
Tom
@moT01
Feb 15 2018 04:13
well, it will if you put the right px in
i suggest learning flex - its so handy
Randy
@RandyGoldsmith
Feb 15 2018 04:14
@moT01 okay thanks
CamperBot
@camperbot
Feb 15 2018 04:14
randygoldsmith sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 992 | @mot01 |http://www.freecodecamp.org/mot01
hensn5250
@hensn5250
Feb 15 2018 04:14
@RandyGoldsmith Flexbox saves lives
abraham anak agung
@padunk
Feb 15 2018 04:15
@hensn5250 just play with index then, if left button is click, display next index, if right button is click display index before it. And you need to consider if the last index is display, then next index will be 0
abyshukla
@abyshukla
Feb 15 2018 04:16
There used to be an online hands-on kind of a deal for flex...
My memory's not what is used to be
hensn5250
@hensn5250
Feb 15 2018 04:16
@padunk did you look at the media queries?
Tom
@moT01
Feb 15 2018 04:16
good youtube video on the devtips channel
for flex
hensn5250
@hensn5250
Feb 15 2018 04:17
@padunk I agree with your method , just wondering if that would work while have the media queries
abraham anak agung
@padunk
Feb 15 2018 04:18
@hensn5250 yes, i don't know how to do it with media queries. i hate css :smile:
i think yo could use media queries to resize the image or the div. not to hide or show it.
hensn5250
@hensn5250
Feb 15 2018 04:20
@padunk Right . I started building it strictly with CSS but now that I'm building the JS the JS and CSS are in conflict
Bradkittle
@Bradkittle
Feb 15 2018 04:22
Tree house a good website to use?
hensn5250
@hensn5250
Feb 15 2018 04:23
i see that one feature has to be sacrificed for the other. I'll just keep the media queries.
@padunk Thanks. I see the limitations.
CamperBot
@camperbot
Feb 15 2018 04:25
hensn5250 sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @padunk |http://www.freecodecamp.org/padunk
abraham anak agung
@padunk
Feb 15 2018 04:25
@hensn5250 Np. happy coding
Jacob Fines
@jfines
Feb 15 2018 05:06
Everything has been going along just fine; then, suddenly, chrome won't display the stuff right ( but firefox will ).. and I've been using chrome to view the results and would like to continue to do so.
What do I do? Can anyone help?
Roman Struna
@RomchyFCC
Feb 15 2018 05:07
@jfines are you using macOS?
i've seen complaints from others aswell, it's usually the OS, but can't be proven
Jacob Fines
@jfines
Feb 15 2018 05:09
I'm on ubuntu 16.04 I may have found the problem ( it is allowing a refresh of the locally served content now - after clearing the cache in the browser ). I don't understand how that could have caused the problem though.
@RomchyFCC ^ sorry for the delay
Roman Struna
@RomchyFCC
Feb 15 2018 05:10
no worries, this is good info, if anyone else will experience similar issues i'll just reccomend they clear the cache :) nice find!
Jacob Fines
@jfines
Feb 15 2018 05:11
@RomchyFCC Thx. I bet there's something in the settings making it revert to cached content though and I could face the same problem again. Idk what to look for to fix the setting though. Any ideas?
CamperBot
@camperbot
Feb 15 2018 05:11
jfines sends brownie points to @romchyfcc :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @romchyfcc |http://www.freecodecamp.org/romchyfcc
@jfines have you tried this?
Jacob Fines
@jfines
Feb 15 2018 05:14
@RomchyFCC I'll take a look. thanks
CamperBot
@camperbot
Feb 15 2018 05:14
jfines sends brownie points to @romchyfcc :sparkles: :thumbsup: :sparkles:
api offline
Roman Struna
@RomchyFCC
Feb 15 2018 05:15
no worries, you just might have saved a lot of people headaches, thank you :) @jfines
CamperBot
@camperbot
Feb 15 2018 05:15
romchyfcc sends brownie points to @jfines :sparkles: :thumbsup: :sparkles:
:cookie: 228 | @jfines |http://www.freecodecamp.org/jfines
Jacob Fines
@jfines
Feb 15 2018 05:15
I wonder if that disables cache globally or just for the page you opened tools on
Roman Struna
@RomchyFCC
Feb 15 2018 05:15
just the page in my experience
altho should be tested
Jacob Fines
@jfines
Feb 15 2018 05:15
Nice!!
wowww
Roman Struna
@RomchyFCC
Feb 15 2018 05:16
nope it's global
Jacob Fines
@jfines
Feb 15 2018 05:16
still - dude - that's good stuff man :)
Roman Struna
@RomchyFCC
Feb 15 2018 05:17
:)
Dany Din
@danydin
Feb 15 2018 08:40
how can i center only 1 row within a div?
creator0323
@Amasian
Feb 15 2018 09:29
is it recommended to study every methods of Javascript?
Markus Kiili
@Masd925
Feb 15 2018 09:31
@Amasian You can look methods up on MDN when needed, but you should familiarize yourself with string and array methods. There are not too many of them.
Dany Din
@danydin
Feb 15 2018 09:31
@Masd925 can you check my question above it
Markus Kiili
@Masd925
Feb 15 2018 09:31
@danydin Horizontally or vertically?
Dany Din
@danydin
Feb 15 2018 09:32
center text within p element
but just part of the text
creator0323
@Amasian
Feb 15 2018 09:34
@Masd925 thank you for your advice!
CamperBot
@camperbot
Feb 15 2018 09:34
amasian sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4692 | @masd925 |http://www.freecodecamp.org/masd925
Markus Kiili
@Masd925
Feb 15 2018 09:35
@danydin p { text-align: center } would do a basic centering of text within paragraph.
Dany Din
@danydin
Feb 15 2018 09:35
yes this i know but i want just part of the text within the element
but i dont want to create a new p due to spacing
Markus Kiili
@Masd925
Feb 15 2018 09:35
@danydin Not clear what you mean by that.
Dany Din
@danydin
Feb 15 2018 09:36
<p>not-center-blablalba center-text blabal</p>
Markus Kiili
@Masd925
Feb 15 2018 09:37
@danydin You wan't to center a piece of text and have text on the left and right of that?
alpox
@alpox
Feb 15 2018 09:37
@danydin If you want to center only part of the text, you gotta wrap it into an own element (span/div) and center that element inside of its parent
Dany Din
@danydin
Feb 15 2018 09:37
i want some text normally left aligned and some center
span won't change it i tried.. as i guess its not block elemnt
alpox
@alpox
Feb 15 2018 09:38
@danydin Well you need additional css anyway
Westphal
@swestphal
Feb 15 2018 09:38
@danydin margin:0 auto
Dany Din
@danydin
Feb 15 2018 09:38
i used the text-center
within span @swestphal ?
cani i create 'empty' div within p lol?
Westphal
@swestphal
Feb 15 2018 09:39
no, on the div outside the span
Dany Din
@danydin
Feb 15 2018 09:39
but i want just part of the text within the block elemtn
but i want it on the same row
Westphal
@swestphal
Feb 15 2018 09:40

@danydin <style>
div.d {
text-align: center;
}
</style>
</head>

<body>
<div>
<div class="d"><span>hjhkjh</span></div>
</div>
</body>

Dany Din
@danydin
Feb 15 2018 09:40
yes so i crete div within my p element for center the text right
Markus Kiili
@Masd925
Feb 15 2018 09:42
@swestphal I think that he wants some text around that centered part on the same line.
Dany Din
@danydin
Feb 15 2018 09:43
i want left align then some cetner from no where on the same line
Vishal Sholkay
@sholkay
Feb 15 2018 09:47
Can any one give me an idea for a hackthon ? (theme is education)
hackathon*
mustimuu
@mustimuu
Feb 15 2018 09:54
Hey guys
can someone expalin to me, why my jquery doesent work
I think i put the root to the file wrong
The HTML CSS and JS doesent have their own map
its just in one folder called "code"
How do i comment code in here by the way?
Claudio Restifo
@Marmiz
Feb 15 2018 10:00
@mustimuu wrap the code into three `
alert('I am formatted')
mustimuu
@mustimuu
Feb 15 2018 10:04
k thanks

'''

'''

CamperBot
@camperbot
Feb 15 2018 10:05
:bulb: to format code use backticks! ``` more info
mustimuu
@mustimuu
Feb 15 2018 10:05
<!DOCTYPE html>
<html>

<head>
    <title>Blog Preview Example</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>

<body>
    <div id="flashMessage">
        Your changes have been saved!
    </div>
    <div class="blogNewPost">
        <h1 class="blogPage-title">New Blog Post</h1>
        <p class="blogTitle-area">
            <label>Title</label>
            <input type="text" id="blogTitleInput">
        </p>
        <p class="blogContent-area">
            <label>Content</label>
            <textarea id="blogContentInput"></textarea>
        </p>
        <p>
            <button id="previewButton">Preview</button>
        </p>
    </div>
    <div class="blogPreviewArea">
        <h2 id="blogTitlePreview"></h2>
        <div id="blogContentPreview">
        </div>
    </div>

    <script src="js.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>
@Marmiz heres the HTML
.
Claudio Restifo
@Marmiz
Feb 15 2018 10:10
and?
What's wrong, what's happening (some context would be nice)
mustimuu
@mustimuu
Feb 15 2018 10:11
i found the mistake
capital m
and script should be in head
Dany Din
@danydin
Feb 15 2018 10:11
@Marmiz i want some text left as usual and then some cetner-text on the same line
Claudio Restifo
@Marmiz
Feb 15 2018 10:13

@mustimuu depends, script in the head means that the DOM will wait for it to be loaded before render something... if it's a lot of stuff to load can look like your page is not working.

Do it at your own risk

@danydin span is what you want to look for
Dany Din
@danydin
Feb 15 2018 10:13
i tried but it doesn't move i guess because its not block so it stuck
abraham anak agung
@padunk
Feb 15 2018 10:14
@danydin why don't you make two <p> inside a <div> ?
Dany Din
@danydin
Feb 15 2018 10:14
due to spaces..
p has padding-margin..
abraham anak agung
@padunk
Feb 15 2018 10:15
@mustimuu i think type should be application/javascript
Claudio Restifo
@Marmiz
Feb 15 2018 10:16
@danydin
<p>some text <span style="text-align: center;">is at center</span></p>
Dany Din
@danydin
Feb 15 2018 10:16
i tried it earlier didnt work i'll check again now and will update
Claudio Restifo
@Marmiz
Feb 15 2018 10:17
no wait, it won't work... text align is a parent prop
:worried: woops
abraham anak agung
@padunk
Feb 15 2018 10:17
@danydin
<div class='words'>
  <p class="left">left adfasdf</p>
  <p class="center">center asdfasdfs</p>
</div>

//css
.left {
  float: left;
}

.center {
  text-align: center;
}
alpox
@alpox
Feb 15 2018 10:18
@padunk That centers the text only in the center element but i guess he wanted to center it in the whole line
Dany Din
@danydin
Feb 15 2018 10:18
i want both on the same line
abraham anak agung
@padunk
Feb 15 2018 10:19
@alpox that is tricky
Probably like this
Dany Din
@danydin
Feb 15 2018 10:19
@Marmiz i tried it didnt work
@alpox yessssss how
wtf trasnaltex-50 lol
alpox
@alpox
Feb 15 2018 10:20
@danydin Well you make the outer wrapper position: relative for it to work as anchor for inner elments
Dany Din
@danydin
Feb 15 2018 10:20
im not pro frotnend
Claudio Restifo
@Marmiz
Feb 15 2018 10:20
@alpox why not flex? :thought_balloon:
alpox
@alpox
Feb 15 2018 10:20
Then you use position: absolute to align the centered element to the outer wrapper instead to its previous position
Dany Din
@danydin
Feb 15 2018 10:20
it sound like elon musk wrote it
alpox
@alpox
Feb 15 2018 10:20
@Marmiz Have fun trying :)
Claudio Restifo
@Marmiz
Feb 15 2018 10:20
@alpox never tried, is it that hard?
can I use your pen? :)
alpox
@alpox
Feb 15 2018 10:21
@danydin left: 50%; makes the left side of the center element align with the left side of itself to the center.
To make it really center itself, you use transform: translateX(-50%); to move it left again for half of its own side
@Marmiz Sure, you can fork it.
I tried before, but this is not that easy with flex. Flex is not made for this :D
Dany Din
@danydin
Feb 15 2018 10:22
@alpox thanks so much i'll try wrap it all
CamperBot
@camperbot
Feb 15 2018 10:22
danydin sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1540 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Feb 15 2018 10:22
@danydin np
Claudio Restifo
@Marmiz
Feb 15 2018 10:22
@alpox done:
.line {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.flex {
  flex: 1 0 auto;
}
.center {
 align-self: center;
}
<div class="line">
  <span class="flex">Text</span>
  <span class="flex center">Centerd text</span>
</div>
Dany Din
@danydin
Feb 15 2018 10:23
share pen
Claudio Restifo
@Marmiz
Feb 15 2018 10:23
@danydin nope, so you learn flex :)
alpox
@alpox
Feb 15 2018 10:23
@Marmiz Thats even more css :D
Dany Din
@danydin
Feb 15 2018 10:23
so expalin what are the 1 0 auto
Claudio Restifo
@Marmiz
Feb 15 2018 10:23
more maintainable? I don't like absolute cos reasons :)
@danydin google flexbox :)
and read documentation
Dany Din
@danydin
Feb 15 2018 10:24
i love summarizes
thast why i come here haha
Claudio Restifo
@Marmiz
Feb 15 2018 10:24
but you won't learn
Marianissimus
@Marianissimus
Feb 15 2018 10:24
@alpox you want them on different paragraphs? are you sure about that?
Dany Din
@danydin
Feb 15 2018 10:24
why not
see alpox summarize me all his code in 1 senetce i got it
abraham anak agung
@padunk
Feb 15 2018 10:25
@Marmiz nice...
Dany Din
@danydin
Feb 15 2018 10:25
just this line flex: 1 0 auto;
Claudio Restifo
@Marmiz
Feb 15 2018 10:26

@danydin ok so:
flex: 1 0 auto is short for

flex-grow: 1,
flex-shrink: 0,
flex-basis: auto,

easy :)

alpox
@alpox
Feb 15 2018 10:26
xD
Marianissimus
@Marianissimus
Feb 15 2018 10:26
or
.words{
  width: 1000px;
  text-align: center;
}

.left{
  text-align: left;
}
Claudio Restifo
@Marmiz
Feb 15 2018 10:26
@Marianissimus but then you have a fixed width. What happen to my mobile users? T_T
Marianissimus
@Marianissimus
Feb 15 2018 10:27
remove the width; or use %
alpox
@alpox
Feb 15 2018 10:27
@Marmiz Your solution does not work though btw :) it only looks like
Dany Din
@danydin
Feb 15 2018 10:27
but text-align center wont work on span @Marianissimus
Marianissimus
@Marianissimus
Feb 15 2018 10:27
it's a p, not span
Claudio Restifo
@Marmiz
Feb 15 2018 10:28
@alpox really? :(
you have a broken pen?
Dany Din
@danydin
Feb 15 2018 10:28
but i dont want it on differnt p
Claudio Restifo
@Marmiz
Feb 15 2018 10:28
(CSS: yay!)
alpox
@alpox
Feb 15 2018 10:28
@Marmiz your flex solution centers the centered text only on the right side, not on the whole line
@Marmiz If you give the uncentered text more text, you will see that the centered text moves to right
Thats not what @danydin wanted
Marianissimus
@Marianissimus
Feb 15 2018 10:29
so same p, right? this is different...
Dany Din
@danydin
Feb 15 2018 10:29
yes same thats the issue ha
so no other way than alpox? :o
alpox
@alpox
Feb 15 2018 10:29
@danydin Not until now :D
Dany Din
@danydin
Feb 15 2018 10:30
computers cant be dum sometimes for the easiest stuff haha
Marianissimus
@Marianissimus
Feb 15 2018 10:30
so, one div with the class words, 2 spans with left and center
.words{
  text-align: center;
}

.left{
  position: absolute;
  left: 0;
}
Claudio Restifo
@Marmiz
Feb 15 2018 10:30
@alpox yeah, we should probably give it some basis :/
well I'll blame the designers regardless
alpox
@alpox
Feb 15 2018 10:30
@Marmiz Hahah :D
Yes, please blame the designers!
abraham anak agung
@padunk
Feb 15 2018 10:31
@Marmiz :laughing:
Dany Din
@danydin
Feb 15 2018 10:31
@Marianissimus so to the center span i don't add class right
Marianissimus
@Marianissimus
Feb 15 2018 10:32
you center everything inside the parent div. then make the left span position absolute, starting at left:0;
Dany Din
@danydin
Feb 15 2018 10:32
i center the parent div
alpox
@alpox
Feb 15 2018 10:33
@Marianissimus The class words needs position: relative otherwise the position: absolute cannot align to it
Marianissimus
@Marianissimus
Feb 15 2018 10:33
it's the parent div, and only div on html
Dany Din
@danydin
Feb 15 2018 10:33
ye tha'ts what i thought cuz block is normally fixed
alpox
@alpox
Feb 15 2018 10:33
@Marianissimus Ye but probably not in @danydin 's case :D
Dany Din
@danydin
Feb 15 2018 10:33
so do we have a new winner @alpox ? can you confirm
alpox
@alpox
Feb 15 2018 10:34
@danydin Can confirm. That works: https://codepen.io/alpox/pen/VQMELb?editors=1100
Dany Din
@danydin
Feb 15 2018 10:35
prefect though you see what happens on small screen haha
@Marianissimus thanks for this creative one and @alpox for improving it ha
CamperBot
@camperbot
Feb 15 2018 10:35
danydin sends brownie points to @marianissimus and @alpox :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 465 | @marianissimus |http://www.freecodecamp.org/marianissimus
alpox
@alpox
Feb 15 2018 10:35
You'll probably never get such a small screen
Marianissimus
@Marianissimus
Feb 15 2018 10:36
you're welcome
Dany Din
@danydin
Feb 15 2018 10:36
yes anyway i just wanted it on a new row but with the same spacing
Claudio Restifo
@Marmiz
Feb 15 2018 10:37

@alpox accounting for indefinite text:
https://codepen.io/anon/pen/yvzRvy?editors=1100

yet I think your solution is still the best, mine involving blaming the project manager for unclear specifics

Marianissimus
@Marianissimus
Feb 15 2018 10:38
if you really want a column design, you could try the column property: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts
alpox
@alpox
Feb 15 2018 10:39
@Marmiz Got a new winner @danydin
:D
This works better on small screen
Dany Din
@danydin
Feb 15 2018 10:40
woww crazy you and your math calculation skills @alpox :jealous
abraham anak agung
@padunk
Feb 15 2018 10:40
@alpox that grid is better. nice. What is minmax for?
Dany Din
@danydin
Feb 15 2018 10:40
you should go create some alogrithms instead of be on this frontend chat haha @alpox
alpox
@alpox
Feb 15 2018 10:41
@padunk You can tell that it takes some percentage as example (maximum/normally) but it cannot get smaller than 100px
@danydin Thats what i usually do :)
abraham anak agung
@padunk
Feb 15 2018 10:41
@alpox yes, i remember it now. Never use grid often.
Dany Din
@danydin
Feb 15 2018 10:42
but its indeed really nice that u come help us sometimes ;D
and share with us ur knowledge
alpox
@alpox
Feb 15 2018 10:44
@danydin Made some adjustments to the codepen because before it was not properly centered. Now it is
Well its fun to help out sometimes and with helping, I myself learn too
Dany Din
@danydin
Feb 15 2018 10:44
now i've too many options to choose from :crying_cat_face:
alpox
@alpox
Feb 15 2018 10:44
I believe everyone who helps here sees that :)
Dany Din
@danydin
Feb 15 2018 10:44
yes for sure
Claudio Restifo
@Marmiz
Feb 15 2018 10:45
@alpox showoff with grids! :clap:
while i'm here using flex like it's 2017
Dany Din
@danydin
Feb 15 2018 10:45
sometimes it's hard to explain code in simple words
alpox
@alpox
Feb 15 2018 10:45
@Marmiz Heheh well flex lends itself well to some things. But grid is there because flex is not good for all things :D
2017 is not so bad ^^
Dany Din
@danydin
Feb 15 2018 10:46
but i think when one does it succesfully you can really one grapsed it @alpox
Claudio Restifo
@Marmiz
Feb 15 2018 10:46
learning new CSS means I'll have to do CSS @ work... no thanks.
let me learn Assembly so I can become a hipster developer
abraham anak agung
@padunk
Feb 15 2018 10:46
Nice chat here all, Good Night and thanks for the tips @alpox @Marmiz @Marianissimus
CamperBot
@camperbot
Feb 15 2018 10:46
padunk sends brownie points to @alpox and @marmiz and @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 466 | @marianissimus |http://www.freecodecamp.org/marianissimus
:star2: 1541 | @alpox |http://www.freecodecamp.org/alpox
:star2: 1165 | @marmiz |http://www.freecodecamp.org/marmiz
Dany Din
@danydin
Feb 15 2018 10:47
lol
old school dev @Marmiz
alpox
@alpox
Feb 15 2018 10:47
@Marmiz That sounds more like duck and run :D
@padunk Good night :)
Claudio Restifo
@Marmiz
Feb 15 2018 10:48

@alpox more like
BOSS: we got a new layout issue, who will pick it?

EVERYONE: hide wherever, Janet went home and Sean is faking his own death

alpox
@alpox
Feb 15 2018 10:49
I'd be clammed to the ceiling
Open the window softly and climb out of it like spiderman
Claudio Restifo
@Marmiz
Feb 15 2018 10:59

well i'm usually the one that get onto the frontend so it's usually me.

any recommended resource for grasping grids @alpox ?

alpox
@alpox
Feb 15 2018 11:02
@Marmiz Not much... i used them yesterday the first time :D
Claudio Restifo
@Marmiz
Feb 15 2018 11:04
@alpox thanks
d(>_< )
CamperBot
@camperbot
Feb 15 2018 11:04
marmiz sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1542 | @alpox |http://www.freecodecamp.org/alpox
mustimuu
@mustimuu
Feb 15 2018 11:35
guys
i know it sounds stupid
But i am still stuck
My external js file doesent work
billede.png
Stephen James
@sjames1958gm
Feb 15 2018 11:37
@mustimuu looks like you are not including jquery somewhere
Roman Struna
@RomchyFCC
Feb 15 2018 11:38
Stephen James
@sjames1958gm
Feb 15 2018 11:39
Nice stylying - appears to work - no decimal point ?
Fabien SHAN
@X140hu4
Feb 15 2018 11:40
The first value cannot be negative, returns NaN
mustimuu
@mustimuu
Feb 15 2018 11:44
hmm
@sjames1958gm i do
billede.png
Stephen James
@sjames1958gm
Feb 15 2018 11:45
@mustimuu Assuming you are using a linter, jslint or eslint - it doesn't seem to be aware that $ is defined elsewhere, maybe some config is missing
Roman Struna
@RomchyFCC
Feb 15 2018 11:50
oh, never tried using - as first :/
didn't even think about decimals, no request for them in the instructions
Roman Struna
@RomchyFCC
Feb 15 2018 11:55
ok fixed the minus issue :) thanks for finding that, altho real calculator would allow to calculate with minus, this one needs to have one calculation be made for that to happen, this is a tough project, so many forks in the road.... @X140hu4
CamperBot
@camperbot
Feb 15 2018 11:55
romchyfcc sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 15 2018 11:59
@RomchyFCC Amazing bro :)
Roman Struna
@RomchyFCC
Feb 15 2018 12:01
thanks @MuhammedKarim and @sjames1958gm <3
CamperBot
@camperbot
Feb 15 2018 12:01
romchyfcc sends brownie points to @muhammedkarim and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
:star2: 8978 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Fabien SHAN
@X140hu4
Feb 15 2018 12:08
@RomchyFCC No prob :)
Amit Patel
@AmitP88
Feb 15 2018 12:19

hey guys, I'm trying to change the tweet link on my Random Quote Machine to look like an actual tweet button, but when I do that, the tweet functionality no longer works, and I have no idea why. I've gone through the twitter documentation, but I can't get it to work. https://dev.twitter.com/web/intents

https://codepen.io/AmitP88/pen/YepOxg?editors=1010

Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 15 2018 12:22
@RomchyFCC what is this selector?
image.png
Roman Struna
@RomchyFCC
Feb 15 2018 12:23
*
oh
it selects all elements of the DOM
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 15 2018 12:23
lool i mean what does it select?
ohhh ok
so its even bigger than body?
dinesh
@1532j0004kg
Feb 15 2018 12:23
anybody need help ?
Roman Struna
@RomchyFCC
Feb 15 2018 12:24
if you set body to something, body elements will inherit that style, if you set * that means that every element will ahve that style NOT inherit it
it is bigger than body in a way
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 15 2018 12:25
@RomchyFCC woow that makes sense, thanks for letting me know. i saw it once before too and didnt know what it was!
CamperBot
@camperbot
Feb 15 2018 12:25
muhammedkarim sends brownie points to @romchyfcc :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @romchyfcc |http://www.freecodecamp.org/romchyfcc
Roman Struna
@RomchyFCC
Feb 15 2018 12:25
np :) :thumbsup:
Stephen James
@sjames1958gm
Feb 15 2018 12:46
@AmitP88 You might need to get rid of the twitter widget javascript include
Well not sure you can use web intents and the twitter widget together
Amit Patel
@AmitP88
Feb 15 2018 12:47
@sjames1958gm oh yeah, I know that it'll work without that, but I'm trying to style the tweet button to look like an actual tweet button
Stephen James
@sjames1958gm
Feb 15 2018 12:48
@AmitP88 You could make it look like the tweet button, then inspect the styles steal those and then go back to not using the widget
The widget does a lot of DOM manipulation
Amit Patel
@AmitP88
Feb 15 2018 12:48
@sjames1958gm hmmm, I mean I looked at this doc here https://dev.twitter.com/web/tweet-button and I thought I could make it work easily, but yeah, I may need to do that instead
Stephen James
@sjames1958gm
Feb 15 2018 12:48
I used it at first
Amit Patel
@AmitP88
Feb 15 2018 12:49
ohhh I see
that's why it's not working then, dom manipulation
Stephen James
@sjames1958gm
Feb 15 2018 12:50
@AmitP88 Yeah that js removes the button and inserts an iframe with a bunch of html elements - so your $(".twitter-share-button) is gone from the DOM
Amit Patel
@AmitP88
Feb 15 2018 12:51
@sjames1958gm oooh I see. damn, yeah, I'll have to inspect for styles then. thanks though, I was stuck on this for a while lol
CamperBot
@camperbot
Feb 15 2018 12:51
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8979 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 15 2018 12:52
@AmitP88 good luck
Amit Patel
@AmitP88
Feb 15 2018 12:53
@sjames1958gm thanks :)
CamperBot
@camperbot
Feb 15 2018 12:53
api offline
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
pegi1998
@pegi1998
Feb 15 2018 13:47
hi can someone tell me how to delete all my progress in the map ? i would like to start over
Aditya
@ezioda004
Feb 15 2018 13:55
@pegi1998 I believe you can clear your browsers local storage to delete the solutions.
Randy
@RandyGoldsmith
Feb 15 2018 14:06
anyone know how to make the :hover effect of the border bottom appear flush at the bottom of the navigation?
Tom
@moT01
Feb 15 2018 14:15
what do you want? what happened to centering the picture?
@RandyGoldsmith
navbar ul li {
  color: #87E3FC;
  margin: 10px;
  border-bottom: 2px solid rgba(255,255,255,0);
  cursor: pointer;
}

navbar ul li:hover {
  border-bottom: 2px solid white;
  color: #F6F9FB;
}
Randy
@RandyGoldsmith
Feb 15 2018 14:23
@moT01 i do need to center the content inside also yes
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:23
@moT01 how did you pull code in here on the black background
I'm new to using Gitter
and FCC
and everything lol
Randy
@RandyGoldsmith
Feb 15 2018 14:24
when you hover over the navigation li's..you see a white bar underneath the words..i want that bar to extend down further
Tom
@moT01
Feb 15 2018 14:24
there's a little button at the bottom right M with a down arrow (markdown)
CamperBot
@camperbot
Feb 15 2018 14:25
:bulb: to format code use backticks! ``` more info
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:25
lol
thanks
Tom
@moT01
Feb 15 2018 14:25
those are single quotes - the ticks are top left on the keyboard
most keyboards
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:25
what is that called, mark down, or mark up
Tom
@moT01
Feb 15 2018 14:26
markdown
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:26
thanks
Tom
@moT01
Feb 15 2018 14:26
click my name and say thanks
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:26
@moT01 thanks
CamperBot
@camperbot
Feb 15 2018 14:26
alexiveson_twitter sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 993 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Feb 15 2018 14:26
993
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:27
is that just like reddit karma or something
Tom
@moT01
Feb 15 2018 14:27
im not sure - but probly
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:27
ok bud.
Tom
@moT01
Feb 15 2018 14:27
just some points that dont really mean anything
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:28
If I drop some code in here, can someone tell me why my image isnt responsive?
Tom
@moT01
Feb 15 2018 14:28
@RandyGoldsmith add a padding
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:28
<img class="img-responsive" src="http://2.bp.blogspot.com/-eappQn4YuEM/U7XmcqWlMEI/AAAAAAABZek/tOfupHrrUd8/s1600/superted_s_transformation_by_natter45-d789v48.png" alt="A picture of SuperTed">
I have tried resizing my browser to test the the responsiveness, and it doesnt work and it doesnt effect the image.
Tom
@moT01
Feb 15 2018 14:29
making locally?
Aditya
@ezioda004
Feb 15 2018 14:30
@AlexIveson_twitter Are you using BS4? If so they changed the class to img-fluid
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:30
Ahhhhhh thanks
yes , I am using BS4
FCC needs a little update I think
Aditya
@ezioda004
Feb 15 2018 14:31
Yes its coming...soon
Tom
@moT01
Feb 15 2018 14:31
"soon"
Randy
@RandyGoldsmith
Feb 15 2018 14:31
@moT01 thanks it works..but the words move left and right..anyway to keep them still?
CamperBot
@camperbot
Feb 15 2018 14:31
randygoldsmith sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 994 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Feb 15 2018 14:32
yes - there is
Alex Iveson
@AlexIveson_twitter
Feb 15 2018 14:32
@ezioda004 thanks
CamperBot
@camperbot
Feb 15 2018 14:32
alexiveson_twitter sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Tom
@moT01
Feb 15 2018 14:33
when you put just one number in the padding style - it will add padding to all sides
if you use two numbers - the first number are top and bottom padding - second is the sides
4 numbers are all 4 sides in this order - top, right, bottom, left
the padding on the sides is making them space out
Randy
@RandyGoldsmith
Feb 15 2018 14:36
@moT01 hah! wow..should of known...good point..thanks again!
CamperBot
@camperbot
Feb 15 2018 14:36
randygoldsmith sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
krckyboy
@krckyboy
Feb 15 2018 15:28
I'm looking for a course (for example on Udemy) for CSS3. Any recommendations?
DMCooper
@SilentGamelan
Feb 15 2018 15:29

hey, can anyone give me some pointers on where to begin on converting my portfolio page to be responsive by using flex? I've recently returned to FCC after a long break and am doing the beta curriculum, so we are supposed to avoid using bootstrap. I know I'll need to use media queries to resize the picture and background on mobile, but I think it will be a major pain to restructure the page as it is to make it viewable on mobile (I've used floats and lots of styling to position each element).

I feel like I've painted myself into a corner and don't know where to even begin implementing flexboxes. I've done the FCC sections on it, and completed flexboxfroggy, so I understand the syntax and the basics of how it works - but I can't figure out how to apply it here.

I've posted for feedback in the forum, but no replies so far. My page is (here)[https://codepen.io/silentgamelan/full/ddVEBe/]. Thanks

krckyboy
@krckyboy
Feb 15 2018 15:32
@SilentGamelan One option would be to start all over again and the second one to watch a few flexbox guides and you'll know what to do. If you start over, design for mobile first.
Marianissimus
@Marianissimus
Feb 15 2018 15:39
the container will have {display: flex} and the items {flex - something}, you can find the options
you don't need a lot of media querries nowadays: declare the pictures in % {max-width: 100% or whatever, height: auto}, use background as cover...
DMCooper
@SilentGamelan
Feb 15 2018 15:45

thanks @krckyboy - I had a sinking feeling that I might end up having to start from scratch, hoping I can avoid that if possible :worried:
I've watched a few guides and feel like I get it when watching or playing with flex on examples, but just feel like I'm blank when looking at my site.

@Marianissimus should I be using nested flex containers do you think?
So one big container for the page, one for the picture, one each for the sidebars, one for the timeline for instance?
Or use one container?
Thanks for the tip on media queries btw!

CamperBot
@camperbot
Feb 15 2018 15:45
silentgamelan sends brownie points to @krckyboy and @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 103 | @krckyboy |http://www.freecodecamp.org/krckyboy
:cookie: 467 | @marianissimus |http://www.freecodecamp.org/marianissimus
Ken Haduch
@khaduch
Feb 15 2018 15:48
@SilentGamelan - Wes Bos has a course (I think that it's free) that shows some of the basics of flexbox. I haven't done that particular course but have been using some others - you could check that out here http://wesbos.com/courses/ look for the flexbox course. He also has one on the CSS grid that is new. Maybe it will be interesting? There are lots of flexbox resources out there, for sure!
Marianissimus
@Marianissimus
Feb 15 2018 15:48
@SilentGamelan one flex container at least, of course
use flex only if needed - if you can't do the code without simple text-align, or floats, or whatelse
DMCooper
@SilentGamelan
Feb 15 2018 15:54
@khaduch Cheers, I'll have a look at that
Gulsvi
@gulsvi
Feb 15 2018 16:07
@vsinghai jQuery is just adding the classes to the element. You don't need it, you can add the classes to the element manually if you wish.
Matej Bošnjak
@mbosnjak01
Feb 15 2018 16:24
Has anyone used Youtube API?
Philominsuji
@Philominsuji
Feb 15 2018 16:35
Hi guys,I am weak in logical thinking.Can I learn programming?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 15 2018 16:37
Give it a shot, it's not all about logic :) @Philominsuji
Darren
@DarrenfJ
Feb 15 2018 16:37
@khaduch thanks for the link.. took some of his courses a year or so ago.. liked his style.. didn't know he had a flexbox one
CamperBot
@camperbot
Feb 15 2018 16:37
darrenfj sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3736 | @khaduch |http://www.freecodecamp.org/khaduch
Darren
@DarrenfJ
Feb 15 2018 16:38
also, morning fCC
Philominsuji
@Philominsuji
Feb 15 2018 16:39
How many days i finish the course in free code camp?
Panagiotis Skarlas
@1qk1
Feb 15 2018 16:40
hhhhhhhhhhelo friends
Darren
@DarrenfJ
Feb 15 2018 16:41
@Philominsuji um.. based on how much you code each night.. but even speeding through it's days and days of work.. i think some have done it in 3 to 6 months with very focussed attention?
Tom
@moT01
Feb 15 2018 16:42
about a year for the whole thing if you dont have any experience i would guess
Aditya
@ezioda004
Feb 15 2018 16:42
Frontend alone is 500hrs
coderNewby
@coderNewby
Feb 15 2018 16:42
hi @DarrenfJ have the PM for you
Darren
@DarrenfJ
Feb 15 2018 16:43
@coderNewby oh yah sorry man, was afk most of yesterday.. will check it out
coderNewby
@coderNewby
Feb 15 2018 16:43
thanks @DarrenfJ
CamperBot
@camperbot
Feb 15 2018 16:43
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2390 | @darrenfj |http://www.freecodecamp.org/darrenfj
Philominsuji
@Philominsuji
Feb 15 2018 16:45
Thank You for the information Mr.Darren.I will try the programm in free code camp
Panagiotis Skarlas
@1qk1
Feb 15 2018 16:56
Hey guys has anyone been part in a chingu voyage before?
Ken Haduch
@khaduch
Feb 15 2018 17:07
@DarrenfJ - add it to your collection of learning resources! The list can never be long enough, I guess... :) I hope that you're doing well?
AbrisM
@AbrisM
Feb 15 2018 19:09
Hey does anyone know of any obscure NoS? This is more of a backend question but the chat is dead atm
Gulsvi
@gulsvi
Feb 15 2018 19:10
@AbrisM NoS? Network Operating System?
AbrisM
@AbrisM
Feb 15 2018 19:10
Yes
Im trying to find what these consoles would look like to a Network Admin
Dardan Demiri
@dardandemiri
Feb 15 2018 19:11
Why am I getting this respond from request:
Failed to load resource: the server responded with a status of 404 ()
AbrisM
@AbrisM
Feb 15 2018 19:11
Like, the actual program
Dardan Demiri
@dardandemiri
Feb 15 2018 19:11
in the weather station app
AbrisM
@AbrisM
Feb 15 2018 19:11
@dardandemiri That's usually from a miss redirect
AbrisM
@AbrisM
Feb 15 2018 19:11
Its trying to search for something it can't find
Gulsvi
@gulsvi
Feb 15 2018 19:12
@dardandemiri 404 means the URL you are using is either incorrect, or the server is down
If you share the code, I can take a closer look
AbrisM
@AbrisM
Feb 15 2018 19:12
Yes :)
Here you can see the code
it's in the end
of the JS file
AbrisM
@AbrisM
Feb 15 2018 19:13
Cisco and Novel Netware look like good canidates
Gulsvi
@gulsvi
Feb 15 2018 19:15
@dardandemiri It all seems to work fine for me - what are you doing to get a 404?
Dardan Demiri
@dardandemiri
Feb 15 2018 19:15
Does it work to you ?
:O
Gulsvi
@gulsvi
Feb 15 2018 19:16
I get JSON back when I click "Weather in my location"
I had to add a console.log to see it
The location is accurate too
Dardan Demiri
@dardandemiri
Feb 15 2018 19:16
what have you done console.log
Gulsvi
@gulsvi
Feb 15 2018 19:16
        $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon="+ longitude, function(json){
          console.log(json); // added this line to see the API response
          results = 4;
        });
Dardan Demiri
@dardandemiri
Feb 15 2018 19:20
Can you pleas try this one more time
Because I am still getting the same respond
Failed to load resource: the server responded with a status of 404 ()
Stephen James
@sjames1958gm
Feb 15 2018 19:23
@dardandemiri Are you talking about in codepen you get those 404?
Gulsvi
@gulsvi
Feb 15 2018 19:23
@dardandemiri The only 404 errors I'm seeing are for a .css and .js file you reference in your HTML.
<link rel="stylesheet" href="css/master.css">
<script src="js/script.js" charset="utf-8"></script>
Dardan Demiri
@dardandemiri
Feb 15 2018 19:23
yes
Stephen James
@sjames1958gm
Feb 15 2018 19:23
@dardandemiri You are using local references to files not on codepen
Gulsvi
@gulsvi
Feb 15 2018 19:23
full paths are required in codepen
Dardan Demiri
@dardandemiri
Feb 15 2018 19:23
ah it's because I worked offline till now
forgot to delete the lines
Stephen James
@sjames1958gm
Feb 15 2018 19:24
@dardandemiri yes.
Dardan Demiri
@dardandemiri
Feb 15 2018 19:31

@sjames1958gm

Now it's telling me:
{error: "Please provide longitude as lon and latitude as lat as numbers/floats."}

Gulsvi
@gulsvi
Feb 15 2018 19:32
Your link is incorrect
Add the lat= and lon= to your URL, for example: https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139
Dardan Demiri
@dardandemiri
Feb 15 2018 19:36
@gulsvi correct, that was the problem thank you
CamperBot
@camperbot
Feb 15 2018 19:36
dardandemiri sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2608 | @gulsvi |http://www.freecodecamp.org/gulsvi
Dardan Demiri
@dardandemiri
Feb 15 2018 19:36
@sjames1958gm thank you too bro
Jake
@NeelDVirus
Feb 15 2018 19:37
I'm looking for any opinions on using the css-grid and flexbox in production since now almost all browsers supports it with some exceptions in IE
MuhammadYasser1
@MuhammadYasser1
Feb 15 2018 19:38
is bootstrap in freecodecamp is the latest version?
Jake
@NeelDVirus
Feb 15 2018 19:39
@MuhammadYasser1 I guess it's bootstrap3 which is in use in FCC. The latest version is bootstrap4
MuhammadYasser1
@MuhammadYasser1
Feb 15 2018 19:41
why they didn't update it? is there a problem with the new version or what?
Stephen James
@sjames1958gm
Feb 15 2018 19:41
@dardandemiri Also you need to call getWeather inside of the getCurrentPosition callback or the values of latitude and longitude will not be set
Dardan Demiri
@dardandemiri
Feb 15 2018 19:44
True @sjames1958gm thank you
CamperBot
@camperbot
Feb 15 2018 19:44
dardandemiri sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8981 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Jake
@NeelDVirus
Feb 15 2018 19:45
@MuhammadYasser1 Bootstrap4 is a recent update so they might need some time. Also the new FCC beta version gonna be merged soon. I presume Bootstrap4 will be incorporated in the new upcoming version
MuhammadYasser1
@MuhammadYasser1
Feb 15 2018 19:50
@NeelDVirus Thanks
CamperBot
@camperbot
Feb 15 2018 19:50
muhammadyasser1 sends brownie points to @neeldvirus :sparkles: :thumbsup: :sparkles:
:cookie: 255 | @neeldvirus |http://www.freecodecamp.org/neeldvirus
Ken Haduch
@khaduch
Feb 15 2018 20:10
@MuhammadYasser1 - I agree with the comments about updating to Bootstrap 4 and the fact that there were significant changes to Bootstrap that would require some work. Someone posted here earlier (well, in one of the chat rooms) that Bootstrap was not being promoted (if that's the right word to use) in the Beta version? I haven't tried the beta version so I can't say if that is the case, but it might be that they have gone with doing more CSS learning and coding on your own? But you can feel free to use either version of Bootstrap and just make sure that you use the corresponding Version 4 documentation if you go that route.
Ken Haduch
@khaduch
Feb 15 2018 20:18
@MuhammadYasser1 - I just went to take a peek at the beta site - they don't get into Bootstrap at the start for the Responsive site challenge, instead it looks like they are opting to cover media queries and flexbox. But they do have a section on Bootstrap along with other Frontend libraries, it looks like they are still pointing to Bootstrap 3.7 there, at least in the initial lessons. So it doesn't appear to be the case that they have gone ahead with Bootstrap 4, at least up to this point. It would definitely take some re-tooling of those lessons to go there, I think...
Gulsvi
@gulsvi
Feb 15 2018 20:18
@khaduch Bootstrap is covered in the Front End Libraries section of the beta curriculum
Only 5 hours though - not the same as v1 where they pretty much expect you to do everything with Bootstrap
MuhammadYasser1
@MuhammadYasser1
Feb 15 2018 20:22
have to learn bootstrap 4 without freecodecamp i think
MuhammadYasser1
@MuhammadYasser1
Feb 15 2018 20:30
how many hours does it take to finish front end path in fcc?
AbrisM
@AbrisM
Feb 15 2018 20:34
2-3 hours max?
Depends how much you get
Ken Haduch
@khaduch
Feb 15 2018 20:35
@gulsvi - thanks, I did see that and mentioned it in my second response above... but it does seem that they took some emphasis off of it. But there is a lesson "Bootstrap: Ditch Custom CSS for Bootstrap" so I guess it's still in the picture?
CamperBot
@camperbot
Feb 15 2018 20:35
khaduch sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2610 | @gulsvi |http://www.freecodecamp.org/gulsvi
asdf999991
@asdf999991
Feb 15 2018 20:56
Working on the first two Front End Development projects (the Tribute page and the Personal Portfolio Page) but it seems like it wants me to use code that I've never seen before. I am fairly new to coding so maybe it's just me but I could use a bit of help.
Matej Bošnjak
@mbosnjak01
Feb 15 2018 20:59
@asdf999991 Did you get stuck on some part?
you need to be more specific, show your code if possible, say what would you like to do on the page but don't know how, etc..
asdf999991
@asdf999991
Feb 15 2018 21:04
I was looking at the example code they give you for Personal Portfolio and next to none of it makes sense, for instance in the CSS box the first four lines are...
@use postcss-nested;
@use autoprefixer;
@use postcss-simple-vars;
@use postcss-discard-comments;
Now i've been through all the other assignments and I never remember seeing anything like this
I just get the feeling like I'm missing somthing
Brad
@bradtaniguchi
Feb 15 2018 21:10
@asdf999991 I had to do some reasearch on that tag, and apparently it's part of SCSS it seems like, looks really similar to @import
Matej Bošnjak
@mbosnjak01
Feb 15 2018 21:10
postcss is actually a tool
written in js
Brad
@bradtaniguchi
Feb 15 2018 21:10
^
Matej Bošnjak
@mbosnjak01
Feb 15 2018 21:10
to manipulate css
Brad
@bradtaniguchi
Feb 15 2018 21:11
prob that then, maybe its how codepen works with scss?
Matej Bošnjak
@mbosnjak01
Feb 15 2018 21:11
about @use, yes it's similar to @import
CamperBot
@camperbot
Feb 15 2018 21:11
api offline
Matej Bošnjak
@mbosnjak01
Feb 15 2018 21:11
but I didn't use that
so couldn't give any advice on that :|
asdf999991
@asdf999991
Feb 15 2018 21:13
either way, I'm wondering if I should hold off on the portfolio for now and just continue with the regular assignments, maybe working with javascript a bit more could solve my problem
Matej Bošnjak
@mbosnjak01
Feb 15 2018 21:13
nah
just go with the tasks
don't worry about not knowing everything or making mistakes, you'll fix everything up latter as you learn more stuff
asdf999991
@asdf999991
Feb 15 2018 21:15
hopefully, lol, thanks anyway
MuhammadYasser1
@MuhammadYasser1
Feb 15 2018 22:59
how many hours do i need to finish front end developer path in FCC? in range if you have to
Gulsvi
@gulsvi
Feb 15 2018 23:00
@MuhammadYasser1 400 hours is the estimate

How long will it take me to finish each of freeCodeCamp's certificates?

Each certificate takes around 400 hours of dedicated learning. Some people may take longer. These certificates are completely self-paced, so take as long as you need.
Tiago Correia
@tiagocorreiaalmeida
Feb 15 2018 23:01
it sounds quite alot but if you are new to javascript, it will take a bit to grasp some concepts I still struggle with some stuff its aprt of the process dont tlook at how long you take to end it but how much you learn on the process better take 300hours and not 200 and learn 50% more
MuhammadYasser1
@MuhammadYasser1
Feb 15 2018 23:04
@gulsvi @tiagocorreiaalmeida Thanks
CamperBot
@camperbot
Feb 15 2018 23:04
muhammadyasser1 sends brownie points to @gulsvi and @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
AbrisM
@AbrisM
Feb 15 2018 23:11
Does anyone actually use the certifcates here?
Like, would they be recongnized or are they a solo thing?
If their not certified, then their useless. Also a degree will always be the better alternative
Gulsvi
@gulsvi
Feb 15 2018 23:16
@AbrisM They look good on a refrigerator - isn't that good enough for a free program? Yes, a CS Degree from an accredited university would be better - and more expensive, but not necessarily going to help you do better in an interview.
Garo
@Garabed96
Feb 15 2018 23:39

Promise.all([
  fetch(recentUrl),
  fetch(alltimeUrl)
]).then(([recent, alltime]) =>{
  ReactDOM.render(
    <Test alltime={items} recent={recent} />,
        document.getElementById('overview');
  );
}).catch((err) => {
      console.log(err);
});
Stuck trying to pass two urls in json form and read the output array of object