@MuhammedKarim so far, only HTML here on freecodecamp. @MuhammedKarim
oh that's cool :) i recognised that task from here lol, I'm working through the FCC map too @Allaboutthatcode
@MuhammedKarim I'm hoping to complete it.
keep going bro! its well worth it :) @Allaboutthatcode
how long have you been studying? @MuhammedKarim
about a month, but I'm still terrible at coding :( @Allaboutthatcode
api offline
@MuhammedKarim ha, same. I do it on and off tho.
ohh ok, do you have an occupation atm? @Allaboutthatcode
@MuhammedKarim I work in specialty retail.
oh cool @Allaboutthatcode
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 ? ;
}
what do you need help with
take a look here
I am missing to pass one test
it just goes to a sign up form
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
maybe you should put it on codepen or stackblitz
ok, I'll tr
try*
@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?
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
@Dr-D-M merely checking for length won't work
@SweetCodingInc you think so?
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
you were right, the length was not useful
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
W = -1
N = 2
S = -2
add them and sum should be 0
if not zero, return false;
@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".
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
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
@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!
@khaduch .reduce() could be used instead of for loop??
@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
@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()... :)
@SweetCodingInc I am familiar, I just wanted to confirm what I've learnt
@Dr-D-M can you post the link to this challenge?
I want to test my code
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
@Dr-D-M lol that takes me to my dashboard
I know lol
It took me here
that page has aanti-spoiler policiy
does the challenge have link similar to this?
I see
I think you have to have an account to look at the challenges
yeah, it is quite similar
@lisacopeland yes, you have to have one. I recommend it strongly
@DarrenfJ thanks sent you a PM
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2375 | @darrenfj |http://www.freecodecamp.org/darrenfj
@DarrenfJ thanks for the help
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2376 | @darrenfj |http://www.freecodecamp.org/darrenfj
Best Book to learn Angular js
ngBook
also, are your referring to AngularJS (1.x) or Angular (2+) ?
AngularJS (1.X)
is it free?
@MARahman49 The official documentation is also good.
Hey Everyone. Why isn't my pen running? The same code ran fine on my local PC
https://codepen.io/aby_shukla/full/NyxeMB/
https://codepen.io/aby_shukla/full/NyxeMB/
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', '')
});
});
@abyshukla It seemed to run fine for me.
Thanks for checking @sjames1958gm . I fixed it. https issue
abyshukla sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8938 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
:+1:
@jeffersonnnn Do you have the snippet HTML that goes with this js
g'morning
@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>
@jeffersonnnn Why are you using prev ?
Do you want the previous sibling to highlight yellow when you hover?
@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
@sjames1958gm yes, i do.
@lydatech no problem.
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
@jeffersonnnn If you only highlight with .prev then you can never highlight the last one
Maybe re-think what your goal is
Maybe re-think what your goal is
@jeffersonnnn You have 5 divs - what exactly do you want when you hover?
@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()
@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()
@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.
@jeffersonnnn What is the reason for highlighting the previous div?
@jeffersonnnn Your brain is going to start hurting get help in two channels :)
@sjames1958gm haha, i can't imagine not enjoying the challenges of code. i am ready for the pain!
@jeffersonnnn Hey man!
Try to understand the code I wrote for you.
Just ask me if you want something clarified.
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");
});
or check it here: https://codepen.io/blombergvictor/pen/LQZYRr?editors=1111
@blombergvictor wow. thanks for this. now this is amazing. i need a second.
jeffersonnnn sends brownie points to @blombergvictor :sparkles: :thumbsup: :sparkles:
:cookie: 259 | @blombergvictor |http://www.freecodecamp.org/blombergvictor
@blombergvictor olright, understood. One question though (this is going to sound base lol): how exactly does
ol.rating li work
a
li child of an ol that has a class of rating
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?
Are there any ways to create module template (product card for example) and use it in builder and cms?
@Boarworm maybe check in https://gitter.im/FreeCodeCamp/HelpJavaScript
What is your recommendation for free JavaScript books I can print for personal user
Yes that one on my list to buy but I cant print :smile:
@sjames1958gm thanks
malbarmawi sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8939 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
quick question. is there a dotted version of the
<hr> rule?
@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.
@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;
}
ohh ok, thanks a lot :) @sjames1958gm
muhammedkarim sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8940 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@MuhammedKarim :+1:
@malbarmawi :+1:
@MuhammedKarim in css
hr{
border-top: dotted 1px;
}
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
@UnorthodoxThing Take away the position:absolute
@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/
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!
rehabthis sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 190 | @leeconnelly12 |http://www.freecodecamp.org/leeconnelly12
your col-md-4 i think
@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.
@RehabThis You have each icon in a col-md-3 div which allocates a specific width
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
@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.
rehabthis sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8941 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@moT01 @iceveda06 thank you as well for your advice!
@RehabThis :+1:
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?
@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"
Do I need to create smth similiar to that wiki page?
Nono, the wiki page is just explaining what a user story is
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:
is this a user story itself?
what's required to be done by point 2?
you just need an external link like to wikipedia page as i have done
nothing much
@etcIgor point 2 is not a user story. It's just telling you to do 3 and 4
sorry, I meant 3d point
point 3 says that you need an image and some text
that is the first user story right?
yes
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
therefore "Dr. Norman Borlaug" page that I've done already like in the example, that's enough then
@harry9656 thank you
etcigor sends brownie points to @harry9656 :sparkles: :thumbsup: :sparkles:
:cookie: 112 | @harry9656 |http://www.freecodecamp.org/harry9656
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,
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>
@Kingwindie
$('p') will select all paragraphs
ignore the "this p element has an index:1
@Kingwindie so should i add classes or use this?
so I would put an id of p1 on the first and p2 on the second. Then use
$('#p1') to select the first one
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
yup, this refers to the scope of the current function block, which is your button
@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
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
@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");
@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
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
api offline
@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
@DarrenfJ how did u just hyperlink that text? just wondering...
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
like this? @DarrenfJ
wow thanks a lot, imma do that tutorial now! @DarrenfJ
muhammedkarim sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2377 | @darrenfj |http://www.freecodecamp.org/darrenfj
@MuhammedKarim you got it :d virtual high five :D
@NJM8 thanks
kingwindie sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @njm8 |http://www.freecodecamp.org/njm8
@ezioda004 thanks i will look into it
kingwindie sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @ezioda004 |http://www.freecodecamp.org/ezioda004
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?
@DarrenfJ yup i know how to type in italic now ;) Hi 5
Hey could anyone help me align a btn-group in bootstrap 4?
@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
Are you familiar with flexbox?
No, but I have been meaning to learn it, I just wanted to get the ball rolling on this project.
adding
d-flex justify-content-center to your button class should work
you can also add easy spacing with bootstrap
So add
mx-auto
to which
div class?
mmmm, try just the button group
or the parent div if you are using that second container just for the buttons
hmmm, I am not seeing any results
Just use it once on the containing div
not in each button
Thanks so much
worked?
Nice, check out this page for a nice flexbox tutorial: https://internetingishard.com/
Yeah, I'll have to start learning flexbox soon, although I am still at the beginning stages of web development
@NJM8 You're awesome
thanks! just trying to help others where I struggled. :smile:
what's the best way to put an icon on your webpage?
<img>
or <link>
depends where you want to put an icon
and in what format
oh i want to put a small icon just before a text
a bit like this
well you can do that with img tag, just need to make it icon-like size ... also, check https://fontawesome.com/
https://fontawesome.com/icons?d=gallery @MuhammedKarim
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
ohhh thanks a lot for the reference!!! @mbosnjak01 What's the style link to put in the
<head>?
muhammedkarim sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 226 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
@MuhammedKarim in the head, like in the tab bar of the browser?
i mean in the html code
don't you attach a style link for the font awesome icons?
oh
you can download it
or use hosted library
just found it :)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
yep. that one.
thanks bro! @mbosnjak01
muhammedkarim sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
api offline
np