How would you go about building a navbar that doesn't collapse when viewed on mobile? I'm trying to make my page look like an app on mobile and not have the hamburger menu.
you could use responsive buttons inside divs. @skilescm
So don't use the navbar class at all?
or ul, you don't need the navbar specifically
I was thinking about a div with 3 columns inside of a row. Then I could use the xs and md sizing to make it look proper on different breakpoints.
What class would I use the make that element fixed to the top like a navbar?
hey guys, I am having trouble if my first if loop, it wont get passed it
function myReplace(str, before, after) {
return str.replace (before, function(){
if (before.charAt(0).toUpperCase()){
return after.charAt(0).toUpperCase()+ after.slice(1);
} else if (before.charAt(0).toLowerCase()){
return after;
}
});
}
myReplace("Let us go to the store", "store", "mall");
it replaces before with after always capitalized, but I only want that to happen for my if statement, it is not accessing my else if statement
@rafaelmonroy because it is not a conditional statement
@rafaelmonroy its just a
"A" or some capital letter so it will always be true
@heroiczero how can i write so it checks if its capitalized?
I tried before.charAt(0 === String.toUpperCase() but that didnt work
@rafaelmonroy do
(before.charAt(0)== before.charAt(0).toUpperCase())
@heroiczero ohh
ok
@heroiczero thanks !
rafaelmonroy sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1737 | @heroiczero |http://www.freecodecamp.com/heroiczero
@rafaelmonroy np :)
man and here I was trying to be slick with my code lol
Any CSS experts who can help me figure this out? I have a wrapper div that is set to visibility: hidden and height 0. However, children divs of this wrapper still take up space and cause massive whitespace at the end of the page. Why?
@FredrikOseberg try display: none instead
@gothamknight I’m trying to avoid that specifically, any other ideas ?
maybe apply those classes to the children too...?
not sure
@FredrikOseberg https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone the divs still take space so if there are images or text it will still take up that space maybe use
overflow-y: hidden
@FredrikOseberg try a different z-index?
@heroiczero Thanks, that did the trick.
fredrikoseberg sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1738 | @heroiczero |http://www.freecodecamp.com/heroiczero
so they overlap
too late, lol
Hi, I need help with API twitch
maybe i can help
I think my conditional statements maye has a bug somewhere. I added if-then statements in case user didnt have an image but not users and data is not matching.
*maybe
@gothamknight so I was matching the twitch site with the user data from the API I was extracting and the users dont line up
vs. the twitch channel : https://www.twitch.tv/freecodecamp/following @gothamknight
do you have it on codepen?
https://codepen.io/mers89/pen/gxNRBJ?editors=1111 @gothamknight
@mers89 on lines 33 and 52 of your js, you are using http for an image.
use https
I wanted to do an if scenario. @gothamknight
Let me try taking it off
title
Heyooo when I click the tweet out button and open the page the quote's nested in tags. How can I remove them?
Heyooo when I click the tweet out button and open the page the quote's nested in tags. How can I remove them?
@gothamknight ok so I removed 33. still same issue
I have an image on 52 too . If I take it off, some blank images come out
@mers89 dont remove it, just change the url to https
Let me see if I can do a screen shot to show you what I am seeing
And there's a delay when this pen loads the new quote. So there's such a long time between when changing the background color and loading the new quote. How can I make those happen in the same time?
@ILoveImages you could try
$("#getTweet").on("click", function(){
randomText = randomText.slice(3, randomText.length-5)
window.open("https://twitter.com/intent/tweet?text="+randomText
)
});
@gothamknight the left side is my page and on the right the twitch channel followers
on the left do you see user name ESL_SC2 doesnt match with its corresponding image. Its not on the same row. Instead you see the error 404 image
From what I see on the twitch channel all current followers have images so maybe I shouldnt even need a default image
@ILoveImages you can code for the color change inside the callback function of getJSON.
@gothamknight on this screenshot, do you see how user name has an actual image on the twitch channel but on my page is shows at 404. The users are not lining up :(
I was referencing septiess
@mers89 Ive got to head of for a bit (got an assignment due) sorry. I'll check back later.
Ok no worries. Thanks Ill try to solve it. :)
@mers89
else {
var logo= "https://res.cloudinary.com/mers/image/upload/c_scale,w_175/v1504573315/ui-day033-404error_u37kee.png";
$("#logo")
.append("<img class='logo_row' src='"+ logo + "'>") ;
$("#displayname")
.append('<div class="status_row">' + "</div>");
$("#status")
.append('<div class="status_row">' + "</div>");
}});
@mers89 also, some of your divs are overflowing with text, so you could try adding
.status_row {
overflow: auto;
}
(to see which divs are overflowing - I image you would want to make it look more elegant)
@gothamknight Thank you for your helping!! But can you give me a hint how I have to make a change inside callback function of getJSON?
iloveimages sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 427 | @gothamknight |http://www.freecodecamp.com/gothamknight
function sumFibs(num) {
var arr = [];
for (var i=1; i<num; i++) {
arr.push(i);
}
return arr;
}
sumFibs(4);
Can someone tell me why this crashes my browser?
@ILoveImages no problem. with the code you have, you could just rearrange some stuff:
$("#getQuote").on("click", function() {
$.ajaxSetup({ cache: false });
$.getJSON(
"https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=",
function(
data //@ILoveImages your url is http. codepen is served over https so the url can't work
) {
$(".quoteText").html(data[0].content);
randomText = data[0].content
$(".quoteTitle").html(data[0].title);
var newColor = [];
//var delayMillis = 100000000000000;
var newColorQuote = document.getElementById("changedQuote");
var newColorAuthor = document.getElementById("changedAuthor");
var newColorButton = document.getElementById("getQuote");
var newColorTweet = document.getElementById("getTweet");
newColor = generateColor();
document.body.style.backgroundColor = 'rgb(' + newColor[0] + ', ' + newColor[1] + ',' + newColor[2] + ')'; //why do I have to add + opperator and what they do actually?
newColorQuote.style.color = 'rgb(' + newColor[0] + ', ' + newColor[1] + ',' + newColor[2] + ')';
newColorAuthor.style.color = 'rgb(' + newColor[0] + ', ' + newColor[1] + ',' + newColor[2] + ')';
newColorButton.style.color = 'rgb(' + newColor[0] + ', ' + newColor[1] + ',' + newColor[2] + ')';
newColorTweet.style.color = 'rgb(' + newColor[0] + ', ' + newColor[1] + ',' + newColor[2] + ')';
});
});
Can I add usemap to my svg
So that the map lets me click the boxes in the tic tac toe grid
@iangracia it could be the size of the array. One of the tests uses 4000000 as the number, depending on the memory of your machine and the number of programs running, you might hit a limit there. Not sure why you would need to store all numbers from 1 to 4000000, though. You will only need a subset of those numbers and don't even need to keep track of them.
forkerino sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @iangracia |http://www.freecodecamp.com/iangracia
Ha, your username triggers cookie giving behaviour!
@forkerino where are you getting the number 4000000 from? Should i not result with an array of just [1,2,3,4] ?
i mean an array of [0,1,2,3] ?
@iangracia from one of the test cases on FCC
forkerino sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @iangracia |http://www.freecodecamp.com/iangracia
or does it crash your browser just like that?
i'm struggle with my tweeter button, it doesnt change his href attribute when i press my button for a new random quote. Can someone help me ? https://codepen.io/Ophe/pen/rGaJJJ
@Ophellia what's up
the codepen link in the tweet?
i mean the quote in the tweeter page, it doesnt refresh
well, im not sure how to get it working with that widget
https://codepen.io/moT01/pen/LzpGNG?editors=1010 i got it working another way
i dont know what i did wrong, but your codepen work well
thanks
I am working on the weather app and I am getting the user's Geolocation via HTML. I am trying to pass in variables into the Open Weather Map's api link. I am starting tho think it's impossible to pass in variables. Any nudges of help are appreciated!
Will an api link accept passing in variables before making the api call?
@Norrismi the variables are passed as a part of the link, which is a string
@JanShah I understand, but right now they are hard coded and I would like to pass in the user's lat long with variables.
@Norrismi you're concatenating a string with your variable
str = 'something'+myVar+'somemore'
^can all of this happen in a http:// link?
not on codepen
I am in Atom
@Norrismi yes, the link is just a string
this is the example: http://api.openweathermap.org/data/2.5/weather?lat=xx&lon=yy&units=metric&appid=076fa41202abdd47719f85af6fa206c4 were xx and yy would the the user's correct location passed in from a function lat=xx&lon=yy
@Norrismi This may serve as a hint:
function getLocation() {
var latitude = 35;
var longitude = 35;
getWeather(latitude, longitude);
}
function getWeather(latitude, longitude) {
console.log(latitude) // 35
console.log(longitude) // 35
}
^^ Pass the data from wherever you get your location to another function where you need to construct your URL
@Norrismi the whole link is a string. look at example from @piteto , you can replace your xx,yy with the variables
eg
'httplink'+latitude+'more of the link'+longitude+'more of the link'
ok, thanks I just wanted to make sure I was on the right track. I will play around with it! thanks @piteto @JanShah
norrismi sends brownie points to @piteto and @janshah :sparkles: :thumbsup: :sparkles:
:cookie: 112 | @piteto |http://www.freecodecamp.com/piteto
:cookie: 526 | @janshah |http://www.freecodecamp.com/janshah
hi guys, i need help starting the Random Quotes Machine challenge. Can i get any tips?
@jeffersonnnn that's a broad question - what in particular do you need help with?
@jeffersonnnn Start with an API (of your choice) and get the data from it in JSON. Then you can output it to the page.
I have done up the html and css parts of the random quote machine, now i'd like to start the JS part. Problem is, i don't know what the JS part would entail. The API portion also has me confused. There was absolutely nothing that prepared us for this in the Ziplines before this
@JohnnyBizzel @piteto
@jeffersonnnn I used this API https://quotesondesign.com/api-v4-0/, they have some code samples that may help you get started and with some googling for issues you run into, you should be able to use it fairly easily. I've seen people use an array of quotes and pick one at random from there as well.
Using jQuery the command is getJSON. I assume you did the jQuery section?
@skilescm Maybe you'd want to look at the nav-pills for that kind of navbar? I was playing around with it today to learn it better and it may meet your needs: https://codepen.io/anon/pen/GMpqRK?editors=1100
Hi, I'm working on the Basic Algorithm Section - Factorialize a Number. Does anyone know why using a for loop doesn't work? I've used both the for and do/while loops and they return the correct answer, but it doesn't pass the test.
@Mitchell0625 a for loop does work with that challenge
what sort of error are you getting?
I'm not getting any errors thats why I don't understand why it's not working
let me see your code
Here's what I have: var total = 1;
function factorialize(num) {
for (i = 1; i <= num; i++) {
total *= i;
}
return total;
}
factorialize(5);
yeah thats actually the correct answer
try refreshing the browser
ctrl + f5
Its still not working
its a broswer issue for sure .. nothing wrong with your code
try hitting f12 to see if console for dev tools says anything
if not, try a diff browser
man .. this channel has really gone quiet. It used to be lively, what happened? we are need to do something for sure
I tried it in safari, but still no luck. Thanks for letting me know my code isn't the problem
maybe raffles or something :joy:
yeah for sure .. no problem. This happens sometimes, challenges that won't submit. Refreshing usually takes care of that, but maybe u need to restart or who knows ... good luck! @Mitchell0625
FCC doesn't reset global variables 😞 That's why it didn't work. Thanks though @OrangeKulture
mitchell0625 sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 466 | @orangekulture |http://www.freecodecamp.com/orangekulture
@khaduch you mean i can create 1 regular expression that will check all the conditional cases?
@Mitchell0625 ohh right! i misread your code .. i thought that total was declared inside the function
@BrianWilliams28 - yes, it's not a really simple one, but actually not too difficult to understand once you see it. Basically setting up conditional groups to match the possible phone number configurations.
Hey guys it's me again bringing you another single page site I made this time using 'Flexbox' for the navigation, I'd like some feedback is there any thing I can improve on? thanks in advance :) https://codepen.io/Mr_Evers/pen/veNXPp
@Koderkid1936 are you from the future?
the image isnt showing for me
some of the font is a little small, the wix.com link is white - and so is the background
@moT01 damn it!!! how what are you viewing it on?
@moT01 but its meant to be white
@moT01 the font too
firefox 55 for ubuntu
white on white?
@BrianWilliams28 - just a "teaser" example - to match the part where the area code could either have parentheses or no parentheses, you could use an expression (part of the complete regexp) like this:
((\(\d{3}\))|\d{3}) - which is basically a grouped expression where you either have three digits - the part that is \d{3} either surrounded by parentheses or not surrounded by parentheses. the vertical bar | separates those two conditions.
your using
footer a {} in your css
the
<a> isnt in the <footer>
@moT01 theres an anchor tag in the footer, the "Wix.com" part is the a I was referring to, the default colour is blue and also underlined hence the reason for 'text-decoration none; and 'color: black;'
@moT01 anything else you think I can improve on?
o yea, my bad - it is in there
i dunno, looks pretty good
@Koderkid1936 There isn't a lot of code to comment on - is there anything in particular you're concerned you may not be doing correctly?
For some nitpicks, remove unused css classes from your HTML and in general, if you use a
For some nitpicks, remove unused css classes from your HTML and in general, if you use a
0 in your css, there's no need to specify the units. 0px can just be 0. Also, it's a good practice to define a default font size when using em/rem units
Personal preference, but the menu stacking on smaller screen sizes will end up taking up half the screen. A dropdown menu may be better for smaller screens.
@piteto thanks, maybe that's why when the browser gets to certain screen sizes some of the font becomes a bit too big
koderkid1936 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 113 | @piteto |http://www.freecodecamp.com/piteto
@moT01 thanks
@piteto that's what I'm going to be working on next, if you have a look at the comment I mentioed it there, problem is I cant yet do 'drop down menus' I dont have the skill so I am going to learn how to do one
hello guys! I'm trying to change the font-family and the color of my h1 in css, but i dont know why it is not working. Can anyone help me?
https://codepen.io/arrudamt/pen/QMRaZm
https://codepen.io/arrudamt/pen/QMRaZm
@arrudamt just try giving the h1 an id or class then target that id/class
@gothamknight i'll try that right now
@gothamknight worked! thanks!
arrudamt sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @gothamknight |http://www.freecodecamp.com/gothamknight
@arrudamt no problem.
@gothamknight i just dont understand why it was not working with the tags
@arrudamt i do not know either
@arrudamt @gothamknight because of specificity
.jumbotron h1
has higher specificity then h1
.jumbotron h1
has higher specificity then h1
#titlehas higher specificity then
.jumbotron h1
@korzo nice! thank you very much!
:cookie: 494 | @korzo |http://www.freecodecamp.com/korzo
arrudamt sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
can you tell me why my console.log dont work ? https://codepen.io/Ophe/pen/mBerqB
@Ophellia because of error in
var weatherType = data.weather[0].description;
@korzo data in callback is error
add console.log(data) at the top of callback
add console.log(data) at the top of callback
@Ophellia navigator.geolocation.getCurrentPosition
is async function
It means that when tou call getJSON, lat, long are undefined
is async function
It means that when tou call getJSON, lat, long are undefined
@korzo how can i fix this
@Ophellia wrap your getJSON call in function and pass lat, long as argument to this function.
then call it from navigator.geolocation.getCurrentPosition callback, when you'll know lat and long
then call it from navigator.geolocation.getCurrentPosition callback, when you'll know lat and long
@Ophellia never rely on global state. Always pass variables to function
@korzo i understand my problem now, thanks a lot
ophellia sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @korzo |http://www.freecodecamp.com/korzo
@arrudamt instead of using id's to style the h1 why dont you use a class instead? it would make things easier?
#title, #subtitle {
color: rgb(230,194,0);
font-family: 'IM Fell Great Primer', serif;
text-align: center;
}
also wouldn't it be better to write this code here like this instead? ^
.yellowStyling{
color: rgb(230,194,0);
font-family: 'IM Fell Great Primer', serif;
text-align: center;
}
@Koderkid1936 thanks! =)
arrudamt sends brownie points to @koderkid1936 :sparkles: :thumbsup: :sparkles:
:cookie: 257 | @koderkid1936 |http://www.freecodecamp.com/koderkid1936
But overall it looks pretty good
@Koderkid1936 thanks! i hope i can "fix" the things that i still want to change
arrudamt sends brownie points to @koderkid1936 :sparkles: :thumbsup: :sparkles:
api offline
Welcome to help find out bug。
@sai2333 it's not working :/
@sai2333 what is this?
var ce = new CalcEval();
@khaduch so each expression inside
() basically allows the regex to check something and saves the match?
how can i centralize the video?
https://codepen.io/arrudamt/pen/QMRaZm
https://codepen.io/arrudamt/pen/QMRaZm
@arrudamt you could try text-align:center for the .video css rule, and change col-xs-8 to col-xs-12 for the div in which the video is contained. (might also need to change the width of the video)