hey guys, I really need your help. I'm working on my media queries for my site but dev tools is driving me nuts because I got the mobile views to how I wanted them, but then when I revisited my site in mobile view it's messed up, so I dunno if it's right or not: https://amitp88.github.io/New-Portfolio/
I also had everything positioned right for mobile but when I visited my site everything was messed up in tablet view, so ugh, this is so frustrating >.<
After changing to mobile / tablet view refresh browser . Sometimes it won't detect Media query. But I just saw your site in my mobile everything is looking good except sidebar is not closing after I click on link @AmitP88
@vinaypuppal ah ok. yeah, I still have to write a function to do that, but for now i'm just trying to get everything to look good across devices (desktop view will be last)
:+1: @AmitP88
just curious, did you view it on phone or tablet?
On mobile phone not tablet @AmitP88
hey everyone, i really hope i'm in the right place. I'm working on building a tribute page, just using html, css, and jQuery here. I cannot figure out how to line up pictures side by side instead of being one beneath the other. -___- https://codepen.io/nancicarmona/full/PGpNmO/
http://quirktools.com/screenfly/ this is good resource for testing on multiple screen sizes which might help you while developing @AmitP88
@vinaypuppal ah ok. I'm bookmarking this now. Thanks Vinay :)
amitp88 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 576 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@NanciCarmona You're going to want to use the bootstrap grid system
@NanciCarmona Put them into a row and then you can add columns if you want to space them out
@NanciCarmona when you're using codepen should take full advantage of its layout - put all the the css in the css tab - and if you want to add fonts and style sheets and libraries - that can be done in the settings. But to get your page working best to go through this and get a good handle on it http://www.w3schools.com/bootstrap/default.asp
Alright guys, I spent 3 days working on my personal portfolio. Please take a look and tell me what you think. I put my heart and soul into this project. http://codepen.io/n_horn/full/rrjPjb
@N1CKL3 Great start - I would drop the word 'aspiring' and just call yourself 'Front-End Web Developer'
@GregatGit I was thinking that too, but I didn't feel confident enough. I have only been coding for 9 days now XD
oh thank you @N1CKL3 and @GregatGit not sure what i had done wrong-- i had been trying that!
nancicarmona sends brownie points to @n1ckl3 and @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @n1ckl3 |http://www.freecodecamp.com/n1ckl3
:cookie: 766 | @gregatgit |http://www.freecodecamp.com/gregatgit
@N1CKL3 looks really nice! love the colors and fonts
@NanciCarmona The same thing happens to me, too. Right concept/code but I can't get it to work. When that happens to me it is usually due to something small I did or missed earlier. Also, thanks for looking at my project!
n1ckl3 sends brownie points to @nancicarmona :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @nancicarmona |http://www.freecodecamp.com/nancicarmona
Ok I am stuck my navbar stopped working when in mobile size can someone help
Alright... I can't seem to figure out how to vertically align middle something in Bootstrap when I have a grid cell.
Like say I have a paragraph of text in a grid cell, and I want it to be vertically centered
Hi there
I have a problem when I'm trying to make a portfolio with bootstrap
I'm trying to put a full width background image
the image is nested on a container-fluid class div element
but there are white spaces at left and right sides of the image
@ecckyel Have you tried using
background-size: cover in your CSS? The image might be too small resolution-wise for your screen
This is if you're applying it to the outermost container
yes
im using this image https://c2.staticflickr.com/8/7764/28786278180_6bfe01ef5a_o.jpg
bigger enough to work propperly but it doesn't
Hmm. Do you have your portfolio on Codepen?
yes
Link it here and I'll have a look and see if I can help
@eccekyel Okay, you want to apply the ID for that to the div with the
container-fluid class
What's happening is a natural result of nesting, there's a bit of a space there due to the way the boxes are aligned
I think alternatively you could set negative margins on the current div, but I don't know how that'd affect other things later on, possibly
I see
thanks a lot
^^
NP!
hey guys, so I've been hacking away all day at making my site responsive and just wanted to get some feedback on it: https://amitp88.github.io/New-Portfolio/
feel free to test it on all your devices, as I want this site to look good on anything lol
feel free to test it on all your devices, as I want this site to look good on anything lol
hey guys, i forgot how to make the
class="fa fa-twitter" work in codepen.io. Help?
@AmitP88 Love the creativity you put into this portfolio. but you have your skills after a conclusion of your portfolio; just seems a little off to me and lacks the creativity the rest of the page has (maybe some icons?).
Also, how about an icon for the tab?
@GuilioM oh yeah, I kept most of the things plain for now because after I get the responsiveness right, I wanna start adding in animations for most of the elemnts
*elements
I was going back and forth on whether or not to move the skills to the home page or just keep them in the contacts section
@AmitP88 well, I love the idea you have there! really feels like a great portfolio in the making.
@GuilioM thanks man :)
:cookie: 268 | @guiliom |http://www.freecodecamp.com/guiliom
amitp88 sends brownie points to @guiliom :sparkles: :thumbsup: :sparkles:
@AmitP88 Sure, no problem. Happy Coding
I was even thinking about making the project pics on the left on a parallax (only for desktop view) and have the descriptions change when the user scrolls down each pic in the parallax
@c0d0er I think you had the wrong person
I was wondering people still uses normalize.css for webdevelopment ? Is it a must have?
@AmitP88 i would write the div.wrap-scroll only once and make its position fixed and when you scroll down to hide it and show it again when stop scrolling. also you can give it a z-index higher then the other elements on the page to be in frontof them
hmmm, that sounds like a good idea! would save me a lot of headache actually lol. I'll try it out :)
actually, I better go to bed. it's nearly 1am and I'm starting to nod off on my keyboard lol. but I jotted down your idea and I'll try it out in the morning. thanks again @sorinr :)
amitp88 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 726 | @sorinr |http://www.freecodecamp.com/sorinr
i'll let you know how it goes :)
@AmitP88 welcome. ok :)
@AmitP88 Hello, Amit. I like the clean look to the page. However, it seems like there is a bit too much white space between sections and elements, and all white seems a bit sterile. Perhaps you could use some subtle shading for each section of the page. I didn't notice the collapsed navigation right away, and I wasn't sure what those animated sliding icons did until I clicked on them. I do like the smooth scroll.
Hello people! I am working on my tribute page: audreydogbeh.com/projects/mattcorby
I am happy with how it looks on desktops, but I have an issue with the look on mobile. I have the background image set with this CSS:
body {
background: #000 url('../images/mattcorbysmall.jpg') no-repeat left top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Open Sans", sans-serif;
color: #ddd;
}
@media (min-width:768px){
body{
background: #000 url('../images/mattcorby.jpg') no-repeat left top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Open Sans", sans-serif;
color: #ddd;
}
}(the media query is here to avoid loading the larger image on small devices and saving a bit of data)
When I load the page on my phone (Samsung Galaxy S4 - Chrome), the background image is all zoomed in. "cover" does not seem to work here. I would love any piece of advice here and if you see something else that looks weird on a different device, the feedback is very welcome. Thanks!
@arya45 it looks ok on my win phone
Can anyone help me with tic tac toe game ? i don'y know how and where to start?
Can anyone help me with tic tac toe game ? i don'y know how and where to start?
@sorinr
@MohammadHasham - I haven't started on it too much, other than experimenting with setting up the grid and placement of X and O marks on it. You might just try to start there, set up the functionality to click and put a mark on various places in the grid, and I'm sure that it will slowly come along...
But how to use AI
in that?
@khaduch
has anyone here done the quote machine?
i am using th designof API and its fetching the quotes/names fine, but problem is if i click it again it adds another quote, it doesnt make another call to add a different quote
Hey guys, i found out that geolocating have been blocked in many browsers. also i get a the error
"Origin does not have permission to use Geolocation service“ every time i try to get the location.
Have someone an idea how to realise the geolocating?
http://codepen.io/v4/full/dpvgxW/
"Origin does not have permission to use Geolocation service“ every time i try to get the location.
Have someone an idea how to realise the geolocating?
http://codepen.io/v4/full/dpvgxW/
Why are my col-md's not working properly?
@MohammadHasham - I haven't gotten to that point - but if you start with a basic setup of a grid, make your "AI" be a randomizer and recognize the empty locations and three in a row, that is the way I would start. Look up how to do the AI code and then plug it in to what you already have?
why are my col-md's not working
@khaduch Thanks
mohammadhasham sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1722 | @khaduch |http://www.freecodecamp.com/khaduch
@MohammadHasham - I have to run along because of travel plans today - I would just share my "sandbox" project, if you want to take a quick look at what I did to set up the grid, etc. I don't want it to be a "spoiler", though, so if you don't want to look too closely... ;) Ken's tic-tac-toe sandbox.
@khaduch Thanks
mohammadhasham sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave khaduch points
It's really barebones, but that's where I started...
yeah that's fine.
If it helps to guide you in the right direction (not to say that it's the best way to do it - I just went for some visual effect to have something to look at) it will be good...
omg is te quote machine supposed to be this hard X_X
You Can Do This(tm)
I have run the code to display the quotes but the new quote button wont genenrate new one quotes
anyone? :(
@Annallon
<button id = "newQuote" class = "left btn btn-primary"> New Quote</button> $(".newQuote").on('click', getQuote);
You’re checking for a class but your button has an ID
Also your codepen is trying to load style.css but it doesn’t need to
doesnt need the style.css no? how come?
Because there’s a seperate css section already so it’s redundant. It’s trying to find a local style.css file which doesn’t exist.
@sorinr thanks for the feedback, maybe it is an Android issue...
arya45 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 728 | @sorinr |http://www.freecodecamp.com/sorinr
ohhh of course @GarySiu thanks
annallon sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @garysiu |http://www.freecodecamp.com/garysiu
@GarySiu have you clicked the button more than once, it keeps adding multiple of the same quotes
No but I guessed that would happen next :)
$.append adds html to an element. It never clears out the previous value.
yeah, thats what I thought
whats the normal method of adding text to a html element?
what i did before was to create an array, to add the two elements, then remove it, then repeat. which may have been a long winded way of doing it
@Annallon http://api.jquery.com/html/ The jQuery docs are pretty good and you can usually guess what you looking for
ahhh thanks @GarySiu looks like such a simple solution too!
annallon sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:warning: annallon already gave garysiu points
http://codepen.io/SharkEvan/pen/WGpdzj Hi, I was wondering if anyone could help me with moving the bottom boundry of my caption up, I have tried margin-bottom and it simply moved the "Timeline of Events" text further away from the image.
weather app is done. Google Chrome keeps blocking my location to the program no matter what I do. Edge will allow it when I'm running locally but will not allow the location when run from CodePen. anyway here's my solution, constructive feedback is welcome as always;https://codepen.io/GMiller64/full/NRpZAN/
@GarySiu
@GMiller64 Looks like in codepen jquery isn't loading because your link is http://
@GMiller64 You can use
https://crossorigin.me/ in front of your openweather URL to get to openweather over http from a site with https: which chrome requires to get geolocation.https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather
@sjames1958gm can you help me?
@SharkEvan You can use margin-top. You might also want to look into flexbox
@GarySiu Thanks very much!
sharkevan sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @garysiu |http://www.freecodecamp.com/garysiu
No @GarySiu all margin-top did was move the whole image further from the top
I am looking to get the image caption, the white box with the text
I am looking to get that to move up
Because my text doesnt fill all that space
@sjames1958gm Thanks, I was not aware of that work around.
gmiller64 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3481 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@SharkEvan You are talking the text that starts with "fury"?
@GMiller64 :+1:
@sjames1958gm yes
What do you mean by “move up”?
hello world
welcome to FreeCodeCamp @Noigallardo!
Do you want the text higher?
No, I want the box the text is contained in higher up the page
Oh
how to start in https://codepen.io/pen TOPIC: Build a Tribute Page .. I tried ti type in HTML so many times, but it did'nt work...
The white box that has the image and this text "Fury, a movie based around the lives of a tank crew in World War 2." I want to move the bottom of that white box up
@GarySiu @sjames1958gm Do you know how i'd do it?
@SharkEvan Less space below the text?
I added
margin-top: 20px;
to the cap-text class and it moved the caption down away from the image (which makes it look better?)
I added
margin-top: 20px;
to the cap-text class and it moved the caption down away from the image (which makes it look better?)
@SharkEvan The frame around the image wasn’t really designed to interact with the text
You Could do this:
.cap-text {
font-size: 16px;
margin-bottom: 0;
}
But it won’t look much better
@Noigallardo You can type in the html into the html section.
<div>
<h1>Hello World</h1>
</div>And it should show in the output panel
hello, someone here
@Noigallardo Everything in the html panel should be what you would put inside the <body>
@SharkEvan My recommendation is to try using your own css class to work out the effect you’re after
Okay, thank you @GarySiu @sjames1958gm
sharkevan sends brownie points to @garysiu and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: sharkevan already gave garysiu points
:star2: 3483 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@sjames1958gm yes i tried to type but the text is not showing in the screen
Well your link there just creates a new pen for me. Did you create a new pen?
@sjames1958gm yes i create new pen, it was there in the upper right
but i can not put even single text in HTML
@Noigallardo You cannot type in the html box?
@Noigallardo Is there a run button?
@sjames1958gm BUT WHERE?
@Noigallardo What is the url in the address bar of your browser? It is hard because I cannot see what you see
@sjames1958gm https://codepen.io/pen/#
@Noigallardo Odd, most codepen urls have the user name in them that one is just a generic one
Added the https cross origin me code, had to add it to my jquery cdn as well. project now works in CodePen but still will not work in Chrome. Chrome brings up my page and the div but will not allow the location data call to go through. https://codepen.io/GMiller64/full/NRpZAN/
@GMiller64 Errors in devtools? I get a box in the middle with my local weather
how to used wheatherAPP
can i used that app
@Noigallardo Press the save button that will give you a different URL maybe that will help?
i will try
thanks anyway
This message was deleted
@sjames1958gm No errors at all. In the nav bar it shows the tracking icon with a red message indicator. When I click on it the message that the tracking has been blocked comes up, I go in to create an exception and my page is listed along with Free Code Camp but it still will not work. When I run the pen through Code Pen or click on the pen in this message chain (using Chrome) it works just fine. It's only when I try to run stand alone I get blocked. Made de-bugging a real treat :)
@GarySiu used the text(htmlstring) function and now its returnign the quotes with p tags
:|
@Annallon If your text has embedded html you need to use html() assuming your using jquery?
hmm it shouldnt have embedded html, thats the thing
ive checked the API Im using
it manually adds the P tags so im a bit stuck at why its even adding p tags at all
@Annallon Do you have a link?
http://codepen.io/Annallon/pen/ozjYNV @sjames1958gm
@Annallon Quotesondesign adds the p tags. You can just inject the quote into a div or you'll have to remove the p tags.
@Annallon Yes, if you look at the response data in the network tab of devtools the string has p tags.
@jdtdesigns ah right, well i saw it added p tags to title but wasnt sure about the quotes, thanks for that
annallon sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 607 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@Annallon Or -
$(".quote").html(Quote);
@sjames1958gm its always about the devtools isnt it .. and thanks, that suggestion has seemed to remove the p tags!
annallon sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3485 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
one issuedown, next issue :) cheers guys
Is there a way i can change my outer border color to white so that it becomes a perfect tic tac toe game board
http://codepen.io/Mohammad_Hasham/pen/rryQmV
http://codepen.io/Mohammad_Hasham/pen/rryQmV
@sjames1958gm
@MohammadHasham The only way I know of is to have different borders for each specifying border-bottom, top, left, right depending on the location.
@sjames1958gm so would that be okay.
@MohammadHasham Yes, just more work in setting up the html / css
@sjames1958gm thanks
mohammadhasham sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave sjames1958gm points
This message was deleted
This message was deleted
https://codepen.io/zarruk/pen/jrByJq Hello, can anybody help me please? I have a search bar and I want that, having written something inside, after pressing the enter key, a function triggers and the value of the string written is assigned to a variable. Any ideas?
@zarruk devtools console. event.replace is not a function. You probably don't want to getJSON on each key but only on enter key.
$("#search").on("keydown", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
handleSearch();
}
});
});
@sjames1958gm let me try it, thank you!
zarruk sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3487 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@sjames1958gm would you please explain me what you did there? I've seen in google that if statement but haven't understood it. Why is that
e.keyCode == 13. Why 13?
@sjames1958gm what are those
e.preventDefault()and handleSearch()methods?
@sjames1958gm is the enter key the number 13?
@zarruk
e.keyCode == 13 means most probably
e.keyCode == 13 means most probably
enter key in your keyboard
@mones-cse ah ok.
http://codepen.io/Annallon/pen/ozjYNV quote still not generating new quotes.. i have compared my code to other people, teh way ive generated new quotes isnt dissimilar.. any input would be appreciated X_X
@Annallon One idea is to request more quotes at page load and just randomly loop over them or do that on click. (posts_per_page)
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=10&callback=", function(a) {
var index = lastIndex;
while (index == lastIndex) {
var index = Math.floor(Math.random() * 10);
}
lastIndex = index;
Quote= a[index].content;
Title= a[index].title;
@zarruk Yes 13 is enter key - sorry was afk
@zarruk handleSearch is just my function that does the search (called from button click or enter key).
e.preventDefault() prevents the default behavior of the enter key (probably no effect her, but if you are using a form this can keep the form from submitting)
e.preventDefault() prevents the default behavior of the enter key (probably no effect her, but if you are using a form this can keep the form from submitting)
Is there a way that i can personalize like adding two options on a prompt window in javascript?
@sjames1958gm And hoy do I do if for example I want to assign the value written on the search bar to a variable?
is there any free online course to learn react ??
@sjames1958gm ah i wouldn't have figured out how to do that using that method from an API .. how did you figure this out?
@Annallon I saw the posts_per_page=1 and tried a different number and saw more posts, also since the quote required an index a[0].content, I suspected you could get more
posts
posts
@zarruk Use jquery to get the value from the input element, I believe it is .val() function.
@sjames1958gm ahhh i wasnt really aware whether we could just literally loop throuhg their indexes or not.. thanks for that!
annallon sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3488 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@Annallon When the data comes to you its all yours to loop through :)
@sjames1958gm in my console it appears Uncaught error: Bootstrap's JavaScript requires jQuery. Do you know what that means?
@zarruk Your jquery and bootstrap are out of order in the setup - put jquery first.
@sjames1958gm oh, I didnt know that had anything to do. But how do I do that? I deleted bootstrap then put it again but didnt work
@zarruk Did you make sure jquery was first?
@sjames1958gm What do you mean first
@sjames1958gm This?
how to put my code pen link in freecode camp
@rajshrisb go change view > Full page
it will open a new page copy that link that lik you will post in fcc
it will open a new page copy that link that lik you will post in fcc
@sjames1958gm I did and still not working
@zarruk hmm
Hi, guys. I just start to do my second project. The Personal Portfolio Webpage. I have no idea how to do it without looking at example.
@zarruk I swapped them and the error went away
@sjames1958gm but look, i also did and there it is the error
How can I break it down into pieces and figure it out?
@mones-cse okay
@zarruk Can you relink?
topic: Random Quote Machine
cant figure out my mistake in js part
http://codepen.io/nirmalannu/pen/qaqdbR?editors=1010
cant figure out my mistake in js part
http://codepen.io/nirmalannu/pen/qaqdbR?editors=1010
@annunirmal devtools console show $ is not defined - you haven't loaded jquery in your js tab
@sjames1958gm https://codepen.io/zarruk/pen/jrByJq?editors=0010
@sjames1958gm i just did, still not worjing
@annunirmal It doesn't like
$('.quote-text').animate({ this in the middle of your $.ajax call
@zarruk Looks like you resolved it?
@sjames1958gm yes, it seems! thanks
zarruk sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3489 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Could someone explain why the quotes on my quote machine have extra quotation marks (the glyphicons are ok, the others are unwanted)? http://codepen.io/monotone2k/pen/ORpdrm
@sjames1958gm how to include jquery in js tab ?
@MohammadHasham
can anyone help me with tic tac toe project how can i just stop the values from changing
In the first dialog box enter '1' and in the second dialog box enter 'X'
@annunirmal click the gear icon
How do I make my button more rounded? http://codepen.io/ronlaniado/pen/VKpRby?editors=1100
And how can I make the color on hover red?
@ronlaniado on :hover
color: white;
border-color: #EB0029;
background-color:red;
@sjames1958gm
.btn-primary: hover {
color: white;
border-color: #EB0029;
background-color:red;
} I have this
Doesn't seem to work, am I doing something wrong
Any tips for the portfolio project on how to fulfill the requirement " I navigate to different sections of the webpage by clicking buttons in the navigation." As far as i'm aware we didn't cover that in the lessons so feeling a little lost
??
is it just having <li><a href="#Section1">Section 1</a></li> and then <div id=Section1> in the section you want it to navigate to?
@BadBoyBennion I'm feeling exactly the same. Each of the UserStory "requirements" involves features that haven't been covered, yet.
can anyone help me with tic tac toe project how can i just stop the values from changing
In the first dialog box enter '1' and in the second dialog box enter 'X'
@BadBoyBennion @abundantmind we didn't cover navigation, that's what they mean with the "read-search-ask" and the "figure it out for yourself part", the thing about free code camp is that it doesn't teach all you need to tackle the challenges
@BadBoyBennion @abundantmind so you basically have to come up with a portfolio that you'll later fill up with the other challenges
@BadBoyBennion @abundantmind you can use placeholders, here's my pen, maybe it'll help you better visualize what they want https://codepen.io/serg337/pen/bZOwXA
@serg337 your portfolio looks cool, could do with animations on the Contact buttons e.g. hover effects, but nice :D
@APRim05 thanks!!
serg337 sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:cookie: 235 | @aprim05 |http://www.freecodecamp.com/aprim05
by the way, anybody currently working on the Twitch TV challenge, I’m really having a hard time understanding the user stories, considering the free code camp channel is closed…I have no problem with the coding, can someone help me out on understanding what exactly they want in this challenge?
@serg337 You need to have a Twitch Client ID - it is free to get one. You can a href to the FCC for the online status. Then you need to add the id to the url as well as the header of the ajax call and do not have a callback. The new error message for no accounts is 404. I hope this is helpful.
@KoniKodes Hi! I do have the client ID, and I’ve already made 2 different stream list pages, the thing is that the rules are so ambiguous…for exxample, I already did a page that lists out the array of 25 streams, and I also did one where I list out specific users previously defines in an array, my problem is that I don’t know if I’m on the right track or not, cause I can’t quite understand the user stories
a particular problem is with the fcc channel, since it’s closed and not streaming, I can’t get any info on it
I could submit either one of the one’s I’ve developed, but that’s my problem, I don’t cause I’m confused about the user stories :(
@serg337 can you show me your pen? You just need to say if FCC is online or not, and then link to the page either way. They want you to be able to show all 3 categories: online, offline, no account. Then have a button that shows all, who is online only and who is offline only (no Account is not needed). It should look something like this: https://codepen.io/KoniKodes/full/pbPvGj/
@KoniKodes I don’t have a pen yet, I like to work on brackets first and the upload the pen, I’m really a big fan of code pen, I use it for the challenges, but what you’ve said just now, really helps me. Now I have a target :)
thanks @KoniKodes !
serg337 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @konikodes |http://www.freecodecamp.com/konikodes
@serg337 Glad I could help :-) Thank you for the brownies
:cookie: 278 | @serg337 |http://www.freecodecamp.com/serg337
konikodes sends brownie points to @serg337 :sparkles: :thumbsup: :sparkles:
http://codepen.io/MMTF/pen/ozzyLZ why arent my cards stacking!!!i see no reason
@leebut hey thank you for your feedback! :) I actually got the scroll-button idea from this site: https://bert.house/en/ yeah, I was thinking about applying subtle color changes to each section. I just gotta get the page polished when it comes to the responsiveness. as for the excess whitespace, I wanted to make sure that each section wasn't smooshed together incase the user scrolls with the scrollbar instead, but I'll definitely tweak that. thanks again :)
amitp88 sends brownie points to @leebut :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @leebut |http://www.freecodecamp.com/leebut
going mad righ tnow :(
@MMDF What exactly are you trying to do? With which area?
section 2
my projects
I want to cards to be horizontally stacked in desktop mode(my page is responsive)
i tumbled around with the positions to center everything but i think I did something wrong
@MMDF I'm going to private message you.
also cards stack horizontally when the .cards div's width is set to 1000px
Can somebody look at my quote generator? It won't refresh on button click. I'm hoping it's a small oversight. (Note: I'm using vanilla javascript, so no jQuery help please)
Can anybody help me with the cards not stacking? http://codepen.io/MMTF/pen/ozzyLZ
@BtheGit i got it!
@MMDF try putting your card div inside a row and and add a column size class to the cards inside that row.
you set window.onload to newQoute's return value
sorry didnt got it :D
:(
https://codepen.io/zarruk/pen/jrByJq?editors=0010 Hello. I've been trying to implement the wikipedia api in my project. However, I don't know why it is not working. I don't know if it is wrong or whatsoever. Anybody help please?
@zarruk Your console is working, but you are not sending anything to the results id.
for the moment I just want to see the json in the console but i'm not even getting the json
@KoniKodes
@zarruk Let me look again.
@KoniKodes ok thanks
zarruk sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @konikodes |http://www.freecodecamp.com/konikodes
Try adding : url: url, async: false, dataType: "json", before your success function
@KoniKodes what do you mean?
Did someone hack the main fcc chat?
I just saw a bunch of porn...
@zarruk My error, although you may still want to call the async: false. Look at your console log. You are telling it to return the myVar which is the keyboard is entered. You are not telling it to return the search results, but the search term. So your console is returning what was typed in the search box.
I was wondering if anyone had some suggestions for my jumbotron. Right now I have it set as two col-md's to get the layout I have, but the problem with that is the the elements get pushed around when the screen resizes
@mhdavis Trying placing your viewport meta tags inside the html settings.
@VaseJS Thank you for your help! :-)
@KoniKodes sorry, could you explain what you mean?
@mhdavis On codepen, you have add the bootstrap for css, but it needs something like this <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> if the html settings so that it knows to resize everything to the viewport size. Under stuff for head. Also, your header links should be placed into the css settings as additional stylesheets, and not in the html coding. This is only true for codepen.
@KoniKodes so do you suggest putting the navbar content and such into a header instead of the body and moving any links referenced in the html to the css conected with those elements?
also I'm not super familiar with fixing the <meta> so I guess i should google that to see what sort of things its responsible for in the html
it seems like from what you are suggesting it mainly affects how elements on the page fit depending on the device loading the page
@mhdavis No, that's is not necessary. try this for the nav: <body data-spy="scroll" data-target=".navbar" data-offset="0">
<!-- navigation --> Yes, exactly - the page is resizable with bootstrap help, but you need to size according to viewport - so it's better to add it (in the meta tag). Google viewport and resize, see if that helps.
<!-- navigation --> Yes, exactly - the page is resizable with bootstrap help, but you need to size according to viewport - so it's better to add it (in the meta tag). Google viewport and resize, see if that helps.
So are you suggesting i add this to the meta line? should i tweak these settings in any particular ways?
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
also adding stuff you suggested to the body made it so as I scroll down the page, the particular sectiont that im on in the page is highlighted in the navbar, which is pretty neat
@mhdavis Instead of push, use offset instead:
<div class="col-md-2 col-md-offset-1">
<img class="smaller-image" id="profile-pic" src="https://pbs.twimg.com/profile_images/611301315264839681/43NNwpaH.jpg" alt="Picture of Me">
</div>
<div class="col-md-7 col-md-offset-2" id="jumb-info">Adjust the top and bottom margins of your profile picture to position it correctly on smaller screen sizes.
@mhdavis Yes, especially the scales and width / height. This tells it to scale down to fit. Allowing the user to control the scale is optional.
@TylerMoeller I swapped out the push for offsets. on the backend does that adjust the cols without creating more space internally with the cols? also it pushed the id="jumbo-info" portion further from the round img, can this be fixed by playing with the padding?
@mhdavis It has the same effect as adding an empty column before the content. If you want less space between the image and the text, change the offset to 1:
<div class="col-md-8 col-md-offset-1" id="jumb-info">
@KoniKodes as for the <link> elements, how do i put them into the css?
@KoniKodes I also included the <meta> line but am not sure on how to tweak the settings to make sure things are working properly
@TylerMoeller yea that works perfectly, the problem i still run into tho is if you decrease the width of the page, the bottom social media buttons still clip out from the jumbotron section
@TylerMoeller likewise, decreasing the page width also results in the lettering "designs built from first principles" overlaping a little with the image
p.s. @TylerMoeller and @KoniKodes thanks for taking the time really appreciate it!
:cookie: 849 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
mhdavis sends brownie points to @tylermoeller and @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @konikodes |http://www.freecodecamp.com/konikodes
@mhdavis Yeah, you'll need to adjust the top and bottom margins of your profile picture to prevent that from happening.
This message was deleted
@TylerMoeller i tweaked the margin-bottom on the picture so now the social media buttons stay in the jumbtron frame
but for some reason tweaking the margin-right doesn't seem to change the spacing on the lettering to the right of the picture
fun stuff
tfw I spend the past 30 minutes wondering why my newbie react app is not working and trying all sort of debugging only to find out that I was using module.exports like this "module.exports(MyModule)" instead of this "module.exports = MyModule"
@KoniKodes is there a way to change the css on ```
<body data-spy="scroll" data-target=".navbar" data-offset="0">http://codepen.io/zarruk/pen/jrByJq?editors=0010
why is my getjson giving me an array instead of a json, anybody knows?
This message was deleted
This message was deleted
my final url would be
https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=opensearch&search=" + myVar + "&format=json&callback=?", right?
@zarruk :+1:
@vinaypuppal it still gives me an array. i dont see the difference :smile:
@zarruk oh okay i understood it wrong and yes you will get array only not object from API
@vinaypuppal ah ok, thats fine. just wanted to confirm im not doing it wrong
thanks :)
@zarruk and inside that array the second element contains descriptions of word you searched for so use them to show in your UI
yes, that is what i was going to do :)
@mhdavis You'll need to modify the #jumb-info css to move the text further to the right
@tichusp Yes I know that feeling! 😂😂
:D
Any suggestions about this navBar?
@ronlaniado wat is the run pen
@OmarSalem563 you need to click run pen to see what navBar
@ronlaniado one suggestion i would make is when it becomes small enough, you change the tabs to a dropdown menu
here is an example of what I mean. If you make the screen display smaller, the navbar changes to a drop down
@mhdavis Huh, I like that, I
will look into it! :)
@mhdavis Did you get the answer, I've been offline. try this in your html: <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#f3dac4;"> The style="background-color" can be made any color you want...
hey guys can anyone tell me why I have white space on the bottom of my doc on this?
@tadake body { padding-bottom: 50px; }
that doesnt work @hassenrmili .
@tadake remove it man
@hassenrmili make your body padding:0;
@KoniKodes yes but he can remove it or set it to 0px
ohhhh man. I didn't even realize I had it there hahahaha thank you man @hassenrmili . I feel kinda silly because I've been searching for that for an hour lol. I think it was left over from trying to get my navbar to fit haha.
@hassenrmili True...
@tadake you are welcome :smile:
can anyone tell me if there is a better practice for how i have my click functions on my TableHeader component http://codepen.io/Brayn/pen/EggZOj?editors=0110
Oh,I really get stuck in the image parts, who can help me 😭 I thought that the whole page is something wrong but I don't know why :( http://codepen.io/VIchulee/pen/ZpZLdJ
It just looks terrible :( I don't know how to use Bootstrap exactly
Can someone look at my codepen portfolio page code? When I coded the nav-pills to be fixed at the top, my page one block gets overlapped and stuck to the top of the page. http://codepen.io/jacobshoemaker92/pen/KgpENE