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.
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 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())
ok
@heroiczero thanks !
rafaelmonroy sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1737 | @heroiczero |http://www.freecodecamp.com/heroiczero
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?
@gothamknight I’m trying to avoid that specifically, any other ideas ?
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 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1738 | @heroiczero |http://www.freecodecamp.com/heroiczero
too late, lol
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
@mers89 on lines 33 and 52 of your js, you are using http for an image.
use https
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?
I have an image on 52 too . If I take it off, some blank images come out
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.
@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
@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] ?
forkerino sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @iangracia |http://www.freecodecamp.com/iangracia
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
the codepen link in the tweet?
i mean the quote in the tweeter page, it doesnt refresh
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'
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
@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.
what sort of error are you getting?
I'm not getting any errors thats why I don't understand why it's not working
Here's what I have: var total = 1;
function factorialize(num) {
for (i = 1; i <= num; i++) {
total *= i;
}
return total;
}
factorialize(5);
try refreshing the browser
ctrl + f5
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
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
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 but its meant to be white
@moT01 the font too
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.
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?
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
@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 worked! thanks!
arrudamt sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @gothamknight |http://www.freecodecamp.com/gothamknight
@gothamknight i just dont understand why it was not working with the tags
@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
arrudamt sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
@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
@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
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;
}arrudamt sends brownie points to @koderkid1936 :sparkles: :thumbsup: :sparkles:
:cookie: 257 | @koderkid1936 |http://www.freecodecamp.com/koderkid1936
@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。
@khaduch so each expression inside
() basically allows the regex to check something and saves the match?
@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)