These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Apr 2017
Jorge
@OrangeKulture
Apr 17 2017 00:00
cbot
CamperBot
@camperbot
Apr 17 2017 00:00
you called?
Jorge
@OrangeKulture
Apr 17 2017 00:00
allyourbases
CamperBot
@camperbot
Apr 17 2017 00:00
all your base
DarDip
@DarDip
Apr 17 2017 00:00
I am using media query for the responsive part, and it seems working fine
Jorge
@OrangeKulture
Apr 17 2017 00:00
hahaha
DarDip
@DarDip
Apr 17 2017 00:00
here my codepen link
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:00
@roxroy only must change
Roxroy
@roxroy
Apr 17 2017 00:01
@maad-boy , looks great. Nicely centered image. peaceful.
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:01
first character if word of sentence
have the first letter mayus
Roxroy
@roxroy
Apr 17 2017 00:03
@DarDip , Pleasantly different. Nice animation. Love to see the finished page.
Mohamed Derhalli
@derhallim
Apr 17 2017 00:04
what does it mean to have font size as 14px/22px ?
DarDip
@DarDip
Apr 17 2017 00:05
@roxroy thanks. Hopefully I will ;).. Can you see the web page properly on your mobile device?
CamperBot
@camperbot
Apr 17 2017 00:05
dardip sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 694 | @roxroy |http://www.freecodecamp.com/roxroy
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:07

@DarDip use

<meta name="viewport" content="width=device-width, initial-scale=1"> in header

