These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Feb 2018
Max
@Allaboutthatcode
Feb 05 2018 00:00
@MuhammedKarim so far, only HTML here on freecodecamp. @MuhammedKarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 00:01
oh that's cool :) i recognised that task from here lol, I'm working through the FCC map too @Allaboutthatcode
Max
@Allaboutthatcode
Feb 05 2018 00:02
@MuhammedKarim I'm hoping to complete it.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 00:03
keep going bro! its well worth it :) @Allaboutthatcode
Max
@Allaboutthatcode
Feb 05 2018 00:03
how long have you been studying? @MuhammedKarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 00:05
about a month, but I'm still terrible at coding :( @Allaboutthatcode
CamperBot
@camperbot
Feb 05 2018 00:05
api offline
Max
@Allaboutthatcode
Feb 05 2018 00:05
@MuhammedKarim ha, same. I do it on and off tho.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 00:06
ohh ok, do you have an occupation atm? @Allaboutthatcode
Max
@Allaboutthatcode
Feb 05 2018 00:09
@MuhammedKarim I work in specialty retail.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 00:11
oh cool @Allaboutthatcode
Dr-D-M
@Dr-D-M
Feb 05 2018 04:14
hi there
is there a human here who can help me with this?
function isValidWalk(walk) {
  //insert brilliant code here
  return walk.length === 10 || walk.length === 0 ? true: false ? ;

}
Lisa Copeland
@lisacopeland
Feb 05 2018 04:14
what do you need help with
Dr-D-M
@Dr-D-M
Feb 05 2018 04:15
take a look here
I am missing to pass one test
Lisa Copeland
@lisacopeland
Feb 05 2018 04:16
it just goes to a sign up form
Dr-D-M
@Dr-D-M
Feb 05 2018 04:16
damn! jaja
well, allow me to explain... you see, it is a little practice it should return false if "walk" does not bring you back to start
Lisa Copeland
@lisacopeland
Feb 05 2018 04:18
maybe you should put it on codepen or stackblitz
Dr-D-M
@Dr-D-M
Feb 05 2018 04:22
ok, I'll tr
try*
Ken Haduch
@khaduch
Feb 05 2018 04:29
@Dr-D-M - can you post a link to the actual exercise, like a URL that will bring you to the description of the problem that you are trying to solve?
@Dr-D-M - or post the instructions here? Right now, I think that you have invalid syntax with that final ? ; question mark before the semicolon? Try to remove that and see if it changes anything?
Dr-D-M
@Dr-D-M
Feb 05 2018 04:36
the instructions are these:
You live in the city of Cartesia where all roads are laid out in a perfect grid. You arrived ten minutes too early to an appointment, so you decided to take the opportunity to go for a short walk. The city provides its citizens with a Walk Generating App on their phones -- everytime you press the button it sends you an array of one-letter strings representing directions to walk (eg. ['n', 's', 'w', 'e']). You know it takes you one minute to traverse one city block, so create a function that will return true if the walk the app gives you will take you exactly ten minutes (you don't want to be early or late!) and will, of course, return you to your starting point. Return false otherwise.
Note: you will always receive a valid array containing a random assortment of direction letters ('n', 's', 'e', or 'w' only). It will never give you an empty array (that's not a walk, that's standing still!).
kind of long, huh?
and the console log or the output is:
//some test cases for you...
Test.expect(isValidWalk(['n','s','n','s','n','s','n','s','n','s']), 'should return true');
Test.expect(!isValidWalk(['w','e','w','e','w','e','w','e','w','e','w','e']), 'should return false');
Test.expect(!isValidWalk(['w']), 'should return false');
Test.expect(!isValidWalk(['n','n','n','s','n','s','n','s','n','s']), 'should return false');
I am just missing to pass the test number 3
the one in which the array has one value
@khaduch I think the mistake is right there where you say, but I feel that is missing a tiny thing but I dont know what could be
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 04:49
@Dr-D-M merely checking for length won't work
Dr-D-M
@Dr-D-M
Feb 05 2018 04:49
@SweetCodingInc you think so?
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 04:49
you must ensure that the number of ns is exactly same as number of ss
and vice versa
also , number of es must be equal to number of ws
Check the last test case, Even though the length is 10, it returns false
Because there 2 more ns than ss
Dr-D-M
@Dr-D-M
Feb 05 2018 04:51
you were right, the length was not useful
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 04:51
so it's like return false if length is not 10...
if length is 10, then check for matching number of directions.
you could also use a direction-value mapping sort of thing.
assign a value to each direction.
Example
E = 1
W = -1
N = 2
S = -2
add them and sum should be 0
if not zero, return false;
Ken Haduch
@khaduch
Feb 05 2018 04:53
@Dr-D-M - oh, I see... then your code looks like it should take a count of the "steps" and if it is 10, then you should check that you have the same count of "n" and "s", and "w", and "e", because you want to get back to the same point. That is, for every step "n" you need to take a step "s", and the same for "e" and "w".
Dr-D-M
@Dr-D-M
Feb 05 2018 04:53
it sounds good, but the thing is that E W N S are inside and array
and = an
@khaduch @SweetCodingInc thank you guys, I will use what you told me
CamperBot
@camperbot
Feb 05 2018 04:56
dr-d-m sends brownie points to @khaduch and @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 237 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:star2: 3711 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Feb 05 2018 04:56
@Dr-D-M - you have to process the array with a loop, like a 'for' loop, and tally the count of 'n', 's', 'e', 'w' (you could use a .reduce() method, as well) but if you simply make four variables, use a case statement to test the values and at the end if each of the counts is the same for the ones that should match, and your length is 10, you're good to go!
Dr-D-M
@Dr-D-M
Feb 05 2018 04:57
@khaduch .reduce() could be used instead of for loop??
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 04:57
@Dr-D-M reduce internally loops over an array
but in any case, if you're asking this kinda question, better stick to for loop for now
Ken Haduch
@khaduch
Feb 05 2018 04:59
@Dr-D-M - I agree - the for loop is straightforward and no need to add additional complications if you aren't yet familiar with .reduce()... :)
Dr-D-M
@Dr-D-M
Feb 05 2018 04:59
@SweetCodingInc I am familiar, I just wanted to confirm what I've learnt
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 05:01
@Dr-D-M can you post the link to this challenge?
I want to test my code
Dr-D-M
@Dr-D-M
Feb 05 2018 05:03
I tried my friend but a girl here couldn't opened it
anyway, log in @SweetCodingInc and see what it has inside
it is very interesting if you want to practice all your knowledge in javascript and other programming languages, they have alot of them
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 05:04
@Dr-D-M lol that takes me to my dashboard
Dr-D-M
@Dr-D-M
Feb 05 2018 05:04
I know lol
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 05:05
It took me here
Dr-D-M
@Dr-D-M
Feb 05 2018 05:05
that page has aanti-spoiler policiy
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 05:05
does the challenge have link similar to this?
I see
Lisa Copeland
@lisacopeland
Feb 05 2018 05:05
I think you have to have an account to look at the challenges
Dr-D-M
@Dr-D-M
Feb 05 2018 05:05
yeah, it is quite similar
@lisacopeland yes, you have to have one. I recommend it strongly
coderNewby
@coderNewby
Feb 05 2018 05:21
@DarrenfJ thanks sent you a PM
CamperBot
@camperbot
Feb 05 2018 05:21
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2375 | @darrenfj |http://www.freecodecamp.org/darrenfj
coderNewby
@coderNewby
Feb 05 2018 06:44
@DarrenfJ thanks for the help
CamperBot
@camperbot
Feb 05 2018 06:44
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2376 | @darrenfj |http://www.freecodecamp.org/darrenfj
Muhammad Anis Ur Rahman
@MARahman49
Feb 05 2018 07:17
Best Book to learn Angular js
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 07:18
ngBook
also, are your referring to AngularJS (1.x) or Angular (2+) ?
Muhammad Anis Ur Rahman
@MARahman49
Feb 05 2018 07:18
AngularJS (1.X)
is it free?
Markus Kiili
@Masd925
Feb 05 2018 07:30
@MARahman49 The official documentation is also good.
abyshukla
@abyshukla
Feb 05 2018 09:15
Hey Everyone. Why isn't my pen running? The same code ran fine on my local PC
https://codepen.io/aby_shukla/full/NyxeMB/
Jefferson
@jeffersonnnn
Feb 05 2018 09:33
hi guys. A big thanks for help rendered on previous occasions, this community really is my home. Okay, so i am trying to achieve something in jquery and i can't seem to get it to worl . When my mouse hovers over a set of divs, i have set them (the divs now) to change colour,. However, the lastdiv refuses to change colour. Can anyone please point to me what i am doing wrong?
$(document).ready(function() {
        $('.rating-circle').hover(
        function() {
            $(this).prev().css('background-color', 'yellow')
        },    function() {
            $(this).css('background-color', '')
        });
    });
Stephen James
@sjames1958gm
Feb 05 2018 09:33
@abyshukla It seemed to run fine for me.
abyshukla
@abyshukla
Feb 05 2018 09:34
Thanks for checking @sjames1958gm . I fixed it. https issue
CamperBot
@camperbot
Feb 05 2018 09:34
abyshukla sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8938 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 05 2018 09:39
:+1:
Stephen James
@sjames1958gm
Feb 05 2018 10:23
@jeffersonnnn Do you have the snippet HTML that goes with this js
LydaTech
@lydatech
Feb 05 2018 10:52
g'morning
Jefferson
@jeffersonnnn
Feb 05 2018 11:20
@sjames1958gm i have the snippet that goes with it. This is the code right now
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style>
  body {
   font-family: Verdana;
  }
  h1, h2, h3 {
   color: darkblue;
  }
  .rating-circle {
   height: 2em;
   width: 2em;
   border: .1em solid black;
   border-radius: 1.1em;
   display: inline-block;
   margin: 0;
   padding: .1em;
  }

  .rating-hover {
   background-color: yellow;
  }

  .rating-chosen {
   background-color: green;
  }
 </style>
</head>
<body>
 <h1>Contoso Web Developer Conference</h1>
 <h2>Finding elements using jQuery</h2>
 <div>This session is about identifying elements using jQuery methods and selectors.</div>
 <h3>Rate this session</h3>
 <div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
 </div>

 <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

 <script>

 </script>
Stephen James
@sjames1958gm
Feb 05 2018 11:21
@jeffersonnnn Why are you using prev ?
Do you want the previous sibling to highlight yellow when you hover?
LydaTech
@lydatech
Feb 05 2018 11:31
@jeffersonnnn when you have a chunk of code please put it in a code hosting platform i.e codepen or js fiddle instead of a large wall of text. Instead of pasting directly into chat
Jefferson
@jeffersonnnn
Feb 05 2018 11:34
@sjames1958gm yes, i do.
@lydatech no problem.
matteopn
@matteopn
Feb 05 2018 11:35
Hi all
I'm Matteo
I would like some help, I was trying to simulate a file browser but I got stucked in the beginning
Stephen James
@sjames1958gm
Feb 05 2018 11:38
@jeffersonnnn If you only highlight with .prev then you can never highlight the last one
Maybe re-think what your goal is
@jeffersonnnn You have 5 divs - what exactly do you want when you hover?
Jefferson
@jeffersonnnn
Feb 05 2018 11:40
@sjames1958gm what i would love to do is to highlight the divs as the mouse hovers, then upon click, the clicked div turns green.
@sjames1958gm i think i understand now, i can't achieve this with plain prev()
Stephen James
@sjames1958gm
Feb 05 2018 11:42
@jeffersonnnn What happens if you simply remove the prev()
@sjames1958gm seems like on mouseenter you turn it yellow and on mouseleave you reset the background color to nothing
@jeffersonnnn I would accomplish this with classes .toggleClass() rather than .css()
Jefferson
@jeffersonnnn
Feb 05 2018 11:44
@sjames1958gm when i remove prev(), the div still changes color when i hover my mouse over it, the only problem is that my aim highlighting the previous div is then defeated.
@sjames1958gm hmm. toggleClass() eh. I should read on and try this immediately.
Stephen James
@sjames1958gm
Feb 05 2018 11:46
@jeffersonnnn What is the reason for highlighting the previous div?
@jeffersonnnn Your brain is going to start hurting get help in two channels :)
Jefferson
@jeffersonnnn
Feb 05 2018 11:50
@sjames1958gm haha, i can't imagine not enjoying the challenges of code. i am ready for the pain!
Victor Blomberg
@blombergvictor
Feb 05 2018 11:52
@jeffersonnnn Hey man!
Try to understand the code I wrote for you.
Just ask me if you want something clarified.
<ol class="rating">
  <li class="rating-circle" id="1"></a></li>
  <li class="rating-circle" id="2"></a></li>
  <li class="rating-circle" id="3"></a></li>
  <li class="rating-circle" id="4"></a></li>
  <li class="rating-circle" id="5"></a></li>
