@mrs-coder What you're looking for is called Scroll Spy. Here are the instructions: http://getbootstrap.com/javascript/#scrollspy
hey guys just need a little help here:
function getCount(str) {
var vowelsCount = 0;
str.split(' ')
switch (str){
case "a": vowelsCount + 1;
break;
case "e": vowelsCount + 1;
break;
case "i": vowelsCount + 1;
break;
case "o": vowelsCount + 1;
break;
case "u": vowelsCount + 1;
break;
};
return vowelsCount;
}
just need to return the vowel count in a given string
probably not using the split property correctly though
could anybody help for the following 2 questions?
var arr = [
[0,0,0]
];
var x=[...arr, [1,1,1,]]
console.log(x)//[ [ 0, 0, 0 ], [ 1, 1, 1 ] ]
x[0][0]=1;
console.log(x)//[ [ 1, 0, 0 ], [ 1, 1, 1 ] ]
console.log(arr)//[ [ 1, 0, 0 ] ]---> why use spread operator, the arr element is still changed?var arr = [
[0,0,0]
];
var x=arr.concat([[1,1,1]]);
console.log(x)//[ [ 0, 0, 0 ], [ 1, 1, 1 ] ]
x[0][0]=1;
console.log(x)//[ [ 1, 0, 0 ], [ 1, 1, 1 ] ]
console.log(arr)//[ [ 1, 0, 0 ] ]---> why use concat, the arr element is still changed?
@johnnunns Correct, .split(' ') will separate your string by spaces rather than characters. Use
str.split('') instead. You could then to a str.split('').map to loop through the string and evaluate each character.
@c0d0er Not sure how to answer that question - I'd have to know the context.
@TylerMoeller there is no other contexts, you can just run, it will comes the result
Are you asking which is better to use?
.concat() vs. spread operator for a case like that, I mean
@c0d0er Or are you asking why the original
arr changes when you're only updating x?
@TylerMoeller yes
@TylerMoeller i am asking
why the original arr changes when you're only updating x?
In JavaScript arrays are objects and variables are references to objects. When you update the variable, you are also updating the object. To prevent it, you need to clone the array first.
@c0d0er
has anybody else run into problems with adding icons to your document? I'm trying to use Font Awesome but the icons just won't show up in my document
@TylerMoeller thanks! how to clone? could you give me a simple pseudo code?
:star2: 1388 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@c0d0er It isn't an easy answer, unfortunately :) http://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object
For a shallow copy, you can just do:
var copyOfMyArray = myArray.slice(0);
without going into high level functions yet @TylerMoeller could you tell me where I'm going wrong here?
function getCount(str) {
var sum=0
var i = str.split(");
switch (i){
case 'a': sum + 1;
break;
case 'e': sum +1;
break;
case 'i': sum + 1;
break;
case 'o': sum + 1;
break;
case 'u': sum + 1;
break;
};
return sum
}
@TylerMoeller this is a really good one! thanks!
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave tylermoeller points
It's something wrong in my switch statement it looks to me
@johnnunns
str.split('') needs to be two apostrophes, not a double quote, for starters :)
I changed it back to str.split('') forgot to change before i copy pasted
But yes, your switch statement runs once against the array
yeah ^ :)
For example, say
str='hello world';
You are doing:
switch (['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']){
case 'a': sum + 1;
break;
case 'e': sum + 1;
break;
case 'i': sum + 1;
break;
case 'o': sum + 1;
break;
case 'u': sum + 1;
break;
};
If you don't want to use higher order functions, you can use a simple for() loop and evaluate each element returned from
str.split('')
right
because case 'a' doesn't equal hello world split up
Long story short - don't use a switch
There are lots of options though and you could make it work with a switch statement if you have to, I just think it would be cleaner with a simple
if it's a vowel, add 1 statement.
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=i; x<str.length; x++){
return sum
}
I'm just not sure how to say if one of those vowels inside the string equals a vowel
Start by trying to console.log each letter individually
Your for() loop needs to start at 0, then go to index 1, 2, 3 etc.
how will I tie it into the split then if i don't set something equal to i?
You'll start at 0 and end when it's less than
str.split('').length
Don't know how much of a hint you're looking for here ^^ that may be too much
right, so then I can just put i.length
Correct
now nest an if statement inside the for?
Yes, test if it's a vowel, if so, add 1 to sum
still seems I'll run into the same problem as my switch
Does anybody know how to put the transcurrido div justified in the center (instead of starting all the way from the center to the left)? I mean, if not with justify-content: center, then how? http://codepen.io/zarruk/pen/VPWrWL?editors=1100
actually. let me try
Also, why is my stop button on top of the start one? Does anybody know how to put the transcurrido div justified in the center (instead of starting all the way from the center to the left)? I mean, if not with justify-content: center, then how? http://codepen.io/zarruk/pen/VPWrWL?editors=1100
Try to get it to console.log() each letter in the string first.
brb
like a console.log(i[0])?
Yes
That's just my approach though - make sure the for loop is working as intended before adding logic
for loop is working good right now
where I'm running a blank though
I could write a lot of code right now but I'll ask before it doesn't work
an if statement like
if(i = "a") sum+1 ..... etc
A regular expression would be a little cleaner looking
I'll show you what I have
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i === 'a' || 'e' || 'i' || 'o' || 'u'){
return sum + 1;
};
};
return sum
}
I'm sure you see what I'm trying to do, I see why it's only returning 1 because the loop is completed
I'm just not sure how to rework it
In your for() loop, what does
i equal?
str.split
Right, you want to compare against i[0], i1, i[2], etc..
Also, you will have to do
if (i === 'a' || i === 'e' || etc...
seems like an absolute ton of code :)
because I'm not using higher level function I'm presuming
but ok
The next problem is that
return will stop the for loop - so you just want to add, not return inside the loop
Yes, and not using a regex :)
Good evening. I am desperately seeking ideas as to why my Tweet This Quote button won't capture or tweet a quote from my Random Quote Machine. I have read the Twitter docs at length. I have tried Stack Overflow. I have asked at a Meetup. I'm out of ideas to try to get it to work. http://codepen.io/Mmgfrog/pen/egOxwq?editors=1010#0
so there's no way to make it so that it can naturally go from I[0] to the end of i
if I'm not doing a higher lvl function
like if( i[0]-i[end of i] === a | e | i | o | u) sum + 1
I'm not sure, their may be other methods out there, but a higher order function would definitely make it cleaner
What is happening is that I can generate a quote from my array, no problem. But once that's done, my Twitter button is un-clickable.
gotch
Like
.includes() I think? but I haven't used it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
Or, on page refresh/load, I can get a Twitter window to open, but no quote inside.
@Mmgfrog Most people create a button with the same style as your twitter button and make it a hyperlink rather than using the Twitter widget code. The documentation can be confusing
@TylerMoeller Would that strategy still capture the quote? Thanks for your input
mmgfrog sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1389 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hello campers! I could really use your help. I can't seem to get a background image to rend. Here is the code: http://codepen.io/rfried99/pen/QGYyXy
@Mmgfrog Yes, it should - you are getting the quote text from the page, so there isn't a scope issue to worry about.
@TylerMoeller OK I will redo that part without the widget. I appreciate it!
@TylerMoeller semi cheating here, because I know the word is 'abracadabra' but to save time i wrote this
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i[0] === 'a'){
sum + 1;
} else if (i[3] === 'a'){
sum+1;
} else if (i[5] === 'a') {
sum + 1;
} else if (i[7] === 'a') {
sum + 1;
} else if (i[10] === 'a') {
sum + 1;
};
};
return sum;
}
still returning zero though
@Mmgfrog Good luck - also, you will need to update your URL to use the web intent without the widget code:
https://twitter.com/intent/tweet?text=The text you want to tweet
@rfried99 Is the image you're trying to render in your header? Or is it supposed to be in some other part of the page?
@johnnunns You'll need to add 1 to the existing sum variable:
sum++ or sum = sum + 1
@TylerMoeller OK. That line looks familiar. Pretty sure I read through that in the docs. LOL
did the sum += 1
returned 11 :)
:)
Now to clean it up
At least you're adding to the original now
Well shoot, it's not only testing me on abracadabra haha
first lets clean it up though, why would it return 11?
@Mmgfrog thank you! It's supposed to be in the main
rfried99 sends brownie points to @mmgfrog :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @mmgfrog |http://www.freecodecamp.com/mmgfrog
Ronit// take a look at your CSS / main / you are linking to a local asset. Try pushing it up and use http
@johnnunns it gives 11 because it's looping through the array once for each letter in
abracadabra and adding 1 every time because if (i[0] === 'a') is true every time
how do we stop that?
You were closer before with your previous if(), but you need to be using i[x] instead:
if (i[x] === 'a' || i[x] === 'e' || i[x] === 'i' || i[x] === 'o' || i[x] === 'u') {
I could have been clearer here: :point_up: January 23, 2017 5:23 PM
@luna9 I feel silly for asking this, but what do you mean by "pushing it up"
haha you don't want to see what I've just coded. The worst code ever I typed if ( i[0] === a i[0] === e etc all the way to i[10] so far
lol, yeah, no need for that when you have
x incrementing for you
Keep in mind though, that's only looking at lower-case vowels
Look at the source for the CSS / header - you are linking to a hosted image, http. Not look at the image you are linking to in the CSS / main. It does not have http it has file / bla / bla .
@TylerMoeller function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i[x] === 'a' || i[x] === 'e' || i[x] === 'i' || i[x] === 'o' || i[x] === 'u'){
sum ++;
};
};
return sum;
}
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i[x] === 'a' || i[x] === 'e' || i[x] === 'i' || i[x] === 'o' || i[x] === 'u'){
sum ++;
};
};
return sum;
}
that worked
:+1:
For lower-case vowels :)
could have have put str.tolowercase()?
could I*
yes, that works
Much better than more IFs
haha yes
is that the correct syntax?
str.toLowerCase()
str.toLowerCase()
ok, just making sure nothing inside ()
Correct
function getCount(str) {
return (str.match(/[aeiou]/ig)||[]).length;
}
that was the highest rated one btw
do you know what the ig mean?
This was my version:
function getCount(str) {
var vowelCount = 0;
str.split('').map(val => {if (val.match(/[aeiou]/i)) vowelCount++});
return vowelCount;
}I like the one you gave better
@ronit looks like you just added http in from of that image link. That will not work. For testing, copy the same image URL that you are using in CSS / header and paste it in the CSS / main. This was you can see the image work. Then upload the image you want and link it.
@johnnunns the
ig means ignore case and evaluate all characters in the string (g = global)
@luna9 thx!
rfried99 sends brownie points to @luna9 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @luna9 |http://www.freecodecamp.com/luna9
Can somebody help me here please? How do I do for the
transcurrido div to be in the center of the circle? http://codepen.io/zarruk/pen/VPWrWL?editors=1010
@TylerMoeller still on?
@johnnunns need some help?
Yeah man! @jdtdesigns
You've already solved it though haha
sounds fun I'm sure! :)
but with the knowledge gained from the recent codewars problem I just did, I was hoping for some direction
function getCount(str) {
var sum=0
var i = str.split('');
for(var x=0; x<i.length; x++){
if (i[x] === 'a' || i[x] === 'e' || i[x] === 'i' || i[x] === 'o' || i[x] === 'u'){
sum ++;
};
};
return sum;
}
so I just wrote this function in order to count the vowels
it works well, it could be condensed I saw from the other answers, but it works
Now, back to that prep course challenge, I'm hoping to apply this knowledge to it
@zarruk All the very high margins are screwing with your layout. I cleaned up some of the html and changed some css http://codepen.io/jdtadlock/pen/wgeyeB?editors=0100
Instructions from your teacher:
Write a function called "countAllCharacters".
Given a string, "countAllCharacters" returns an object where each key is a character in the given string. The value of each key should be how many times each character appeared in the given string.
Notes:
* If given an empty string, countAllCharacters should return an empty object.
var output = countAllCharacters('banana');
console.log(output); // --> {b: 1, a: 3, n: 2}
Starter Code :
function countAllCharacters(str) {
// your code here
}
lol
still doesn't work i see
do you have a link to the challenge?
@johnnunns
so the code I just posted above was the answer to a codewars problem
different but similar
that one works to count vowels
but after doing that I thought why not give a go at the prep course one, which I have not written code for as yet
Hello, I am recruiting people to work a project with the skills of HTML and CSS also Javascript. If you think your the right canidate, join : https://gitter.im/Project-Awesome-1/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link
@johnnunns My answer is still failing or are you wanting to solve it yourself? @johnnunns
well when i looked at your answer, I realized I was pretty far from solving it myself
I may be a little closer now
I believed you used regex correct?
@johnnunns Yep
and .reduce()
and .map() i believe
you know what, let me rewatch those higher level function vids you showed me. and then also watch one on regex
for regex, you'll just google 'match blah blah' most of the time
is match and regex the same method?
i google regex all the time cause i'm not going to spend time figuring out the expression myself if i know it's been done 1000 times
.match() uses regex to 'match' a certain pattern in a string
@zarruk I had a go at your code too: http://codepen.io/JohnnyBizzel/pen/qRjxWp
How can I import a picture from facebook can anybody help me please.
@jdtdesigns alright jd
gonna need some clarification :)
so I'm trying to apply map to my function
function countAllCharacters(str){
var i = str.split('')
var x = i.map(function(str){
})
return i
}
countAllCharacters('banana')
I'm really not sure if this is even close
alex can you save your facebook picture in facebook and then use that to make it your profile picture here @alexbuster
@johnnunns the argument in the .map() callback refers to the current value in the array as the map iterates through it
.map(countAllCharacters(str)?
is that what I should set it to
I think I'm confused on how to put map inside of a function
you wouldn't use map in this situation
map is for when you have an array, and you want to perform some type of transformation on that array
good video^
just watched it haha @jspeda
which higher order function would you use to solve the problem then?
you can just call .length on the string
and call it a day
or wait
nah it's way more complicated unfortunately :)
what are you trying to do exactly
count each character and separate them - example 'banana' becomes b - 1 a - 3 n - 2
var output = countAllCharacters('banana');
console.log(output); // --> {b: 1, a: 3, n: 2}
console.log(output); // --> {b: 1, a: 3, n: 2}
ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
@jspeda You can use .map() on an object or array
@johnnunns I used .reduce() and .map()
you have my code lol
man unfortunately I do not! closed out of chrome that day before bed and lost it :(
sorry to lead you astray, I should have asked what you were doing more specifically!
sorry bud @jdtdesigns
@johnnunns http://jsbin.com/tutezuz/1/edit?js,console
hey everyone! I am working on my tribute page and I am stuck! I cant figure out how to change the opacity of my background image without changing everything. Help! This is my code
body
{
background-image:url("https://static-wp.lonewolfmag.com/140717134225-frida-kahlo-photo-horizontal-large-gallery.jpg");
background-attachment:fixed;
background-size: cover;
background-repeat: no-repeat;
}
{
background-image:url("https://static-wp.lonewolfmag.com/140717134225-frida-kahlo-photo-horizontal-large-gallery.jpg");
background-attachment:fixed;
background-size: cover;
background-repeat: no-repeat;
}
sorry didnt know it was going to post that way
@VanAmoVe You can just set the background on a pseudo element and then lower the opacity
@VanAmoVe try making a class and setting a opacity?
it won't affect the text then
@jdtdesigns what do you mean by a pseudo element?
i did try making a class and it just made the image go into the div and not the background
@jdtdesigns I took out the part of the code that changes '.' and '?' and the lower case replaces
Just so I can grasp it a bit more without overcomplicating
var string = 'banana';
function countAllCharacters(str) {
str.split('')
str.reduce(function(result, letter) {
var regex = new RegExp('[^' + letter + ']', 'g');
result[letter] = string.replace(regex, '').length;
return result;
}, {})
}
countAllCharacters(string)var string = 'banana';
function countAllCharacters(str) {
return str.split('')
.reduce(function(result, letter) {
var regex = new RegExp('[^' + letter + ']', 'g');
result[letter] = string.replace(regex, '').length;
return result;
}, {})
}
countAllCharacters(string)
ok figured out it needs to look like this
the regexp looks a bit confusing did you say I should just look up match() and replace it with that?
@johnnunns It depends on the way you're coding it
what's the '[^' @jdtdesigns
The ^ matches everything except that character
@jdtdesigns thank you, I think I see what your are saying brb
vanamove sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 877 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@johnnunns
someone in the js help spot just solved it before you logged in. While your code passes 2/3 tests, this code passes all. @jdtdesigns
function countAllCharacters(str) {
// your code here
var array = str.split("")
var object = {};
if(str.length === 0) return object;
else{
for(var i = 0; i < array.length; i++){
if(object[array[i]]) object[array[i]]++;
else object[array[i]] = 1;
}
return object;
}
}
var output = countAllCharacters('banana');
console.log(output);
can you spot a difference?
@johnnunns It's counting spaces lol
your code is? @jdtdesigns
nope
i removed all non word charactes
characters*
@johnnunns Try this http://jsbin.com/hewoxix/edit?js,console
yeap works
@johnnunns sorry this http://jsbin.com/tutezuz/3/edit?html,js,output
doesn't run html
:) haha didn't see it's on the other side
oops
only completes 1 of 3 tests @jdtdesigns
well the third one should be an easy fix it returns and empty object if it's an empty string
hey, so i am trying to learn react, and i am making a tic tac toe game. anyway, this is the piece of code that i have for trying to check if there is a winner. when i test it, it hits my debugger when there is 3 in a row, so i know the function is running properly. but the alert will never appear. and when i type in this.checkForWinner in the console, it gives me undefined. I'm pretty lost and don't know what the issue is, or what to do
checkForWinner() {
var combos = [[0,1,2], [0,3,6], [0,4,8], [1,4,7], [2,5,8], [2,4,6], [3,4,5], [6,7,8]]
combos.find(function(combo) {
if(this.state.board[combo[0]] !== "" && this.state.board[combo[0]] === this.state.board[combo[1]] && this.state.board[combo[1]] === this.state.board[combo[2]]) {
debugger
return this.state.board[combo[0]]
} else {
return false
}
}.bind(this))
}
componentDidUpdate() {
if (this.checkForWinner()) {
debugger
alert("winner!!")
}
}
@johnnunns put this inside the function on the challenge :
return string.replace(/(.)(?=.*\1)/g, '')
.split('')
.reduce(function(result, letter) {
var regex = new RegExp('[^' + letter + ']', 'g');
result[letter] = string.replace(regex, '').length;
return result;
}, {})
i looked over the other person's code and they're not removing capital copies or non word characters
i over-complicated it basically :P
that's the one! :)
do you mind explaining it?
string.replace
you're replacing everying inside / /
why the parentheses?
@jdtdesigns
all you need to know is this expression '/(.)(?=.*\1)/g' replaces any duplicate copies of characters in the string
so i'm creating a string that has no duplicates, then iterating through each character and getting the amount of duplicates from the original string using string.replace(regex, '').length
a simple regex to match everything except a single character is [^a] where 'a' is the character to leave out
the '/g' at the end just means to match as many as it can find in the entire string
without the 'g' it would just find the first then stop
make sense at all @johnnunns ?
that top expression is just a known one to do that? and I can find that where when I need to look it up?
@jdtdesigns
any regex can be found pretty quickly with google :P
what would I type into google to find that?
search 'replace duplicates regex'
gotcha
like i said before, i'm not a master regex'er
i google a lot myself when the need rises
right on
ok cool so duplicate copies of characters
Hello guys, Any suggestion on how I can improve my tribute page ? https://codepen.io/aymohamed/pen/egWgmQ
don't we need those duplicates thought o count those?
to*
instead of replacing them?
I guess what I'm not seeing is the need for the replace code
Hello guys, Any suggestion on how I can improve my tribute page ? https://codepen.io/aymohamed/pen/egWgmQ
@johnnunns I basically through that in to thwart any potential errors and didn't even try it without it. It actually works without the replacement :P
yeah just tried it too :)
ok we just shortened our code! you're right though may not be error proof now :)
@aymohamed the picture of mandela isn't centered. thats one thing i'd fix
Ok. @chaddd980 , let me try
function countAllCharacters(string){
return string.split('')
.reduce(function(result, letter) {
var regex = new RegExp('[^' + letter + ']', 'g');
result[letter] = string.replace(regex, '').length;
return result;
}, {})
}
countAllCharacters('banana')
@chaddd980 , how about this now? https://codepen.io/aymohamed/pen/egWgmQ
@chaddd980 https://codepen.io/aymohamed/pen/egWgmQ
@jdtdesigns alright, since you pretty much walked me through that, I should be able to complete this one still maybe with a bit of help
thanks for everything so far though @jdtdesigns
johnnunns sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 878 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
ok the next one - very similar
Instructions from your teacher:
Write a function called "countWords".
Given a string, "countWords" returns an object where each key is a word in the given string, with its value being how many times that word appeared in th given string.
Notes:
* If given an empty string, it should return an empty object.
var output = countWords('ask a bunch get a bunch');
console.log(output); // --> {ask: 1, a: 2, bunch: 2, get: 1}
Starter Code :
function countWords(str) {
// your code here
}
I'm going to not look at the code you just gave me and lets see if I can figure this out
@johnnunns lol, good luck ;)
Any hint on how I can link my html code with the CSS
?
function countWords(str) {
str.split(' ')
.reduce()
}
@jdtdesigns and that's how far I got. hows that for retention :) hahaha @jdtdesigns
reduce(function(sum, words)?
the first arg is the result or thing you'll be creating after the reduce is finished
so in your case an object
and not to go to far ahead, but the {}) at the end of the reduce is to pass it into those brackets correct?
words would be word because you're splitting the str into words and the second arg will refer to each 'word' in the split array
the {} at the end refers to the result arg
.reduce(result, word)
where result is {}
so the result starts as an empty object and you add to it in the function
gotcha, that's why with a sum reduce you can make the sum start at 0
correct
you can use this site to test your regex https://regex101.com/
ok I get to this point and now I'm thinking I need a regex method. What would I search?
or do I need to do any matching at all?
yeah I will actually I see it's going to pass a string that has the same word multiple times
@jdtdesigns
you need to match words, but probably remove special characters like commas, question marks and such
I think once again they're going more basic than that
all lower case string sentences
they might not have any special characters
i'm just thinking of what fcc usually does lol
they do a ton of test cases
not here lol we're still "basic"
@jdtdesigns yikes man trying to find the regex match words in mdn and not finding anything only character matches
@johnnunns It's very easy to match words
/(myWord)/g would be the regex
haha why isn't that the first thing I see after searching regex match words?
this is a good one for .match()
i just typed 'match a word regex' to test and it's the first response lol
@johnnunns
no way!
haha
google?
yep
/\b($word)\b/i
does that one work?
/(word)/g
easy
function countWords(str) {
str.split(' ')
.reduce(function(result, word){
var regex = new Regexp(/word/g)
},{})
return result
how are we looking? @jdtdesigns
@johnnunns That won't work because the regex will only match the word 'word' ;)
you need to create the expression using a string and concat the word into it
new RegExp('expression', 'options')
options would just be 'g' for this one
g is global?
and you don't need the two '/' in the expression string
yes
I'm really not sure JD I only put /word/g in there because you said haha
/(word)/g is the expression to match 'word'
@johnnunns
g is global?
g is global as in it will match all occurances. Otherwise, Reg Ex only matches first occurance.
so that would only match one word
and we need it to match all the words
/(pickles)/g will match all the 'pickles'
@johnnunns
so that would only match one word
No. That will only match a string word
it won't match anything else.
right sorry that's what I mean
so what regexp matches all the words together that match?
the right regex for that is
\w or [A-Za-z]
the
w in \w should be small
capital
W like \W will match nonword characters
var regex = new Regexp(\w, 'g')
so to create an expression using the RegExp object, you would do it like this
var regex = new RegExp('(' + word + ')', 'g')
aha...
which outputs /(myword)/g
what's the reason for ' ' around ()?
you can't place the argument into the expression without string concatenation
otherwise it will just match the exact word you put in
that's the only reason you need to use the RegExp object
otherwise you could just use straight regex
function countWords(str) {
str.split(' ')
.reduce(function(result, word){
var regex = new Regexp( '(' + word + ')', 'g')
},{})
return result
}
fair enough!
lookin good
but
ok so now we need to set the counter
result needs to be inide the callback
inside*
so I don't need to return result outside?
result refers to object you are building inside the callback
it needs to be returned inside
I thought it automatically did that in reduce I guess..
alright so the counter. result[word] = regex something something something
result[word] = ....
;)
you're building result lol
result starts as {}
and inside the callback you build it with each value in the array passed to it
so you split the string and reduce is iterating over each word
each word is passed to the callback
and you do something with the word and add it to the result object
so the values that we want to put inside it is the regex amounts
regex.length?
that's where .match() comes into play
you can use the regex you created to match the amount of those words ;)
haha I thought we matched them already?
the regex is just regex lol
it needs to be used somehow
ok fair enough. so how about result[word] = str.match(regex)?
.length
How do you create html elements using jquery? I found multiple ways on google, not sure which one is right.
it's definitely wrong after submitting haha, but a good try right
?
man I hope my learning curve is at least on par with everyone else, this stuff is hard... @jdtdesigns
@johnnunns str.match(regex).length should work ;)
ok let me show you the whole thing then maybe error is somewhere else
you need to return result below the .match
function countWords(str) {
str.split(' ')
.reduce(function(result, word){
var regex = new Regexp( '(' + word + ')', 'g');
result[word] = str.match(regex).length
return result;
},{})
}
countWords("hey whta updsls a dgfg s")
return str.split(' ').....
ohh
right
@fortMaximus I think that there is no wrong way. Use .append or .html or whatever fits your needs
Regexp is not defined
@fortMaximus var link = $('</ li>');
it's RegExp not Regexp
@johnnunns
passing 1 of 3!
pretty good! :) haha
@jdtdesigns then how do I add it to html file/code?
weird though man it's working just fine. But I'm failing at :
should_return_an_object_where_each_property_gives_a_word_in_the_string_with_its_number_of_appearances
should_return_an_object_empty_object_ifpassed
should_return_an_object_empty_object_ifpassed
@fortMaximus sorry, that's 2.1
in version 3 just use $('h1');
@fortMaximus what are you trying to do?
@johnnunns Show me some test cases they are passing to your function
found the error not sure how to fix
'ask a bunch get a bunch' returns - { ask: 1, a: 3, bunch: 2, get: 1 }
so it's returning 'a' 3 times
correct
cause a is a word
and it's in there 3 times :D
o wait
2 times
@jdtdesigns I'm on the Wiki Viewer project, and I want add the links I get from the response (links to wiki pages) from the API to the html file as paragraphs or list elements
yeah weird right? @jdtdesigns
@johnnunns Here's a way to overcome that bug
var regex = new RegExp('(' + word + ')', 'g'),
amount = str.match(regex).length,
output = amount < 2 ? amount :
word.length < 2 ? amount - 1 : amount;
how'd you go about figuring that out?
coded it out just now :D
I want to know the thought process behind it
did it work?
that's the first question lol
amount is not defined
result[word] = output;
function countWords(str) {
if(str.length===0){
return {};
}
return str.split(' ')
.reduce(function(result, word){
var regex = new RegExp( '(' + word + ')', 'g');
output = amount < 2 ? amount :
word.length < 2 ? amount - 1 : amount;
result[word] = output
return result;
},{})
}
countWords("ask a bunch get a bunch")
still says amount is not defined
@fortMaximus this is a typical way of first clearing the old results then adding the new:
var output = $('.output');
output.empty();
output.append(
'<a href="wiki link">' +
'<h3>' + data.title + '</h3>' +
'<p>' + data.content + '</p>' +
'</a>'
);
the append would be in the data iteration of course
you would loop through the returned object and append each link
@johnnunns You left this line out that goes above output = amount....
amount = str.match(regex).length,
you don't need the if (str.length.....) line
the reduce will return an empty object if the string is empty automagically
that one works!
yeah added it just so I could pass one of the tests it wasnt passing
yeah still it actually doesnt work without if statement
{ '': 1 }
it's counting
Any hint on how I can better show "my copyright " and link my tribute page to an external website
have you looked up ternaries yet? @johnnunns
nope I will though
that's what i'm using to do that ? blah : something
those are called ternary expressions
it's just a shortcut way of doing if/else
condition ? true : false
that's how it works
Any hint on how I can better show "my copyright " and link my tribute page to an external website : https://codepen.io/aymohamed/pen/egWgmQ
lol @aymohamed
You can add padding and background to the copyright
and just add a hyperlink
<a href="https://google.com" target="_blank">Google</a>
does that mean I use a div class ?
just add a class to the div wrapping the copyright
and use that class in the css
Ok. Let me try that and I will get back to you. @ JD Tadlock. Thanks
@jdtdesigns, can the wrapper class have any name or just "container" etc?
it can be any name @aymohamed
they need to be space separated
<div class="my-class row another-class one-more"></div>
Ok. Thanks @jdtdesigns .I am doing that now
aymohamed sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 879 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@jdtdesigns Thank you for help and spending the time writing the code :smile: Although I didn't ask about the "clearing" part but you knew I'm gonna' ask about later, right? ;) :p
fortmaximus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 880 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
and thanks @RitvarsZ
fortmaximus sends brownie points to @ritvarsz :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @ritvarsz |http://www.freecodecamp.com/ritvarsz
@fortMaximus right ;)
@johnnunns To fix the result outputting an object with a space, you can just return this inside the reduce callback instead
return str ? result : {}
whats wrong with my weather app
it was working f9 till yesterday
Please let me know what y'all think of this : https://codepen.io/aymohamed/pen/egWgmQ
Constructive criticism is welcomed
Suggestions for what I can add or subtract is highly appreciated
@aymohamed u could use some bullet points !
just my opinion
anybody around?
@defc0de !
oh hi there!
hey
do you guys experience crashing with the gitter app?
im on ubuntu 14 and it crashes most of the time
hmm no, ubuntu 16
hmm weird. ok thanks for letting me know!
welcome
@shenoyabhijith , Please take a look now after I added the bullet list
:+1:
@aymohamed
@aymohamed type="circle" ???
remove it
@VasileBotnaru , what should I replace with lol
there is no type "bullet"
Also @shenoyabhijith , there are some spaces that the circle/bullet appears and there is no content that I put. Is it possible to specify only for lines of the list that have content/
you could use an <ul>, but I'm talking about the type="circle" showing on the page
@aymohamed
right below the Timeline
I mean, @VasileBotnaru , do you think it looks better with no type "circle"
as in type = "none"?
@aymohamed It looks ok the way it is right now, you're the one who has to like it
Hey guys!
@katsuya245126 hi
lool
What's the basic template for a website? Like html>header>body>container, etc
I'm trying to use bootstrap grids but I don't know how to start
@katsuya245126 codepen or not?
codepen
trying to make a portfolio
made good progress but decided to start over
you don't have to add the html and head/body tags
oh yeah I know that
start with the div class container
just as an example
<html>
<head>
</head>
<body>
<div class="container">
...
</div>
</body>
</html>
<head>
</head>
<body>
<div class="container">
...
</div>
</body>
</html>
@katsuya245126
so the container is everything you see on the page right?
the body is what you see on the page
<body></body> is everything you see on page
but the container is in the body
@katsuya245126
why do you need a container?
I just don't know what other containers I should make after <div class="container-fluid">
Hello everyone! Anyone out there could give a rather broad insight on how to approach building a website, a sort of landing page, in this manner?
http://www.buildinamsterdam.com/
The main features i'm intending to capture are the style of the page transitions.
I was refered I could approach this with Angular UI, but i'm looking for a second opinion
Since all of us are here to learn web development, I think this can prove super useful for everyone to tryout and experiment things as you learn them -> https://kushagragour.in/lab/web-maker
Its a web playground that even works offline!
Its a web playground that even works offline!
hello everyone. Is this group particularly for a challenge or the whole programme?
8i meant this room
*i meant this room
@Kasmin23 I feel you can always ask things in a general way, even if it's not strictly related to what the room is about, but the content of concern in his room is the frontend part of the programme
so, css, html
js i guess although theres a room for that
heres a list of rooms with their general purpose @Kasmin23 https://forum.freecodecamp.com/t/free-code-camp-official-chat-rooms/19390
this chatroom is generally for FrontEnd project help, but you can ask other questions here it's just they may be better suited in other rooms.
GET file://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css net::ERR_FILE_NOT_FOUND
Jquery%20Bootstrap%20JS%20CDNs.html:5 GET file://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css net::ERR_FILE_NOT_FOUND
Im getting these errors when I try to put a fontawesome icon in my website.. However I added the cdns provided in the head secton lie they tell me to.. How do i fix?
My code
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<title>Gallery</title>
</head>
@123xylem look into this https://www.bootstrapcdn.com/ for linking bootstrap
@123xylem and to this https://www.bootstrapcdn.com/fontawesome/ for fontawesome
@sorinr thanks.. i was usng an old fontawesome cdn
:star2: 1133 | @sorinr |http://www.freecodecamp.com/sorinr
123xylem sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
@123xylem and load first bootstrap and after fa
@sorinr i have it loaded up now but they still wont show
are u on codepen?
or u develop locally on your pc? @123xylem
@sorinr pc
@sorinr when i inspect the fontawesome it shows its there but doesnt really say anything
top 3 things under my font awesome inspection
element.style {
}
}
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet
i, cite, em, var, address, dfn {
font-style: italic;
}
@123xylem in order to see the fa working is to put an <i class="fa fa-icon name u want"></i> on the page
@sorinr yeai have that
<h1> <i class="fa fa-camera-retro" aria-hidden="true"></i> Image Gallery</h1>
it shows on the page when i inspect
but doesnt do anyting
@123xylem don't u see the fa-camera-retro icon?
@sorinr no
the code is there
when i inspect it shows aswell
but the code does nothing
@123xylem go to devtools.->sources and look for the libs if they have been loaded
reading them im not sure
unsplash is there
cant see fontawesome
@123xylem its hard to help you without seeing whats happening
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<title>Gallery</title>
</head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<style>
.fa fa-camera-retro{
width:30px;
height:20px;}
.standard{width: 100%;
height:200px;}
body{padding: 70px;}
.jumbotron{
background-color:#ccc;
color:#2c3e50;
}
.navbar-inverse{
background:#2c3e50;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
background:#2c3e50;
}
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-picture"></span> Images</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right active"> <li ><a href="#">Login </a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="jumbotron">
<h1> <i class="fa fa-camera-retro" aria-hidden="true"></i>
Image Gallery</h1>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstr
That is my site
rap/3.3.7/js/bootstrap.min.js"</script>
</body>
</html>
@sorinr
With that at the end
Your link and style tags are outside of head.
You close it before
@123xylem
Move the
</head> down to right before <body>
@alpox thanks but no worky
123xylem sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 746 | @alpox |http://www.freecodecamp.com/alpox
@123xylem this is wrong <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Also your link to fontawesome is wrong:
Try
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">Try
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
@123xylem and load it after bootstrap
@sorinr @alpox YES
@sorinr @alpox thanks
123xylem sends brownie points to @sorinr and @alpox :sparkles: :thumbsup: :sparkles:
:warning: 123xylem already gave alpox points
:warning: 123xylem already gave sorinr points
I used the cdn that fontawesome had on their site i htink
Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Check out the examples to start using Font Awesome!
THATS WHAT I COPIED
not sure why it didnt work
or why there href is like that
@123xylem Well look at the path. They just wanted to tell you that you have to link to your own copy of the css on your disk
If you downloaded it
Guys I have a doubt.
When I select say img[src] in css, it will only select all the imgs which has the src attribute, right?
And not img without src
@RiccardoMPesce Yes
Thanks @alpox
riccardompesce sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 747 | @alpox |http://www.freecodecamp.com/alpox
@RiccardoMPesce You can read more here: http://www.w3schools.com/css/css_attribute_selectors.asp
I better advise mdn over shay howe and w3schools
MDN is very coincisive
@RiccardoMPesce Right, i prefer MDN too. Because its specific and defining.
I heard here a lot though that people didn't understand MDN because they didn't have the terminology knowledge yet so it was too complicated.
I heard here a lot though that people didn't understand MDN because they didn't have the terminology knowledge yet so it was too complicated.
So i sometimes show w3schools here :-)
@RiccardoMPesce MDN would be https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
@alpox I think mdn covers less topics. But it does cover them completely
@RiccardoMPesce MDN just covers the exact web API whereas w3schools etc. also define some other stuff around web
how much did it take you to finish your portfolio?
@VasileBotnaru I can only refer to what i heard here already, but its usually a lot :-) people invest a load and quite some days into their portfolio
@alpox what about you?
it feeld daunting
@VasileBotnaru I'm not of importance in a comparison since i did web dev for quite some time already and don't actually need ffc. I'm here to help only :-)
I did the portfolio though.
I did the portfolio though.
But i didn't take long time for details in styling etc. :D
@VasileBotnaru I know that development sometimes or even often can feel daunting. You'll have to get your head around that and not think too much about it. Just try to go on and find your resources, and when something doesn't work out, ask here :-)
Its even usual that it can happen that you're stuck with one single problem for some days when it works out badly
I think every programmer experiences that
I remember times when i went to work and changed only 1 line of code by the end of the day because i was just looking for the issue - changing code - rollback. change code - rollback.
@alpox The thing is I don't know how to approach the task, do I have to know how to do it and then start doing, do I have to do while I see others code, do I have to understand that code well from the beggining, or I can go on without thinking too much about it, that's my problem.
@VasileBotnaru Last one :-)
you mean i can borrow code, without understanding it?
just so i can perform the task?
@alpox
@VasileBotnaru Best thing, as i stated earlier, is that you just have to get going. Usually just learning doesn't help you that much because in development you ALWAYS have special cases. This means that you are always learning while coding.
Best and easiest to learn programming / web dev, is to just jump into something you want to do and do it, no matter you have no idea about the matter
Best and easiest to learn programming / web dev, is to just jump into something you want to do and do it, no matter you have no idea about the matter
@VasileBotnaru No, not borrowing code without understanding it. Rewrite code you find yourself (No copy), try to change the code in some ways and see the result. That makes you understand what it does
While doing so, just try to bend the code you find somewhere to do something else/similar. For that you can also look into other sources.
This is the way i'm always going when learning something new
@alpox I see, thank you
vasilebotnaru sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 748 | @alpox |http://www.freecodecamp.com/alpox
@alpox what do you think about it?
@VasileBotnaru hmm hint: remove all the
html, body, head tags from the html and put everything what was in head in the settings under stuff for head
It was right like this, but that's a codepen speciality that it doesn't like to have these tags in the html part because it creates them itself
@VasileBotnaru Its good so far :-) you can try to put the links more centered and sticking to the right
@alpox padding 10px?
@VasileBotnaru Hmm actually i think that its your title picture which makes the nav bar grow too much
The bootstrap navbar usually takes an exact height
@alpox wait I don't get it, you mean centered vertically?
@VasileBotnaru yes
What i see it that you mix quite some bootstrap and your own css @VasileBotnaru
If you want to go with bootstrap, you should probably stick to their exact rules and elements which work together. (It doesn't like mixes)
If you want to go with your own css (Makes your page more unique), you should better take out bootstrap and don't use their elements
Thats because bootstrap works best with its own elements.
The navbar they define, needs a setup like shown here:
http://getbootstrap.com/components/#navbar
The navbar they define, needs a setup like shown here:
http://getbootstrap.com/components/#navbar
so that would be the general rule - don't use your own css alongside with bootstrap?
@VasileBotnaru You can use it - if you know what you're doing.
I see lots of people having a hard time because of this here ^^
but since I'm a beginner - i don't - so don't
There are certain unspoken rules in bootstrap - like if you use an element with a class
row - The next inner element should always be a col-x-x (Some column)
Otherwise you get some artifacts like unwanted padding/margins
well yeah they teach you this in the courses
i mean fcc
@VasileBotnaru I don't think i can tell you exactly what you'd better use. Its hard to make a page with all your own css as a beginner. But its also hard to stick to all rules bootstrap set you up.
@VasileBotnaru Well, they don't teach you everything about it there. Like they don't show you what exact structure a navbar needs
And where own css doesn't mess it up
Maybe someone else here could tell what's easier as a beginner here :-) i cannot tell much
Anyone? :-)
:D
Well, i think i would prefer own css... takes longer to create it but you learn much more
who's an expert but understand the point of view of a beginner?
:D
Yea thats always the thing ;-)
I'm not sure i can still see through the eyes of a beginner much
@alpox can you make a nav bar on your own, without help?
@VasileBotnaru Yup
@alpox cool
so you always have to use ul for it?
<ul>
Have to? No... You can do things in a lot of different ways usually
But for the navigation links, this is a good choice
I see
But usually, an ul defines an unordered list with bullet points
So without bootstrap or anything you have to care yourself about getting rid of the bullet points and make the elements show up horizontally instead of vertically
thats like
ul li {
list-style-type: none; // No bullet points
display: inline-block; // Show horizontally
}
As example
Usually there is also some margin or padding defined on the left side which one can get rid of etc.
You have to do such tweaks until you get there, but it teaches you some things on the way
@alpox thank you
vasilebotnaru sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: vasilebotnaru already gave alpox points
So, i think i'll be afk for some time
@VasileBotnaru No problem :-)
Anyone willing to help me with an issue that's driving me insane?
@dgriffin123 whats the issue?
Should I give a link to my codepen so I can explain my problem easier?
@sorinr
@dgriffin123 better. this way i can see the behaviour
that's the project. I know its ugly as hell, but my images aren't lining up right. Several aren't even working on mobile either but just fixing the alignment of them would be awesome.
@dgriffin123 what is the problem?
I looked up fixes for the alignment but they involved things much more advanced than what I've learned yet, using javascript etc
how can i execute a function on key press from keyboard without jquery using simple JS.
@sorinr
@sorinr
@MohammadHasham
someDOMObject.addEventListener("keypress", function() { ... });
@alpox so how can i get that which key is pressed?
@MohammadHasham
someDOMObject.addEventListener("keypress", function(keyEvent) {
if(keyEvent.key === 'a') {
// Key a is pressed
}
});
@alpox Thanks
mohammadhasham sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 749 | @alpox |http://www.freecodecamp.com/alpox
@alpox Thanks
mohammadhasham sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave alpox points
@MohammadHasham Np :-)
@dgriffin123 take a look at the example . this is what u want?
Yeah that seems to be what I wanted. They're all the same height.
img {
padding: 15px;
max-height: 216px;
margin: 0 auto;
}
padding: 15px;
max-height: 216px;
margin: 0 auto;
}
is this the only change that had to be made?
@dgriffin123 yes. because the last image was smaller height then the othersi put max-height: 216px as the last one. you can also add class="img-responsive" to each of your img tags so they scale well on lower screens
hmm. Well I really appreciate your help with that. I feel like I get stuck on the dumbest things.
@dgriffin123 its quite ok for the beginning
guys anyone knows a good weather API, I made a weather app like a week ago , and now i got an email from OpenWeather that my API got blocked.
@Shadow032 there is also apixu.com, wunderground and some others. as soon as i remember i'll tell you
@sorinr thanks, i'll google it out.
shadow032 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1134 | @sorinr |http://www.freecodecamp.com/sorinr
@Shadow032 welcome
@sorin I hate to bother you, but I can't seem to figure out how to fix these issues. Your solution fixed the height, but there are a couple that have different widths. I tried messing with max-width but I can't figure out why it isn't getting the effect I want.
It's very frustrating
@dgriffin123 no need for max-width because you have the imgs placed into <div class="col-xs-6"> so they take the full width of of this col-xs-6 div. to mee they seem to have same width and height
the only one with a different width was the Dark Souls pic, it is slightly wider than the one under it
Maybe that's just my display or something
m getting this: CORS header ‘Access-Control-Allow-Origin’ missing
What to do?
@dgriffin123 no no. u r right. the breaking bad is less wider then all the others. let me think
Honestly though @sorin I think I need to just move past it lol. I've been obsessing over those damn pictures not being exactly 100% the same I haven't moved on in like 2 days lol
any solution to my prob??
@dgriffin123 no. just add width: 100%; in css to img selector
@Jarvis1247 can u share the pen link to see what causing it?
@sorinr Such an easy fix, can't believe I didn't think of that. Thank you again
dgriffin123 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1135 | @sorinr |http://www.freecodecamp.com/sorinr
i am working on my text editor @dgriffin123
@dgriffin123 yes but now you have the same problem of height with dexter img. try to find another one bigger then that
@sorin I actually decided to change it to 2 rows instead of 3, and all the images seem to look good
which one is better document.getElementById('') or document.quereySelector()
@sorinr
@sorinr
@dgriffin123 nope . they are all same width but on 2nd row the first and the last are shorter in height
@MohammadHasham getbyid if the tag has an id.
jeez. you're right. How do you avoid these problems? Should I crop images before I even use them?
@dgriffin123 yep. better to have them same dimensions
@sorinr I see. 'll have to do that, this is too much of a hassle. Thank you so much for the help and for being patient.
dgriffin123 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: dgriffin123 already gave sorinr points
@dgriffin123 np
<p onclick = "name()" id="para">
Hello
</p>$(document).ready(function(){
function name(){
document.getElementById("para").innerHTML = "wow";
}
});
why is it not working?
@sorinr
I know this is cheating but can someone answer something for me? I got super lost on what to do so I took a look at the example but in the example it refers to data alot in the js/angular. I dont see Data defined anywhere? what is it referring to? http://codepen.io/freeCodeCamp/pen/bELRjV
@MohammadHasham you don't need the doc.ready just function name(){}
@sorinr Thanks
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1136 | @sorinr |http://www.freecodecamp.com/sorinr
as I now know how to actually refer to my ip api and my weather api I still dont know what its doing exactly, and I'd like to know that so I can learn from it
@sbxn14 the ip api callreturns you the city that you are using later in constructing the url for the weather api to retrieve thge weather for that city
so the $scope.data refers to the api's?
@sbxn14 the $scope.data its like defining local variables available only for ng-app. this is the way you refer variables in an angular app
yea I knew that but I was just wondering as it referred to data.something and I didnt see data defined anywhere
@sbxn14 with this $scope.Data = {}; its like var myvarr = {}; then you add keys and values to it like myvarr.city = responsefromapi.city and so on
thanks @sorinr
:star2: 1137 | @sorinr |http://www.freecodecamp.com/sorinr
sbxn14 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
oo im dumb
@sbxn14 welcome
Hello, I'am working in local weather app and in calling weather API I found both min and max temperature the same, here is my codepen link http://codepen.io/bikal/pen/OWmJMj?editors=1010 Any help will be appreciated, thank you.
Hello, just wondering if anyone knew how i could make my text non transparent
https://codepen.io/bwongcodes/pen/egROdR
https://codepen.io/bwongcodes/pen/egROdR
appreciate the help, thankyou!
@bikalkhawas if you console.table(apiData) you will see they are slightly different but because of the mathround function you see same values
@sorinr on calling API directly in browser also raw data looks the same.Looks like there is no need to mention min and max temperature.
@bikalkhawas for me there is only 0.6 degree of difference
:smile:
@bwongcodes use background: rgba(0,0,0,.5); instead of opacity: 0.5
Thankyou @sorinr
:star2: 1138 | @sorinr |http://www.freecodecamp.com/sorinr
bwongcodes sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
@bwongcodes welcome
var key = document.querySelector("audio[data-key=${x}]");why is this not working my html is
<audio data-key="65" src="E:\Web Development\Javascript 30\Drumkit Challenge\boom.wav"></audio>
@sorinr
anyone there?
@MohammadHasham is
x a variable?
yeah
from a function
/** Javascript File **/
document.addEventListener("keydown",function(x){
var key = document.querySelector("audio[data-key=x]");
console.log(key);
});
ok then replace the
" with the `
Hey, my function doesn't get triggered when I press the enter key? Why is that?
$('#search-bar').bind("enterKey",function(e){
$('#random-button').fadeOut("slow");
$( '#search-bar').animate({
top: "-200px"
}, 1000, function() {
// Animation complete.
});
});
$('#search-bar').keyup(function(e){
// if enter is pressed
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
Since you are doing a string interpolation and need to use
instead of"` for it
it is returning me a null
@oppiniated
This message was deleted
i am still struggling
var key = document.querySelector(`audio[data-key=${x}]`);
can you tell me where am i doing it wrong
var key = document.querySelector("audio[data-key='${x}']");
@oppiniated
@MohammadHasham check my previous chat
@MohammadHasham what do you want to get into the key var?
i have written that provided by you but it says that it is not a valid queryselector
@sorinr i want to get the keycode and use that further.
@MohammadHasham a valid selector is like "audio[data-key]"
actually i have set some data-keys in audio in html so i want to get the desired keypress to make it equal to data-key
@sorinr
i figured that out!
@oppiniated @sorinr Thanks
mohammadhasham sends brownie points to @oppiniated and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 520 | @oppiniated |http://www.freecodecamp.com/oppiniated
:star2: 1139 | @sorinr |http://www.freecodecamp.com/sorinr
@MohammadHasham and if you wanted the value of data-key you needed key.dataset.key
Can someone help me with something about the weather app?
https://codepen.io/nathandim/pen/JENvXE is there a way to get the values of latitude and longitude outside of the callback function?
@Nathandim you can do it like example
Dear all, i am attempting the "Build a personal portfolio webpage" challenge. may i know if it is actually possible to build that with html/css/bootstrap alone?
ohh nice idea
that makes the code a lot more cleaner
thank you @jaanhio
nathandim sends brownie points to @jaanhio :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @jaanhio |http://www.freecodecamp.com/jaanhio
@Nathandim what are you thanking me for? haha
lol dude
thank you @sorinr
nathandim sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1140 | @sorinr |http://www.freecodecamp.com/sorinr
I suck at multitasking
if only my family could understand :D
@jaanhio yes you don't need javascript
@jaanhio you're still here?
http://codepen.io/sbxn14/pen/apmJJQ implemented the most important features of my weather app but how do I connect icons to it? I inserted a CSS file that adds weather icons but I got no clue on how to use them
also is bootstrap a must?
// Setup
var testString = "There are 3 cats but 4 dogs.";
// Only change code below this line.
var expression = /\d+/g; // Change this line
// Only change code above this line
// This code counts the matches of expression in testString
var digitCount = testString.match(expression).length;/\d+/g count the # of numbers in testString?
u should start learning about regex www.regexone.com
then regex methods mdn.io/match
and finally length property mdn.io/array.length
@Hello911
then regex methods mdn.io/match
and finally length property mdn.io/array.length
@Hello911
@moigithub I know how to use array.length.
...then 1 less thing to check :)
But thankk you for the links
@TylerMoeller Thanks for the <main> tip. How do I keep it centered?
joshuapsteele sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1390 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller nvm. I figured it out. Still had my col-md-8 div in place. I removed it and it fixed the problem.
echo "<p><b>".strtoupper($thearrayprod['prodName'])."</b></center>";
echo "<img src="images/".$arrayprod['prodPicName'].">";
echo "<p><center>".($thearrayprod['prodDescrip'])."</center>";
echo "GBP<center>".($thearrayprod['prodPrice'])"</center>";
echo "<br>";
echo "<br>";
echo "Number in stock:<center>".($thearrayprod['prodQuantity'])"</center>";
I want to display the name,pic,price and quantity on a website using PHP .I have done this but there is error also I want all of the above line of code to have an alignment of center
echo "<img src="images/".$arrayprod['prodPicName'].">";
echo "<p><center>".($thearrayprod['prodDescrip'])."</center>";
echo "GBP<center>".($thearrayprod['prodPrice'])"</center>";
echo "<br>";
echo "<br>";
echo "Number in stock:<center>".($thearrayprod['prodQuantity'])"</center>";
I want to display the name,pic,price and quantity on a website using PHP .I have done this but there is error also I want all of the above line of code to have an alignment of center
@majedmahmood27 said: echo "<p><b>".strtoupper($thearrayprod['prodName'])."</b></center>";
echo "<img src="images/".$arrayprod['prodPicName'].">";
echo "<p><center>".($thearrayprod['prodDescrip'])."</center>";
echo "GBP<center>".($thearrayprod['prodPrice'])"</center>";
echo "<br>";
echo "<br>";
echo "Number in stock:<center>".($thearrayprod['prodQuantity'])"</center>";
I want to display the name,pic,price and quantity on a website using PHP .I have done this but there is error also I want all of the above line of code to have an alignment of center
echo "<img src="images/".$arrayprod['prodPicName'].">";
echo "<p><center>".($thearrayprod['prodDescrip'])."</center>";
echo "GBP<center>".($thearrayprod['prodPrice'])"</center>";
echo "<br>";
echo "<br>";
echo "Number in stock:<center>".($thearrayprod['prodQuantity'])"</center>";
I want to display the name,pic,price and quantity on a website using PHP .I have done this but there is error also I want all of the above line of code to have an alignment of center
@majedmahmood27 We don't learn PHP at Free Code Camp
You might try: https://gitter.im/reddit-php/chat
@sbxn14 weater icons support the openweather api and have special mapping for that. here some info:https://erikflowers.github.io/weather-icons/api-list.html
@sorinr alright sweet but how the hell do iuse that
as I just tried sth on my own http://codepen.io/sbxn14/pen/apmJJQ and it doesnt work at all
@joshuapsteele Happy to help! Good luck :+1:
I find this to be a good outline for the portfolio:
<header>
<nav></nav>
</header>
<main>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>The nav can also go above the <header> if you want it fixed to the top of your page.
@sbxn14 simple. <i class="wi wi-owm-"+json.condition code you get from the api response></i>
uhm
@TylerMoeller Are you using sections for things like projects and bio?
do i have to do that for every single one? for every single code?
cant i make a function that does that automatically?
....
to append classes in i elements? I don't see why not
@Nathandim Yes, for me at least, it helps organize the content in the page.
@TylerMoeller Cool, will check it out :)
@sbxn14 not for single one the i tag will be composed automathically when the api call is made. you just render on page the composed i tag
i get what you're saying but i got 0 clue on how to do to it lmao
@johnnunns Sorry, stepped away. I think you solved it already, but this is my approach for comparison:
function countAllCharacters(string) {
var charCount = {};
string.split('').map(val => {
charCount[val] = (charCount[val] || 0) + 1;
});
return charCount;
}
you are using angular and don't know how to do that ?
im using angular just cause I know its handy to place things in the html that auto generate
@johnnunns By the way, there's another room for codewars. Some of us are over there too: https://gitter.im/Codewars/codewars.com
but im far from experienced on it xd
with the {{}} tags n all
anyone did "Build a random Quote Machine" ? where is he getting the quotes from? there is no way he manually wrote those in
@yonichanowitz They are from an API that provides quotes for you.
@yonichanowitz Some people just copy-paste quotes in an array but I would advise against it. I feel like the goal for that exercise is to get our feet wet in API calls. The most commonly used one is the one found at http://forismatic.com/en
WTF, i was working on this for months and it says nothing about using API's!!!
where do i get these apis?
@TylerMoeller
@yonichanowitz Lots of them out there to choose from: https://www.google.com/search?q=random+quotes+api
I'd recommend choosing one that works with HTTPS. You can also just build your own array of quotes - not a requirement to use an API.
I'd recommend choosing one that works with HTTPS. You can also just build your own array of quotes - not a requirement to use an API.
For the Personal Portfolio, what's the easiest way to go about adding basic social media buttons?
@joshuapsteele Most people use Font Awesome: http://fontawesome.io/icons/
it says i need AJax @TylerMoeller . any good places to learn that?
@yonichanowitz $.getJSON is a simplified way to use Ajax, we get a basic introduction here: https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method
A more detailed description is here: https://api.jquery.com/jQuery.getJSON/
There are lots of youtube tutorials out there too
A more detailed description is here: https://api.jquery.com/jQuery.getJSON/
There are lots of youtube tutorials out there too
I learned it through trial and error after reading through the jQuery documentation, so don't really have any recommendations aside from the above :/
@yonichanowitz https://www.youtube.com/watch?v=rJesac0_Ftw
@sbxn14 here your icon showing solution
Hello everyone, Im on the "build a random quote machine" challenge and am having trouble figuring out how the tweet button will tweet the quote that is showing. Can someone point me in the right direction?
have you checked the twitter docs?
thanks @TylerMoeller
yonichanowitz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1393 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
thanks @jdtdesigns . my firewall is blocking it, but i assume its an informative video
yonichanowitz sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 881 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Yes @jspeda I have added the Tweet button and can do basic things, but im unsure how to tweet the current quote that is being shown.
@kevnbot , according to what @TylerMoeller just told me, if you have a JSON object, you can write a function to change the quote into text when a user clicks a link, that will put it out as a tweet. .. i think
hmm ok. ill explore that @TylerMoeller
sorry, @yonichanowitz
i don't remember exactly how that api works but you'll need to save the quote into a variable and probably concatenate it into the URL string that is triggered when you click the share button @kevnbot
Ok thats making sense, Ill try that
@kevnbot It may take you some time to figure out how to retrieve the data and use it in your project, but that's what the challenge is all about. The normal person can take quite a lot of time to learn each new thing you're challenged with. It's just the reality of web dev. ;)
Yea ive been chipping away at this project. this is the last hurdle for me. almost there!
@kevnbot , i'm just thinking here, maybe
https://dev.twitter.com/web/tweet-button/parameters
the parameter data-text= followed by a variable that you assign as the current quote with some javascript? i don't know , im up to where you are
@kevnbot Hate to inform you, but im 8 years in and i still hit hurdles every day lol.
@jdtdesigns how do you keep on going? i would have commited suicide by now
@yonichanowitz You have to have a passion for this stuff. If you dont love it, you'll burn out quick
@jdtdesigns like everything in life.
i'm burnt out already, but i keep on pushing because i have to make more money, and i have a family to feed.
hello dear campers, can any one tell me why even padding-top: 1px causes overlapping in dynamically generated divs. I am .article class in them like this
.article {
background-color: #bcc6cc;
padding-left: 15px;
padding-bottom: 5px;
/*padding-top: 1px;*/
padding-right: 15px;
}and here is my pen https://codepen.io/ghulamshabir/pen/vXELwL?editors=0000
Its the mountain that will never plateaus. The higher you get in skill, the more challenging the next step will be. It's the way of the world for devs.You love it or hate. I'm either/or on any give day lol.
@yonichanowitz
I wouldnt rely on web dev to bring in much your first 2 to 3 years of learning
@jdtdesigns anything is better than nothing
@ghulamshabir where is the article element?
@yonichanowitz it's in js section
@yonichanowitz I am creating the elements dynamically
@ghulamshabir i may be an idiot, but i don't see it
@yonichanowitz sorry might be codepen save issue, I have enabled autosave so I suppose codepen saves my work
http://codepen.io/sbxn14/pen/apmJJQ?editors=1010 what did I do wrong? my icon aint working
@jdtdesigns do you complete freeCodeCamp ziplines
@sbxn14 data.weather[0].id;
oo
sweet thanks! @kirbyedy
sbxn14 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1702 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@AdelMahjoub I stopped at like 900 points. Just had more important things to do. I go on codewars and similar sites to keep my brain tweeked though. ;)
@jdtdesigns if you have done the roguelike game zipline can you post a link
woohoo its almost done
@AdelMahjoub didn't do the game
sorry :/
@jdtdesigns np, I'm using rot.js random map generator, wanted to check others, since there are not a lot written in javascript
@ghulamshabir there is no .article CSS in your pen or any dynamically generated HTML ;)
I see one form element get created when clicking on the icon
@AdelMahjoub you may want to see if @TylerMoeller did the game challenge
Never did the dungeon crawler either
I found this dungeon generator, but it is written in perl http://donjon.bin.sh/5e/dungeon/
@TylerMoeller yes I realized that, it's codepen which does not have my current work i don't know why, I even changed to manual saving the work but save button is not displayed
.sh = saint helena? That's a new one for me :)
this is what I did so far, but I think I'll just use rot.js map generator, and use a different render https://codepen.io/SultanCodeCamper/full/NdjyWq/
it moves and console the current target
@TylerMoeller @yonichanowitz I think this link should have my current work https://codepen.io/anon/pen/bgrNjO?editors=1111
@ghulamshabir The padding-top works for me in your CSS with that pen
Nevermind... misunderstood - let me take a closer look
@TylerMoeller I want to have top padding as well as margins between every divs vertically but having top padding causes the background to overlap other divs for some reason
@ghulamshabir I think what you're hitting here is a case of collapsing margins: https://www.w3.org/TR/CSS21/box.html#collapsing-margins
The fix is to use margins in addition to the padding properties you want.
The fix is to use margins in addition to the padding properties you want.
One of many fixes, anyway
@TylerMoeller thanks alot, I really appreciate your help, you helped me before and this time again. :clap: thank you I will follow the link you gave me.
ghulamshabir sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1395 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@ghulamshabir Seems as simple as adding
.article {
margin-bottom: 10px;
}
This is also a great read for lots more detail on the topic: https://www.sitepoint.com/web-foundations/collapsing-margins/
@jdtdesigns I have tried that but it causes overlapping of background colors of div so it appears as if I have put all my paragraph into only one div
@ghulamshabir Also, this line:
$('#wiki').append($('<div class="article"><h2>'+pages[i].title+"</h2><p>"+pages[i].extract+"</p>"));doesn't need the $( in it and it's missing a closing </div>
@ghulamshabir Not following you. It works fine in google and firefox.
@jdtdesigns I am using chrome
@TylerMoeller yeah I used $( to try if that may help I will remove it
I see, just out of curiosity, have you tried using template literals yet? Makes it a little easier for dynamic HTML, IMO:
$('#wiki').append(
`<div class="article">
<h2>${pages[i].title}</h2>
<p>${pages[i].extract}</p>
</div>`
);
Just started using it more and seems to help, at least for me
no I haven't, I have just read about it on the internet but could not understand what is it but your code snippet made it clear :smile: thanks again
@sbxn14 :point_up: January 24, 2017 6:57 PM
@ghulamshabir Here's an example of a simple approach to creating spacing http://jsbin.com/raneyi/edit?css,js,output
Could someone help me with my pomodoro clock? Right now the problem is that when the clock switches to the break time ("Relax"), I can't seem to pause the clock (done by clicking the big button) and then clicking it again makes it go faster. There's something wrong with the break interval but I can't seem to figure it out. Possibly a scope problem or things being out of order? http://codepen.io/brandon327/pen/mREZaN/?editors=0010
@jdtdesigns thanks for helping me I will definitely look into it :smile: thanks alot
ghulamshabir sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 882 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@jdtdesigns it looks like you have typed all that just for me to solve my problem because I am seeing most of code similar to mine :smile: thank you
ghulamshabir sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: ghulamshabir already gave jdtdesigns points
how should I start building my personal portofolio webpage?
I forgot almost everything i learned in tutorials
@ghulamshabir Tried to make it as understandable as possible
@jdtdesigns it's neat and clean code I am loving it
any recommendation?
@jdtdesigns oh it means you did it for me :smile: millions of thanks to you
ghulamshabir sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: ghulamshabir already gave jdtdesigns points
@clydrampage Look up tutorials on html, css. There's plenty on youtube
You can also take free interactive courses like codecademy.com
Say I am
How do access the object (icon for example) to get the correct return value? I am currently using weatherData.weather.icon. Why doesn't this work?
GETing a JSON API. I get this as part of my response."weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],How do access the object (icon for example) to get the correct return value? I am currently using weatherData.weather.icon. Why doesn't this work?
Hello everyone, I hope you all doing well... I'm starting a project.. I want to build a web page... I need to have some contacts in horizontal and the keeps on displaying vertical why... my code is
div id="menu">
<ul>
<li>Solucoes</li>
<li>Internet</li>
<li>Voz</li>
<li>Suporte</li>
<li>Loja</li>
</ul>
</div>
````
<!DOCTYPE html>
<html>
<head>
<title>EBU PAGE</title>
</head>
<body>
<div id="menu">
<ul>
<li>Solucoes</li>
<li>Internet</li>
<li>Voz</li>
<li>Suporte</li>
<li>Loja</li>
</ul>
</div>
</body>
</html>
help... this is not displaying the content in horizontal way.. why?
no wiki entry for:
this is not displaying the content in horizontal way why
@Mortiferr weather is an array - as a hint, how do you access the first element of an array?
weatherData.weather[0].icon
thanks @TylerMoeller
:)
mortiferr sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1396 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
http://codepen.io/Mortiferr/pen/oBZJzp?editors=1011
I have a document.write in my HTML and and
I have a document.write in my HTML and and
if-then statement that writes a different character based on a variable. Why isn't it printing to the page?
@Mortiferr You can also right-click the output in your browser's console and select
copy property path
oh okay, thank you
very helpful
@Mortiferr your script in your html is likely running before you get the data back from the API
Also, 'units' is undefined in that chunk of code
Are you sure? I have units globally defined I thought
But yeah you're probably right I need to specify
Even if 'units' and 'imperial' are both globally defined, they don't have a value until you get some data back from the API - that takes some time to visit the API URL and then come back
In the browser console, I see this error when running your codepen:
index.html:20 Uncaught ReferenceError: units is not defined
at index.html:20
@ingundela That's how lists work by default, they list items vertically
I have no clue how to make a nav bar for my portfolio webpage
@TylerMoeller ok.. but I want it to be horizontal
Hey guys.
what do you think of my tribute page : https://codepen.io/aymohamed/pen/egWgmQ
Any suggestion before I submit ?
@ingundela <li> is a block element, so to make it horizontal, you can use display: inline. I'm not sure that's the look you want to achieve though - if you can be more specific, I might be able to give a better answer
@JGreenusff Are you running into errors with what you have tried or having problems searching for how to build a navbar?
Hey, anyone online?
@TylerMoeller is it fine if I show my code like this.. to have it horizontally?
<div id="menu">
<ul>
Solucoes
Internet
Voz
Suporte
Loja
</ul>
@TylerMoeller I want to have in the top right of my page Solucoes Internet Voz Suporte Loja
@aymohamed It looks nice, good job. It would be nice to make the image responsive. http://getbootstrap.com/css/#images
Is anyone familiar with the MERN stack?
@ingundela I believe <ul> needs to have <li> inside. Why not use <div> or <p>?
@adrianwarholm You may want to try https://gitter.im/FreeCodeCamp/HelpBackEnd, this room is for front-end
Oh, thanks! But I thought front-end was with html and css?
@adrianwarholm Also, this is a good resource: https://hashnode.com/n/mern
@adrianwarholm Yeah, no mongo or node.js here :)
@TylerMoeller I was actually just confused more on implementing my html and css files with the stack? Should I go to the back-end chatroom for methods of implementation or ask it here?
@adrianwarholm If it's specific to HTML, CSS, JavaScript, jQuery, maybe we can help
This room is for help with the Free Code Camp Front-end Development Certification assignments though: https://www.freecodecamp.com/map
The back-end chatroom is for help with the back-end certification projects
@TylerMoeller Thanks! But it's just a personal project I'm on that freecodecamp got me interested with. Since MERN is isomorphic, I think that may be the issue. I just want my application to display my HTML and CSS files. I don't know how to get them to show on the screen though other than MERN's default template.
adrianwarholm sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1397 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller is it find if I show my code like this to have it horizontal
<div id=" menu ">
Solucoes
Internet
Voz
Suporte
Loja
</div>
@TylerMoeller let me know the options
please
@ingundela I'm not sure I understand the question. It is fine, yes, but it looks like this:
Solucoes Internet Voz Suporte Loja
Appreciated @TylerMoeller . I did that now. Thanks.
aymohamed sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1398 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@aymohamed :+1: Nice work
@ingundela Maybe you are looking for something like this? https://getbootstrap.com/examples/navbar/
A navbar, for listing links at the top of your page.
Hello guys ,
I m having issue with reading my json format from API ... I try to display that data into a div
I m having issue with reading my json format from API ... I try to display that data into a div
@TylerMoeller yes, that's want I want it to look
So since I don't really understand the basic CSS grid/ layout system, I decided to try and build a simple header-main-sidebar-footer type of layout.
So I tried following this: http://vanseodesign.com/css/2-column-layout-code/
And of course after copy pasting the html-css in Codepen, it doesn't work.
I tried building it again by myself this time, and this is for far I got:
https://codepen.io/CMYK/pen/zNdvwM?editors=1100
Why in the world does my main section overlap like that over the header section?
@ingundela Okay, good :) hope that helps. the blue button on that page links to the documentation and has some sample code you can try
@casdidier In your HTML, the ID should not have a
# in it. Also, your button ID does not match the ID used in your jQuery. Fix those issues, and your quotes should work.
@TylerMoeller how do I check in a page the code that was written for a specific thing?
@TylerMoeller thanks... !! Forgot those basics on HTML naming , good refreshing !
casdidier sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1399 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
``
oooops
@Josie-N One small typo here:
<div id="header">
<div id="nav"></nav>
</div>Take note of the opening/closing tags
@ingundela I don't understand the question :/ I'm sorry
Right-click -> Inspect Element?
```$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#latlon").html(position.coords.latitude + " " + position.coords.longitude);
});
}
```I'm doing the weather challenge on codepen but even this code doesnt output anything, what am I doing wrong?
Fuck im bad at this
$(document).ready(function() {
// var lat;
// var lon;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
//lat = position.coords.latitude;
//lon = position.coords.longitude;
$("#latlon").html(position.coords.latitude + " " + position.coords.longitude);
});
}
I'm currently working on the Wikipedia Viewer project. Can anyone take a look at my ajax/JSONP request and see why my callback function isn't executing? https://codepen.io/akiekintveld/pen/apybYx
@Toffanelly If you're using Chrome, you need to load your page over HTTPS. Check your browser's console for errors/warnings
@TylerMoeller So there is like an option to do so? Or should i just work in another browser?
@Toffanelly navigator.geolocation only supports HTTPS, so you can still use it but need a fallback to an ip-based location method if users visit your page over HTTP. This issue may give some background: FreeCodeCamp/FreeCodeCamp#7853
This pen may help you with figuring out how to fall back: http://s.codepen.io/TylerMoeller/pen/ZBBEGq
@TylerMoeller I figured out i just needed to add https:// before the ULR, thanks a lot
toffanelly sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1400 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hey if you go <div id="container"> is that the same as <div class="container">? i cant find the answer...
ohh wait i found the answer lol
can anyone go through my code? Can't get my beginning script to work. It's supposed to change "The message" to "Testing!!!". http://codepen.io/Jumpship91/pen/GrvJOL/
@akiekintveld When you have an input in a form and submit the data, it refreshes the page. Do this to prevent that from happening:
$("#search").submit(function(e) {
e.preventDefault();
@jumpship91 It looks like you need to add jQuery to your project
@TylerMoeller oh man, of course..
@TylerMoeller thanks Tyler!
jumpship91 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1401 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
no problem :+1: :)
hii guys how can i have more fonts like Lato or Open Sans??
@TylerMoeller spoke too soon..still doesn't work? Is there anything else I need to add?
@jumpship91 http://codepen.io/JohnnyBizzel/pen/PWKNJv
@JohnnyBizzel is there a reason it doesn't work inline the HTML?
@jumpship91 If you add jQuery to the codepen settings, you'll need to use the JavaScript panel to hold your code. Otherwise, add a <script> tag with the link to jQuery in your HTML and put all your <script> tags at the end of your HTML.
@JohnnyBizzel Thanks Johnny!
jumpship91 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
@jumpship91 Not sure what the problem was. You don't need body or html tags on codepen.
@TylerMoeller gotcha, thanks for that explanation!
:warning: jumpship91 already gave tylermoeller points
jumpship91 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
@jumpship91 No problem, I have to head out, but this is a working fork of your codepen for comparison if you run into any problems: http://s.codepen.io/TylerMoeller/pen/KavzrN
Johnny's pen is a good approach too - it's a bit easier to work with the JavaScript, IMO, when it's not in your HTML
@TylerMoeller THANK YOU SO MUCH 😁💐
:star2: 1402 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
josie-n sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
var latInteger = Math.round(lat);
var lonInteger = Math.round(lon);
$("#latlon").html(lat + " " + lon);
var address = "api.openweathermap.org/data/2.5/weather?lat=" + latInteger + "&lon=" + lonInteger + "&APPID=a75682a6c2b68e86092711fc2e591d34";
$("#address").html(address);
$.getJSON(address, function (json) {
$("#json").html(JSON.stringify(json));
});
});
add http:// to ur url
else it will be taken as relative address.... @Toffanelly
i tried that, still doesnt work
Hello! Could anyone help me out? I am working on "Responsive Design with Bootstrap", and I just have one question.
I need some help with getting Font Awesome to work. This is what i have
<head src ="https://use.fontawesome.com/3b619cadbf.js">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
</head>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
</head>
They said that we can use bootstrap by inserting a link and that they have already done it for us. Where exactly is the link?
<div class="btnList text-center">
<a class="btn btn-default" href= "https://www.linkedin.com/in/vincent-berrios-88b12a133"><i class="fa fa-Linkedin-square fa-lg" id="Linkedinicon" aria-hidden="True"></i> LinkedIn</a>
<a class="btn btn-default" href= "https://www.linkedin.com/in/vincent-berrios-88b12a133"><i class="fa fa-Linkedin-square fa-lg" id="Linkedinicon" aria-hidden="True"></i> LinkedIn</a>
@nikkilr88 codepen?
or what challenge
@vberrios the font should work if you apply it to something, ...with some style tags or css
font-family: lobster;
so like this
<head><style src ="https://use.fontawesome.com/3b619cadbf.js"><style> ?
@moT01 I'm using Codepen it has bootsrap I don't think it needs style tags
maybe im not sure how to use what your after, but you should just need the <link> with the font in it like you have it
thats a js file, i dont think you need that at all
so keep your <link> as is, then you should be able to use the font on whatever you want, in your css you could use it like so...
body {
font-family: lobster; }
https://developers.google.com/fonts/docs/getting_started --maybe that would help
@nikkilr88 codepen? I am just starting the section. It was talking about how to use bootstrap in your project.
codepen.io its a place to make some projects or practice or whatever, ...there should be a link in the challenge description somewhere, if i remember, that you can just copy and paste
hey everyone, I am almost done with my tribute page. If you have time to take a look and let me know your thoughts, I would gladly appreciate it!
guys quick question. if you want to do a webpage using bootstrap so you wonot need the media quiries right?? thanks
@artoodeeto - If you don't want to use them you don't have to. It really depends on how you want to build it but you don't need them to use bootstrap or if you use bootstrap.