head .. sorry
Roxroy
@roxroy
Apr 17 2017 00:08
@DarDip , can see the page, but the menu (the 3 bars) does not open up
DarDip
@DarDip
Apr 17 2017 00:08
@carlosfrontend but I put it already
@roxroy yep, I am still working on it
@roxroy just started the page.. But I decided not to use Bootstrap as I wanna know how to create any single element. So know I have just created the hamburger menu
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:10
yeah i see now @DarDip
Roxroy
@roxroy
Apr 17 2017 00:11
@DarDip , you want to checkout media queries , see https://www.w3schools.com/css/css_rwd_mediaqueries.asp
DarDip
@DarDip
Apr 17 2017 00:12
@carlosfrontend maybe it's an issue on the iphones? @roxroy thanks.. I did it, but my problem is that I don't know if it is an issue with my phone or something missing. Anyway thanks guys
CamperBot
@camperbot
Apr 17 2017 00:12
dardip sends brownie points to @carlosfrontend and @roxroy :sparkles: :thumbsup: :sparkles:
:warning: dardip already gave roxroy points
:cookie: 300 | @carlosfrontend |http://www.freecodecamp.com/carlosfrontend
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:13
@DarDip In cssBase setting can you use normalize too
i see much height im in my smartphone now
media queries are necessaries too...
DarDip
@DarDip
Apr 17 2017 00:15
@carlosfrontend you mean in the Css setting section in codepen?
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:16
yes
for reset browser styles
DarDip
@DarDip
Apr 17 2017 00:16
@carlosfrontend I did, I will try now
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:16
too
i use in page height 100vh value normally
see too overflow property for hide scroolbars if you want
DarDip
@DarDip
Apr 17 2017 00:18
@carlosfrontend it didn't change..
@carlosfrontend I will try with the last two options
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:22
to learb mobil-first and media queries for it
or use bootstrap or foundation zurb ..
DarDip
@DarDip
Apr 17 2017 00:27
@carlosfrontend thanks, but I decided to not use bootstrap for this project.. let's see what happens.. :smile:
CamperBot
@camperbot
Apr 17 2017 00:27
dardip sends brownie points to @carlosfrontend :sparkles: :thumbsup: :sparkles:
:warning: dardip already gave carlosfrontend points
Carlos Pulido
@carlosfrontend
Apr 17 2017 00:29
good luck @DarDip happy coding! i go now to bed :)
Eduar Tua
@eduartua
Apr 17 2017 00:35
Hi guys, need your help. In the following block of code
```
Phillip Shim
@shimphillip
Apr 17 2017 00:36
Hey guys

$("#submit").click(function(e){
e.preventDefault();

var text = $("search").val();
console.log(text)

})

Eduar Tua
@eduartua
Apr 17 2017 00:36
<div class="row">
    <div class="text-center">
        <h2>Contact Me</h2>
    </div>
</div>
Phillip Shim
@shimphillip
Apr 17 2017 00:37
Do you know why this is returning undefined?
Eduar Tua
@eduartua
Apr 17 2017 00:37
I am getting that Contact me with an anchor
Robin Ury
@teddy-error
Apr 17 2017 00:37
@shimphillip because it doesn't have a return statement
Eduar Tua
@eduartua
Apr 17 2017 00:38
?
Why that h2 has a link? above that block I have a row with two columns which have an a tag
Robin Ury
@teddy-error
Apr 17 2017 00:39
@eduartua You probably didn't close one of those a tags </a>
Phillip Shim
@shimphillip
Apr 17 2017 00:39
thanks
Eduar Tua
@eduartua
Apr 17 2017 00:39
Let me check it out again
Robin Ury
@teddy-error
Apr 17 2017 00:46

hello campers. i am having a bit of weirdness trying to add elements (for a little todo list)
The issue is: instead of appending a li>p{Task} it's just appending {task} to the ul

    var tdli = document.createElement('li')
    var tdp = document.createElement('p')
    var tdt = document.createTextNode(task)
    var newTodo = tdli.appendChild(tdp.appendChild(tdt))
    document.querySelector('#todo-list').appendChild(newTodo)

I thought at first that passing the createElement() method as an expression to appendChild() was causing the issue so i created all these pointless variable containers just to be sure it wasn't that and i'm still having the same issue. Going nuts :worried:

EDIT In case anyone was wondering the issue is caused by the appendChild method which used in this way does not cause a type error but also does not return the node as expected. Not entirely sure about why but the solution is to move the method outside of the arguments

Eduar Tua
@eduartua
Apr 17 2017 00:46
If i will add and a tag to a panel in bootstrap, has it to be <a href=""><img/></a>?
Robin Ury
@teddy-error
Apr 17 2017 00:47
In any use case you must close the anchor tag, yes.
Eduar Tua
@eduartua
Apr 17 2017 00:50
@teddy-error Thank you I hadn't closed some tags
CamperBot
@camperbot
Apr 17 2017 00:50
eduartua sends brownie points to @teddy-error :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @teddy-error |http://www.freecodecamp.com/teddy-error
Robin Ury
@teddy-error
Apr 17 2017 01:01
Is there a cleaner form of creating elements ? Like maybe...
var newTodo = document.createElement('li')
          .appendChild(document.createElement('p'))
          .appendChild(document.createTextNode(task))
        document.querySelector('#todo-list').appendChild(newTodo)
Roxroy
@roxroy
Apr 17 2017 01:06
@teddy-error , looks good. Pure JS code and no jQuery. Cool
Robin Ury
@teddy-error
Apr 17 2017 01:06
@roxroy Unfortunately it will not work, and only appends a text node to the #todo-list
Roxroy
@roxroy
Apr 17 2017 01:08
@teddy-error , did you consider using jQuery, Or are going only with pure JS. jQuery would be quicker though. But depends on your objectives
Robin Ury
@teddy-error
Apr 17 2017 01:11
Yeah, I definitely could but I was just curious about what is happening here. It's not even failing to work- it just works in a bizarre way (only appending text node). Maybe this is a StackOverflow worthy question TBH
@roxroy
Roxroy
@roxroy
Apr 17 2017 01:13
@teddy-error , do you have the full code in codePen or other url?
Robin Ury
@teddy-error
Apr 17 2017 01:14
Roxroy
@roxroy
Apr 17 2017 01:21
@teddy-error , checking..
Eduar Tua
@eduartua
Apr 17 2017 01:21
How do I align a paragraph vertically?
Eduar Tua
@eduartua
Apr 17 2017 01:24
@teddy-error Thanks
CamperBot
@camperbot
Apr 17 2017 01:24
eduartua sends brownie points to @teddy-error :sparkles: :thumbsup: :sparkles:
:warning: eduartua already gave teddy-error points
Eduar Tua
@eduartua
Apr 17 2017 01:24
Not found
Vinicius Otacilio
@Karumba15
Apr 17 2017 01:24
Someone can help me ? I am at the tribute page and i even know how to start this :/ any tips?
Robin Ury
@teddy-error
Apr 17 2017 01:24
@eduartua try now
Eduar Tua
@eduartua
Apr 17 2017 01:25
Now it works
Roxroy
@roxroy
Apr 17 2017 01:29
@teddy-error , almost done . Just a couple more minutes
@teddy-error , check this out is this what you want?
greggy
@glonsdale
Apr 17 2017 01:33
anyone done the string permutation algorithm?
ive solved it
but I dont understand why what I did works
was hoping someone could help me understand it
Robin Ury
@teddy-error
Apr 17 2017 01:35
that's good @roxroy. I appreciate that. That is a solution of sorts, but what I was hoping to figure out was why do we have to assign and declare doc.createElement(xyz) to a variable, and then pass it to appendChild rather than just directly passing its return value to appendChild : $('xyz').appendChild(document.createElement('li'))
Abi H
@westminsterabi
Apr 17 2017 01:35
i can't figure out how to change the color of my navbar
Robin Ury
@teddy-error
Apr 17 2017 01:36
@glonsdale sure
Vered Rekanati
@veredrec
Apr 17 2017 01:36
@westminsterabi do you want to change the background color of the text color?
Abi H
@westminsterabi
Apr 17 2017 01:37
@veredrec oh sorry, background color
Sorin Ruse
@sorinr
Apr 17 2017 01:37
@westminsterabi bg color?
greggy
@glonsdale
Apr 17 2017 01:37
@teddy-error So, I did the classical string permutation algo
Jacob
@Haudz
Apr 17 2017 01:37
Would someone PLZZZ help me out on sizing my containers? The way I'm going about it is that I'm setting my container sizes and putting a dashed border around them so i get a better understanding but when I inspect one of my containers in chrome only half of the container gets highlighted. Does it do this because of bootstrap? And also in Sublime it gives me a "?" At the start of my div container but I'm counting and the divs close out..? I'm lost
Robin Ury
@teddy-error
Apr 17 2017 01:37
@glonsdale PM me; we're in # HelpFrontEnd
Vered Rekanati
@veredrec
Apr 17 2017 01:38
@westminsterabi add the color that you want to the .nav that you have
Sorin Ruse
@sorinr
Apr 17 2017 01:39
@westminsterabi like this
nav ul{
  background: red;
}
Abi H
@westminsterabi
Apr 17 2017 01:41
cool, that worked
thanks @sorinr and @veredrec
CamperBot
@camperbot
Apr 17 2017 01:41
westminsterabi sends brownie points to @sorinr and @veredrec :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @veredrec |http://www.freecodecamp.com/veredrec
:star2: 1253 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Apr 17 2017 01:41
@westminsterabi welcome
Abi H
@westminsterabi
Apr 17 2017 01:42
i'm also having trouble working with the fluid containers so that in, for example, xs, each row will have 2 thumbnails and in lg it might have 3
Vered Rekanati
@veredrec
Apr 17 2017 01:42
@westminsterabi No problem!
hassanaseer
@hassanaseer
Apr 17 2017 01:42

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("button").html("<em>#target4</em>");
});
</script>

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
Make sure to select button id="target4" with jQuery.

Abi H
@westminsterabi
Apr 17 2017 01:43
when i use div class = "row" and put everything there for some reason it aligns to the right
hassanaseer
@hassanaseer
Apr 17 2017 01:44
need help
Robin Ury
@teddy-error
Apr 17 2017 01:46
This message was deleted
Vered Rekanati
@veredrec
Apr 17 2017 01:48
@hassanaseer what is your question?
Pagnito
@Pagnito
Apr 17 2017 01:54
why is this removing all the sibling elements of the parent >:(
$('.chBox').closest('a').remove();
oh i tihnk it might be cuz the class
Vinicius Otacilio
@Karumba15
Apr 17 2017 01:57
need help too, how i edit the size of my image ? with widht and height?
Robert Arifin
@renkachan
Apr 17 2017 01:58
guys , can i ask about the twitch tv objectives? i dont understand some of the points
Pagnito
@Pagnito
Apr 17 2017 01:59
@renkachan its basically an app that allows you to see streamers of twitch.tv. thheir onlone status, their description and w/e else you want to add
Abi H
@westminsterabi
Apr 17 2017 02:01
anyone have advice on creating social media buttons?
Pagnito
@Pagnito
Apr 17 2017 02:01
@westminsterabi whats ur trouble?
Robert Arifin
@renkachan
Apr 17 2017 02:02
@Pagnito how many minimal streamers that is needed?
Pagnito
@Pagnito
Apr 17 2017 02:02
@renkachan i dunno i think 3
Robert Arifin
@renkachan
Apr 17 2017 02:02
User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.<--- i dont understand this part
Abi H
@westminsterabi
Apr 17 2017 02:02
@Pagnito i googled "social media buttons with bootstrap" and i got a couple libraries but i have no idea how to import them into codepen
Robert Arifin
@renkachan
Apr 17 2017 02:02
if its not random, how can it goes to that user?
Pagnito
@Pagnito
Apr 17 2017 02:02
@westminsterabi http://fontawesome.io/
Eduar Tua
@eduartua
Apr 17 2017 02:03
I couldn't use the <position> CSS data type for vertical alignment
Robert Arifin
@renkachan
Apr 17 2017 02:03
@Pagnito do i need to randomized the users from this array ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"] ?
Abi H
@westminsterabi
Apr 17 2017 02:03
@Pagnito yeah but i have no idea how to actually import that into codepen
@Pagnito oops, nvm, found it. thanks!
CamperBot
@camperbot
Apr 17 2017 02:04
westminsterabi sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 207 | @pagnito |http://www.freecodecamp.com/pagnito
Pagnito
@Pagnito
Apr 17 2017 02:05
@renkachan shit i dont really understand that part either but i seen other pople twitch project, and it just means, that you need to havea function writes into the DOM whether the account is closed or it never existed.
@westminsterabi when u sign up, for their site, its free, they send u a cdn and u just add that to ur codepen
np
@renkachan randomize?
@renkachan not sure what u mean
Robin Ury
@teddy-error
Apr 17 2017 02:11
@westminsterabi There are a plethora of font icon libraries you can use. You've already included FontAwesome onto your portfolio page
Abi H
@westminsterabi
Apr 17 2017 02:15
@teddy-error yeah, i just did that as per @Pagnito's rec although i still need to actually make the buttons
found a couple people with tutorials but i should probably slough through it myself
Vinicius Otacilio
@Karumba15
Apr 17 2017 02:17
how i wrote below a image? like a subtitle?
Pagnito
@Pagnito
Apr 17 2017 02:19
@westminsterabi what kind of buttons? like icons into butttons?
Vinicius Otacilio
@Karumba15
Apr 17 2017 02:20
@sorinr okay
Robert Arifin
@renkachan
Apr 17 2017 02:20
@Pagnito okie, yeah i thought i need to randomized the users that will show later. But if I just need to include the function, then i am free to choose which users that i want to put in the project? Only freecodecamp that is mandatory right ?
Abi H
@westminsterabi
Apr 17 2017 02:22
@Pagnito yeah but i think i've got it
Robin Ury
@teddy-error
Apr 17 2017 02:23

@roxroy Found the solution. Apparently you just can't use Javascript that way and end up with clear code. There's actually a parentElement method you can call.

var todo = $(xyz).appendChild(createElement(foo).appendChild(createElement(bar))).parentElement.parentElement

Otherwise what happens is that todo is assigned to the last appended child :S
Which is why that appends a text node instead of the full li > p > {text}

Vinicius Otacilio
@Karumba15
Apr 17 2017 02:23
@sorinr thanks
CamperBot
@camperbot
Apr 17 2017 02:23
karumba15 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1254 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Apr 17 2017 02:23
@Karumba15 welcome
Roxroy
@roxroy
Apr 17 2017 02:26
@teddy-error , great.. Good the hear of the update.
Robin Ury
@teddy-error
Apr 17 2017 02:28
@roxroy alternatively, just make sure to assign parent element to var and append as needed:
var parent = document.createElement('ul')
parent.appendChild(createElement(li)).appendChild(createTextNode('bananas')
Fatbacker
@fatbacker
Apr 17 2017 02:44
I am having trouble getting my Iframe video to resize properly to my screen. Any suggestions?
https://codepen.io/fatbacker/pen/PmqjBG?editors=1100
Also the George Washington resizes on all other browswers accept this one for some reason.
I would also like my image of GW to be more centered when I reduce the image in my browser as well.
Sorin Ruse
@sorinr
Apr 17 2017 02:47
@fatbacker when you set inline styling like width and height for the iframe tag it takes precedence over any other styling
Fatbacker
@fatbacker
Apr 17 2017 02:49
@sorinr I have removed the inline before and I will still have the same issue of overlapping the jumbotron.
@sorinr and also, when I use css sizing it changes my jumbotron size.
Vinicius Otacilio
@Karumba15
Apr 17 2017 02:51
How can I put the person in charge of a quotation below the phrase?
in a smaller letter
like- Obama is the first black presidente, and below in a smaller letter
John Nunns
@johnnunns
Apr 17 2017 02:54
I can only seem to "like" one picture. I know my code is complicated but can anyone see a solution?
Vinicius Otacilio
@Karumba15
Apr 17 2017 02:54
-BBC Television
Fatbacker
@fatbacker
Apr 17 2017 02:54
Use the <h4> or what ever size you want.
Vinicius Otacilio
@Karumba15
Apr 17 2017 02:55
Alright
John Nunns
@johnnunns
Apr 17 2017 02:55
double clikc my iage
image*
Robin Ury
@teddy-error
Apr 17 2017 02:56

SOMEONE OTHER THAN BILL, TED, OR FRED LIKE MY PHOTO

john is rly needy

Fatbacker
@fatbacker
Apr 17 2017 02:56
lol
John Nunns
@johnnunns
Apr 17 2017 02:57
haha
they're my only friends but I'm looking for more!!
You can also change the font style to make the name different.
John Nunns
@johnnunns
Apr 17 2017 02:59
I'm only able to like one photo on the dbl click
but I log hello each time so I know the function is running
Robert Arifin
@renkachan
Apr 17 2017 03:01
btw is it ok if i just finish the stories without adding additional things? seems my creativity is sucks >.<
Sorin Ruse
@sorinr
Apr 17 2017 03:06
@fatbacker you can do it like example
Ken Haduch
@khaduch
Apr 17 2017 03:06
@johnnunns - If I cli)ck the heart, I see it shake a little, and nothing happens. And if I double click on the image, I see the word "hello" printed to the console, but nothing else happens? (Or maybe I got a like on the first one?
John Nunns
@johnnunns
Apr 17 2017 03:07
it should work on the first photo you click
go from grey to pink
@khaduch
try re running?
Ken Haduch
@khaduch
Apr 17 2017 03:08
Oh, I see, it just took a while for it to display? Is there an ajax transaction involved with it?
John Nunns
@johnnunns
Apr 17 2017 03:11
yeah there's a lot of bs involved
Fatbacker
@fatbacker
Apr 17 2017 03:11
@sorinr It seems the video would be great for resizing there but then my picture is off centered. I was also hoping to draw less attention to my video since I still need to add some content on GW in between the picture and the video.
Ken Haduch
@khaduch
Apr 17 2017 03:11
@johnnunns - one thing that could be causing a problem is that you seem to have duplicate ID values "heartPic1"? I think that that could cause you to only work on the first one, because you cannot have duplicate ID values.
Fatbacker
@fatbacker
Apr 17 2017 03:12
@sorinr I am going to run yours on php storm and see what I can do with the centering. thanks for your help. :)
CamperBot
@camperbot
Apr 17 2017 03:12
fatbacker sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1255 | @sorinr |http://www.freecodecamp.com/sorinr
John Nunns
@johnnunns
Apr 17 2017 03:12
switched everything to getElementsByClass and switched the id to class and not getting anything
Sorin Ruse
@sorinr
Apr 17 2017 03:13
@fatbacker welcome
This is good enought ? I have no ideia... is my first project
hassanaseer
@hassanaseer
Apr 17 2017 03:17
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("button").html("<em>#target4</em>");
$("#target4").html("<em>abcdefgh</em>");

});
</script>
need help
Fatbacker
@fatbacker
Apr 17 2017 03:18
@Karumba15 You don't have to do it on the same example. You can pick what you want. Also for question about an author or a quote you can do <cite> and add the name between the tags.
Vinicius Otacilio
@Karumba15
Apr 17 2017 03:18
hmm good to know
I am trying to step it up a notch.
It is a work in progress.
Vinicius Otacilio
@Karumba15
Apr 17 2017 03:20
hmm is really nice
Fatbacker
@fatbacker
Apr 17 2017 03:20
@Karumba15 :)
Thanks
Vinicius Otacilio
@Karumba15
Apr 17 2017 03:20
I never thought about putting a video im my tribute page
very creative
I think I can go to the next challenge now.
Fatbacker
@fatbacker
Apr 17 2017 03:22
Good luck and happy learning.
I am gonna finish what I started before I move on.
Vinicius Otacilio
@Karumba15
Apr 17 2017 03:22
you not started the portfolio web page yet? or is already done?
this portfolio challenger is looking very hard.... even now how to start
Ken Haduch
@khaduch
Apr 17 2017 03:24
@johnnunns - document.getElementsByClassName() is going to return "an array-like object of all child elements which have all of the given class names" docs here - so that will not work. Somehow you have to differentiate between images that you are clicking. Each image should have some unique way to identify which one you are clicking on and then be able to access the child elements to find the correct "heart" icon to check / set as needed. I see that you also have a <div id="bar"> that is also a duplicate ID value - not sure if you are using that to identify anything that you're trying to set, but it seems that you need to make the process of identifying images a little better to be able to distinguish which one received the click. I think that you should be able to use the event information and identify the this value to do that?
Fatbacker
@fatbacker
Apr 17 2017 03:27
@Karumba15 I am only on question 116 and that is this tribute page.
Marlon
@mblmarlon
Apr 17 2017 03:31
hey :) can someone help me ?
i can't let the buttons open facebook and linked in
Fatbacker
@fatbacker
Apr 17 2017 03:32
@mblmarlon You may have to use the target="blank" in your code where your links are at.
Let me know if that works.
iso
@iso1048
Apr 17 2017 03:32
@fatbacker isnt it target="_blank"?
Fatbacker
@fatbacker
Apr 17 2017 03:33
yes.
Christopher McCormack
@cmccormack
Apr 17 2017 03:33
yes it is
Fatbacker
@fatbacker
Apr 17 2017 03:33
It has to be inline with your href's
Marlon
@mblmarlon
Apr 17 2017 03:35
@fatbacker i have that already
Fatbacker
@fatbacker
Apr 17 2017 03:35
And it doesn't work?
Marlon
@mblmarlon
Apr 17 2017 03:35
nope
my github and freecodecamp links are working
its just linked in and facebook
Christopher McCormack
@cmccormack
Apr 17 2017 03:37
your linkedin is misspelled tarket="_blank" and facebook is still missing. Clear that up and you should be good to go
Sorin Ruse
@sorinr
Apr 17 2017 03:37
@mblmarlon add target="_blank" to ur a tags
Fatbacker
@fatbacker
Apr 17 2017 03:39
Never mind he has _ in his.
I don't have my _ in there and it works fine for my youtube video.
Marlon
@mblmarlon
Apr 17 2017 03:44
@sorinr Thank you ;) yeah this are some small mistakes wich i couldn't find at this early hours :DD
CamperBot
@camperbot
Apr 17 2017 03:44
mblmarlon sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1256 | @sorinr |http://www.freecodecamp.com/sorinr
Gulsvi
@gulsvi
Apr 17 2017 03:55
@johnnunns This is going to be a pain with Vanilla JS, but like Ken said, you need the event to find the next image and to update it.
Ken Haduch
@khaduch
Apr 17 2017 03:55
@johnnunns - this is the last thing that I can do for tonight. In your setup for your ondblclick="Like(event)" - add the event as the function argument. Within your Like(event) function, add the "event" and use that event information to get the reference to the image that was clicked, you can get the parent, and within that parent you can search for the child with the class"heartPic1", then directly manipulate that element. I think that you need to go to that level of complexity to traverse the DOM in order to get the appropriate elements to check and set to "like" more than one picture. I'd like to investigate further but it's late and if you are still stuck on it, I can try to help tomorrow (or you can get some help here once you know what you need to do.)
Gulsvi
@gulsvi
Apr 17 2017 03:57
It looks like that heart image is e.target.nextElementSibling.children["0"].children.heart.children["0"]
Starting to like jQuery a lot more :)
John Nunns
@johnnunns
Apr 17 2017 04:00
@khaduch thanks ken!
CamperBot
@camperbot
Apr 17 2017 04:00
johnnunns sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2746 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Apr 17 2017 04:01
This works after adding event to ondblclick="Like(event)"
function Like(e){
  const likeButtonImage = e.target.nextElementSibling.children[0].children.heart.children[0];
  if(likeButtonImage.src === "http://www.clker.com/cliparts/H/J/r/l/7/T/grey-heart.svg") {
    likeButtonImage.src = "https://freeiconshop.com/wp-content/uploads/edd/heart-curvy-outline-filled.png";
  }else{
    likeButtonImage.src = "http://www.clker.com/cliparts/H/J/r/l/7/T/grey-heart.svg";
  }
}
Pagnito
@Pagnito
Apr 17 2017 04:06
@SkyCoder01 hey can u look at my code, having a hard time figuring out why my remove function isnt working when i bring up my online or offline or all users, basically after "filtering" the list.
its starts at line 426
Gulsvi
@gulsvi
Apr 17 2017 04:06
Sure, I'll take a look
Pagnito
@Pagnito
Apr 17 2017 04:07
thanks
Gulsvi
@gulsvi
Apr 17 2017 04:07
@Pagnito Are you running the same remove function before filtering the list?
Pagnito
@Pagnito
Apr 17 2017 04:08
yea i think so, but i tried starting to run the function after i filtered the list
for some reason it doesnt recognize that the box is checked
Gulsvi
@gulsvi
Apr 17 2017 04:12
It doesn't work if you show online and then all again either
Pagnito
@Pagnito
Apr 17 2017 04:13
yea
thats what im saying
i cant figure out why
Gulsvi
@gulsvi
Apr 17 2017 04:13
Where is the code that does the filtering?
It's hard to dive into 530 lines :p and give a quick answer
Pagnito
@Pagnito
Apr 17 2017 04:14
lol i feel u
but for some reaoson when i say
if(!$('.chBox').prop('checked')){
console.log('sup')
it works
after i filter
the list
Gulsvi
@gulsvi
Apr 17 2017 04:15
that's why I ask how you're doing the filtering - if you're regenerating HTML, modifying class names, or something like that - then we get into that issue where elements exist that your code doesn't know about
Pagnito
@Pagnito
Apr 17 2017 04:15
ooh
well, i got all my user elements generated from beginning, offline and online and all and the onload user list
they all have either on or off or all class
when i click offline it shows offline class
etc
i realize im gonna have to create code that will also remove those copies too lol
but thats for the next task
Gulsvi
@gulsvi
Apr 17 2017 04:19
I can't figure out where that code is coming from though - but it seems like you're creating some html when you click those buttons
Pagnito
@Pagnito
Apr 17 2017 04:20
the online and offline ones
?
Gulsvi
@gulsvi
Apr 17 2017 04:20
Yeah, because duplicates show up
Pagnito
@Pagnito
Apr 17 2017 04:21
thats weird my four ajax calls should html those users in right from the get
theres def duplicates but with diffirent classes, that should be there right onload
$('#online').click(function() {
$('.streams').children().hide(1000);
$('.on').delay(700).show(1000);
})
$('#offline').click(function() {
$('.streams').children().hide(1000);
$('.off').delay(700).show(1000)
})
$('#all').click(function() {
$('.streams').children().hide(1000);
$('.all').delay(700).show(1000);
})
cuz thats what those buttons do
they shouldnt b creating anything new
Gulsvi
@gulsvi
Apr 17 2017 04:24
It looks like a lot of your code is running parallel to the ajax calls
So, while ajax goes out and gets data from the server and brings it back, you have other code running that expects that data to already be available
jmariomejiap
@jmariomejiap
Apr 17 2017 04:24
hey guys, I hope everyone is well. I have been making some progress on my local weather app. I am a little bit stuck trying to find a way to implement a method to convert from fareheiht to celsius. can someone please take a look at my codepen. one of my questions is: when i use the $(selector).on("click", function(()). if I were to target lets say the html element that displays the temperature. will that selected target contain the temperature info or that info will be stored in a variable inside my javascript script. https://codepen.io/jmariomejia/pen/BRBoPP?editors=1111
Gulsvi
@gulsvi
Apr 17 2017 04:27
yeah, @Pagnito I'm sorry, it's going to take me a while to get to the bottom of that. Need some time to get more familiar with your code. I can't seem to figure it out - a lot going on, but I should have some more time tomorrow
Pagnito
@Pagnito
Apr 17 2017 04:28
@SkyCoder01 yea i feel
Gulsvi
@gulsvi
Apr 17 2017 04:28
@jmariomejiap If you select the element that shows the weather, you can get the temperature from it. That's how I did it at first - checked what was displayed on the page. If it had a "F" next to the number, I converted the number to Celsius. (and vice-versa if it had a C in it)
I'm about to go to sleep... long day tomorrow, but I'll let you know if I see an easy fix @Pagnito
jmariomejiap
@jmariomejiap
Apr 17 2017 04:29
thanks @SkyCoder01 ill start exploring that. good night
CamperBot
@camperbot
Apr 17 2017 04:29
jmariomejiap sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1058 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Saboor Malik
@MathematicsCoding
Apr 17 2017 04:31
@Pagnito hey
Hows that book?
Saboor Malik
@MathematicsCoding
Apr 17 2017 04:36
Took me hours to print all of them...
1" thick
Pagnito
@Pagnito
Apr 17 2017 04:43
@SkyCoder01 word thanks man good night
CamperBot
@camperbot
Apr 17 2017 04:43
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1059 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Kaeleb Rocha
@Kralleb
Apr 17 2017 04:43
Hello everyone
Pagnito
@Pagnito
Apr 17 2017 04:44
@MathematicsCoding havent even touched yet hehe, i dont really have interest atm, im tryin keep my focus in one place at a time
Saboor Malik
@MathematicsCoding
Apr 17 2017 04:44
I see
They are super helpful...
Havent read yet but I have seen some pages by printing lol
Kaeleb Rocha
@Kralleb
Apr 17 2017 04:45
Anyone here know about the quote machine project
Saboor Malik
@MathematicsCoding
Apr 17 2017 04:45
Pages was too thick so I had to separate them
0-3, 4-7, 8-11, 12-15, 16-19, 20-21
:(
They are chapters
Pagnito
@Pagnito
Apr 17 2017 04:52
@MathematicsCoding yea i feels, thats kind of another reason why i like to keep my focus centered on thing at a time
@MathematicsCoding alot of people i listen to who work as coders now, always say to keep ur focus centered, take it a day at a time. Like bruce lee says "Im not scared of the man who practiced a thousand kicks, i fear the man who practiced the same kick a thousand times"
Sorin Ruse
@sorinr
Apr 17 2017 04:57
@jmariomejiap as you already have data.currently.temperature and not data.currently.apparentTemperature that is more like "feels like xx degrees", i would just have a global var like var tempc = convertoc(); and in the convertoc function i will jusst convert and return the temp in celsius. then when you click the f to c or c to f btn i would just toggle the showing of the corresponding temp
jmariomejiap
@jmariomejiap
Apr 17 2017 04:59
@sorinr yes!!!, that sounds brilliant. thanks a lot. Im going to try that right now. thanks a lot. Ill let you know how the outcome.
CamperBot
@camperbot
Apr 17 2017 05:00
jmariomejiap sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1257 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Apr 17 2017 05:01
@jmariomejiap welcome.. i'm sure you can do it :+1:
Ayush Bahuguna
@relentless-coder
Apr 17 2017 05:07
do I need to send access token while using Facebook graph api??
grantknaver
@grantknaver
Apr 17 2017 05:24
does anyone know how to use an id for a link tag, and have the targeted section appear at the top the screen?
by default a targeted areas populates mid screen
im super stumped any ideas
Rogue Coder
@RogueRaider
Apr 17 2017 06:33
Hi team, I'm building the portfolio challenge. I've been trying get the links in my nav bar to change depending on which section is currently in view. My approach so far has been to try and use jQuery commands in the Pen JS box. Noob question: Is this the correct place to put that code? Should I be looking to use javascript instead?
https://codepen.io/RogueRaider/pen/PmqWBG
Cameron Ott
@camjott
Apr 17 2017 06:34
Can anyone help me out with the Wikipedia Viewer challenge? I read the Wikipedia API documentation and I have my url that works in the browser window, but I can't seem to get anything back when I use $.getJSON or $.ajax
Cameron Ott
@camjott
Apr 17 2017 06:40
nevermind. got it.
ValiantBuaquen
@ValiantBuaquen
Apr 17 2017 06:58
Hello y’al, just wanted to share the project that got me stumped alot and learned alot too.
any comments or questions welcome.
Andrew Dutton
@andrew-dutton
Apr 17 2017 07:01
Hey everyone… does anyone know if you can center a thumbnail that contains an image. I can actually center it, but I end up with a huge amount of white space on the left and rigth of the image…
Interestingly it looks fine in the above preview… but probably only because the image appears so large here.
ValiantBuaquen
@ValiantBuaquen
Apr 17 2017 07:04
@grantknaver, I think you are talking about fragment Identifiers?
ulmasbek
@ulmasbekk
Apr 17 2017 07:04
hello everyone
jmariomejiap
@jmariomejiap
Apr 17 2017 07:04
@sorinr I was able to make it work. by the way, thanks for pointing out that I was using apparentTemperature instead of temperature. I did not see it. I really appreciate your help. https://codepen.io/jmariomejia/full/BRBoPP/
CamperBot
@camperbot
Apr 17 2017 07:04
jmariomejiap sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1258 | @sorinr |http://www.freecodecamp.com/sorinr
ulmasbek
@ulmasbekk
Apr 17 2017 07:04
I have a qusetion
is there any tip for remembering all bootstrap classes???
Nazar
@IsaakNazar
Apr 17 2017 07:10
@camperbot thx bot
CamperBot
@camperbot
Apr 17 2017 07:10
isaaknazar sends brownie points to @camperbot :sparkles: :thumbsup: :sparkles:
:star2: 3184 | @camperbot |http://www.freecodecamp.com/camperbot
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:12
Could anyone tell me how to get the text below the image to line up with the edges of the image? I have managed it before, but it always shifts the text to the left when I do. I have never been able to have the image centered, and the text the same width as the image. Any help is much appreciated. https://codepen.io/JeremyAdams/pen/GmgLjv
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:18
something about the width parameter makes it shift its alignment to the left
Rogue Coder
@RogueRaider
Apr 17 2017 07:24
@Beoron Hey, I don't know if your <div style="text-align:center;width:327px"> is working properly.
@Beoron Maybe try <div class="text-center"> instead?
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:29
@RogueRaider Something about the width seemed to cancel the text-align. I actually just got it to line up by using style="display:inline-block" Not sure what the deal with that is, but it seems to work. Thanks for repsonding
CamperBot
@camperbot
Apr 17 2017 07:29
beoron sends brownie points to @rogueraider :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @rogueraider |http://www.freecodecamp.com/rogueraider
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:30
I was trying to avoid using text-center because I read that was deprecated, which I assume means it is best to avoid, though I don't really know :P
Though if I remove the text-align:center from the div encompassing the img and the text it goes back to the left, so I guess I need it and the inline-block bit
Rogue Coder
@RogueRaider
Apr 17 2017 07:36
@Beoron Ah I see that your <div> for the caption is within the <div> for the caption. I haven't used that type of arrangement before so can't claim to be an expert
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:38
@Beoron center tag is deptrecated
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:38
@RogueRaider Nor can I, nor can I :P
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:38
but text-align:center; not
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:39
@carlosfrontend That means it has been removed from the newest versions of code is falling out of use right?
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:40
i use it sometimes.
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:40
When I submit a project like the tribute page is that graded somehow?
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:40
have you some article of it?
i finished tribute page yesterday..
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:42
I finished my tribute page and submitted a link to it. I didn't know if anyone looks at that and responds or they just take your word for it that you did it correctly.
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:42
what you wanna do?
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:43
@carlosfrontend Yours looks nice. Having the buttons with the expanding text boxes is nifty
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:43
i saw is nice :)
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:45
Thanks!
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:45
is correct and like your title font for jr tolkien
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:47
Thanks, I wanted it to look like a signature, and I figured it would be good practice to call in some of the google fonts
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:48
my first tribute page is it
i rewrite all and upload at github after a year
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:50
That's probably a good idea. I think I will probably tweak mine after I have some more experience.
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:51
is better learn bit to bit
but all are correct web pages
Jeremy Adams
@JeremyDAdams
Apr 17 2017 07:52
@carlosfrontend Thanks for the input Carlos, I think I am going to call it a night. Have a good one!
CamperBot
@camperbot
Apr 17 2017 07:52
beoron sends brownie points to @carlosfrontend :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @carlosfrontend |http://www.freecodecamp.com/carlosfrontend
Carlos Pulido
@carlosfrontend
Apr 17 2017 07:54
happy coding night!! @Beoron
here is morning
def
@defregga
Apr 17 2017 08:44
Good morning.
ulmasbek
@ulmasbekk
Apr 17 2017 09:02
good morning(;
Sorin Ruse
@sorinr
Apr 17 2017 09:54
@jmariomejiap :+1:
Pagnito
@Pagnito
Apr 17 2017 09:55
damn its alrdy about to be 6 wtf lol
@Pagnito i thought it was like 2 am like 15 min ago before it was startin to get light
Peter Nguyen
@iampeternguyen
Apr 17 2017 10:28
hey i finished the random quote challenge but for whatever reason quotes don't seem to be showing up anymore.. it worked before so i'm not sure what's going on.
https://codepen.io/iampeternguyen/pen/OmVoEv
Sorin Ruse
@sorinr
Apr 17 2017 10:37
@iampeternguyen load ur pen over http not https
Adel
@AdelMahjoub
Apr 17 2017 11:10
@iampeternguyen at line 30 delete the protocol of the api url "http:", keep the two forward slashes
Zhanibek
@zhann1982
Apr 17 2017 11:23
Hello friends! I have a question on react.js . Is it a proper chat for such questions?
Adel
@AdelMahjoub
Apr 17 2017 11:24
@zhann1982 I guess it is
@zhann1982 what about your question
Peter Nguyen
@iampeternguyen
Apr 17 2017 11:31
thanks @AdelMahjoub that worked perfectly! sorry i just got a chance to test
CamperBot
@camperbot
Apr 17 2017 11:31
iampeternguyen sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Adel
@AdelMahjoub
Apr 17 2017 11:32
@iampeternguyen yw
Zhanibek
@zhann1982
Apr 17 2017 11:33
@AdelMahjoub Hello, please, look at my pen. I have problem with marked.js. It shows me tags too https://codepen.io/zhann1982/pen/rmVQwd?editors=1010
Johnny
@JohnnyBizzel
Apr 17 2017 11:34
@zhann1982 dangerously set HTML ?
Zhanibek
@zhann1982
Apr 17 2017 11:35
ok. thanks!
Johnny
@JohnnyBizzel
Apr 17 2017 11:35

@zhann1982

createMarkup() {
    return {
      __html: marked(this.props.md)
    }
  }

and

              <div className="outputbox" dangerouslySetInnerHTML={{__html: marked(value)}}></div>
Zhanibek
@zhann1982
Apr 17 2017 11:35
@AdelMahjoub thanks!
CamperBot
@camperbot
Apr 17 2017 11:35
zhann1982 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 440 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Zhanibek
@zhann1982
Apr 17 2017 11:37
@JohnnyBizzel thanks!
CamperBot
@camperbot
Apr 17 2017 11:37
zhann1982 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1652 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Johnny
@JohnnyBizzel
Apr 17 2017 11:38
@zhann1982 пожалуйста ;)
Peter Nguyen
@iampeternguyen
Apr 17 2017 11:39
@AdelMahjoub can you explain why the http: messes up the json request?
Amit Patel
@AmitP88
Apr 17 2017 11:45
hey guys, I've been researching different styles of CV's for front end developers to see how I should make my own and I found a particularly interesting one: http://www.threechords.org/blog/applying-web-developer-role-cv-dos-and-donts/ What do you guys think of this one? Would it be a good idea to implement a style similar to this on a CV?
Adel
@AdelMahjoub
Apr 17 2017 11:48
@iampeternguyen you can replace it with https, it works too, but to avoid switching codepen to http and https, get rid of the protocol and it will work for both cases
Nazar
@IsaakNazar
Apr 17 2017 11:51

if the code doesn't work, change the code, but never the goal

@JohnnyBizzel Hi
Sorin Ruse
@sorinr
Apr 17 2017 11:57
@iampeternguyen the idea that @AdelMahjoub is pointing out is to let the app decide witch protocol to use depending on the api by writing //quotesondesign......
@iampeternguyen fortunately that api accepts calls both on http and https. for other apis that accept only one type of connection u will see that is important on witch protocol you are loading your app(web page)
Gulsvi
@gulsvi
Apr 17 2017 12:16
@AdelMahjoub removing the protocol is now an anti-pattern in front-end development according to Paul Irish: https://www.paulirish.com/2010/the-protocol-relative-url/
Not sure what to think, seems logical otherwise
Adel
@AdelMahjoub
Apr 17 2017 12:18
@Sky Just to use for codepen
Sorin Ruse
@sorinr
Apr 17 2017 12:23
@AdelMahjoub @SkyCoder01 i would always use the full url including protocol. this way i am in control on whats happening :)
Gulsvi
@gulsvi
Apr 17 2017 12:24
@sorinr @AdelMahjoub I agree. https:// works over http and https. Nothing to do with codepen.
Seems like there was a valid reason to do it back in 2010 when SSL was slower, from reading that article
Sami Perälahti
@SamiNami
Apr 17 2017 12:26
Can someone give me sass advice?
@for $j from 1 to 6 {
.text-#{$j} {font-size: 10px * $j; }
}
Should work fine right?
Adel
@AdelMahjoub
Apr 17 2017 12:26
@sorinr @SkyCoder01 it would be better if those api enforce ssl and and set a proper redirection
Sorin Ruse
@sorinr
Apr 17 2017 12:26
@SkyCoder01 right. no reason to look back to 2010. we develop for the next years
@AdelMahjoub all apis or almost all have the ssl enabled but some of them offer free access only over http :)
Tanushree Samanta
@TSamanta
Apr 17 2017 13:55
what resources would you recommend for learning about REST api?
Mohamed Derhalli
@derhallim
Apr 17 2017 13:56
@TSamanta u need to create a new REST service or consume 1?
Tanushree Samanta
@TSamanta
Apr 17 2017 13:58
I got to make an application which divides a tweet into 140 characters and then directly post it in their account so I think it is to create
I guess
Mohamed Derhalli
@derhallim
Apr 17 2017 13:58
so which language do u want to build this api with?
JS? C#, java?
Rachit Magon
@rmagon
Apr 17 2017 14:00
hi.. any reviews / changes / suggestions on this please ? http://codepen.io/rmagon/full/YVPmoe
Mohamed Derhalli
@derhallim
Apr 17 2017 14:01
@rmagon very cool, well-done indeed!
Rachit Magon
@rmagon
Apr 17 2017 14:01
thanks @derhallim :)
CamperBot
@camperbot
Apr 17 2017 14:01
rmagon sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 224 | @derhallim |http://www.freecodecamp.com/derhallim
Mohamed Derhalli
@derhallim
Apr 17 2017 14:02
@rmagon move it up a bit. a lot of padding at the beginning, i had to scroll to view the paragraph at the footer
Rachit Magon
@rmagon
Apr 17 2017 14:02
on it
Mohamed Derhalli
@derhallim
Apr 17 2017 14:02
:thumbsup:
Rachit Magon
@rmagon
Apr 17 2017 14:02
:)
João Victor
@Jvsierra
Apr 17 2017 14:14
Where do i send my Tribute Page for review?
iigmir
@iigmir
Apr 17 2017 14:14

Hi there, I just write a script today, here's my code:
https://jsfiddle.net/iigmir/0rLuq4kz/10/

As you see, if you type a, paragraph will have red background. Type b, text colour become aqua. And type c, font size will become bigger. Finally, if press reset button, everything will clear.
It works fine, but I think my code can be better because I found that I wrote my function twice:

    $("input").keypress(function( key_events )
    {
        input_text(key_events,"a","a");
        input_text(key_events,"b","b");
        input_text(key_events,"c","c");
    });

Is there any idea? I try to use this:

input_text({
    [key_events,"a","a"],
    [key_events,"b","b"],
    [key_events,"b","b"]
})

But it doesn't seems to worked.

@Jvsierra CodeReview Room
Venkata Rajesh Chunduri
@rajeshchv
Apr 17 2017 14:23

Hi what is wrong my code. someone please correct
Create a Bootstrap Headline quiz
My solution is

<div class="text-primary text-center">
<h3>jQuery Playground</h3>
</div>

blob
Ken Haduch
@khaduch
Apr 17 2017 14:24
@iigmir - you could make an array of your cases and a for loop or .forEach to run through them? You could even use it in your reset function, just iterate through them and do the .removeClass on each. Actually, since your class names are the same as your key names, you could just have an array or even a string "abc" and iterate over that.
@rajeshchv - you might just want to do <h3 class="text-center text-primary"> - put the class attribute on the h3? It seems that that is what they are asking for you to do?
iigmir
@iigmir
Apr 17 2017 14:27
@rajeshchv Cut class="text-center text-primary" from div into h3.
You don't need <div></div> element by the way.
Venkata Rajesh Chunduri
@rajeshchv
Apr 17 2017 14:32
@iigmir thanka it worked
@iigmir thanks
CamperBot
@camperbot
Apr 17 2017 14:33
rajeshchv sends brownie points to @iigmir :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @iigmir |http://www.freecodecamp.com/iigmir
Sorin Ruse
@sorinr
Apr 17 2017 14:33
@rajeshchv request: "Create a Bootstrap Headline quiz". your solution: "<h3>jQuery Playground</h3>". is it bootstrap or jquery? :)
Venkata Rajesh Chunduri
@rajeshchv
Apr 17 2017 14:36
@sorinr its bootstrap... I got the solution... I have to remove div from solution
@sorinr thanks
CamperBot
@camperbot
Apr 17 2017 14:36
rajeshchv sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1260 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Apr 17 2017 14:37
@rajeshchv welcome but i deed nothing :)
iigmir
@iigmir
Apr 17 2017 14:40
@khaduch Thank you. .forEach worked, and .forEach version is here:
https://jsfiddle.net/iigmir/0rLuq4kz/13/
CamperBot
@camperbot
Apr 17 2017 14:40
iigmir sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2747 | @khaduch |http://www.freecodecamp.com/khaduch
h1tag
@h1tag
Apr 17 2017 14:42
@sorinr Hey!
Ken Haduch
@khaduch
Apr 17 2017 14:46
@iigmir - You're welcome. It looks good!
Branden Ng
@BrandenDaniel
Apr 17 2017 14:48
Hey guys. How do I pad texts with bootstrap? Currently working on the tribute page. Cheers
uiharu
@uiharu-s
Apr 17 2017 14:51
@BrandenDaniel are you talking about the lack of margin at the very top?
Branden Ng
@BrandenDaniel
Apr 17 2017 14:51
I'm talking about the space between the image's caption and the following heading
like is there a way i cant padd texts on bootstrap without css
or margin rather
both lol
uiharu
@uiharu-s
Apr 17 2017 14:53
because bootstrap 4 seems to have remove many top margins
Ken Haduch
@khaduch
Apr 17 2017 14:53
@BrandenDaniel - not sure exactly what you're asking for, but the first thing, if you're using CodePen, is to make sure that you are using the version of Bootstrap that you want. CodePen currently loads the URL for Bootstrap V4 if you do the "quick add", and that is not the version that the freeCodeCamp lessons use. If you are using V4, make sure to use the V4 documentation for the appropriate classes. If you want to use V3, then use these URLs for the CSS and JS modules: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css and if you are using bootstrap.js, use this: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js. Just want to make sure that you don't get confused...
iigmir
@iigmir
Apr 17 2017 14:55
@BrandenDaniel Do you mean something like Bootstrap's Heading?
https://v4-alpha.getbootstrap.com/
Put "Bootstrap is the most..." text into background?
Branden Ng
@BrandenDaniel
Apr 17 2017 14:57
Is there a way i can include screenshots here?
very new here
uiharu
@uiharu-s
Apr 17 2017 14:57
@BrandenDaniel if you’d like to stick to bootstrap 4, here’s a workaround:
add a class to the paragraph, say buffer and do in css
.buffer {
  margin-top: 2%;
}
@BrandenDaniel screenshot: just drag it in
vanessamuller
@vanessamuller
Apr 17 2017 14:57
hey can anyone help me understand the algorithm to check if a number is prime?
Branden Ng
@BrandenDaniel
Apr 17 2017 14:58
I'm not sure if the tribute page project allows css customization
i watched the video and the dude mentioned only bootstrap
uiharu
@uiharu-s
Apr 17 2017 15:01
@BrandenDaniel if you’d like to avoid any additional css, another simple workaround is to simply add an empty paragraph <p></p> :p
Branden Ng
@BrandenDaniel
Apr 17 2017 15:02
Haha. Okay i just realised he didnt really mention to ONLY use bootstrap. I'll use css if this is the case. Thanks for the help tho :) :)
Ken Haduch
@khaduch
Apr 17 2017 15:03
@BrandenDaniel - I think (unless they changed the lesson, I know that the are coming along with a new version of the lessons) that he says you can use any CSS library, JS, any customization of CSS is certainly part and parcel of using Bootstrap to do things like you might want to do. Definitely it is okay to use CSS classes as @uiharu-s indicates.
Branden Ng
@BrandenDaniel
Apr 17 2017 15:04
Thanks for the info Ken :)
appreciated
iigmir
@iigmir
Apr 17 2017 15:08
@vanessamuller Let's take Stack Overflow for example:
http://stackoverflow.com/a/40200710/7162445
Prime number, can only division by 1 and itself. So, this guy start his loop from 2 (for(var i = 2; i < num; i++)) .
If there's ANY number can division by other number except 1 and itself, it's NOT prime number, so this guy return false.
Finally, 1 is not prime number, so this guy will return num !== 1;, which means "return number that's not 1".
Peter Nguyen
@iampeternguyen
Apr 17 2017 15:17
ah okay. thanks for the explanation @AdelMahjoub and @sorinr
CamperBot
@camperbot
Apr 17 2017 15:17
iampeternguyen sends brownie points to @adelmahjoub and @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1261 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 441 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Branden Ng
@BrandenDaniel
Apr 17 2017 15:19
blob
my dotpoints arent centering
iigmir
@iigmir
Apr 17 2017 15:22
@BrandenDaniel Can you provide your code? I think <ul> may the point?
Branden Ng
@BrandenDaniel
Apr 17 2017 15:23
blob
Branden Ng
@BrandenDaniel
Apr 17 2017 15:29
Hey its okay i got it, i decided to abandon it. Thanks!
iigmir
@iigmir
Apr 17 2017 15:37
@BrandenDaniel Okay, but I talk my method: I will make my margin-left at <ul> element.
https://codepen.io/iigmir/pen/aWOxxN
But this method will have to adjust......
Branden Ng
@BrandenDaniel
Apr 17 2017 15:40
Thanks for the reference
James Bouchard
@jdbouch
Apr 17 2017 15:43
Good day all, Question - looks like CodePen doesn't allow uploads to folders unless you upgrade to Pro. Is that correct or am I missing something?
uiharu
@uiharu-s
Apr 17 2017 15:45
@jdbouch are you trying to upload an image?
imgur it goes
Peter Nguyen
@iampeternguyen
Apr 17 2017 15:47
hey i'm having trouble getting the openweather api. i've tested the code with other apis and it returns the info in the console but i don't know what's the issue with open weather. any thoughts
$.getJSON("//api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=cca2ac7f34c99ed7331a7a7b58743fce",function(json){
  console.log(json);
});
Peter Nguyen
@iampeternguyen
Apr 17 2017 15:54
i've tried http and https.. both don't seem to get me anywhere
Gulsvi
@gulsvi
Apr 17 2017 15:54
@iampeternguyen Does your browser's address bar show any errors? (Ctrl+Shift+J in Windows / Linux)
James Bouchard
@jdbouch
Apr 17 2017 15:55
Yes
san-te
@san-te
Apr 17 2017 15:55
You didn't include a callback output in the query string to json
Gulsvi
@gulsvi
Apr 17 2017 15:55
@jdbouch Lots of people use https://postimage.io for linking to images. You can upload from your computer to that website and they'll give you a link.
James Bouchard
@jdbouch
Apr 17 2017 15:56
Great! Thanks.
kirbyedy
@kirbyedy
Apr 17 2017 15:56
@iampeternguyen I seriously think it would be the best to switch to another api, like darksky or wunderground it will save you from a lot of headache
san-te
@san-te
Apr 17 2017 15:57
@iampeternguyen you didn't include a Json callback in your query string
Peter Nguyen
@iampeternguyen
Apr 17 2017 15:57
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:90 Uncaught Error: uBlock Origin: aborting content scripts for http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=cca2ac7f34c99ed7331a7a7b58743fce&callback=test
at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:90
chrome-extension://bcjindcccaagfpapjjmafapmmgkkhgoa/js/content.js:200 JSON Formatter: Type "json" to inspect.
Gulsvi
@gulsvi
Apr 17 2017 15:58
@iampeternguyen Remove &callback=test from the end of your URL. OpenWeathermap doesn't require a callback
Peter Nguyen
@iampeternguyen
Apr 17 2017 15:58
@kirbyedy i triedwith and without a callback and they didn't do anything
kirbyedy
@kirbyedy
Apr 17 2017 15:59
codepen will soon force all connections to be secure (https://) which means your project will fail in the near future even if you now fix the problem
Gulsvi
@gulsvi
Apr 17 2017 15:59
@iampeternguyen This should work fine for you if your codepen is loaded over HTTP://
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=cca2ac7f34c99ed7331a7a7b58743fce",function(json){
  console.log(json);
});
kirbyedy
@kirbyedy
Apr 17 2017 15:59
free version of openweather api does not support secure https:// connections
Gulsvi
@gulsvi
Apr 17 2017 15:59
And yeah, @kirbyedy is right a weather API that supports HTTPS would be better
A bummer that you have to hear that from us when the challenge recommends openweathermap
Jacob
@Haudz
Apr 17 2017 16:01
morning morning everyone
uiharu
@uiharu-s
Apr 17 2017 16:02
morning, only that it’s not morning for everyone :)
Roxroy
@roxroy
Apr 17 2017 16:02
Hi @Haudz , Good moring. Welcome to the fcc community.
Peter Nguyen
@iampeternguyen
Apr 17 2017 16:02
yeah i'm signing up for darksky right now
Gulsvi
@gulsvi
Apr 17 2017 16:03
dark sky definitely requires &callback=? at the end :)
Jacob
@Haudz
Apr 17 2017 16:04
Thanks
Peter Nguyen
@iampeternguyen
Apr 17 2017 16:05
ah.. still not getting anything..
$.getJSON("//api.darksky.net/forecast/fa782ffa711f3ff55b6f15b288d4a6be/37.8267,-122.4233&callback=?",function(json){
  console.log(json);
});
kirbyedy
@kirbyedy
Apr 17 2017 16:07
@iampeternguyen add https:// at the start
Gulsvi
@gulsvi
Apr 17 2017 16:09
@iampeternguyen If callback is the first parameter to the url, it starts with a ?
$.getJSON("https://api.darksky.net/forecast/fa782ffa711f3ff55b6f15b288d4a6be/37.8267,-122.4233?callback=?",function(json){
  console.log(json);
});
Peter Nguyen
@iampeternguyen
Apr 17 2017 16:10
ahh okay
Log Skipped: Sorry, this log was too large for our console. You might need to use the browser console instead.
CamperBot
@camperbot
Apr 17 2017 16:10
Archives for HelpFrontEnd
Peter Nguyen
@iampeternguyen
Apr 17 2017 16:10
lol im assuming that's a good sign?
Gulsvi
@gulsvi
Apr 17 2017 16:10
Yep, great sign :)
It's a lot of JSON so it's too much for codepen to handle
Peter Nguyen
@iampeternguyen
Apr 17 2017 16:11
alright thanks @kirbyedy @SkyCoder01 and @kanyin-me for helping me through that!
CamperBot
@camperbot
Apr 17 2017 16:11
iampeternguyen sends brownie points to @kirbyedy and @skycoder01 and @kanyin-me :sparkles: :thumbsup: :sparkles:
:star2: 1060 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 296 | @kanyin-me |http://www.freecodecamp.com/kanyin-me
:star2: 2022 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Uros Tadic
@urketadic
Apr 17 2017 16:13
Yo, is anyone able to help me out with optimizing website, it is really laggy. (http://logicnation.herokuapp.com/)
Dunno what i can do, minifying script and css doesn't help. I have also tried adding webpack. You can see code at https://github.com/urketadic/Logic
Sajannair
@Sajannair
Apr 17 2017 16:15
Hi All.. I am new here and learning from Freecodecamp . I am at the first assignment stage ..." Build a tribute page" .
In the lessons ..images were imported into html in by using a (http:) link....but what if i just want to upload one from my hard drive ...?
san-te
@san-te
Apr 17 2017 16:17
@Sajannair unless you want to use codepen pro and upload assets, you can use imgur and upload images there
Uros Tadic
@urketadic
Apr 17 2017 16:20
okay il go through all of these ty @kirbyedy
CamperBot
@camperbot
Apr 17 2017 16:20
urketadic sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 2023 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Jorge
@OrangeKulture
Apr 17 2017 16:22
hey wazzup guys
Iryna Yelizarova
@irrino4ka
Apr 17 2017 16:24
hi all! I am trying to build my first project "Tribute page" and I am a little bit confused. Is it required to build this project without css only with bootstap? Can I place image and text anywhere I want or just like on template?
Jorge
@OrangeKulture
Apr 17 2017 16:25
@irrino4ka you can do the tribute with anything you want, as long as it fulfills the user stories ..
I used a lot of jquery, vanilla and bootstrap
Iryna Yelizarova
@irrino4ka
Apr 17 2017 16:27
You rock!! Can you show your page?
Jorge
@OrangeKulture
Apr 17 2017 16:27
@irrino4ka sure ..
Sajannair
@Sajannair
Apr 17 2017 16:27
@kanyin-me : Thank You So Much <3
CamperBot
@camperbot
Apr 17 2017 16:27
sajannair sends brownie points to @kanyin-me :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @kanyin-me |http://www.freecodecamp.com/kanyin-me
Iryna Yelizarova
@irrino4ka
Apr 17 2017 16:27
thanks!
Jorge
@OrangeKulture
Apr 17 2017 16:28
@irrino4ka here you go Tribute .. u might need to hit f5, not sure .. im not hosting the images
Iryna Yelizarova
@irrino4ka
Apr 17 2017 16:28
WOW!! It's really cool!!!
Jorge
@OrangeKulture
Apr 17 2017 16:29
now that I think about it .. i should host the images, might be better than postimage, dont think its too fast
yeah? thanks a lot ! :)
Iryna Yelizarova
@irrino4ka
Apr 17 2017 16:31
look amazing! I thought I have to make just borred page with a lot of text) But now I'll try to do something interesting
Jorge
@OrangeKulture
Apr 17 2017 16:34
yeah .. the idea is to practice htmls and css, bootstrap and what not .. but you can add your own style
Jacob
@Haudz
Apr 17 2017 16:40
Would someone plz help out with my nav. I can seem to position the icons correctly, Nav lines are stuck and the nav won't open/close
Jacob
@Haudz
Apr 17 2017 17:01
i have to log off but plz send me a message if you can help out. Thank you!
Jade
@jaderyan
Apr 17 2017 17:10
Hello, would anyone be able to help. I can't get the grey colour to completely fill my div class - http://codepen.io/jaderyan/pen/MmgEZX
Femi Adewuyi
@femi5ezekiel
Apr 17 2017 17:11
Hello
please, codepen bootstrap navbar collapse is not working on mobile view
Help please
Jorge
@OrangeKulture
Apr 17 2017 17:17
@jaderyan you mean the grey from the About section?
Sorin Ruse
@sorinr
Apr 17 2017 17:17
@femi5ezekiel in pen settings add jquery and bootstrap.js
Jorge
@OrangeKulture
Apr 17 2017 17:18
@Haudz it's hard to read from fiddle to know exactly what you wanna do. It would be helpful it you could explain the effect you want to achieve(position where?) and maybe copy the code in here
Femi Adewuyi
@femi5ezekiel
Apr 17 2017 17:20
@sorinr Thanks, It works like magic but I have to paste https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js in the js setting
CamperBot
@camperbot
Apr 17 2017 17:20
femi5ezekiel sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1262 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Apr 17 2017 17:21
@femi5ezekiel yes. i was meaning the corresponding version of bs.js and jquery
Jade
@jaderyan
Apr 17 2017 17:22
@OrangeKulture Yes, I have solved it now. The padding from the patterned header was affecting it - doh!
Eduar Tua
@eduartua
Apr 17 2017 17:23
guys I want you to see my portfolio page and give me some feedback title
Jorge
@OrangeKulture
Apr 17 2017 17:23
@jaderyan glad you got it .. looking nice! btw
Eduar Tua
@eduartua
Apr 17 2017 17:25
This is my portfolio page, could you give me some feedback? https://codepen.io/eduar/full/qreLZV/
Jorge
@OrangeKulture
Apr 17 2017 17:25
@eduartua looks great! just an idea .. i would probably make the titles of the web pages (guitar store, onbie) also clickable, some users click the images, some click the titles
Eduar Tua
@eduartua
Apr 17 2017 17:26
Thank you @OrangeKulture I'll change it
CamperBot
@camperbot
Apr 17 2017 17:26
eduartua sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 17 2017 17:27
@eduartua welcome! .. it's just an idea tho, the page looks really good as is
Pieter Stokkink
@forkerino
Apr 17 2017 17:28
@eduartua it doesn't work so well on my phone. The menu doesn't scroll to the right part of the page and some text isnt aligned properly.
Eduar Tua
@eduartua
Apr 17 2017 17:29
I haven't checked on the phone, but I used the bootstrap responsive classes and in the browser for xs and sm is looking fine. Any clue in fix this? @forkerino
Jim Tryon
@jimtryon
Apr 17 2017 17:30
Your page looks great @OrangeKulture
The logo doesn’t appear to be loading in the top right if you have one
Eduar Tua
@eduartua
Apr 17 2017 17:31
It took me three days I think CSS is kinda hard. The is logo is missing though
Jorge
@OrangeKulture
Apr 17 2017 17:31
@jimtryon i think you mean @eduartua 's page
alfredim88
@alfredim88
Apr 17 2017 17:32
Hi guys
Sorin Ruse
@sorinr
Apr 17 2017 17:32
@eduartua why do you use <div class="text-center"> and not apply the class to <h2>Contact Me</h2> ?
alfredim88
@alfredim88
Apr 17 2017 17:33
I'm on the: Build a Random Quote Machine challenge
How can I acess the quote API?
Gulsvi
@gulsvi
Apr 17 2017 17:34
@alfredim88 Which quote API are you trying to access?
Pieter Stokkink
@forkerino
Apr 17 2017 17:34
@eduartua well, the links in the hamburger menu don't bring you to the right part of the page. This is something you have to fix. I just checked in the browser and I also see the text not realigning properly on very small screen size, will post pic in a sec.
alfredim88
@alfredim88
Apr 17 2017 17:34
anyone
Gulsvi
@gulsvi
Apr 17 2017 17:34
Try this one @alfredim88, it's pretty well documented: https://quotesondesign.com/api-v4-0/
Lots of others out there too - do a search for "Quote API" and you may find one you like better.
alfredim88
@alfredim88
Apr 17 2017 17:35
thank you @SkyCoder01
CamperBot
@camperbot
Apr 17 2017 17:35
alfredim88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1061 | @skycoder01 |http://www.freecodecamp.com/skycoder01
alfredim88
@alfredim88
Apr 17 2017 17:35
didn't know where to start
Gulsvi
@gulsvi
Apr 17 2017 17:36
This room is a good place to start if you can't find what you're looking for
Pieter Stokkink
@forkerino
Apr 17 2017 17:36
blob
@eduartua
Eduar Tua
@eduartua
Apr 17 2017 17:37
I see. I have a .row with two col. How can I do to change to one col when is xs or sm?
I meant What can I do to change to one col when is xs or sm??
they shouldn't be nested in a row right?
Sorin Ruse
@sorinr
Apr 17 2017 17:43
@eduartua col-xs-12 col-sm-12 col-md-6
@eduartua or even just col-xs-12 col-md-6
Gulsvi
@gulsvi
Apr 17 2017 17:45
I think col-md-6 is the same as col-xs-12 col-md-6
I had that at first too, but had to think about lol, and then deleted my comment
Jorge
@OrangeKulture
Apr 17 2017 17:46
the xs and md and lg are going to be deprecated for bootstrap 4, yeah? or is that not correct?
Gulsvi
@gulsvi
Apr 17 2017 17:47
I don't know about md and lg, but xs is already gone in the latest bootstrap 4
Jorge
@OrangeKulture
Apr 17 2017 17:49
ohh ok awesome
Eduar Tua
@eduartua
Apr 17 2017 17:49
I corrected the text alignment but lost the vertical alignment. How can I do vertical alignment without affecting bootstrap classes?
Sorin Ruse
@sorinr
Apr 17 2017 17:50
@SkyCoder01 don't know how itss going to be in bs4 but xs-12 md-6 it tells that on small screen and mobile up to medium(desktop) to be full width and half over that
Gulsvi
@gulsvi
Apr 17 2017 17:51
@sorinr It defaults to 12 at smaller breakpoints when not specified though, so col-xs-12 col-md-6 is the same as col-md-6
As long as you're keeping 12 per row anyway
@eduartua It depends to be honest - lots of different ways to do it depending on the content. Which element/part of your portfolio are you trying to vertically align?
Eduar Tua
@eduartua
Apr 17 2017 18:00
I have a 6-columns form and a 6-columns paragraph with bootstrap classes i can have them one next to the other but I want to have the paragraph in the middle, but is at the top.
Sorin Ruse
@sorinr
Apr 17 2017 18:02
@SkyCoder01 yes but , as i understood, @eduartua wants the contact me part in two columnss on desktop and up and full width on mobiles
Pagnito
@Pagnito
Apr 17 2017 18:05
@SkyCoder01 sup man, i ended up somewhat solving that problem, i worked around my my misunderstanding lol, if u wanna look at it that would be dope, but at this point id rather get help on how to make it so i cant add the same member twice, i tried to make a each loop of my user list and if my inpout is not equals to any of the ids in my list, which are the display name, then write into dom, but doesnt seem to work
Gulsvi
@gulsvi
Apr 17 2017 18:06
Oh okay, wasn't looking at Eduar's portfolio, unless something with CSS is affecting it, col-md-6 should be sufficient: https://codepen.io/skycoder/pen/mmJNaB
Eduar Tua
@eduartua
Apr 17 2017 18:06
@sorinr Yeah, that is right, and I got it following the @SkyCoder01 advice. The problem is that the p is at the top and I want it in the middle
Pagnito
@Pagnito
Apr 17 2017 18:06
@SkyCoder01 leme know whenever u can
Gulsvi
@gulsvi
Apr 17 2017 18:07
They're all the same col-md-6 === col-xs-12 col-md-6 === col-xs-12 col-sm-12 col-md-6
@Pagnito I noticed you did a lot of work last night lol
Pagnito
@Pagnito
Apr 17 2017 18:07
@SkyCoder01 haha yea i stayed up till like 6 o clock and had no idea, o tthought it was like 2 am when the sun cam out, i was like oh shit where did time go
Gulsvi
@gulsvi
Apr 17 2017 18:07
I will take a look later today. Hope you got some rest!
Pagnito
@Pagnito
Apr 17 2017 18:08
@SkyCoder01 thanks
CamperBot
@camperbot
Apr 17 2017 18:08
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Eduar Tua
@eduartua
Apr 17 2017 18:08
CamperBot
@camperbot
Apr 17 2017 18:08
:star2: 1062 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Sorin Ruse
@sorinr
Apr 17 2017 18:09
@eduartua that p on two column can be easily aligned vertically using flex but the problem starts on smaller screens when you jusst needed it centered horizontally
Eduar Tua
@eduartua
Apr 17 2017 18:12
Yes, @sorinr
Gulsvi
@gulsvi
Apr 17 2017 18:18
@eduartua Sorry, didn't see your link above and just got off the phone. I can take a closer look
Gulsvi
@gulsvi
Apr 17 2017 18:27
    <div class="row">
      <div class="col-md-6 text-center vert">
        <p>For any question, shoot me a message. No matter what is your question about, I will try to get in touch with you as soon as possible.</p>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="inputName1">Name</label>
          <input type="text" class="form-control" id="inputName1" placeholder="Your name here"/>
        </div>
        <div class="form-group">
          <label for="inputEmail">Email Address</label>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email"/>
        </div>
        <div class="form-group">
          <label for="inputPhone">Phone Number</label>
          <input type="tel" class="form-control" id="inputPhone" placeholder="Phone"/>
        </div>
        <div class="form-group">
          <label for="inputText">Message</label>
          <textarea name="" id="inputText" rows="6" class="form-control" placeholder="More details about your request"></textarea>
        </div>
        <button type="button" class="btn btn-success">Submit</button>
      </div>
    </div>

@eduartua That's a simpler approach - just using col-md-6. Change your vert class in your CSS to:

@media (min-width:992px) {
  .vert {
    margin-top: 130px;
  }
}

No need for anything fancy, just a top margin.

Okay, maybe a little fancy with a media query :) so it only applies at md and larger
lhoward465
@lhoward465
Apr 17 2017 18:30
Happy Easter for yesterday everyone :)
Gulsvi
@gulsvi
Apr 17 2017 18:30
:egg: :rabbit: :pray:
:)
Sorin Ruse
@sorinr
Apr 17 2017 18:35
@SkyCoder01 i would avoid in using fixed values like 130px;. what if i decide to change the form and the whole row changes height?
Gulsvi
@gulsvi
Apr 17 2017 18:35
Then you change one line in your CSS :)
lhoward465
@lhoward465
Apr 17 2017 18:36
Teitch site is done I think: https://codepen.io/lhoward465/full/mWxwWY/
twitch*
Buvaneshwaran T
@thewisedeveloper
Apr 17 2017 18:39
guys can anybody help me with this please

function palindrome(str) {
// Good luck!
var n = str.length;
var reverse;

for(var i = n-1; i >= 0; i--){
reverse += str[i];
}
if(reverse==str)return true;
return false;
}

code to see if str is palindrome or not
my logic is right , but idk why it's wrong
lhoward465
@lhoward465
Apr 17 2017 18:40
add tolowers?
Chris
@bestintown23
Apr 17 2017 18:40
how to align my text and photo to be side by side on this page? https://codepen.io/bestintown23/pen/vmOqwN
Sorin Ruse
@sorinr
Apr 17 2017 18:41
@SkyCoder01 an option could be margin-top: 50%; transform: translate(0, -50%)
João Victor
@Jvsierra
Apr 17 2017 18:42
Hey, i need help with my project
How can i put the image and the text side by side?
Could someone please help me?
lhoward465
@lhoward465
Apr 17 2017 18:43
@Jvsierra The classic needs two spans and a div?
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:43
Hey Im working twitch tv do I need my twitch account for this project?
Gulsvi
@gulsvi
Apr 17 2017 18:43
@sorinr That doesn't seem to work - and flexbox messes up the form. JavaScript could you let you do it dynamically though, I suppose, but it seemed a simple margin was simple for someone's first portfolio.
lhoward465
@lhoward465
Apr 17 2017 18:44
@MathematicsCoding not necessary but you can if you want.
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:44
Ok
lhoward465
@lhoward465
Apr 17 2017 18:44
@SkyCoder01 What did you think?
João Victor
@Jvsierra
Apr 17 2017 18:44
@lhoward465 Didn't get it
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:44
Well I need to find some random twitch players or the one who I know...
All I know is freecodecamp lol
Gulsvi
@gulsvi
Apr 17 2017 18:44
@lhoward465 Just opened it now - great work :) finally I see everything the way it was meant to be :)
lhoward465
@lhoward465
Apr 17 2017 18:45
@MathematicsCoding it gives you a list of users in the intro of the project.
Gulsvi
@gulsvi
Apr 17 2017 18:45
I like how search doesn't just filter everything out - you get a big card that takes up the screen
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:45
Do I need them? or find my own?
lhoward465
@lhoward465
Apr 17 2017 18:45
@MathematicsCoding you can find your own if you want but it would be best to use theirs at least, add more if you need to.
Gulsvi
@gulsvi
Apr 17 2017 18:45
The tetris-like cards are a nice touch too
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:45
Ok
lhoward465
@lhoward465
Apr 17 2017 18:46
You can also "want now" with the users that are currently streaming.
The visit channel will take you to the twitch tv site but the watch now will stream it in a popup.
Gulsvi
@gulsvi
Apr 17 2017 18:47
@Jvsierra You're using Bootstrap 4 (not sure if you meant to do that), so instead of img-responsive for your image, use img-fluid. It will resize and prevent your text from overlapping the image on smaller screens.
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:48
Why is this api not working?
João Victor
@Jvsierra
Apr 17 2017 18:48
@SkyCoder01 Oh, thanks, i had this problem too
CamperBot
@camperbot
Apr 17 2017 18:48
jvsierra sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:48
Its saying not found
CamperBot
@camperbot
Apr 17 2017 18:48
:star2: 1063 | @skycoder01 |http://www.freecodecamp.com/skycoder01
João Victor
@Jvsierra
Apr 17 2017 18:48
@SkyCoder01 Do you know how can i put the image and the text side by side?
lhoward465
@lhoward465
Apr 17 2017 18:48
@Jvsierra "difference"*
Gulsvi
@gulsvi
Apr 17 2017 18:49
@MathematicsCoding Here are the ones I used (the last two don't exist, the first two are usually online)
['ESL_SC2', 'OgamingSC2', 'freecodecamp', 'lirik', 'summit1g', '2mgovercsquared',
  'DizzyKitten', 'syndicate', 'alinity', 'ZombiUnicorn', 'captainsparklez', 'legendarylea',
  'riotgames', 'nightblue3', 'imaqtpie', 'kittyplaysgames', 'brunofin', 'comster404'
];
@Jvsierra The are side by side for me
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:49
This is what I have right now
["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
Is it ok? do I have to add other players?
João Victor
@Jvsierra
Apr 17 2017 18:50
@SkyCoder01 Yeah, they are side by side, but i want to take them closer
to each other
lhoward465
@lhoward465
Apr 17 2017 18:50
@Jvsierra put them in the same div
Gulsvi
@gulsvi
Apr 17 2017 18:51
Ahhh, okay @Jvsierra In that case, change the numbers you have for your columns. Maybe use col-sm-3 for the picture and col-sm-9 for the text?
lhoward465
@lhoward465
Apr 17 2017 18:51
that works too
Gulsvi
@gulsvi
Apr 17 2017 18:51
Or use a bigger image - the maximum size it can be is 460px wide
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:51
Why wont the api that freecodecamp provided in the challenge works?
João Victor
@Jvsierra
Apr 17 2017 18:51
@SkyCoder01 Works, thank yoy
CamperBot
@camperbot
Apr 17 2017 18:51
jvsierra sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: jvsierra already gave skycoder01 points
João Victor
@Jvsierra
Apr 17 2017 18:51
you*
lhoward465
@lhoward465
Apr 17 2017 18:51
@MathematicsCoding you need at least one that's deleted or deactivated, one that's offline and one that's streaming.
Gulsvi
@gulsvi
Apr 17 2017 18:52
Happy to help
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:52
So I need two api? for offline and streaming?
lhoward465
@lhoward465
Apr 17 2017 18:52
I utilised 3 api calls
for each user iteration
but it depends how you're going to make it
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:53
Can I just have two api's? for offline and streaming
lhoward465
@lhoward465
Apr 17 2017 18:53
@MathematicsCoding misunderstanding, you use different api's to get different information.
@MathematicsCoding not an api for offline and an api for online.
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:53
Oh..
lhoward465
@lhoward465
Apr 17 2017 18:54
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:54
Oh I see
I just add channels and other at the end of its url
So that is why url says not found..
lhoward465
@lhoward465
Apr 17 2017 18:55
@SkyCoder01 thanks for the feedback :)
CamperBot
@camperbot
Apr 17 2017 18:55
lhoward465 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1064 | @skycoder01 |http://www.freecodecamp.com/skycoder01
lhoward465
@lhoward465
Apr 17 2017 18:55
you made it to 1k!
:P
pretty much smashed 1k actually
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:55
@lhoward465 I tested and the one with streams says forbidden..
Sorin Ruse
@sorinr
Apr 17 2017 18:56
@SkyCoder01 its working. here an example
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:56
@sorinr
"Banckend"
lhoward465
@lhoward465
Apr 17 2017 18:56
@MathematicsCoding it works fine: https://codepen.io/lhoward465/pen/mWxwWY
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:56
Fix it to "Backend" :p
lhoward465
@lhoward465
Apr 17 2017 18:57
I'm a bit disappointed that it's taking time to complete the intermediate challenges :S
I was doing 1 every 15mins for the beginner ones
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:57
hm...
Gulsvi
@gulsvi
Apr 17 2017 18:57
image.png
@sorinr This is what I see in Chrome
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:58
@SkyCoder01 scroll...
Gulsvi
@gulsvi
Apr 17 2017 18:58
Scroll? :)
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:59
There is more to it
Gulsvi
@gulsvi
Apr 17 2017 18:59
We were talking about centering that text next to the form
Saboor Malik
@MathematicsCoding
Apr 17 2017 18:59
Oh :p
Gulsvi
@gulsvi
Apr 17 2017 18:59
vertically centering it :)
Forbidden
Gulsvi
@gulsvi
Apr 17 2017 19:00
You have to add a user to the end or it's forbidden
Saboor Malik
@MathematicsCoding
Apr 17 2017 19:00
oh
Yeah lol
Gulsvi
@gulsvi
Apr 17 2017 19:02
Uggh, I have to go to class. Good luck with Twitch :+1: @MathematicsCoding
Nice work, once again @lhoward465 must feel good to be done :grin:
Saboor Malik
@MathematicsCoding
Apr 17 2017 19:04
Thanks
What do you think? Check JS code?
Brb
lhoward465
@lhoward465
Apr 17 2017 19:11
sorry I was miles away
@SkyCoder01 I honestly am a little proud of it, the mobile view of it is a flop but the computer view is okay. I think I need to account for the outer shadow more, but it's in a pretty done enough state and I like the look of it :)
João Victor
@Jvsierra
Apr 17 2017 19:22
Hey, i need help again
The two images down there
How could i decrease the space between them?
João Victor
@Jvsierra
Apr 17 2017 19:27
@SkyCoder01 Could you please help me?
Rita Alfonso
@alfonsotech
Apr 17 2017 19:47
@Jvsierra what do you mean by decrease the space, can you be more specific?
João Victor
@Jvsierra
Apr 17 2017 19:49
@alfonsotech I solved the problem
I did this
Eduar Tua
@eduartua
Apr 17 2017 19:49
@SkyCoder01 Thank you so much
CamperBot
@camperbot
Apr 17 2017 19:49
eduartua sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1065 | @skycoder01 |http://www.freecodecamp.com/skycoder01
João Victor
@Jvsierra
Apr 17 2017 19:49
Instead of col-md-6, i used col-sm-6
Rita Alfonso
@alfonsotech
Apr 17 2017 19:49
awesome @Jvsierra
João Victor
@Jvsierra
Apr 17 2017 19:49
But now they're too far from the center
and i want to put them right in the center
Got it
Rita Alfonso
@alfonsotech
Apr 17 2017 19:51
You want to center the images on the bottom @Jvsierra
João Victor
@Jvsierra
Apr 17 2017 19:51
@alfonsotech Yes, but they are not aligned
Rita Alfonso
@alfonsotech
Apr 17 2017 19:51
Do you also want the images to be of the same size?
João Victor
@Jvsierra
Apr 17 2017 19:52
Yeas
Yes*
Rita Alfonso
@alfonsotech
Apr 17 2017 19:52
okay! do your images have a common class name?
João Victor
@Jvsierra
Apr 17 2017 19:53
their class is col-xs-6
and id is #portfolio-works-images
and i added a style tag in the html element
which is
style=" margin-left:auto; margin-right:auto; display:block;"
Vinicius Otacilio
@Karumba15
Apr 17 2017 19:58
someone can help me with navbars?
im at portfolio challenge
i do the navbar with bootstrap?
João Victor
@Jvsierra
Apr 17 2017 19:59
@Karumba15 Yes, it's the easiest way
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:00
<nav class="navbar navbar-inverse navbar-fixed-top">
this is enought?
Saboor Malik
@MathematicsCoding
Apr 17 2017 20:00
@eduartua Did you fix "Frontend- Backend"
Remember there used to be Banckend
João Victor
@Jvsierra
Apr 17 2017 20:00
@Karumba15 Yes, but the navbar-inverse will make a black navbar
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:01
hmm
how i change the color?
navbar-default ?
João Victor
@Jvsierra
Apr 17 2017 20:01
@Karumba15 Yes
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:02
So, can only be black or white?
João Victor
@Jvsierra
Apr 17 2017 20:02
@Karumba15 Black or gray are the default colors, but you can edit it's CSS and use another color
Is second variable correct? Do I have to remove []? and Do vars have to be inside document ready function?
Jacob
@Haudz
Apr 17 2017 20:04
@OrangeKulture Its a long code so i didnt want to take up the screen or intrude the room with it
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:04
How do I make the navigation bar buttons go to the middle of the page?
Eduar Tua
@eduartua
Apr 17 2017 20:04
@MathematicsCoding You mean, If I do them?
Saboor Malik
@MathematicsCoding
Apr 17 2017 20:05
No there is a typo
Banckend did you fix it?
Eduar Tua
@eduartua
Apr 17 2017 20:06
I did it @MathematicsCoding thank you so much. I don't know why while coding I do a lot of typos
CamperBot
@camperbot
Apr 17 2017 20:06
eduartua sends brownie points to @mathematicscoding :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @mathematicscoding |http://www.freecodecamp.com/mathematicscoding
Jacob
@Haudz
Apr 17 2017 20:06

// NAVBAR
function openNav() {
document.getElementById("mySidenav").style.width = "250px";

}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}

Saboor Malik
@MathematicsCoding
Apr 17 2017 20:06
@eduartua So is everyone :) and nice project
Eduar Tua
@eduartua
Apr 17 2017 20:07
Could you guys let me know if now it work fine? You all always make good observations https://codepen.io/eduar/full/qreLZV/
Jacob
@Haudz
Apr 17 2017 20:08
resubmitting, i sent old version sorry

<div class="wrapper">

<!-- SIDE NAV -->

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<ul>
<a href="#" class="active">Ripieni</a>
<a href="oppsies.html">Contact Us</a>
<a href=#Reservations>Online Ordering</a>
<a href=#res>Reservations</a>
<a href="mycarousel">Gallery</a>

  <!--ICONS IN NAV-->
  <div class="soc">
    <li>
      <a href="Pinterest">
        <img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest.png" width="35" height="35" /></a>
    </li>

    <li>
      <a href="Facebook">
        <img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook.png" width="35" height="35" /></a>
    </li>

    <li>
      <a href="Instagram">
        <img title="Instagram" alt="RSS" src="https://socialmediawidgets.files.wordpress.com/2014/03/10_instagram.png" width="35" height="35" /></a>
    </li>
</ul>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
</div>

</div>
</div>
</div>
<!--END ICONS INNAV -->
<!--END NAV-->

<div class="mich">
<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 175 69" enable-background="new 0 0 175 69" xml:space="preserve">
<path d="M39.3,40.1c3.7,5.4,7.2,8.1,10.4,8.1c2.7,0,5.2-2.8,5.2-5.8c0-3.9-4.7-6.4-12.9-7.1V34c8.3-0.7,12.9-3.1,12.9-7.1 c0-3-2.4-5.8-5.2-5.8c-3.2,0-6.7,2.8-10.4,8.2l-1.2-0.7c1.8-3.7,2.8-6.9,2.8-9.4c0-3.7-2-6-5.4-6c-3.3,0-5.4,2.2-5.4,5.8 c0,2.7,0.9,5.8,2.8,9.6l-1.2,0.7c-3.7-5.4-7.2-8.2-10.4-8.2c-2.7,0-5.2,2.8-5.2,5.8c0,3.9,4.5,6.4,12.9,7.1v1.4 c-8.2,0.7-12.9,3.2-12.9,7.1c0,3,2.5,5.8,5.2,5.8c3.2,0,6.7-2.8,10.4-8.1l1.2,0.7c-1.8,3.8-2.8,7-2.8,9.6c0,3.6,2.1,5.8,5.4,5.8 c3.4,0,5.4-2.2,5.4-5.9c0-2.6-0.9-5.8-2.8-9.6L39.3,40.1z M43.3,48.3c0.1,0.9,0.1,1.7,0.1,2.4c0,4.7-3.3,8.1-8,8.1 c-4.9,0-8-3.4-8-8.6c0-0.7,0-0.8,0.1-1l0.1-0.9c-2.6,1.8-4.3,2.5-6.4,2.5c-4.1,0-7.7-3.9-7.7-8.3c0-3.1,2.2-5.9,5.6-7.4l0.7-0.3 c-4.3-2-6.3-4.4-6.3-7.8c0-4.5,3.6-8.3,7.8-8.3c1.8,0,4,0.9,5.7,2l0.7,0.5c-0.1-0.9-0.1-1.6-0.1-2.3c0-4.7,3.3-8.1,8-8.1 c4.9,0,8,3.3,8,8.6v1l-0.1,0.8c2.6-1.8,4.3-2.5,6.4-2.5c4.1,0,7.7,3.9,7.7,8.3c0,3.1-2.2,6-5.6,7.5l-0.7,0.3c4.3,2,6.3,4.4,6.3,7.7 c0,4.5-3.6,8.3-7.7,8.3c-1.8,0-4.2-0.7-5.8-2L43.3,48.3z"></path>
<path d="M100,40.1c3.7,5.4,7.2,8.1,10.4,8.1c2.7,0,5.2-2.8,5.2-5.8c0-3.9-4.7-6.4-12.9-7.1V34c8.3-0.7,12.9-3.1,12.9-7.1 c0-3-2.4-5.8-5.2-5.8c-3.2,0-6.7,2.8-10.4,8.2l-1.2-0.7c1.8-3.7,2.8-6.9,2.8-9.4c0-3.7-2-6-5.4-6c-3.3,0-5.4,2.2-5.4,5.8 c0,2.7,0.9,5.8,2.8,9.6l-1.2,0.7c-3.7-5.4-7.2-8.2-10.4-8.2c-2.7,0-5.2,2.8-5.2,5.8c0,3.9,4.5,6.4,12.9,7.1v1.4 c-8.2,0.7-12.9,3.2-12.9,7.1c0,3,2.5,5.8,5.2,5.8c3.2,0,6.7-2.8,10.4-8.1l1.2,0.7c-1.8,3.8-2.8,7-2.8,9.6c0,3.6,2.1,5.8,5.4,5.8 c3.4,0,5.4-2.2,5.4-5.9c0-2.6-0.9-5.8-2.8-9.6L100,40.1z M104,48.3c0.1,0.9,0.1,1.7,0.1,2.4c0,4.7-3.3,8.1-8,8.1c-4.9,0-8-3.4-8-8.6 c0-0.7,0-0.8,0.1-1l0.1-0.9c-2.6,1.8-4.3,2.5-6.4,2.5c-4.1,0-7.7-3.9-7.7-8.3c0-3.1,2.2-5.9,5.6-7.4l0.7-0.3c-4.3-2-6.3-4.4-6.3-7.8 c0-4.5,3.6-8.3,7.8-8.3c1.8,0,4,0.9,5.7,2l0.7,0.5c-0.1-0.9-0.1-1.6-0.1-2.3c0-4.7,3.3-8.1,8-8.1c4.9,0,8,3.3,8,8.6v1l-0.1,0.8 c2.6-1.8,4.3-2.5,6.4-2.5c4.1,0,7.7,3.9,7.7,8.3c0,3.1-2.2,6-5.6,7.5l-0.7,0.3c4.3,2,6.3,4.4,6.3,7.7c0,4.5-3.6,8.3-7.7,8.3 c-1.8,0-4.2-0.7-5.8-2L104,48.3z"></path>
<path d="M100,40.1c3.7,5.4,7.2,8.1,10.4,8.1c2.7,0,5.2-2.8,5.2-5.8c0-3.9-4.7-6.4-12.9-7.1V34c8.3-0.7,12.9-3.1,12.9-7.1
c0-3-2.4-5.8-5.2-5.8c-3.2,0-6.7,2.8-10.4,8.2l-1.2-0.7c1.8-3.7,2.8-6.9,2.8-9.4c0-3.7-2-6-5.4-6c-3.3,0-5.4,2.2-5.4,5.8
c0,2.7,0.9,5.8,2.8,9.6l-1.2,0.7c-3.7-5.4-7.2-8.2-10.4-8.2c-2.7,0-5.2,2.8-5.2,5.8c0,3.9,4.5,6.4,12.9,7.1v1.4
c-8.2,0.7-12.9,3

html body {
font-size: 14px;
position: relative;
letter-spacing: 1.2pt;
font-family: 'museo100';
background-color: rgba(231, 231, 231, 0.52);
}

/==================================
NAVBAR
==================================
/

mySidenav {}

.sidenav {
top: 0;
left: 0;
z-index: 1;
opacity: .8;
position: fixed;
overflow: hidden;
letter-spacing: .8pt;
background-color: white;
text-align: center;
transition: .5s;
height: 100%;
width: 300px;
padding-top: 15px;
}

.sidenav a {
padding-top: 40px;
font-size: 14px;
color: #818181;
display: block;
transition: 0.3s
}

.sidenav a:hover,
.offcanvas a:focus {
text-decoration: none;
}

.sidenav .closebtn {
top: 0;
right: 25px;
position: absolute;
}
.sidenav ul li {
float: left;
list-style-type: none;
display: inline-block;
text-indent: 10px;
padding-top: 10%;
text-align: center;
}

.soc img {
margin-left: 35px;
}

/==================================
HOME PAGE
===================================
/

/==================================
HEADER TITLE
===================================
/

.create h6 {
left: 50%;
font-style: italic;
text-align: center;
}

.parent {
text-align: center;
margin-bottom: 90px;

}

.parent span {
text-align: center;
font-style: italic;
margin-bottom: 100px;
}

.big {
font-size: 100px;
}

.small {
font-size: 30px;
}

/==================================
CREATE YOUR OWN PIZZA
===================================
/

.create h5 {
font-weight: bold letter-spacing: 0;
text-align: center;
font-family: 'museo100';
}

/==================================
NAVBAR MICHELIN STAR
==================================
/

.mich {
fill: red;
right: 64px;
width: 40px;
height: 30px;
z-index: 1000;
display: block;
position: fixed;
margin-top: 55px;
margin-right: 2px;
transition: all 400ms;
}

Isolation_Mode:hover {

animation: blinker 2.5s linear infinite;
}

@keyframes blinker {
50% {
opacity: 0;
}
}

/==================================
V SCROLL DOWN MENU
==================================
/

a.scrolldown svg {
left: 50%;
bottom: 0;
width: 12px;
height: 12px;
transition: .3s;
margin-left: -16px;
position: absolute;
transform-origin: 0px 0px 0px;
transform-origin: 50% 50% 0px;
animation: blinker 2.5s linear infinite;
}

a.scrolldown svg:hover {
animation: blinker 2.5s linear infinite;
}

@keyframes blinker {
50% {
opacity: 0;
}
}

.scrolldown svg {
width: 30px;
height: 30px;
}

.scrolldownlink span {
left: 50%;
width: 100px;
height: 60px;
bottom: 12px;
display: block;
color: #a8a6a5;
font-size: 13px;
transition: .3s;
line-height: 25px;
margin-left: -50px;
position: absolute;
text-align: center;
letter-spacing: 1.2pt;
text-decoration: none;
font-family: 'museo100';
}

.scrolldownlink a {
left: 50%;
width: 00px;
height: 60px;
bottom: 12px;
display: block;
color: #a8a6a5;
font-size: 13px;
line-height: 25px;
margin-left: -50px;
text-align: center;
position: absolute;
letter-spacing: 1.2pt;
text-decoration: none;
font-family: 'museo100';
}

Saboor Malik
@MathematicsCoding
Apr 17 2017 20:08
So If I wanted to access api whatever it is and can div element have the id?
Jacob
@Haudz
Apr 17 2017 20:08

// NAVBAR
function openNav() {
document.getElementById("mySidenav").style.width = "250px";

}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}

Saboor Malik
@MathematicsCoding
Apr 17 2017 20:09
For example I click a button then will id in div element show up?
Jacob
@Haudz
Apr 17 2017 20:10
Curious, why did you guys ask me to post it on here when jsfiddle has it compressed and then you can copy and paste
Aleksander Gębicki
@Takumar
Apr 17 2017 20:10
@eduartua pressing links on the top (e.g. "Portfolio" ) should move us to that section. Don't you think?
Pressing "Contact" works like this.
Eduar Tua
@eduartua
Apr 17 2017 20:13
You're right let me check thank you @Takumar
CamperBot
@camperbot
Apr 17 2017 20:13
eduartua sends brownie points to @takumar :sparkles: :thumbsup: :sparkles:
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:13
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"href="#">Vinicius Otacilio Portfólio</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About Me</a></li>
<li><a href="#">My Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div>
</nav>
CamperBot
@camperbot
Apr 17 2017 20:13
:star2: 3500 | @takumar |http://www.freecodecamp.com/takumar
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:13
this is not working to create a navbar
one element is under the other
Jacob
@Haudz
Apr 17 2017 20:14
@Karumba15 I'm sorry i haven't bene follow today. Were you referring to me?
Eduar Tua
@eduartua
Apr 17 2017 20:14
@Takumar Fixed, thank you
It was a typo on the id
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:15
@Haudz No man, im just looking for help hahaha, maybe you can help me?
Jacob
@Haudz
Apr 17 2017 20:15
oh gotcha.. I'm new myself but ya ill try
Aleksander Gębicki
@Takumar
Apr 17 2017 20:16
@eduartua good job :thumbsup:
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:16
thanks .. im new too
Jacob
@Haudz
Apr 17 2017 20:17
oh shoot i haven't made a bootstrap navbar yet.. I JUST followed w3 school for my first project and so I'm not sure.. Ive been meaning to set time to learn it.. ill shoot u back if someone else doesn't jump in
@Karumba15 where did you get the code from?
bootstrap?
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:18
Yes, bootstrap
Jacob
@Haudz
Apr 17 2017 20:18
where is ur css
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:18
im the w3school bootstraps section
i just started this project
0 css yet
maybe i has to make the css to better my nav bar
Jacob
@Haudz
Apr 17 2017 20:19
thats the main part brotha... watch this video.. helps alot but its not for nav
geez, big enough? lol
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:19
hmmm
kkkkk a little small i guess
i will see right now
thanks
Saboor Malik
@MathematicsCoding
Apr 17 2017 20:21
Can anyone check my JS code?
Vinicius Otacilio
@Karumba15
Apr 17 2017 20:21
Meanwhile ... can anyone help me with navbar? I can not edit it in css ... Which selector should I use?
Keon Samuel
@keonsam
Apr 17 2017 20:22
$5 per debug.
Jacob
@Haudz
Apr 17 2017 20:22
@Karumba15 when you message me use the @ so i can get a pop up on my screen. I multi task and don't have notifications on
Keon Samuel
@keonsam
Apr 17 2017 20:22
joke
Saboor Malik
@MathematicsCoding
Apr 17 2017 20:22
lol
Jacob
@Haudz
Apr 17 2017 20:22
lol
Saboor Malik
@MathematicsCoding
Apr 17 2017 20:22
I thought you talked about $
Like browser saying $ not defined and you made me to check browser console...
Keon Samuel
@keonsam
Apr 17 2017 20:22
Saboor you are all over the place.
Jacob
@Haudz
Apr 17 2017 20:22
im $4 . gotta beat the comp.
Keon Samuel
@keonsam
Apr 17 2017 20:23
weren't you in JS the other day?
Saboor Malik
@MathematicsCoding
Apr 17 2017 20:23
What JS?
Interdimate algorithm challenges?
Keon Samuel
@keonsam
Apr 17 2017 20:24
yes
Saboor Malik
@MathematicsCoding
Apr 17 2017 20:24
Yeah I was and went back to work on twitch tv
Jacob
@Haudz
Apr 17 2017 20:25
does anyone have a good video to watch about using bootstrap mainly for the responisive scaling
I'm having trouble understanding what numbers to col-# to use
Saboor Malik
@MathematicsCoding
Apr 17 2017 20:26
I will come back to this project later
Cya
Im going to play minecraft
Keon Samuel
@keonsam
Apr 17 2017 20:30
@Haudz if you are using bootstrap 4 use this link: https://v4-alpha.getbootstrap.com/layout/grid/
Jacob
@Haudz
Apr 17 2017 20:31
@keonsam ill check it out.. if I'm new, should i go with 3 or 4, does it matter?
in my code now i have applied 3
Keon Samuel
@keonsam
Apr 17 2017 20:32
I will say go with 4
Jacob
@Haudz
Apr 17 2017 20:32
@keonsam thanks
CamperBot
@camperbot
Apr 17 2017 20:32
haudz sends brownie points to @keonsam :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @keonsam |http://www.freecodecamp.com/keonsam
Keon Samuel
@keonsam
Apr 17 2017 20:33
A client might want their site to be as up to date as possible.
Jacob
@Haudz
Apr 17 2017 20:33
@keonsam would you by chance have a video you like about it?
youtube is my bestfriend but I was just seeing others options
Keon Samuel
@keonsam
Apr 17 2017 20:36
In programming you will have to read a lot as youtube videos are sometimes not as comprehensive.
Jacob
@Haudz
Apr 17 2017 20:38
@keonsam thanks again my friend
CamperBot
@camperbot
Apr 17 2017 20:38
haudz sends brownie points to @keonsam :sparkles: :thumbsup: :sparkles:
:warning: haudz already gave keonsam points
intcreate
@intcreate
Apr 17 2017 20:38
can any1 help me work this out? im trying to make the button change colors when i click on it but its not working https://codepen.io/anon/pen/EmVjxK?editors=0001
Jacob
@Haudz
Apr 17 2017 20:40
off for lunch. happy coding you guys
intcreate
@intcreate
Apr 17 2017 20:40
sounds good
Uros Tadic
@urketadic
Apr 17 2017 20:57

can someone explain me how this works:

<div uib-collapse="!formCollapse" class="in collapse" style="height: auto;" aria-expanded="true" aria-hidden="false">
        <div>

I need to make this div collapsed by default, right now its open

Jacob
@Haudz
Apr 17 2017 21:06
I didnt hear from you and so I thought you were deep into watching that video i sent you lol.. didnt like it?
LadyBuggy17
@LadyBuggy17
Apr 17 2017 21:17
On the tribute page project, are we not supposed to use CSS at all?
Keon Samuel
@keonsam
Apr 17 2017 21:18
you can do what ever you want to do.
LadyBuggy17
@LadyBuggy17
Apr 17 2017 21:19
Okay, thank you @keonsam !
CamperBot
@camperbot
Apr 17 2017 21:19
ladybuggy17 sends brownie points to @keonsam :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @keonsam |http://www.freecodecamp.com/keonsam
Pagnito
@Pagnito
Apr 17 2017 21:19
not rly supposed to look at the example project, the whole point is to force u to THINK!!!! and reverese engineer as they said the page
LadyBuggy17
@LadyBuggy17
Apr 17 2017 21:19
I didn't look. I watched his video...
Pagnito
@Pagnito
Apr 17 2017 21:20
that way it makes u look and search for things u will need to build it, YOUR way
Keon Samuel
@keonsam
Apr 17 2017 21:20
nothing wrong with a little css, you might need it.
Pagnito
@Pagnito
Apr 17 2017 21:20
im just sayin, u wouldnt know that the example had no css in it
just by watchin the video
Gulsvi
@gulsvi
Apr 17 2017 21:21
@Karumba15 You are using the Bootstrap 3 Navbar HTML, but in your Codepen setting, you have the Bootstrap 4 CSS.
Here is the HTML for Bootstrap 4 navbar: https://v4-alpha.getbootstrap.com/components/navbar/
Here is the Bootstrap 3 CSS if you want to keep your HTML and update your settings: https://www.bootstrapcdn.com/
Keon Samuel
@keonsam
Apr 17 2017 21:21
Because Quincy is a pro most people use some css.
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:22
@SkyCoder01 thanks..i simply change the bootstrap to 3.7
CamperBot
@camperbot
Apr 17 2017 21:22
karumba15 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1066 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:22
now is working
Pagnito
@Pagnito
Apr 17 2017 21:22
im not rly tryin scold u, im sorry if it came out that way but im just sayin, its only for ur best interest to make this as hard as possible for urself, at least i think its best way to truly adapt and truly remember all the content
Gulsvi
@gulsvi
Apr 17 2017 21:23

@intcreate Your colorize() function should be like this:

function colorize() {
  button.style.background = colors[Math.floor(Math.random() * 4)]; 
}

Then your button will change colors.

LadyBuggy17
@LadyBuggy17
Apr 17 2017 21:23
Yes, you would. He even says that in the video. Stock bootstrap.
Anyways, thank you! I just wanted to make sure that wasn't doing it wrong. :D
Chris
@bestintown23
Apr 17 2017 21:25
how do i make the html logo in my about page center in the container its in? https://codepen.io/bestintown23/pen/vmOqwN
Gulsvi
@gulsvi
Apr 17 2017 21:26
by not spamming four rooms at once
Pagnito
@Pagnito
Apr 17 2017 21:28
@LadyBuggy17 yes u right, video does show, been a while since i done that challenge, i do apoligize >.<
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:30
stupid question.... how i change the font color of my navbar? https://codepen.io/ViniciusOtacilio/pen/ybNjVQ
Pagnito
@Pagnito
Apr 17 2017 21:30
@SkyCoder01 hey is there a place i can read about registerEventHandling, i still dont quite get it. I understand that the interperter needs to look at DOM again in order to register the change, but im still confused as to which elements to wrap in the function
Gulsvi
@gulsvi
Apr 17 2017 21:31
I don't know @Pagnito I wish I could explain it better - it's more about understanding when your code runs and what the HTML looks like when it runs.
if you try to do .on() before an element is in your HTML it won't work.
before an element, ID, class, etc.. ** is in your HTML
Pagnito
@Pagnito
Apr 17 2017 21:32
@SkyCoder01 hmm, ok gonna merinade on this now hehe
Gulsvi
@gulsvi
Apr 17 2017 21:33
hehe :) Best I can do is point you to this really boring document: http://api.jquery.com/on/
Pagnito
@Pagnito
Apr 17 2017 21:33
@SkyCoder01 sweet thanks
CamperBot
@camperbot
Apr 17 2017 21:33
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1067 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 17 2017 21:33
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()
LadyBuggy17
@LadyBuggy17
Apr 17 2017 21:33
No bog deal! I started the project before watching the video and was worried I'd messed up lol
Pagnito
@Pagnito
Apr 17 2017 21:34
@LadyBuggy17 i feelz i feelz
LadyBuggy17
@LadyBuggy17
Apr 17 2017 21:34
Thanks @Pagnito !
CamperBot
@camperbot
Apr 17 2017 21:34
ladybuggy17 sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 208 | @pagnito |http://www.freecodecamp.com/pagnito
Gulsvi
@gulsvi
Apr 17 2017 21:35
image.png
@Karumba15 For you, it's:
.navbar-default .navbar-nav>li>a {
    color: green;
}
for example...
You can right-click and select "Inspect" on an element to see how Bootstrap styles it and then use the same to override
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:37
Alright
@SkyCoder01 thanks sky
CamperBot
@camperbot
Apr 17 2017 21:37
karumba15 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: karumba15 already gave skycoder01 points
Pagnito
@Pagnito
Apr 17 2017 21:38
@LadyBuggy17 ;)
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:38
@SkyCoder01 the nav-brand don't change the color, how i select him?
Gulsvi
@gulsvi
Apr 17 2017 21:38
@Karumba15 See that picture I put above?
right-click your nav-brand element, select "Inspect" and you should see something similar in your browser
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:39
alright
Gulsvi
@gulsvi
Apr 17 2017 21:39
It will show you what CSS to use - it's good to learn how to do this or you might have lots more questions :)
happy to help walk you through it!
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:40
you are being veeeery helpful @SkyCoder01
thanks!
Gulsvi
@gulsvi
Apr 17 2017 21:40
Hopefully helping more than confusing lol, you're welcome
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:46
@SkyCoder01 https://codepen.io/ViniciusOtacilio/pen/ybNjVQ okay now i don't know what the fuck is happens
have a blank space in the middle of my navbar
maybe is a selector mistake i made
Pagnito
@Pagnito
Apr 17 2017 21:50
@SkyCoder01 so my objective, is to make the interperter look at the DOM again when i resize the screen?
Gulsvi
@gulsvi
Apr 17 2017 21:50
@Karumba15 You changed the background color for your links and the navbar-brand, but not for the entire navbar itself
Pagnito
@Pagnito
Apr 17 2017 21:50
@Pagnito or after i resize?
@Pagnito or when i click the button?
Gulsvi
@gulsvi
Apr 17 2017 21:51
@Pagnito Yes, after you resize the screen, you run your .on functions
Or to be clear, the .on functions can't run until you've made your changes to the DOM that they depend on
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:51
@SkyCoder01 if i simply select .navbar , i can change all the navbar color background?
Gulsvi
@gulsvi
Apr 17 2017 21:52
image.png
@Karumba15 In the inspector, it shows me that the class is .navbar-default where you change the background color
Pagnito
@Pagnito
Apr 17 2017 21:53
@SkyCoder01 hmm, ok , i tihnk i get it
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:53
@SkyCoder01 i change with simple .navbar { background-color
i think i wont have troubles with that anymore
@SkyCoder01 Sorry but more one question, how i make the navbar redirect the user to my page, but to the end or in the middle of her?
Gulsvi
@gulsvi
Apr 17 2017 21:56
@Karumba15 Those are called "Bookmark Links" - see this page and scroll down to the section HTML Links - Create a Bookmark for the code: https://www.w3schools.com/html/html_links.asp
Vinicius Otacilio
@Karumba15
Apr 17 2017 21:57
@SkyCoder01 hmm thanks.. i will read right now.. and leave you for a while kkkkk you really help me dude
CamperBot
@camperbot
Apr 17 2017 21:57
karumba15 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: karumba15 already gave skycoder01 points
Pagnito
@Pagnito
Apr 17 2017 21:58
@SkyCoder01 hmm, it works, but now, for some reason, when i load it mobile initially, it doesnt seem to work
@SkyCoder01 hmm, i think i see it tho
@SkyCoder01 wmuahahjaha, im unstoppible!!!!
Gulsvi
@gulsvi
Apr 17 2017 22:01
lol, way to go @Pagnito :)
Pagnito
@Pagnito
Apr 17 2017 22:03
@SkyCoder01 thanks
CamperBot
@camperbot
Apr 17 2017 22:03
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: pagnito already gave skycoder01 points
Pagnito
@Pagnito
Apr 17 2017 22:09
@SkyCoder01 hey whenever u can, i have this problem, that i kept lookin into inbetween other times when i was stuck and still cant figure it out, that in semi mobile mode, i guess tablet, when the there is still margin on both sides of the twitch menu, when i click online or offline or all accordion, and the user list shows up for some reason it stretches the whole menu across the page horizontally
alfredim88
@alfredim88
Apr 17 2017 22:13
Can anyone find any problem with my code? The button just don't work!

$document.ready(function(){

function getQuote(){
var url = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=";

$.getJSON(url, function(data){
  $(".quote").html(data.title);

  });

$(".btn").on("click", function(){
  getQuote();
});

}

})

I'm stuck
Pagnito
@Pagnito
Apr 17 2017 22:16
@alfredim88 can i get link?
alfredim88
@alfredim88
Apr 17 2017 22:16
yes
This is my frist time trying JS and API
Pagnito
@Pagnito
Apr 17 2017 22:21
@alfredim88 i found two problems so far
when u write $document.ready
u suposed to wrap $(document)
and u didnt add jquery cdn to ur codepen
so it didnt recognize jquery syntax
alfredim88
@alfredim88
Apr 17 2017 22:22
ok
Thank you @Pagnito
CamperBot
@camperbot
Apr 17 2017 22:22
alfredim88 sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 209 | @pagnito |http://www.freecodecamp.com/pagnito
Pagnito
@Pagnito
Apr 17 2017 22:22
np
Gulsvi
@gulsvi
Apr 17 2017 22:22
@Pagnito Another example like I was trying to show yesterday, maybe simpler: https://codepen.io/skycoder/pen/ybYYKz?editors=1111
Resize the window and a button will appear - clicking it won't do anything.
alfredim88
@alfredim88
Apr 17 2017 22:24
@Pagnito didn't solve it
any idea?
Pagnito
@Pagnito
Apr 17 2017 22:26
@alfredim88 yea i noticed, hold on
alfredim88
@alfredim88
Apr 17 2017 22:26
ohh ok, sorry
Vinicius Otacilio
@Karumba15
Apr 17 2017 22:31
@SkyCoder01 hey man, i come to bother you again
lhoward465
@lhoward465
Apr 17 2017 22:31
lol, he's vgot class
Vinicius Otacilio
@Karumba15
Apr 17 2017 22:31
@SkyCoder01 is about box model in css, how i change the color inside my box?
lhoward465
@lhoward465
Apr 17 2017 22:32
is it in a div?
Gulsvi
@gulsvi
Apr 17 2017 22:32
I'm just doing homework now, lol
you can help out tho @lhoward465 :p
lhoward465
@lhoward465
Apr 17 2017 22:32
lol
I dunno, I don't want to take those cookies from you :P
add a style or class : background-color: #ccffcc;
Gulsvi
@gulsvi
Apr 17 2017 22:33
haha
lhoward465
@lhoward465
Apr 17 2017 22:33
or whatever colour
honestly, google fu is required :P
Pagnito
@Pagnito
Apr 17 2017 22:34
@alfredim88 still lookin lol, this is weird, ima keep lookin toh, if solce it lemme know what u did
lhoward465
@lhoward465
Apr 17 2017 22:35
I'm headin' to bed, night everyone.
alfredim88
@alfredim88
Apr 17 2017 22:35
It looks good?
If I see anything I will tell
have you already tested the API link?
I don't know If i'm using it correctly
Pagnito
@Pagnito
Apr 17 2017 22:36
@alfredim88 k, ima keep tryin to figure it out, yea i trid to use the one i used for my quote machine, and it did the same thing
Gulsvi
@gulsvi
Apr 17 2017 22:36
@alfredim88 @Pagnito A couple of issues - use https:// for your API URL and data should be data[0]
alfredim88
@alfredim88
Apr 17 2017 22:37
I will try it
Gulsvi
@gulsvi
Apr 17 2017 22:38
You'll also need to call your getQuote() function to run it :)
That's one of the hardest errors to debug.... a function that won't run won't give any errors
alfredim88
@alfredim88
Apr 17 2017 22:38
it has the https:// already
Pagnito
@Pagnito
Apr 17 2017 22:38
@SkyCoder01 he is calling it alrdy on click tho
Gulsvi
@gulsvi
Apr 17 2017 22:38
@Pagnito Look where the click is - that'll be another issue in the future once he gets it working
Pagnito
@Pagnito
Apr 17 2017 22:40
@SkyCoder01 hmm, thats wierd, so the call always has to be before the function?
alfredim88
@alfredim88
Apr 17 2017 22:40
You get it to work @SkyCoder01 ?
Pagnito
@Pagnito
Apr 17 2017 22:41
@Pagnito cuz when i did RegisterHandlerEvent() i put my call after the function
Gulsvi
@gulsvi
Apr 17 2017 22:41
@Pagnito .on() doesn't run because it's inside of a function that never gets called
Pagnito
@Pagnito
Apr 17 2017 22:41
@SkyCoder01 OMG LMAO
Gulsvi
@gulsvi
Apr 17 2017 22:41
@alfredim88 Yes, your getJSON is correct, but it's inside a function that never gets called
Pagnito
@Pagnito
Apr 17 2017 22:41
@SkyCoder01 lol, wow i feel blind
alfredim88
@alfredim88
Apr 17 2017 22:41
I should put the .on outside the getQuote?
Gulsvi
@gulsvi
Apr 17 2017 22:42
Yes, that will help @alfredim88. If you want the function to run when the page first loads, also add another line getQuote() to your document.ready() function
@Pagnito They're hard to debug - functions that don't run don't give errors lol
alfredim88
@alfredim88
Apr 17 2017 22:43
But you made it work?
Pagnito
@Pagnito
Apr 17 2017 22:43
@SkyCoder01 haha yea, i was like WTF how is this not giving ANY response in the console
Gulsvi
@gulsvi
Apr 17 2017 22:43
yes @alfredim88 I made it work
Pagnito
@Pagnito
Apr 17 2017 22:43
@alfredim88 put ur on click function outside out getQuote function
alfredim88
@alfredim88
Apr 17 2017 22:44
already did it, and still not working
Gulsvi
@gulsvi
Apr 17 2017 22:44
Can you save? I will refresh the page and see what might be wrong
Gulsvi
@gulsvi
Apr 17 2017 22:46
@alfredim88 Your API URL must start with HTTPS://
alfredim88
@alfredim88
Apr 17 2017 22:46
ohh, its missing the "S"
is that it?
Gulsvi
@gulsvi
Apr 17 2017 22:46
When your page is loaded over HTTPS, it needs everything else to all be in HTTPS
No, that's not it @alfredim88, now add a console.log(data) to your getJSON function to debug:
    $.getJSON(url, function(data){
      console.log(data);
      $(".quote").html(data.title);
    });
You will be able to see the next error at this point, I think
alfredim88
@alfredim88
Apr 17 2017 22:48
ok
sorry man, I'm stupid
I can't figure it out
Gulsvi
@gulsvi
Apr 17 2017 22:49
No, you're using an API for the first time - it makes us all feel stupid. It's hard to understand
Pagnito
@Pagnito
Apr 17 2017 22:50
@alfredim88 put https in your browser url too
@SkyCoder01 yea skycoder saved me a ton of time with this same problem
Gulsvi
@gulsvi
Apr 17 2017 22:50

Here's one example:

[Object {
  content: "<p>When we engage in what we are naturally suited to do, our work takes on the quality of play and it is play that stimulates creativity.</p>
",
  ID: 1993,
  link: "https://quotesondesign.com/linda-naiman/",
  title: "Linda Naiman"
}]

See how it is in brackets? [ ]

alfredim88
@alfredim88
Apr 17 2017 22:51
yes
Gulsvi
@gulsvi
Apr 17 2017 22:51
it's an array, so you have to do data[0].title
alfredim88
@alfredim88
Apr 17 2017 22:52
THANK YOU @SkyCoder01
CamperBot
@camperbot
Apr 17 2017 22:52
alfredim88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1069 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 17 2017 22:52
@alfredim88 Sure, more challenges left though after this one :)
alfredim88
@alfredim88
Apr 17 2017 22:52
lool
yes
Gulsvi
@gulsvi
Apr 17 2017 22:52

They put it in an array in case you want to get multiple quotes:

[Object {
  content: "<p>It&#8217;s not in the vulgar, it&#8217;s not in the shock that one finds art. And it&#8217;s not in the excessively beautiful. It&#8217;s in between; it&#8217;s in nuance.   </p>
",
  ID: 676,
  link: "https://quotesondesign.com/duane-michals/",
  title: "Duane Michals"
}, Object {
  content: "<p>Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep.  </p>
",
  ID: 5,
  link: "https://quotesondesign.com/scott-adams/",
  title: "Scott Adams"
}]

For example ^^

alfredim88
@alfredim88
Apr 17 2017 22:52
but I'm always stuck on the first one
Than I keep on rolling
;)
Gulsvi
@gulsvi
Apr 17 2017 22:53
One mountain at a time lol
alfredim88
@alfredim88
Apr 17 2017 22:53
@SkyCoder01 I will follow you
And if I get stuck again I will hunt you
muahahaha
Gulsvi
@gulsvi
Apr 17 2017 22:54
lol, I'm usually here
Vinicius Otacilio
@Karumba15
Apr 17 2017 22:54
i need help.. again
I want to make a line on the sides of the about me.
how i do that?
Gulsvi
@gulsvi
Apr 17 2017 22:56
@Karumba15 In the navbar?
Vinicius Otacilio
@Karumba15
Apr 17 2017 22:57
Nop
under
<h1>About Me</h1>
here
Gulsvi
@gulsvi
Apr 17 2017 22:58
Pagnito
@Pagnito
Apr 17 2017 22:59
@SkyCoder01 i dont get it, why isnt the alert working tho?
Paradox5
@Paradox5
Apr 17 2017 23:00
Sjy
Sky
Pagnito
@Pagnito
Apr 17 2017 23:05
@SkyCoder01 alert doesnt seem to work outside the resize function
Gulsvi
@gulsvi
Apr 17 2017 23:06

@Pagnito

// this code runs when the page is opened and the code inside only runs when the window is resized
$(window).on('resize', function() {
  updateSizeDisplay();
  $('#results').html('<button id="newButton">Click Me</button>');
});

// this function runs whenever it's called
function updateSizeDisplay() {
  $('#size').text(window.innerWidth);
}

// this code runs when the page is opened
$('#newButton').on('click', function() {
  alert('I was clicked!')
});

The .on('click') code runs before the window is ever resized and the button isn't created until you resize the window.

So, there's no #newButton to attach that click handler to
The fix is to move it inside the resize function - or wrap the .on('click') in a function and call that function inside the resize function:
// this code runs before document.ready
$(window).on('resize', function() {
  updateSizeDisplay();
  $('#results').html('<button id="newButton">Click Me</button>');
  registerButtonClick();
});

// this function only runs when it's called
function updateSizeDisplay() {
  $('#size').text(window.innerWidth);
}

// this code now runs when it's called, after the button is created
function registerButtonClick() {
  $('#newButton').on('click', function() {
    alert('I was clicked!')
  });
}
Pagnito
@Pagnito
Apr 17 2017 23:10
@SkyCoder01 i see i see, yea that def helps, even better understand, since i thought before that on ran when i clicked it, and that was def a big mindfck. tho i did solve that problem in my code. I was asking about my menu element width increasing for some reason on mobile screen when i click online or any other link to drop down user list
@Pagnito even if i make my user btns col-8 or col-6 or w/e it still stretches
Gulsvi
@gulsvi
Apr 17 2017 23:12
@Pagnito I'm not seeing that for some reason - can you send me a screenshot?
Pagnito
@Pagnito
Apr 17 2017 23:13
k, u gotta open it in like 500px
hold on tho
how do i post the screenshot in here
Gulsvi
@gulsvi
Apr 17 2017 23:15
I do Alt+PrtScrn, Ctrl+V into MS paint, select what I want to copy, Ctrl+C and then Ctrl+V into chat
I cannot type lol
Pagnito
@Pagnito
Apr 17 2017 23:15
lol
prtScn?
Gulsvi
@gulsvi
Apr 17 2017 23:17
Is this it?
image.png
Pagnito
@Pagnito
Apr 17 2017 23:17
nah
minimize it down to 500px
then click online
and see how the width of the parent go to full width
Gulsvi
@gulsvi
Apr 17 2017 23:17
image.png
Pagnito
@Pagnito
Apr 17 2017 23:18
yup!
Gulsvi
@gulsvi
Apr 17 2017 23:18
Yeah, looks good
sky it stop working
Pagnito
@Pagnito
Apr 17 2017 23:18
hehe thanks, tho i dont want it to strech like that, i want it to stay the same width
unless can animate the stretch, it would b ok
tho i i couldnt figure out why it stretches so i couldnt do the animation
Vinicius Otacilio
@Karumba15
Apr 17 2017 23:19
How do I position an image next to a text?
alfredim88
@alfredim88
Apr 17 2017 23:20
put it inside a span
or a div, and float left and right
Pagnito
@Pagnito
Apr 17 2017 23:20
@alfredim88 whats not working? its working on my end besides that it caches the quote, and doesnt give u a new one, at least thats the way i understand it at this moment
alfredim88
@alfredim88
Apr 17 2017 23:21
It's not working. not even the first quote
Vinicius Otacilio
@Karumba15
Apr 17 2017 23:21
i float to the right but is at the right, but under the text
Jorge
@OrangeKulture
Apr 17 2017 23:21
hey guys