</ol>
.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}

.addhover {
  background: yellow;
}

$('ol.rating li').hover(function(){
  var id      = $(this).attr('id');
  var counter = 1;
  var salt    = $(this).attr('class');

  $('ol.rating li.'+salt).each(function(i){
    if (id >= counter) {
      $('li#'+counter).addClass("addhover");
    } else {
      $('li#'+counter).removeClass("addhover");
    }
    counter++;
  });

}, function() {
  $('li').removeClass("addhover");
});
Jefferson
@jeffersonnnn
Feb 05 2018 11:56
@blombergvictor wow. thanks for this. now this is amazing. i need a second.
CamperBot
@camperbot
Feb 05 2018 11:56
jeffersonnnn sends brownie points to @blombergvictor :sparkles: :thumbsup: :sparkles:
:cookie: 259 | @blombergvictor |http://www.freecodecamp.org/blombergvictor
Jefferson
@jeffersonnnn
Feb 05 2018 12:02
@blombergvictor olright, understood. One question though (this is going to sound base lol): how exactly does ol.rating li work
LydaTech
@lydatech
Feb 05 2018 12:03
a li child of an ol that has a class of rating
Boarworm
@Boarworm
Feb 05 2018 12:11
Hi guys. I'm using Tars (front end markup builder with gulp) that support pug and handlebars (maybe can add twig) for templating. It has modular structure, in one directory stores sass, pug, data.js and images for one module. But I don't understand how to integrate markup from builder to cms and support it.
Are there any ways to create module template (product card for example) and use it in builder and cms?
LydaTech
@lydatech
Feb 05 2018 12:19
Mohammad Albarmawi
@malbarmawi
Feb 05 2018 12:57
What is your recommendation for free JavaScript books I can print for personal user
Stephen James
@sjames1958gm
Feb 05 2018 13:02
@malbarmawi You don't know JS is a free book.
https://github.com/getify/You-Dont-Know-JS
Mohammad Albarmawi
@malbarmawi
Feb 05 2018 13:05
Yes that one on my list to buy but I cant print :smile:
@sjames1958gm thanks
CamperBot
@camperbot
Feb 05 2018 13:05
malbarmawi sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8939 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 13:06
quick question. is there a dotted version of the <hr> rule?
Victor Blomberg
@blombergvictor
Feb 05 2018 13:14
@jeffersonnnn ol is the unordered list and the "rating" is the class of that unordered list. li is the list items of the unordered list.
Stephen James
@sjames1958gm
Feb 05 2018 13:15
@MuhammedKarim You can use a div and CSS, I don't know if you can do the same to <hr>
div {
  border: dotted 1px black;
}
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 13:16
ohh ok, thanks a lot :) @sjames1958gm
CamperBot
@camperbot
Feb 05 2018 13:16
muhammedkarim sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8940 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 05 2018 13:16
@MuhammedKarim :+1:
@malbarmawi :+1:
Sweet Coding :)
@SweetCodingInc
Feb 05 2018 14:51
@MuhammedKarim in css
hr{
  border-top: dotted 1px;
}
UnorthodoxThing
@UnorthodoxThing
Feb 05 2018 15:29
Can anyone help me in the stacking order property of divs?? I want to put my div 'footer' at the way bot, and the div 'special' above it. Is there a method or understanding (I would need to know) to do change the order so? https://codepen.io/UnorthodoxThing/pen/oENvEX
John Deegan
@JohnDeegs
Feb 05 2018 15:37
@UnorthodoxThing Take away the position:absolute
Stephen James
@sjames1958gm
Feb 05 2018 15:38
@UnorthodoxThing Your CSS is changing the order of how the divs are displayed.
@UnorthodoxThing Maybe this page can help - https://css-tricks.com/couple-takes-sticky-footer/
RehabThis
@RehabThis
Feb 05 2018 15:55
Hi, can someone help me with the use of Font-Awesome Icons in my attempt to put them in a horizontal format? It is horizontal currently, but I can't figure out how to decrease the space between them. (https://codepen.io/RehabThis/pen/QQENdY)
Using Bootstrap v3 btw.
@LeeConnelly12 Thanks for the other day as well!
CamperBot
@camperbot
Feb 05 2018 15:56
rehabthis sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 190 | @leeconnelly12 |http://www.freecodecamp.org/leeconnelly12
Tom
@moT01
Feb 05 2018 15:57
your col-md-4 i think
iceveda06
@iceveda06
Feb 05 2018 15:58
@RehabThis did you try to put your fonts inside a div separately and either use id or class to add margin/padding to push them away from each other? That’s what i would do.
Stephen James
@sjames1958gm
Feb 05 2018 16:01
@RehabThis You have each icon in a col-md-3 div which allocates a specific width
Igor Pugach
@etcIgor
Feb 05 2018 16:04
Hi everyone, give me your advice, please, how to align to the width <hr> line so that it was like grey box width. For now it's shorter... https://codepen.io/etcIgor/pen/eVZRyy?editors=1000
RehabThis
@RehabThis
Feb 05 2018 16:06
@iceveda06 I did indeed try that. I haven't tried to put them all within one long div though and I am going to test that in a moment.
@sjames1958gm Ahhh, so I can set the max-width and I should be fine?
@sjames1958gm Max-Width Fixed it! Thank you much.
CamperBot
@camperbot
Feb 05 2018 16:08
rehabthis sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8941 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
RehabThis
@RehabThis
Feb 05 2018 16:08
@moT01 @iceveda06 thank you as well for your advice!
Stephen James
@sjames1958gm
Feb 05 2018 16:37
@RehabThis :+1:
Igor Pugach
@etcIgor
Feb 05 2018 16:43
english speakers, what's meant by point 2,3,4 in this challenge? https://www.freecodecamp.org/challenges/build-a-tribute-page I've done the point 1 but what the next ones mean?
Kaz Baig
@kbaig
Feb 05 2018 16:44
@etcIgor if you follow the link in the second bullet, it'll take you to a wikipedia page explaining what a user story is. Basically it's a way of writing out a piece of functionality from a user's perspective
Points 3 and 4 are the user stories the want you to fulfill
So you can think of "I can view a tribute page with an image and text" as "The user should be able to view a tribute page with an image and text"
Igor Pugach
@etcIgor
Feb 05 2018 16:47
Do I need to create smth similiar to that wiki page?
Kaz Baig
@kbaig
Feb 05 2018 16:47
Nono, the wiki page is just explaining what a user story is
Igor Pugach
@etcIgor
Feb 05 2018 16:49
you mean to think up my story based on the example description?
Some feedback?
It was made as on the go without much thought
Both user stories were inserted.... so I can mark this as done :smiley_cat:
Igor Pugach
@etcIgor
Feb 05 2018 16:54
is this a user story itself?
what's required to be done by point 2?
Singh Harpal
@harry9656
Feb 05 2018 16:54
you just need an external link like to wikipedia page as i have done
nothing much
Kaz Baig
@kbaig
Feb 05 2018 16:55
@etcIgor point 2 is not a user story. It's just telling you to do 3 and 4
Igor Pugach
@etcIgor
Feb 05 2018 16:55
sorry, I meant 3d point
Singh Harpal
@harry9656
Feb 05 2018 16:56
point 3 says that you need an image and some text
that is the first user story right?
Igor Pugach
@etcIgor
Feb 05 2018 16:56
yes
Singh Harpal
@harry9656
Feb 05 2018 16:57
so it just needs you to add some text and image to your tribute page that's all
and the point 4 says that you need to have also an external link
that's all is required
hope it helped... anyway i have to go now... so bye
Igor Pugach
@etcIgor
Feb 05 2018 16:59
therefore "Dr. Norman Borlaug" page that I've done already like in the example, that's enough then
@harry9656 thank you
CamperBot
@camperbot
Feb 05 2018 16:59
etcigor sends brownie points to @harry9656 :sparkles: :thumbsup: :sparkles:
:cookie: 112 | @harry9656 |http://www.freecodecamp.org/harry9656
Kingsley
@Kingwindie
Feb 05 2018 17:31
can someone help me with this task, i want to use jQuery to update two paragraphs, initially it will say
this is a paragraph
this is a second paragraph,
after a button is clicked i want the paragraphs to say:
this is paragraph 1
this is paragraph 2,
<button>Change the content of the p elements</button>

<p>This is a paragraph</p>
<p>This is another paragraph</p>

<script>
$(document).ready(function(){

  $( "button" ).click(function() {
        $('p').html("This p element has an index:1");
    $('p').html("This p element has an index:2");

});
});
</script>
Nate Mallison
@NJM8
Feb 05 2018 17:33
@Kingwindie $('p') will select all paragraphs
Kingsley
@Kingwindie
Feb 05 2018 17:33
ignore the "this p element has an index:1
@Kingwindie so should i add classes or use this?
Nate Mallison
@NJM8
Feb 05 2018 17:34
so I would put an id of p1 on the first and p2 on the second. Then use $('#p1') to select the first one
Kingsley
@Kingwindie
Feb 05 2018 17:34
i used this but i did not set it up right,so when i click the button,i t changes the text on the button
Nate Mallison
@NJM8
Feb 05 2018 17:35
yup, this refers to the scope of the current function block, which is your button
Kingsley
@Kingwindie
Feb 05 2018 17:36
@NJM8 ok,i uded id's earlier,but i thought there would be a smarter or more dynamic way to change the text,or just the number
Nate Mallison
@NJM8
Feb 05 2018 17:37
Not that I know of, but i'm still just learning
I mean you could map through all the paragraphs and pull the number out of the id and then create a new text string with the id. But that's a little over kill in this case
Aditya
@ezioda004
Feb 05 2018 17:46
@Kingwindie You can use nth-of-type like
$('p:nth-of-type(1)').html("This p element has an index:1");
  $('p:nth-of-type(2)').html("This p element has an index:2");
Darren
@DarrenfJ
Feb 05 2018 18:45
@coderNewby sorry, i went off-line.. but no worries.. hit me up in the other helproom if you need more tips
@coderNewby thanks for the cookies :D
CamperBot
@camperbot
Feb 05 2018 18:45
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
api offline
Darren
@DarrenfJ
Feb 05 2018 18:48
@coderNewby when you get an api offline it sometimes means you haven't hooked your fCC account up to your github.. you can do so in the settings
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 18:49
@DarrenfJ how did u just hyperlink that text? just wondering...
Darren
@DarrenfJ
Feb 05 2018 18:50
with markdown @MuhammedKarim
that little m with the down arrow on the far right of the place you type convos here lists a bunch of tips for markdown
but for links its [words you want people to see](link here)
@MuhammedKarim this is a quick tutorial I found quite helpful
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 18:53
like this? @DarrenfJ
wow thanks a lot, imma do that tutorial now! @DarrenfJ
CamperBot
@camperbot
Feb 05 2018 18:53
muhammedkarim sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2377 | @darrenfj |http://www.freecodecamp.org/darrenfj
Darren
@DarrenfJ
Feb 05 2018 19:24
@MuhammedKarim you got it :d virtual high five :D
Kingsley
@Kingwindie
Feb 05 2018 19:31
@NJM8 thanks
CamperBot
@camperbot
Feb 05 2018 19:31
kingwindie sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @njm8 |http://www.freecodecamp.org/njm8
Kingsley
@Kingwindie
Feb 05 2018 19:31
@ezioda004 thanks i will look into it
CamperBot
@camperbot
Feb 05 2018 19:31
kingwindie sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Abhishek Kumar Pandey
@abhishekpandeykr
Feb 05 2018 19:33

hello guys I am getting data in my console, once props get updated but not able to print data on screen
ass MethodList extends Component{
componentDidMount(){
this.props.fetchMethod();
}
render(){
const methodList = this.props.state.methodList;
const tabledata = methodList.map((item,index)=> {
console.log('item is', item.name);
<Table.Row key={ index}>
<Table.Cell>{item.name} </Table.Cell>
<Table.Cell>{item.description}</Table.Cell>
<Table.Cell><Icon name="delete"/><Icon name="edit"/></Table.Cell>
</Table.Row>
})
return(
<div className="users">
<Topbar heading = 'Methods' description = 'Method of the Application' as = '/app/methods/create' path ='methodList?action=create' buttonName = 'Add Method' buttonIcon = 'add user' />

        <SearchSection
            options = {searbarInputs}
        />

            <Table celled selectable>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>Method Name</Table.HeaderCell>
                        <Table.HeaderCell>Description</Table.HeaderCell>
                        <Table.HeaderCell>Action</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {tabledata}
                </Table.Body>
            </Table>
        </div>
  )

}
}

any suggestion what I am doing wrong?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 19:41
@DarrenfJ yup i know how to type in italic now ;) Hi 5
Said-Patrick
@Said-Patrick
Feb 05 2018 19:55
Hey could anyone help me align a btn-group in bootstrap 4?
Nate Mallison
@NJM8
Feb 05 2018 19:57
@Said-Patrick Just post your question so someone can answer when they come along. :smile:
I want the btn-group to be dynamically centered
If anyone could help that would be great
Nate Mallison
@NJM8
Feb 05 2018 20:03
Are you familiar with flexbox?
Said-Patrick
@Said-Patrick
Feb 05 2018 20:04
No, but I have been meaning to learn it, I just wanted to get the ball rolling on this project.
Nate Mallison
@NJM8
Feb 05 2018 20:04
adding d-flex justify-content-center to your button class should work
you can also add easy spacing with bootstrap
So add mx-auto
Said-Patrick
@Said-Patrick
Feb 05 2018 20:06
to which div class?
Nate Mallison
@NJM8
Feb 05 2018 20:06
mmmm, try just the button group
or the parent div if you are using that second container just for the buttons
Said-Patrick
@Said-Patrick
Feb 05 2018 20:08
hmmm, I am not seeing any results
Nate Mallison
@NJM8
Feb 05 2018 20:11
Just use it once on the containing div
not in each button
Said-Patrick
@Said-Patrick
Feb 05 2018 20:12
Thanks so much
Nate Mallison
@NJM8
Feb 05 2018 20:12
worked?
Nice, check out this page for a nice flexbox tutorial: https://internetingishard.com/
Said-Patrick
@Said-Patrick
Feb 05 2018 20:13
Yeah, I'll have to start learning flexbox soon, although I am still at the beginning stages of web development
@NJM8 You're awesome
Nate Mallison
@NJM8
Feb 05 2018 20:14
thanks! just trying to help others where I struggled. :smile:
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 21:01
what's the best way to put an icon on your webpage?
Matej Bošnjak
@mbosnjak01
Feb 05 2018 21:01
<img>
or <link>
depends where you want to put an icon
and in what format
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 21:03
oh i want to put a small icon just before a text
image.png
a bit like this
Matej Bošnjak
@mbosnjak01
Feb 05 2018 21:04
well you can do that with img tag, just need to make it icon-like size ... also, check https://fontawesome.com/
it has really easy way of implementation it's icons ... for example if you put <i class="fas fa-angle-right"></i> before your text you'll get this one https://fontawesome.com/icons/angle-right?style=solid
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 21:08
ohhh thanks a lot for the reference!!! @mbosnjak01 What's the style link to put in the <head>?
CamperBot
@camperbot
Feb 05 2018 21:08
muhammedkarim sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 226 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Matej Bošnjak
@mbosnjak01
Feb 05 2018 21:08
@MuhammedKarim in the head, like in the tab bar of the browser?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 21:08
i mean in the html code
don't you attach a style link for the font awesome icons?
Matej Bošnjak
@mbosnjak01
Feb 05 2018 21:09
oh
you can download it
or use hosted library
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 21:09
just found it :) <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Matej Bošnjak
@mbosnjak01
Feb 05 2018 21:09
yep. that one.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 05 2018 21:09
thanks bro! @mbosnjak01
CamperBot
@camperbot
Feb 05 2018 21:09
muhammedkarim sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
api offline
Matej Bošnjak
@mbosnjak01
Feb 05 2018 21:10
np