These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Nov 2017
i think they're all defined and ready to use when you put them in curlys
texirv0203
@texirv0203
Nov 13 2017 00:01 UTC

hi,

using hashtable how to find which number is ocurring how many times for example in 33767999we need to 3 has occurred 2 times, 7 two times and 9 three times

Ken Haduch
@khaduch
Nov 13 2017 00:44 UTC
@texirv0203 - did you get the idea of my first part / suggestion that I posted in the other room?

@texirv0203 - it was to convert a value that is a number to a string, then split it. That gives you access to an array of the individual digits.

var num = 33767999;
num.toString().split('').forEach(
// you write a function here
);

the function within the .forEach() method would be able to access the individual elements of the array, and build the hash in an object.

Ken Haduch
@khaduch
Nov 13 2017 00:50 UTC
you could also take that same array, after the .split() and use a for loop to access the elements. I'm not sure what your level of exposure is to various code functions in JavaScript.
texirv0203
@texirv0203
Nov 13 2017 00:54 UTC
@khaduch hey how to build hash...I have never used hash before :(
Ken Haduch
@khaduch
Nov 13 2017 00:57 UTC

@texirv0203 - in this context, I would say that you need to make this "hash" as an object. Each key/value pair in the object will be a key consisting of one of the digit values in the string, and the value would be the number of times that it occurs in the number. So you would want to end up with an object, for your example digit string, that looks like this:

{3: 2, 6: 1, 7: 2, 9: 3}
3: 2
6: 1
7: 2
9: 3

Are you familiar with creating objects in javascript?

Daniel
@DanJP2016
Nov 13 2017 01:13 UTC
anybody using vim?
Ken Haduch
@khaduch
Nov 13 2017 01:14 UTC
@DanJP2016 - I haven't used it in a long time!
Daniel
@DanJP2016
Nov 13 2017 01:18 UTC
cool, I was wondering how to set it up for python and javascript or if it was even worth using it over sublime or vscode
Ken Haduch
@khaduch
Nov 13 2017 01:23 UTC
@DanJP2016 - try this article: https://realpython.com/blog/python/vim-and-python-a-match-made-in-heaven/ - seems like that author thinks it's a great thing!
Evan Kalvis
@evan17gr
Nov 13 2017 01:30 UTC
anyone familiar with python?
Devin Miller
@edwin0258
Nov 13 2017 01:31 UTC
@evan17gr Yes
texirv0203
@texirv0203
Nov 13 2017 01:31 UTC
@khaduch no...how to achieve it :(
Evan Kalvis
@evan17gr
Nov 13 2017 01:33 UTC
it doesnt print anything
Devin Miller
@edwin0258
Nov 13 2017 01:33 UTC
ok, one sec.
Evan Kalvis
@evan17gr
Nov 13 2017 01:34 UTC
alright thanks!
Devin Miller
@edwin0258
Nov 13 2017 01:40 UTC
@evan17gr Ok, I've got it printing something, not sure if it was you need. (You had an infinite loop before by the way)
n = int(input("Enter a positive integer to retrieve all the values of the Fibonacci series that correspond to this input : "))
def fib(n) :
v1 = 0
v2 = 1
while n > 0 :
for i in range(n):
v1,v2 = v2,v1+v2
print(v1, v2)
n-=1
fib(n)
Evan Kalvis
@evan17gr
Nov 13 2017 01:43 UTC
alright cheers i ll try to make it work
Devin Miller
@edwin0258
Nov 13 2017 01:43 UTC
:thumbsup:
Tyler Del Rosario
@TylerDelRosario
Nov 13 2017 01:49 UTC
Hey, I'm trying to run sudo install learnyounode -g in the cloud9 terminal in my blank workspace and it doesnt work :/
Devin Miller
@edwin0258
Nov 13 2017 01:50 UTC
It should be npm install learnyounode -g I think @TylerDelRosario
Tyler Del Rosario
@TylerDelRosario
Nov 13 2017 01:51 UTC
@edwin0258 same error occurs module.js:471 throw err;
Devin Miller
@edwin0258
Nov 13 2017 01:52 UTC
hmm, let me try it myself. One min. @TylerDelRosario
@TylerDelRosario Did you change the workspace before you tried installing in any way?
Tyler Del Rosario
@TylerDelRosario
Nov 13 2017 01:55 UTC
nope its a blank
Devin Miller
@edwin0258
Nov 13 2017 01:55 UTC
Can you screenshot your cloud 9 interface? @TylerDelRosario
nvm I can open your workspace on my side.
Ken Haduch
@khaduch
Nov 13 2017 01:58 UTC

@texirv0203 - these are some basics about how to make an object that you need to use for this hash / number counter.

var myObj = {}; // initialize an empty object
var anyNum = 8;
myObj[anyNum] = 1; // after this, the object should have an entry with a key of "8", value of "1"
myObj[anyNum]++;  // after this, the object should have an entry with a key of "8", value of "2"
anyNum = 5;
myObj[anyNum] = 1; // after this, the object should still have the entry for "8" and a new entry with a key of "5", value of "1"
myObj[anyNum]++;  // after this, the object should have an entry with a key of "5", value of "2"

if you take that code and experiment with it, for example in a browser devtools console, you can see what's happening. Or you can go to http://pythontutor.com/javascript.html and plug it in, and run it.

@texirv0203 - that's showing the basics of what you will eventually want to have coded to solve your problem - getting the individual values into a variable where you can use them to accumulate your data in the object.
Rodney Chism
@rodchsm
Nov 13 2017 02:03 UTC

I have some questions but one question at a time.

In my CSS, the .navbar-brand img connects to my logo in the top left corner of my bootstrap navbar. Its off center in that corner. Does anyone know how to position the logo correctly? Let me know. Thanks

Thats the navbar-brand img selector in my CSS
Devin Miller
@edwin0258
Nov 13 2017 02:07 UTC

@rodchsm

.navbar-brand img {
height: 50px;
margin-top: -15px;
}

Try this. Because there is a lot of padding in actual image I had to use a negative margin.

Ken Haduch
@khaduch
Nov 13 2017 02:09 UTC
@rodchsm - I got it to center just by cleaning up the code in your CodePen - removing the <html>, <head> code into the proper places in the CodePen interface. Then it works...
@rodchsm - here is a link to the CodePen that I edited from yours and forked.
Rodney Chism
@rodchsm
Nov 13 2017 02:11 UTC
@khaduch thanks.
CamperBot
@camperbot
Nov 13 2017 02:11 UTC
rodchsm sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3496 | @khaduch |http://www.freecodecamp.com/khaduch
Rodney Chism
@rodchsm
Nov 13 2017 02:12 UTC
@khaduch i will check it out after this
@edwin0258 how did you figure out there was a lot of padding in the image
Ken Haduch
@khaduch
Nov 13 2017 02:12 UTC
@rodchsm - I"m not sure what in particular might have been causing the issue. It was just my first impression to move the external libs into the proper places for CodePen's template-based system.
Devin Miller
@edwin0258
Nov 13 2017 02:14 UTC
I opened the image by iteself. It's ok though, I think @khaduch 's solution is better. @rodchsm
Rodney Chism
@rodchsm
Nov 13 2017 02:16 UTC
@edwin0258 @edwin0258 I have one more question. Why isnt my .backgroundheader image fitting all the space. In other words, why is the full image of the picture not show up to cover the h1 and the button. Is there a solution?
Ken Haduch
@khaduch
Nov 13 2017 02:17 UTC
@rodchsm - what might have been going on is that when you include the links for the CSS and JS code in the HTML panel is that CodePen will generate the HTML page and things will get loaded in the wrong order. For example, your custom CSS will get loaded in the <head> section, but then the HTML section will be inserted into the output HTML code and probably conflict with your custom settings. By putting the external CSS in the CSS config panel, things get loaded in the proper order. You might be able to see what is going on if you load your page as it is now, and do a "View Frame Source" for the output panel.
Devin Miller
@edwin0258
Nov 13 2017 02:22 UTC
@rodchsm Only way I can think of is to remove background-attachment and add background-position with a value of center. But in order to cover the area you've specified it has to cut off some of the image.
Rodney Chism
@rodchsm
Nov 13 2017 02:22 UTC
@khaduch ok its my second time using codepen. Thats great information especially for the first question. However even in dreamweaver the CSS for the .backgroundheader is off. Do I need to use a background-size: contain; or something else to expand the image fully. I have been trying for an hour to fit that image.
@edwin0258 theres no way to fit all? :(
Devin Miller
@edwin0258
Nov 13 2017 02:23 UTC
There are ways. Like making the container holding background image a larger size.
Ken Haduch
@khaduch
Nov 13 2017 02:24 UTC
@rodchsm - so you want the full image to be in the rather small space at the top of the page?
Rodney Chism
@rodchsm
Nov 13 2017 02:25 UTC
@khaduch yes i was going to have it look like my old site techhut.bigcartel.com.
Ken Haduch
@khaduch
Nov 13 2017 02:26 UTC
@rodchsm - if you shrink the width of the browser window to ba as small as you can get it, you'll see that the picture in the background will resize to be more-or-less showing the full image. The main problem is that the proportions of the image and the area that you are trying to fill are way off.
Rodney Chism
@rodchsm
Nov 13 2017 02:28 UTC
@edwin0258 Ill try that.
@khaduch oh ok! So, the image's dimensions are the wrong size for a regular browser?
*a browser
Ken Haduch
@khaduch
Nov 13 2017 02:31 UTC
@rodchsm - yes - your old site had a front page that filled the screen or at least had a much larger size so the images were able to be shown completely.
Rodney Chism
@rodchsm
Nov 13 2017 02:34 UTC
@khaduch @edwin0258 alright thanks guys. Ill get to work. Is there anything else I need to know?
CamperBot
@camperbot
Nov 13 2017 02:34 UTC
rodchsm sends brownie points to @khaduch and @edwin0258 :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 812 | @edwin0258 |http://www.freecodecamp.com/edwin0258
Ken Haduch
@khaduch
Nov 13 2017 02:36 UTC

@rodchsm - some of the settings for the old site for that top section, the selector

.slideshow div.featured_holder {
background-color: rgba(0, 0, 0, 0.3);
background: url("//cache1.bigcartel.com/theme_assets/91/1.4.10/images/overlay_pattern.png");
background-repeat: repeat;
background-size: 4px;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}

Has the height and width settings set to 100%, so it fills the screen.

Dr-D-M
@Dr-D-M
Nov 13 2017 02:48 UTC
hello there!
Rodney Chism
@rodchsm
Nov 13 2017 02:49 UTC
@khaduch I threw the 100% for width and height into the .backgroundheader declaration section but it seems the image is locked into the div class="backgroundheader" section. Any suggestions?
Dr-D-M
@Dr-D-M
Nov 13 2017 02:49 UTC
Have you done the wikipedia viewer project?
Devin Miller
@edwin0258
Nov 13 2017 02:50 UTC
@rodchsm Height of 100% doesn't work, use something like 100vh.
Rodney Chism
@rodchsm
Nov 13 2017 02:53 UTC
@edwin0258 is that why? I used 350vh and it worked. ha
Devin Miller
@edwin0258
Nov 13 2017 02:55 UTC
Yeah :) @rodchsm
Rodney Chism
@rodchsm
Nov 13 2017 02:59 UTC
@edwin0258 ok so what if I wanted to go mobile with the viewport height would mess up the mobile page. therefore, would I just code a seperate page for mobile or something like that/
Devin Miller
@edwin0258
Nov 13 2017 03:02 UTC
I suppose you could use a @media query to change the height if the size is mobile. @rodchsm
Randy
@rdavidson3
Nov 13 2017 03:43 UTC
Hello all, I am working on a a bootstrap task and although I have the challlege right It feels as if a div tag is missing. Am I over thinking it? Would anyone mind checking over the code?
abraham anak agung
@padunk
Nov 13 2017 03:47 UTC
@rdavidson3 post your code or link here. Maybe someone able to help
Randy
@rdavidson3
Nov 13 2017 03:52 UTC

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
h2 {
font-family: Lobster, Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>

<div class="row">

<div class="col-xs-8">

<h2 class="text-primary text-center">CatPhotoApp</h2>

<div class="col-xs-4"><a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>
</div>

<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>

Funny enough after reading it over enough I see where I became confused. that first
<Div class= "row"> isn't a part of the <div class="col-xs-*>. As I read it , It's a box within a box within a smaller box?
1rjun
@1rjun
Nov 13 2017 03:57 UTC
can anyone suggest my any website to download web development books
for free
like books of html css and javascript
Long Nguyen
@longnt80
Nov 13 2017 03:58 UTC
some of the best book for js are free to read
1rjun
@1rjun
Nov 13 2017 03:58 UTC
any website ???
Long Nguyen
@longnt80
Nov 13 2017 03:58 UTC
and You Don't Know JS
1rjun
@1rjun
Nov 13 2017 03:58 UTC
to download free material
abraham anak agung
@padunk
Nov 13 2017 03:58 UTC
@rdavidson3 nothing wrong with your code
1rjun
@1rjun
Nov 13 2017 03:58 UTC
yes i know js
but i want to master it
as well as html and css @longnt80
Long Nguyen
@longnt80
Nov 13 2017 03:59 UTC
have you read You Don't Know JS?
1rjun
@1rjun
Nov 13 2017 03:59 UTC
what?
ohkk
abraham anak agung
@padunk
Nov 13 2017 04:00 UTC
@1rjun its a book,
1rjun
@1rjun
Nov 13 2017 04:00 UTC
suggest me
its link to download
Long Nguyen
@longnt80
Nov 13 2017 04:01 UTC
Daniel
@DanJP2016
Nov 13 2017 04:03 UTC
thats written by kyle simpson is'nt it?
Long Nguyen
@longnt80
Nov 13 2017 04:04 UTC
yep
Daniel
@DanJP2016
Nov 13 2017 04:06 UTC
cool, may have to check that out. watched some of his videos on front end masters, good stuff
Randy
@rdavidson3
Nov 13 2017 04:08 UTC
@padunk Thank you for checking it over. I figured it out. I need to figure out a system to make the code more organized.
CamperBot
@camperbot
Nov 13 2017 04:08 UTC
rdavidson3 sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @padunk |http://www.freecodecamp.com/padunk
abraham anak agung
@padunk
Nov 13 2017 04:10 UTC
@rdavidson3 np, use tab, indent and space to make it easier to read
Ken Haduch
@khaduch
Nov 13 2017 04:23 UTC
@rdavidson3 - the other thing to do when posting code here in the chatroom is to use the Markdown format, which is, basically, putting a line with only three backticks on it  before and after your code block, and you can read the documentation on the freecodecamp forum: https://forum.freecodecamp.com/t/markdown-code-formatting/18391
Randy
@rdavidson3
Nov 13 2017 04:24 UTC
Thanks for the tip @padunk I'm attempting to break up the code in that way now. Thanks for the link @khaduch :)
CamperBot
@camperbot
Nov 13 2017 04:24 UTC
rdavidson3 sends brownie points to @padunk and @khaduch :sparkles: :thumbsup: :sparkles:
api offline
:star2: 3497 | @khaduch |http://www.freecodecamp.com/khaduch
1rjun
@1rjun
Nov 13 2017 04:39 UTC
this is my github repos
can anyone help me
to sort out my problem in the article <section >tab
1rjun
@1rjun
Nov 13 2017 04:45 UTC
def ajrun:
Seah Eng Chye
@Seahchye
Nov 13 2017 04:48 UTC
Hi all, got a question here
in these codes, why was html += used?
this is from the JSON challenge
Sorin Ruse
@sorinr
Nov 13 2017 04:55 UTC
@Seahchye its same as html = html + .....
@Seahchye just a shortcut for additions
Seah Eng Chye
@Seahchye
Nov 13 2017 04:56 UTC
I got it, there is an empty html container that adds these details in
@sorinr thank
CamperBot
@camperbot
Nov 13 2017 04:56 UTC
seahchye sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1354 | @sorinr |http://www.freecodecamp.com/sorinr
Rodney Chism
@rodchsm
Nov 13 2017 05:23 UTC

Does anyone know how to change my bootstrap .navbar into a different color? #1c7089

https://codepen.io/rodchsm/pen/POmBje

abraham anak agung
@padunk
Nov 13 2017 05:46 UTC
@rodchsm delete navbar-inverse class and put your backgound color
Ryan
@Ryan-ED
Nov 13 2017 06:17 UTC
Hi, guys. So I'm working on my Twitch.tv app for the front end course and the Twitch API needs an OAuth token. I don't think it's a good idea to have my OAuth token on full display in my CodePen. Is there any workaround?
I don't want to hardcode that JSON object either. That's just bad practice and it's hacky
Any help would be awesome
Please DM me so that I can find the message easily. I know this chat room gets extremely busy
Sorin Ruse
@sorinr
Nov 13 2017 06:19 UTC

@rodchsm or you may add this to css:

nav.navbar-inverse{
background-color: #1c7089;
}

to override the default BS bg color

Johnny
@jtan3
Nov 13 2017 06:41 UTC
@Ryan-ED there's a workaround https://wind-bow.glitch.me/ step 9 in the instructions
Grimmeu
@Grimmeu
Nov 13 2017 06:47 UTC
Hello there. I study Frontend Developer couse. Could somone review my first tribute page on codepen?
Sorin Ruse
@sorinr
Nov 13 2017 06:54 UTC
@Grimmeu for the ​col-md-xx to work properly in BS you need a parent element with class row. I also recommend you to change the content to english. i'm sure you will find info in English about Alexander Nicolaevich on wikipedia
Grimmeu
@Grimmeu
Nov 13 2017 06:59 UTC
@sorinr This is my first project so i decided to do it with my native language. I get your point about language. Should i use parent with class 'row' every time i want to use class 'clo-md-xx'?
Sorin Ruse
@sorinr
Nov 13 2017 07:01 UTC
@Grimmeu yes. bootstrap 3.3.7 is structured that way. a parent div.row is divided in columns by using columns(col-yy-xx)
@Grimmeu read here on bs 3.3.7 grid system
Grimmeu
@Grimmeu
Nov 13 2017 07:07 UTC
@sorinr Get it. Any other suggestion to improve?
Markus Kiili
@Masd925
Nov 13 2017 07:11 UTC
@Grimmeu Maybe you could remove the cursing words from the page title. If you look for a developer job later, recruiters google things about you and such things can offend some people.
Sorin Ruse
@sorinr
Nov 13 2017 07:15 UTC
@Masd925 :+1: I don't know why but i most of the time don't look at the page title. i've noticed it after you pointed it out :)
Sorin Ruse
@sorinr
Nov 13 2017 07:40 UTC
@Grimmeu i would also make the ul on biography part like <ul class=" col-md-10 col-md-offset-1"> to give more spread width to the text
c-kirkeby
@c-kirkeby
Nov 13 2017 07:48 UTC
Hi all, I'm working on rewriting my portfolio milestone in React but I want to leave my other milestones as is and link to them in my app. I'm using create-react-app and I've got my other static HTML/CSS/JS files stored in a structure like e.g. src/portfolio/twitch/index.html. Does anybody know the best way to route to them? If I create a normal <a href="./portfolio/twitch/index.html"> then it just redirects me back to my React app. I looked into React Router but it seems to exclusively want to render a component, which my static HTML pages are not. Any advice on this would be much appreciated.
abraham anak agung
@padunk
Nov 13 2017 08:01 UTC
@JheeBz Hi, i never doing that before, but since React is made by component, why don't you link twitch component into your portfolio? you could use react-router Link and your twitch project as a component
Danny McVey
@dannymcvey
Nov 13 2017 08:06 UTC
@Grimmeu It looks like the example, nice work! Do you think you can make the same exact page WITHOUT bootstrap though? That's one way to test whether you understand HTML and CSS well enough before moving on to JavaScript.
Sorin Ruse
@sorinr
Nov 13 2017 08:10 UTC
@JheeBz take a look to the react-router
c-kirkeby
@c-kirkeby
Nov 13 2017 08:11 UTC
I've looked at React Router but it only seems to render React Components. These are static HTML pages.
Sorin Ruse
@sorinr
Nov 13 2017 08:13 UTC
so what? you can define your static pages as a react component
c-kirkeby
@c-kirkeby
Nov 13 2017 08:13 UTC
How would you recommend doing that?
abraham anak agung
@padunk
Nov 13 2017 08:15 UTC
your static page is not made with React?
c-kirkeby
@c-kirkeby
Nov 13 2017 08:15 UTC
They are not. They're my already completed front-end milestones.
Sorin Ruse
@sorinr
Nov 13 2017 08:15 UTC
i would just write the static html page as a react component and instruct the react-router what component to inject nto my page base on the route match
@JheeBz then a simple <a> tag to href to your static page will go fine
c-kirkeby
@c-kirkeby
Nov 13 2017 08:18 UTC
So copy and paste the HTML into a React component? That's awfully messy, won't I have to de-render the rest of the page?
I just want to open them in a new tab.
Sorin Ruse
@sorinr
Nov 13 2017 08:19 UTC
then you may use the <a>
c-kirkeby
@c-kirkeby
Nov 13 2017 08:20 UTC
Well that's what I've tried to do, but it just renders my React app at the path /portfolio/twitch/index.html.
BERTINI Nickolas
@BERTININickolas
Nov 13 2017 08:45 UTC
Hey everyone, i've almost finished my jQuery calculator. Can someone explain me why the last three buttons don't align with the others ? I think there is some margin somewhere but i can't find it. https://codepen.io/Ophe/pen/JOWQJW?editors=1111
dinesh
@1532j0004kg
Nov 13 2017 09:08 UTC
which three buttons?
BERTINI Nickolas
@BERTININickolas
Nov 13 2017 09:10 UTC
three bottoms
dinesh
@1532j0004kg
Nov 13 2017 09:11 UTC
ok wait i try to fix.
Henry
@GitHub-Henry
Nov 13 2017 09:26 UTC
@Ophellia just by looking at the calculator, it appears the zero button is to large.
The end of zero button does not line up with your other buttons, 2 & 5 for instance
c-kirkeby
@c-kirkeby
Nov 13 2017 09:28 UTC
Looks like I needed to include my static pages in /public. Thanks for your help @sorinr
CamperBot
@camperbot
Nov 13 2017 09:28 UTC
jheebz sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1355 | @sorinr |http://www.freecodecamp.com/sorinr
Hussain Ruhollah
@Hussain-Ruhullah
Nov 13 2017 09:32 UTC
hi guys i want to creat a facebook page ( freeCodeCamp Kreis Borken ) why its not working ?
BERTINI Nickolas
@BERTININickolas
Nov 13 2017 09:32 UTC
using bootstrap it should take 50% of the space available, like button 1 and 2 take 25% each other
Hussain Ruhollah
@Hussain-Ruhullah
Nov 13 2017 09:32 UTC
can any one here help
dinesh
@1532j0004kg
Nov 13 2017 09:33 UTC
@Ophellia try this
Ever Lord
@ev3rlord
Nov 13 2017 09:35 UTC
@Ophellia Oh yeah but it still didn't solve your problem my bad
since screen sizes vary
BERTINI Nickolas
@BERTININickolas
Nov 13 2017 09:54 UTC
i've nested my 0 button inside a div with class col-6 which take 50% of the width, and then modify the padding inside the div
Tiago Correia
@tiagocorreiaalmeida
Nov 13 2017 10:02 UTC
try to avoid this type of things :D I did the same mistake back then
Iam@Leet_Programmer
@leet-hacks
Nov 13 2017 10:26 UTC
hi everyone i just want to toggle many colors but it's only toggling one color and i dont know what wrong with my code
_
abraham anak agung
@padunk
Nov 13 2017 10:44 UTC
@leet-hacks your code toggle between white and #c...
Iam@Leet_Programmer
@leet-hacks
Nov 13 2017 10:50 UTC
yeah but i want it to toggle between the two colors
primuscovenant
@primuscovenant
Nov 13 2017 10:56 UTC
@heroiczero tx
CamperBot
@camperbot
Nov 13 2017 10:56 UTC
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2056 | @heroiczero |http://www.freecodecamp.com/heroiczero
abraham anak agung
@padunk
Nov 13 2017 11:08 UTC
@leet-hacks which colors? Than u need if true show colors[i] if false show colors[i+1]
If u want random colors, put your colors in an array and use math.random
var colors = ['white', 'orange', 'blue']; var color = colors[Math.floor(Math.random()*colors.length)]; console.log(color); something like that and u dont need isColor variable
Stephen James
@sjames1958gm
Nov 13 2017 11:12 UTC
@leet-hacks Your code always selects the last color in the array. Your i variable you don't need a loop but a global idnex variable if you want to select from the array.
Or use the random code as described above
dinesh
@1532j0004kg
Nov 13 2017 11:13 UTC
@rajarahull what is the error ?
Iam@Leet_Programmer
@leet-hacks
Nov 13 2017 11:30 UTC
Thanks @padunk it working fine now
CamperBot
@camperbot
Nov 13 2017 11:30 UTC
leet-hacks sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @padunk |http://www.freecodecamp.com/padunk
Iam@Leet_Programmer
@leet-hacks
Nov 13 2017 11:31 UTC
but i thought i would loop through the colors and change the background color to the color i looped
Roge
@RogeMateos
Nov 13 2017 11:36 UTC
@ashwins93 yes that is right
hello guys i need some help with a background route it is driving me crazy
abraham anak agung
@padunk
Nov 13 2017 11:44 UTC
@leet-hacks np. u dont need loop for that
alessiochiffi
@alessiochiffi
Nov 13 2017 11:44 UTC
Hi all I have just finished the first part of a small project with free API. Any feedback is appreciated https://alessiochiffi.github.io/snapnews/
Seah Eng Chye
@Seahchye
Nov 13 2017 11:46 UTC
Hi all I am doing the random quote machine challenge
but i am not sure how to proceed from here
abraham anak agung
@padunk
Nov 13 2017 11:49 UTC
@alessiochiffi nice ui, a link to the news is even better. What news company after financial times? The logo didnt show up
Stephen James
@sjames1958gm
Nov 13 2017 11:50 UTC
@Seahchye If you have confirm that you are getting the quotes (maybe use console.log in your forEach)
You can then examine the json and determine what string values you want to put into your page.
you can use the browser DOM API or something like jquery to do that
alessiochiffi
@alessiochiffi
Nov 13 2017 11:50 UTC
@padunk thanks! I have inserted a placeholder for articles without images
CamperBot
@camperbot
Nov 13 2017 11:50 UTC
alessiochiffi sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 391 | @padunk |http://www.freecodecamp.com/padunk
Stephen James
@sjames1958gm
Nov 13 2017 11:51 UTC
@leet-hacks Each click drives the next color - so you don't need a loop.
Roge
@RogeMateos
Nov 13 2017 11:53 UTC
can anyone tell me why this route is not working please
Seah Eng Chye
@Seahchye
Nov 13 2017 11:54 UTC
@sjames1958gm How do i confirm? clicking on the button?
abraham anak agung
@padunk
Nov 13 2017 12:00 UTC
@RogeMateos is it background-image
Stephen James
@sjames1958gm
Nov 13 2017 12:00 UTC
@Seahchye Not sure I understand your question.
Assume you have global
var colorIndex = 0;
in your click handler
if (isColor) {
// set color to white
} else {
// color is colors[colorIndex]
colorIndex = (colorIndex + 1) % color.length
}
isColor = !isColor;
@RogeMateos src looks like a server side directory - looking at your dist directory there is no src
Seah Eng Chye
@Seahchye
Nov 13 2017 12:02 UTC
@RogeMateos has a file called 'src', the code might be confused here
Roge
@RogeMateos
Nov 13 2017 12:03 UTC
i also tried ../img/background_vinyl.jpg
Seah Eng Chye
@Seahchye
Nov 13 2017 12:04 UTC
@sjames1958gm I set up the codes through FCC JSON lessons, but I dont get what is colorIndex
Bhoomi Khanderia
@bhoomikhanderia
Nov 13 2017 12:07 UTC
Hello! How can I implement scroll triggered animation?
Ryan
@Ryan-ED
Nov 13 2017 12:13 UTC
thanks @jtan3
CamperBot
@camperbot
Nov 13 2017 12:13 UTC
ryan-ed sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 463 | @jtan3 |http://www.freecodecamp.com/jtan3
Stephen James
@sjames1958gm
Nov 13 2017 12:20 UTC
@Seahchye colorIndex would replace your i in the for loop - a global index into your colors
alpox
@alpox
Nov 13 2017 12:22 UTC
@Bhoomi-Github Lil bit of jquery :-)
Bhoomi Khanderia
@bhoomikhanderia
Nov 13 2017 12:24 UTC
@alpox Hi! Yes I was googling it but did not find anyhting specific. I want an image to appear on scroll and settle with overshoot kind of animation
Renan Cunha
@sarkioja
Nov 13 2017 13:22 UTC
Hey guys! Newbie here.
Just finish my first project (The tribute page). Could someone review ?
https://codepen.io/sarkioja/full/zPZoLY
Tks!
Pascal Clanget
@Gh05d
Nov 13 2017 13:23 UTC

Hey folks, I get this error in my react application:

POST http://localhost:4000/graphql 500 (Internal Server Error)
HTTPFetchNetworkInterface.fetchFromRemoteEndpoint @ apollo.umd.js:520
(anonymous) @ apollo.umd.js:535

This is my networkInterface:

const networkInterface = createNetworkInterface({
uri: "http://localhost:4000/graphql",
opts: {
credentials: "same-origin",
mode: "no-cors" //remove this for production => Security!
}
});

Did I declare something wrong? Without the anti cors option, I get an cross-server-error.

Pascal Clanget
@Gh05d
Nov 13 2017 13:29 UTC
@sarkioja looks good. Add target="_blank" to the link so that they work properly when being clicked on
Renan Cunha
@sarkioja
Nov 13 2017 13:31 UTC
@Gh05d Tks for the heads up! I forgot about that. Already update the code.
Shahe Imran
@imonboss
Nov 13 2017 14:34 UTC
Hey Guys, I am new to this Group
Markus Kiili
@Masd925
Nov 13 2017 14:36 UTC
@imonboss Hi.
Shahe Imran
@imonboss
Nov 13 2017 14:36 UTC
Hi @Masd925
Ken Haduch
@khaduch
Nov 13 2017 14:38 UTC
@imonboss - hey, welcome to freeCodeCamp (if you're new to the program) and welcome to HelpFrontEnd
Shahe Imran
@imonboss
Nov 13 2017 14:42 UTC
Yes I am brand New to this world @khaduch
Ken Haduch
@khaduch
Nov 13 2017 14:43 UTC
@imonboss - welcome aboard!
Shahe Imran
@imonboss
Nov 13 2017 14:43 UTC
Thanks Captain @khaduch
CamperBot
@camperbot
Nov 13 2017 14:43 UTC
imonboss sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3499 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Nov 13 2017 14:44 UTC
@imonboss :)
Shahe Imran
@imonboss
Nov 13 2017 14:44 UTC
@khaduch :D
Hope I will have all the Noob Help I need from this awesome community :)
Ken Haduch
@khaduch
Nov 13 2017 14:45 UTC
good to have new people coming into the chat rooms - there used to be a lot more activity here, it's a good learning environment, many good contributors to help out here.
Shahe Imran
@imonboss
Nov 13 2017 14:46 UTC
Happy to be part of this nice community! Hopefully I will learn many new things
lion18
@lion18
Nov 13 2017 15:19 UTC
How can I use the link in 27th Line JS to add background image or icon to https://codepen.io/lion18/pen/yzrKQw
dinesh
@1532j0004kg
Nov 13 2017 15:30 UTC
which link if u can send/
tundeiness
@tundeiness
Nov 13 2017 15:50 UTC
hi all any ideas on how to split multiple results from wikisearch into paragraphs in my html on the fly?. that is I want my html to know the amount of search result and then create that amount of paragraphs and then slot each results into their respective paragraphs in no particular order?
how are you getting results / or what do results come as
i had single div and i would append each item to
Paul
@candlefish
Nov 13 2017 17:49 UTC
@tundeiness In the Ajax success code block — success: function (data) { ... } — you could create an array to hold the results of data.query.pages`and then use the length of that array to create a loop which creates the right number of paragraphs, each with one of the results.
Max Voronov
@maxv
Nov 13 2017 18:51 UTC
Hello everyone :)
Kaz Baig
@kbaig
Nov 13 2017 19:00 UTC
@maxv :wave:
Marius Nicolae
@bytao7mao
Nov 13 2017 19:08 UTC
Hello guys, can someone help in understanding a little problem ?
A-J Roos
@Asjas
Nov 13 2017 19:09 UTC
@bytao7mao You post the problem you have and someone will assist if they can
Marius Nicolae
@bytao7mao
Nov 13 2017 19:13 UTC

I have the following :

"Create a view consisting of a list of battles. The list should be:
-filterable by attacker and /or defender country;
-searchable by country (eg. I search for italy, the list should display only battle with italy as defender or attacker)
UI/UX bonus points!
API: www.exampleee.com/en/etc

I have a json file and from what i understand i have to make some API calls ?
Max Voronov
@maxv
Nov 13 2017 19:18 UTC
@bytao7mao The link leads to an error page
Marius Nicolae
@bytao7mao
Nov 13 2017 19:23 UTC
the link is fictiv
Marius Nicolae
@bytao7mao
Nov 13 2017 19:28 UTC
I understand that : if i make a search box and it returns the country with the battle as defender or attacker winner or what ?
Ivan Ngundela
@ingundela
Nov 13 2017 19:35 UTC
hello everyone...I'm working on my portfolio website and need some help.. the link is https://ingundela.github.io/portfolionew/ I want to change the color of the navigation menu from white to light grey but when I target the nav-item a it changes the all list and the spyscroll does not work.. please help.. all I want is just to change the color white and also have I hover it it changes to the yellow as #navbarNav .nav-link.active {
color: #FDCD3B;
}THANK YOU
Randy
@rdavidson3
Nov 13 2017 19:52 UTC
Hello everyone, I 'm having a little trouble centering an image using bootstrap3. I've tried a number of different code strings but no luck. Any one have an idea what I am doing wrong?
Renan Cunha
@sarkioja
Nov 13 2017 19:56 UTC
@rdavidson3 Already tried to nest the image under a div with class="thumbnail center" ?
Max Voronov
@maxv
Nov 13 2017 19:56 UTC
@rdavidson3 Please upload code example in codepen so we can play with it
Randy
@rdavidson3
Nov 13 2017 19:58 UTC
This is the latest attempt. (FYI I'm still not sure how to use code markdown as was recommened last night)

<H1 class="text-center"> Nikola Tesla</H1>

<div class="container">
<div class="col-sm-5" >
<img class="img-responsive center-block" src= "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/03/Tesla-compulsions-and-thinking3.jpg">
</div>
</div>

<div class="text-center">The Master of Electricity</div>

Randy
@rdavidson3
Nov 13 2017 20:06 UTC
@maxv @sarkioja thanks for the response. I tried creating another <div> with class thumbnail center but, alast still not center.
CamperBot
@camperbot
Nov 13 2017 20:06 UTC
rdavidson3 sends brownie points to @maxv and @sarkioja :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 113 | @sarkioja |http://www.freecodecamp.com/sarkioja
Bryan Reese
@breese8009
Nov 13 2017 20:33 UTC

# @CodeDraken beat me in codefights :(

Ivan Ngundela
@ingundela
Nov 13 2017 20:48 UTC
hello everyone...I'm working on my portfolio website and need some help.. the link is https://ingundela.github.io/portfolionew/ I want to change the color of the navigation menu from white to light grey but when I target the nav-item a it changes the all list and the spyscroll does not work.. please help.. all I want is just to change the color white and also have I hover it it changes to the yellow as #navbarNav .nav-link.active {
color: #FDCD3B;
}THANK YOU
Lean Junio
@leanjunio
Nov 13 2017 20:49 UTC
Hey guys, I’m trying to understand the difference between state and props, I’m not sure I’m getting it despite searching it up. Would anyone care to explain?
Toni Shortsleeve
@KoniKodes
Nov 13 2017 21:15 UTC
@ingundela In your css you have the active link and brand as yellow. You have a navbar collapse a, but not an nav-item a{ . Also you have a 404 error on your Roboto fonts.
Alexandar B
@ace1122sp
Nov 13 2017 21:24 UTC
hi :wave:
@leanjunio you can change state, and you can't change props
every component can receive props, and only statefull components have their own state
inside component
Kaz Baig
@kbaig
Nov 13 2017 21:49 UTC

@leanjunio Additionally, props are meant more to inform the component on how to behave, whereas state has to do more with, well, the state of the application, ie things are likely to change as the user interacts with them.

A basic example of how props would be used where state is not would be if you create a button component that could be any color. Maybe you pass the color as a prop when creating a form. Not a great example but hopefully you get the idea :+1: