@blackcytographer - start with the code from the Bootstrap site (if you're using the bootstrap navbar) and modify it as you need it. It works well. Make sure that you are using the information for the Bootstrap version that you are loading, either V3 or V4.
why aren't my pills working: https://codepen.io/andrewmparker/pen/rwVdeg
what are pills?
bootstrap nav-pills
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp check that out
@andrewmparker , they seem to be working ok now. The Nav bar works great.
@roxroy why would my icons not be working
@andrewmparker - I don't know if this has any bearing on your problem, but you are loading Bootstrap two times. On codepen, you should not have the link for the bootstrap.css in the HTML panel. That will make it load it again after any custom CSS that you have. You might want to check on that?
hey guys, just started my jQuery lessons. I'm a bit stumped with the first lesson. I can't seem to get the script element to work. Any feedback would be much appreciated!
<script>$(document).ready(function() {});</script>
<!-- Only change code above this line. -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
varcode="formatted";
@andrewmparker - where are you using icons? font-awesome icons? I don't see any in your page at this point?
i used them on my twitter link, but it hasn't showed up
@khaduch
@andrewmparker - oh, sorry, I didn't see that because I searched in the wrong panel. Try
fa-twitter instead of fa-Twitter
that worked thx @khaduch
andrewmparker sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2947 | @khaduch |http://www.freecodecamp.com/khaduch
@zanerogers1990 - I think that that looks good - what are they asking you do to? Just put in the empty function? If that's all - try to copy and paste the section you changed, reload the page, and paste your code in and try it again. SOmetimes the browser cache gets something "stuck" in the wrong place.
@khaduch that was exactly it. Thank you!
zanerogers1990 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2948 | @khaduch |http://www.freecodecamp.com/khaduch
Portfolios done WOOOO. Waiting to make other obvious changes till javascript, check it out yall :) http://andrewsawesomesite.com/
@fullmetal7777 pretty nice andrew
@Cornielle there we go, was waiting for someone to boost my ego a little bit haha thanks cornielle. I spent so much time on the tribute using no boostrap, so using bootstrap with this, i just blazed through it. Bootstrap is the man
fullmetal7777 sends brownie points to @cornielle :sparkles: :thumbsup: :sparkles:
:cookie: 8 | @cornielle |http://www.freecodecamp.com/cornielle
@fullmetal7777 but i have a 2500 width in my monitor and Contact dont have enough margin with the right side try tu use percent with margins for get a standard position in your responsive design
@fullmetal7777 yeah its important , looks good man :)
@Cornielle only got 1900 here, didnt even think about bigger monitors. Holy hell thats a large monitor bro. Actually, the contacts just flow a little bit over, fixing it now, thanks for the head up
fullmetal7777 sends brownie points to @cornielle :sparkles: :thumbsup: :sparkles:
:warning: fullmetal7777 already gave cornielle points
look this page : http://samuranium.com/ if you try to resize the page you 'll see the menu have a standard position
@fullmetal7777 yeah man and for free XD , a brother gave me that but im thinking to give money anyway , he said that the monitor have scratch but i didnt see nothing XD probably have OCD lol but i apreciate that and i will give money anyway for this monitor
@Cornielle fixed! im sure ill be making a ton of changes to this page as i learn js and become less of a noob. Im thinking of getting another monitor and have it vertical mounted for programming since i seem to be into this lol 3 monitors, 2 landscape and 1 portrain view, omguhhh ill be in heaven. I figure 3 monitors is the sweet spot anyways, one for googling why your a goof, one for looking at your current project, and the vertical monitor for code. And monitors really arent that expensive, its worth the price and more imo
@Cornielle Ive got 2 currently and it easily speed up everything x2
two monitors are great, i have one with my lesson up and the other with chat :)
@fullmetal7777 bro im feeling in the heaven with 2 monitors right now.. is beautiful , i cant think how i couldnt try this before and i dont know how i feel if i have 3 monitors XD but im glad for you bro , is very intense use 2 monitors , i like to move some windows in 1 monitor for "monitoring xD" some things and rush in my main monitor :D
@fullmetal7777 about js, i ll try with vue js and laravel for a long time i think , thats what im want to try right now , if you want try to incorporate js in your portfolio , sounds great
@zanerogers1990 yess , pretty nice man
why are my icons doing this: https://codepen.io/andrewmparker/pen/rwVdeg
@Cornielle for real, 2 monitors is one of those things where you get em and go "how the hell have i lived without this" lol vue and laravel doesnt ring a bell, then again i havnt even started js yet
@andrewmparker doing what, be more elaborate lol
@fullmetal7777 the linkedIn and github?
@fullmetal7777 hahahahah yes man
@Cornielle @fullmetal7777 guys i finish my portfolio recently what do you think?
@andrewmparker lets see
they are all over the page randomly
@fdemaa hey!
@fdemaa damn thats clean dude. And it scales, super nice!
@fdemaa i was ready to go "this dudes site is probly gunna suck, just gunna ignore him.." and ended up thinking the opposite lol not much i could say regarding functionality
@fdemaa I'd change the heading font to something more sophisticated as the banner
and the Send Message button need some space
and the Send Message button need some space
@andrewmparker first off, i see row but no col-x-x in the row class. Also, probly has something to do with the justified
@longnt80 i kinda like the font lol
thx @fullmetal7777
andrewmparker sends brownie points to @fullmetal7777 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @fullmetal7777 |http://www.freecodecamp.com/fullmetal7777
@fdemaa beautiful
@fullmetal7777 thanks man! haha I like your site too!
fdemaa sends brownie points to @fullmetal7777 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @fullmetal7777 |http://www.freecodecamp.com/fullmetal7777
@fdemaa looks good man :)
@longnt80 hi man!
yes maybe i need to change the font for the headers and also add that space to the button! :)
yes maybe i need to change the font for the headers and also add that space to the button! :)
@Cornielle @andrewmparker thanks!
fdemaa sends brownie points to @cornielle and @andrewmparker :sparkles: :thumbsup: :sparkles:
:cookie: 10 | @cornielle |http://www.freecodecamp.com/cornielle
:cookie: 129 | @andrewmparker |http://www.freecodecamp.com/andrewmparker
@longnt80 i kinda like the font lol
@fullmetal7777 oh yeah, just my opinion, everyobody has one just like... :D
can any1 help me with this? Why does this only work when there is a space between the selector?
https://codepen.io/anon/pen/xrGWvg
https://codepen.io/anon/pen/xrGWvg
when i take the space away from ul and the selector it doesnt work
@fdemaa see youu next time bro!
@fullmetal7777 have a good time/night bro!
@Cornielle : bye +1: !!
@intcreate - hello... I think that you want this:
li:nth-child(even) {
color: blue;
}because you want to select the elements that are the nth-child of its parent, at least according to the example in this page
@khaduch thanks
what is wrong with my social media buttons
So for the portfolio we are expected to use JS?
@TehNuuki no
use what you want
do something simple and fast, ...by the time youre done with the rest of the projects - you will probly want to redo the whole thing
@moT01 thanks! I look at other peoples portfolios and they just look so advanced
tehnuuki sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 706 | @mot01 |http://www.freecodecamp.com/mot01
@fdemaa - I took a look at your site briefly last night - it looks pretty good. I realize that you are probably not a fluent English speaker, but the text parts are somewhat "needy" in spelling and grammar. A couple things that I can point out as examples (basic ones): in your HTML skills "I used the last version of HTML" - should be "I used the latest version of HTML". In the CSS section, you have "CCC" as an abbreviation for "Cascading Style Sheets". Don't be offended - I'm not trying to pick on your English language skills, but if you are intending to keep this as an English-language page, it does need some cleanup. But you sound very enthusiastic, which is great!
But beside that, the page looks good - good ideas and execution, the responsive behavior looks good.
@andrewmparker - your social media buttons are all over the place!
i know, but why @khaduch
@andrewmparker taking a look
@andrewmparker - I'm trying to see if I can understand what's going on...
that is strange
wondering if its cause you're trying to apply those classes to an <i> tag
@andrewmparker - you have some problems with spacing of things in the twitter anchor tag - missing spaces and equal signs. Not sure if that would cause all of this mayhem?
that didn't seem to change anything @khaduch
moving the classes to the <li> tag seemed to remove all the icons
@andrewmparker - if you run the "Analyze HTML" tool on it it seems like it is very unhappy with your HTML. It is complaining about the
i not being a child of the <ul> element, etc.
i just deleted the code and im going to try again
thx @khaduch @moT01
andrewmparker sends brownie points to @khaduch and @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 707 | @mot01 |http://www.freecodecamp.com/mot01
:star2: 2949 | @khaduch |http://www.freecodecamp.com/khaduch
<ul>
<li class="social fa fa-fw fa-twitter"><a href="https://twitter.com/drewparker___" title="My Twitter" target='_blank'></a></li>
<li class="social fa fa-fw fa-linkedin"><a href="https://www.linkedin.com/in/drew-parker-5a5046142/" title="My LinkedIn" target='_blank'></a></li>
<li class="social fa fa-fw fa-github"><a href="https://www.github.com/andrewmparker"title="My GitHub"target='_blank'></a></li>
</ul>
i did that, and the icons disappeared
but its like theyre there, just invisible
@andrewmparker - it looks like just a couple
<i> elements that didn't have the closing > on them - after cleaning that up and taking away the list, it looks cleaner. Maybe the list wasn't really the problem after all that? Just the corrupted <i> elements?
@andrewmparker - yes, that was it.
howd you get it workin?
@moT01 - in the original code, the
<i class="fa fa-fw fa-linkedin"></i> was missing the first closing > for the <i> element, so that was making things all goofy... just adding that in to the original code made it better.
@moT01 the class fa fa-fw fa-twitter needs to be in the i tag not the li tag
It is working now thanks peeps
o
@khaduch hey ken ! thanks for the help! yes im not very fluent at english, i will check that grammar :)
I m happy you like the site also !
I m happy you like the site also !
fdemaa sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2950 | @khaduch |http://www.freecodecamp.com/khaduch
I'm working on the weather app and my latitude and longitude keep returning undefined. Any suggestions? Here's my code: https://codepen.io/jrwoods42/pen/WObNRP
hi guys,need some help with my portfolio project, why my freecodecamp icon and linkedin icon in the contact section doesn’t open directly as the Facebook icon?,https://codepen.io/Moh-Nabil/pen/mwdYPP
@MohNabil Not sure if this might help but make sure you add target="_blank" inside your <a> tag like this:
<a href="https://www.linkedin.com" target="_blank">
@sergrdz7 it worked man,thanks a lot appreciate it.
mohnabil sends brownie points to @sergrdz7 :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @sergrdz7 |http://www.freecodecamp.com/sergrdz7
@jrwoods42 - did you change your weather app? I'm seeing my town and state location properly displayed, so something must be going right?
@sergrdz7 and by the way what do you think about the portfolio is it ok?
@jrwoods42 - oh, you might be having a different problem. You have to synchronize your attempt to get the weather information to take place after the location API returns the data. You have to embed your call to the weather api within your
$.getJSON call to get the location, specifically within the callback function. Otherwise the two API calls are made in quick succession, the second one occurring without regard to the completion (via the return of the coordinates) of the first one. THere are other ways of doing that with new javascript ES6 "promises", but that isn't yet part of the freeCodeCamp lesson sequence, unless they've put something into the Beta version?
@MohNabil I think there's plenty of room for improvement, but if this is your first portfolio I wouldn't worry so much. You will improve as you work through the projects and come back to it, but its a good start.
@sergrdz7 thanks man,it’s my first one and i made it in one day,so i will send it now to continue the way on
mohnabil sends brownie points to @sergrdz7 :sparkles: :thumbsup: :sparkles:
:warning: mohnabil already gave sergrdz7 points
@MohNabil keep at it!
I think everyone on freecodecamp should try this challenge, it will push you to learn a lot! https://github.com/Kallaway/100-days-of-code/blob/master/README.md
@sergrdz7 - how many days have you been doing 100-days-of-code (if you've started) and how is it going?
@khaduch I'm on day 70, I just think its a great way to push yourself. I've missed some days but I try to learn something everyday. And you get a lot of practice committing and documenting on GitHub which I think it's a plus.
Hi guys. I am learning code, making a wp website and trying really hard. I finished a section on my home page but i dont know why is getting weird. Can someone help me? http://imgur.com/a/rkvaB
guys.. im kinda stuck in jsonp... how to pass the data to display it on the ui...
$J.ajax({
url: "https://api.darksky.net/forecast/a5bf93a3483284c2ca154cd536e8ea41/37.8267,-122.4233",
method: "GET",
dataType: "jsonp",
success: inquireData = function(data){
this.temp;
this.country;
this.weather;
if (data){
this.temp = data.currently.temperature;
this.country = data['timezone'];
this.weather = data.currently.icon;
} }
});
weather = new inquireData();
displayTemp.innerHTML = weather.temp;
@PedroJuan91 J.ajax?
is that right
are you able to console log your
data?
@khaduch @sergrdz7 im on day 8, im very slowly starting backend, ...about to start the first project
@ricpconsulting you should put it on a codepen maybe and format it so we can read it
@PedroJuan91 - you should just be able to use jQuery or JavaScript functions to access the HTML elements in your page and write the data to them. Do you have a page on CodePen?
@moT01 Good luck man just keep coding!
has it been mostly fcc for your 70 days?
@sergrdz7
@ricpconsulting - which part of that imgur post is the page? The bottom part looks as though it has that text that is supposed to be rendered as something on the page and it is not being interpreted properly to form valid HTML - but it's not clear what you're exactly posting there, at least not to me?
Hey, for the building of the codepen portfolio challenge, it says to "build a codepen.io app" but that means build a portfolio using codepen's browser service, right?
@dalumiller that is what they say
yes
@dalumiller - that's correct - use CodePen to open a page, add HTML, CSS, and Javascript if needed, and it should become your portfolio.
@moT01 gotchya, I think the word "app" threw me off and made me think I had to code an app
but if you want to make it local and put it on github or elsewhere, you can link there and i think that would be fine as well
@moT01 @khaduch Thanks
dalumiller sends brownie points to @mot01 and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 708 | @mot01 |http://www.freecodecamp.com/mot01
:star2: 2951 | @khaduch |http://www.freecodecamp.com/khaduch
hows my side project ken? https://lakes-f76ce.firebaseapp.com/
Hey all, i have a question about adding classes. If I have an element, let's say a form, that i need to identify in order to call it in my js, what is the best practice? Should I wrap it in a div and add a class to that div, or can I add an extra class onto this row?
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="search" type="text" class="validate">
<label class="active" for="search">Search</label>
</div>
</div>
</form>
</div>
im pretty satisfied with how it turned out
@moT01 Only like the first 30 days,I've had other sources and been trying to learn React so I can come back to fcc and do the advance projects using it.
@abohannon i think forms are more for submitting data to a server, ...you can probly just use the input tag without the form
the less tag you can use the better, ...but if you need more use them
@khaduch Can you offer any feedback on this? https://codepen.io/dalumiller/full/jwPVvZ/
@sergrdz7 fcc's react if you didn't have it http://hysterical-amusement.surge.sh/
@dalumiller Hey, you could add a social media button.
@dalumiller or a copyright footer
@abohannon Hey Adam, I typically will define a JS specific class to my html elements that I need to target. e.g.
js—className. This is a good idea because you also won’t potentially compromise your JS later on in the case if the standard element’s class was ever altered or removed.
@ivancsicsmarkus Nice, thanks
dalumiller sends brownie points to @ivancsicsmarkus :sparkles: :thumbsup: :sparkles:
:cookie: 586 | @ivancsicsmarkus |http://www.freecodecamp.com/ivancsicsmarkus
@abohannon could you maybe just use two tags there? the div.row and then the <input>
@jwoo92 i like that idea, thank you!
abohannon sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 420 | @jwoo92 |http://www.freecodecamp.com/jwoo92
@dalumiller Maybe you can add a background ? but is nice
@bytao7mao Yeah, I was playing with background, maybe an old civil war may that's nearly transparent, but ran into a lot of problems. I think I'll go back and add it when I have more of the basics down.
@dalumiller good ideea man, but looks good anyway
@dalumiller - it looks fine. The only comment I would make is that I would limit the width that the text can span on the page, so that on a really wide display it will not involve scanning across the entire width of the screen to read it. You can do that with the Bootstrap grid, by making the page content occupy maybe the center 50% of the page? Something along those lines. Also, as far as CodePen usage - you have to put all of your custom CSS in the CSS panel, all external libs should be in the various config panels, etc. But it's a good start and first project.
@moT01 oh yeah, I haven't tried the newer lessons lol I wan't to finish the course I'm doing and then I'll definitely check it out.
Good points Ken, thanks
I need some help if anyone is available
Hi guys.. I have a question. when i run an angularJS program in Atom. It's doesn't work and doesn't show any error. but when i run same program on codepen. It's working. so what is the reson? why it's doesn't work in Atom(google chrome). Here is the Link for codepen : https://codepen.io/Leena8392/pen/xrGpWp
Is the portfolio supposed to be built as a project on codepen, or a post?
Help me Please
@Leena8392 You should add angular.js script to the bottom of the body (just above your app.js)
@Leena8392 maybe it helps
@Netrunner21 whats up
@moT01 I've asked this before, but I need some clarification
I'm doing Record Collection
I can't get anything to return to the console on the left above the tests
@Leena8392 without seeing any more, is angular properly linked?
no matter what I try to return it returns the entire collection. Is that on purpose?
im not sure i understand your question, ...you say you can't get anything to return on the left above the tests, ...meaning the area with the black background? ...either way it looks like its supposed to return most of the collection
can anyon help me with lining up the program symbols
@ivancsicsmarkus . I added angularJs CDN link in the head section. Let's try to add bottom of the body. Thanks
leena8392 sends brownie points to @ivancsicsmarkus :sparkles: :thumbsup: :sparkles:
:cookie: 589 | @ivancsicsmarkus |http://www.freecodecamp.com/ivancsicsmarkus
@moT01 on every other challenge the console (black background above tests) returns whatever I tell it to. If I said
return 5 it would put only a 5 in the console. This challenge returns the entire collection (or some of it) no matter what I return, and even when I remove the return line all together. My process usually involves returning snippets to the console. I can't so what I'm doing so it's much tougher to solve the challenge. Unless my browser is bugging out, this one is set up to blind fold me so I have to write most of the code without being to check whether certain parts work.
@ivancsicsmarkus. I already add CDN link in the head section. And Js file bottom of the body. But it's doesn't work.
@Netrunner21 maybe try writing it in codepen or somewhere else, ...i did find the fcc console thing there to be a little annoying and confusing at times
it is supposed to return the whole collection, after you have modified it
Ok thanks @moT01 It would have been nice if they had mentioned what they were doing under the hood.
@Netrunner21 yea, as i got to the end of those algorithms i found myself writing most of them in codepen
can anyone help me with bootstrap please
I was on here a couple years ago before I got off track and restarted recently. Fun fact: Record Collection was originally part of the Basic JavaScript section. Now it's an advanced algorithm. Go figure.
soory, i was creating this offline, i uploaded to codepen just to share.
Can you add bootstrap col to just one element of your page, or does it need to be for the whole thing?
was that to me @dalumiller ?
no, to anyone
@xeroxysandesh whats the problem?
@xeroxysandesh @dalumiller https://www.udacity.com/course/intro-to-html-and-css--ud304
Udacity's Intro to HTML and CSS has a section on Bootrstrap that might help
Udacity's Intro to HTML and CSS has a section on Bootrstrap that might help
@moT01 i created two columns inside a row , first with image and 2nd with text, i want the row to stretch 100% and height of my screen??
I need help with my first API project (Random Quote)
I have my index.html & main.js set up on my Mac, and I am trying to run the page from Chrome. The page loads fine, but when I click the button that loads the JSON API I get the following error:
XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=. The 'Access-Control-Allow-Origin' header has a value 'http://null' that is not equal to the supplied origin. Origin 'http://localhost:8000' is therefore not allowed access.
hey guys I'm on my portfolio page and having trouble adding links to my linked, Facebook and GitHub to my first page can anyone help
@xeroxysandesh theres a unit of measurement in css
vh
I'm using this site for refrennce
viewport height i think
try that maybe
I want floating social buttons
@xeroxysandesh so in the css put
height: 100vh;
@xeroxysandesh you need to wrap each column in <div class="col-md-12"> column content</div>
more bootstrap help https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
@dcenatiempo @moT01 i actually want two columns , exact as above pic, but i want the pic to be full height and the div in right to be at centre of the div
this way
hey check my game( little modified) https://codepen.io/shivamg11000/full/RgwwwQ/
Hi, how can i attach twitter share button at my codepen? I've added the the example code from twitter developer website, but it's not working
I got an error from browser's developers tool which said "Refused to display 'https://twitter.com/intent/tweet?text=Hello%20world' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'"."
thanks a lot @moT01 it worked
xeroxysandesh sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 709 | @mot01 |http://www.freecodecamp.com/mot01
Hi guys , Ive just built a wordpress site from a free theme for a local business. How do i sell it to them?
@123xylem what ?
@jedidiahwahana link your pen
@fdemaa i built a site with a free theme
as a draft
now i want to sell it to them
How do i do this?
Do i upgrade on my end to business then let WP host it. Im not sure
you should check very good if that free theme is actually for resale
because what you are doing is taking someones work and make profit out of it
and if something is free, does not mean you can re-sell
usually free themes are for personal use
but read the terms and conditions there...
hmm ok
didnt know that
@kirbyedy as much stuff as there is on WP it doesnt really cover reselling sites
did you found that theme on the actual wordpress web site ?
ye
can you link it ?
@kirbyedy theres very little info on making and selling a WP site but I know a lot of companies do this
which is illegal, unless the owner knows about this and asked if his/hers content can be used in a commercial way, aka profit from the persons work
@kirbyedy this is the url to my pen https://codepen.io/jedidiahwahana/full/vZOrVN
Guys Can i get some help on this
@jedidiahwahana make the button out of it, same as on the quote, and on click handle the tweet, by grabbing the already populated div with a quote and pushing it to the twitter
I'm starting to learn how to code
but this thing is giving me a head ache
what are you trying to do? I'm just starting as well but maybe we can help each other. https://codepen.io/yelhsa/pen/YQKewG?editors=1100
@Thayyebsalim
can ayone help me with js?
Ok @yelhsa
im feeling like an idiot
we all do sometimes :)
so what are you trying to get done? @Thayyebsalim
@kirbyedy haha you know javascript?
define know... :)
I want the header to be responsive @yelhsa
i Cant even even get it to fill the page
i Cant even even get it to fill the page
I poke around it yes, but do I know it ? I dont think so...
@fdemaa He helps very much
this is very basic, i just start it
i have to convert celsius to farenheit
convertToF(30) should return a value of 86
and i put this :
function convertToF(celsius) {
var fahrenheit=30;
// Only change code below this line
fahrenheit*=9/5;
fahrenheit+=32;
// Only change code above this line
return fahrenheit;
}
// Change the inputs below to test your code
convertToF(30);
@Thayyebsalim the only way I can think about it, to make the whole header as one picture (logo and that red line), remove the borders and paddings and try
The problem is that I was learning HTML and CSS pretty well. but due to some some circumstances I stopped now I lost my touch.
@Thayyebsalim seems responsive to me. It changes its size when I change the window size and whatnots. To get it to fill the screen maybe try setting margins and paddings to 0?
@fdemaa that formula for conversion should be in one line
Actually I can't even believe that I did this last year https://codepen.io/Thayyeb_Itachi/pen/rWxMxJ
@fdemaa and somehow you have to include the variable celsius into it
I thought of it. But the problem was responsiveness
When resizing the line should shrink
ok try setting width to 100% @Thayyebsalim
I didn't even notice that the line wasn't shrinking lol
That is a nice idea @yelhsa
one of my issues is making a drop down nav bar so I'm going to look through your other project to see if I can figure it out. I feel like my code is super bloated.
It's alright the navbar thing is a bit complicated
@yelhsa
Dont forget to check the settings of the pen @yelhsa
@yelhsa you navbar dissapears once the window is resized to a smaller size
Yea I want it to be replaced with a drop down icon that can toggle down a menu
@kirbyedy
and what do you mean by don't forget the settings? @Thayyebsalim
The head section of my HTML is in the Settings of the pen.
@yelhsa
You need to use bootstrap to get the effect.
yes, thats another issue
you linked the wrong library in the settings
plus you will need to load jquery before the bootstrap library in the javascipt section in order to dropdown to work
:( i have no idea what I'm doing
@kirbyedy You the last standing veteran in the front-end section?
no, there are other guys, just not present at the moment
There used to be a lot of seasoned veterans to help out the rookies like me :D
plus I have some spare time now :)
and no I am not a veteran :)
seasonal newbie :D
lol
navbar-toggle icon-bar etc are all classes with bootstrap?
yes
How I can refactoring this code? https://jsfiddle.net/2vxjqvpa/
var h1 = document.querySelector('h1');
var button = document.querySelector('button');
var input = document.querySelector('.name').value;
h1.textContent = "hello " + input;
I am not able to retrieve the input
and put it on the heading of the html
?
<html>
<head>
<title>Whats your name</title>
</head>
<body>
<h1>Welcome to this webpage my dear frient </h1>
<label for ="yourname">Enter your naem</label>
<input type="text" id ="yourname" class ="name" />
<button>Submit </button>
<script src="scripts/script.js" lang="javascript"></script>
</body>
</html>
What is the error in the console @1rjun?
its not showing hello with my name
in the browser
Do you get anything when you print out the value of
input?
wait let me see
yes it is undefined??
???
can I see your codepen if you have one?
@kirbyedy how do i push yo twitter?
working on my portfolio page. Get ge bootstrap to work. help
cant get bootstrap to work
@frankpimiskern did u add it from the settings?
yes
do i put something in css file?
@frankpimiskern no. dont put something
oh
make sure it's version 3, or the same version for the classes u r using
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">My Profile</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">My Profile</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
just starting with the navbar stuff
check which version you have in the settings
this is version 4, you have to add v3
oh ya baby! thx
@frankpimiskern also, add jquery and Bootstrap.js in JS
they are required for the navbar
quick add? jquery
yes
same version for bootstrap as link aboive/
?
yes
but bootstrap.js, not .css
you can google bootstrap.js cdn, to get the link
cool so add bootstrap for css and both jquery and bootstrap for js
added
hello, i need help! https://codepen.io/whdhli/full/GEJwxO/
there's like a glitch between the text and the buttons. can anyone help?
there's like a glitch between the text and the buttons. can anyone help?
thx
and the top tab, my contact is out of the browser window
@whdhli you're using Bootstrap 3 classes, but adding Bootstrap 4 in the settings
ooh yes!!! i forgot to put in the settings. thank you.
it's there, but it's for version 4
you have to add the version 3 one
yes
this right? @h1tag
thanks!
thanks @h1tag
whdhli sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 838 | @h1tag |http://www.freecodecamp.com/h1tag
Good Day! I am new to coding and on.y started on freeCodeCamp yesteday.
Click the wrong button. Sorry!!. Curently i am on the task to build a tribute page and must open an account with codepen. Do I need to use coddepen or can I use atom(already installed) to finish this challenge.
You can use anything you want, but codepen is easiest way to host it
You can also host it with github pages
Uhm guys, quick question, for the portfolio page, in the actual portfolio category should we have pictures of our activities, links or both? like a picture with a link in it towards the actual project
@Securiteru Probably both
Unless you only want links
You should have at a least a picture or placeholder
@teevik thanks
:cookie: 34 | @teevik |http://www.freecodecamp.com/teevik
deonoli4 sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
@teevik thx! I'll do both!
securiteru sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:cookie: 35 | @teevik |http://www.freecodecamp.com/teevik
I need a function that will switch the class from the slides to a click on them. Classes are active and closed.
I'm trying this:
$('.slide-1').click(function() {
$('.slide-1').toggleClass('close');
});Where is my mistake?
@YozhikM try $('.slide-1').click(function() {
$(this).toggleClass('close');
});
$(this).toggleClass('close');
});
Hi, everyone. I have built a pomodoro clock. Would you mind trying it out? I would love to hear your feedback. Bug spots, design suggestions, code optimization suggestions, etc. are all welcome. Thanks.
https://codepen.io/robertridley1988/full/BReBYB/
https://codepen.io/robertridley1988/full/BReBYB/
@robertridley1988 when you change session length and pomodoro is working you change your session time
Please give your suggestions on cards made by Bootstrap based on Google material design. https://codepen.io/saranshbarua/full/JJdmXm/
@saranshb it looks nice
Thank you @heroiczero
saranshb sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1352 | @heroiczero |http://www.freecodecamp.com/heroiczero
hi guys, I noticed my hamburger menu (nav bar) stopped working whenever I resize my window.
@Apex005 add jquery and bootstrap.js
@h1tag I didn't jquery and bootsrap.js before and it was working fine.
@Apex005 you're using the bootstrap navbar right?
yes @h1tag
then it needs those two
don't know how it was working before
am using bootstrap 3 tho
@Apex005 oh, sorry. It's not working after I add them too
but all I know is that they're needed even in Bootstrap 3
Hello guys
Can someone tell me if you can use responsive horizontal lines
Can someone tell me if you can use responsive horizontal lines
okay, can u assist me with how I can add them @h1tag ?
@Apex005 if u copy pasted the official bootstrap template, it should work
where'd you get this navbar code from?
I googled
and I can't really remember the site i got it from.
You can use this one: https://getbootstrap.com/components/#navbar
guys, do you recommend any good resources from where you can get free background pictures for FCC projects?
Background pictures? What kind?
@h1tag thanks ! will check it out
osirisseye sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 839 | @h1tag |http://www.freecodecamp.com/h1tag
thanks @h1tag
apex005 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 840 | @h1tag |http://www.freecodecamp.com/h1tag
function caseInSwitch(val) {
var answer = "";
// Only change code below this line
switch (val) {
case "alpha":
answer = "alpha";
break;
case "beta":
answer = "alpha";
break;
case "gamma":
answer = "alpha";
break;
case "delta":
answer = "alpha";
break;
}
// Only change code above this line
return answer;
}
// Change this value to test
caseInSwitch(1);
what is wrong here guys?
In Portfolio building project, how to make button function to scroll to that area? I can't recall any such scrolling class/function in challenges.
@iben1907 what's the challenge name?
@h1tag Selecting from many options with Switch Statements
good morning... can anyone help me with this? I'm working on my weather app and my longitude and latitude keep returning undefined. I've tried openweatherapp as well as dark sky, but get the same result with both. I can't figure it out... here's a link to my pen: https://codepen.io/jrwoods42/pen/WObNRP
@iben1907 see this line
caseInSwitch(1);?
look at wat they're passing the function
@h1tag got it! Thank you!
iben1907 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 841 | @h1tag |http://www.freecodecamp.com/h1tag
<a href ="#about">about</a>
<div id="about"> ... </div>
@piyush805
@jrwoods42
what do you mean? It works when I open it . it gets the correct lat and long and corresponding location
what do you mean? It works when I open it . it gets the correct lat and long and corresponding location
@h1tag okay, trying
@zanguelow it pulls the correct lat and lon from the ipApi, but when I console.log(weatherApi), the lat and lon return undefined.
Hi. Guys. Need your help. I am building a sidewise collapsible navbar. How do I get to be able to push the contents to the left when the toggle button is clicked?Here is my codepen link:
https://codepen.io/ShortAndSimple/pen/MowRYY
Like on the normal websites where on clicking the content shift left to make space for the side navigation bar?
@jrwoods42 could it be because openweather works over http but codepen uses https?
@gothamknight that's what I thought, so I tried dark sky and got the same result
@jrwoods42 i can see location and county code in the pen..
@jrwoods42
it might be related to the scope. if I put var weatherApi within the json, it works
it might be related to the scope. if I put var weatherApi within the json, it works
@Princu7 I m
I made something similar, ended up just having it be a overlay
And also found out they were a pain in the ass, so ended up just sliding it vertically from the top, and not sideways
Jquery makes it so simple
you ROCK @zanguelow ... thanks!!
jrwoods42 sends brownie points to @zanguelow :sparkles: :thumbsup: :sparkles:
:warning: @zanguelow's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
@jrwoods42
glad it worked!
glad it worked!
@teevik Thanks. Actually, here the requirement is strictly to make it sidewise only. Can you please clarify what you do you mean by an overlay? Thanks!!
@zanguelow dude, I spent hours staring at my screen, I just could not figure it out... lol
@jrwoods42
I know the feeling.....
I know the feeling.....
I just had it be an fixed element with "right: 0" , and in javascript i saved the initial width of the sidebar, and then an animation that sets "right" to initialWidth or 0
If that makes sense
-(initialWidth) *
My code is here https://github.com/teevik/Test4/blob/master/js/scripts.js
@teevik Oh Thanks. I was able to actually make something similar to that. But the problem is that the side nav menu has to cover the full height. So the upper navigation menu also has to be shifted to the left. Kinda Like This:
princu7 sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:cookie: 36 | @teevik |http://www.freecodecamp.com/teevik
I just ga
But I am not able to understand the code. Please see if you can. Thanks!!
This message was deleted
Header*
Sorry, on phone
Yeah. But in my case, I have to cover the whole height. That means I have to shift the header to the left in case someone clicks on the button. See this link. I want something like this:
https://bootsnipp.com/snippets/Qb83E
https://bootsnipp.com/snippets/Qb83E
can someone plz help me with this.? https://codepen.io/Spectre004/pen/NjwyPv
guys anyone does anyone know how to create a line horizontal line in HTML that is responsive and shrinks
@Thayyebsalim <hr>
@sreeram004 http://api.jquery.com/JQuery.each/
Alguien habla español?
@diegobisego https://gitter.im/FreeCodeCamp/Espanol
guys , how did any of you create the portfolio page? it is almost impossible to create one like they've shown as an example with what we are thought
anybody??
hi all,in order to build my calculator,i would like to get the value onclick and clear the input,but when i do this i lost the value,how could i do this? https://codepen.io/abdel974/pen/qjdwjV?editors=1010
Hey guys, just finished up my tic-tac-toe. What do you think? ^_^
https://codepen.io/kbaig/full/WOvNvy/
https://codepen.io/kbaig/full/WOvNvy/
@jimingeorge doesn't have to be perfect, just fill the requirements, it's the first project, you will get better over time
the one they provide as an example is high end, it would take a while for a beginner to do that
@kbaig it's good,i lost the first time i played lol
I need feedback about my codepen https://codepen.io/pilarmireles/full/OmKEaa
@sreeram004 what's the matter?
@abdel974 what are you trying to do exactly?
@OrangeKulture Thanks for you feedback about my quote machine
@pilarmireles22 there is no actual information yet?
oh i had to allow location....
@eweiss17 i just want to get the value,and if i click + or - or / or * saved the value in a variable and clean the input text field
@abdel974 haha thanks
kbaig sends brownie points to @abdel974 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @abdel974 |http://www.freecodecamp.com/abdel974
@abdel974 tell me your thought process in words, it will help, for example, "I am going to store the number they entered in a variable and add it to the previously entered value"
you kind of already did, but be more descriptive
@pilarmireles22 the box with the changing icons is real cool, but it doesn't relate to the information
'click on the grade' isn't really telling what it is doing, 'click on the grade to change to F/C' is more descriptive
@eweiss17 actually,the issue is that when i stored the number in a variable then clean the text field ,it clean my variable too,i don't know why,here's what i did
$("#plus").click(function(e) {
var plus=document.getElementById("result").value;
res+=plus;
$("#result").val('');
consol.log(res);
});
also 'grade' could possible be renamed 'temperature' instead
@h1tag Tnks!
@abdel974 consol.log is mispelled
i put 33, got "033", i put 22, got "03322"
It is treating the numbers entered as a string, not an int
@eweiss17 you have that give allow
@eweiss17 any hint?i'm stuck,plus,i don't have what you got,i have nothing
@eweiss17 thanks
pilarmireles22 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @eweiss17 |http://www.freecodecamp.com/eweiss17
@eweiss17 yes is more Understandable
@eweiss17 The image is just a design so it looks more beautiful
@abdel974 you put consol.log(res), it's console.log(res)
@pilarmireles22 It does look cool, but i almost expected it to stop on the applicable, (if it is raining, it stops on raining)
@pilarmireles22 don't know if you would be able to do that, but it would be real cool
@eweiss17 right thanks,now i can keep up
abdel974 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @eweiss17 |http://www.freecodecamp.com/eweiss17
@abdel974 I actually haven't finished the calc myself, it is not as easy as you would think
i'll look at mine
parseInt() will turn a string into an int
@eweiss17 the image is a gif i don't idea of like do that x.x
@eweiss17 thanks a lot,you helped me again^^
abdel974 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:warning: abdel974 already gave eweiss17 points
@pilarmireles22 alright, looks good though. I like the simplistic design, doesn't overwhelm and tells you the information you need
@eweiss17 in your country is rainy today and what is your country, send me a screenshot, for see like it look...but delete you coordinate by security
It says America/New_York
@eweiss17 I want to put it 'responsive' /.\
I actually don't know how to post screenshots here
@eweiss17 drag and drop into chat window
I do not live in New York, but I live a couple states away
@eweiss17 ohhh cool!!,thanks /0/
The long/lat was correct
@eweiss17 ok,this api not show the state
hi guys can anyone help with the link of the lower version of bootstrap ? Not the new version please> Thanks
don't you just put the appropriate version number when you call it
@tundeiness go to https://cdnjs.com/ search for bootstrap
change the version in the drop down, 3.3.7 is what you want
Guys, I needed a little help. I am supposed to do the Random Quote Machine project. But I am don't know where do i pick up the quotes from!
How do I even start?
Just a little hint would do!
@captainshukla i used https://quotesondesign.com
hi all,my calculator works when i use one sign,like1+1+1 etc,but it doesn't work when i do 1+1*2,i displays 2,why? https://codepen.io/abdel974/pen/qjdwjV?editors=1010
How do you center out a photo on the page
@moT01 Thank you!
serdric sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 710 | @mot01 |http://www.freecodecamp.com/mot01
also,how can i clean the field after the operation?when i do 1+1=2 the "2" remain in the field so it does after the first operation,something like 23+2=25
@abdel974 meaning do another operation?
your code is improperly indented making it hard to read
anyone able to lend some insight on the wikipedia project? I'm running out of hair to pull out...
trying to figure out the api?
yes, well, among other things...
i've been able to use $.getJSON to return some data, but i'm not sure how to access it
looking around the web, it seems that people who have gotten the pen done used ajax calls
i used .getjson
the data is a handful of results?
yes. i'll link what i have so far
$(document).ready(function(){
$("#searchButton").click(function(){
var textBox = $("#input").val();
var queryUrl = "https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&list=search&srsearch="+textBox;
//console.log(queryUrl);
$.getJSON(queryUrl, function(data){
var dataArray = data.query.search;
console.log(dataArray);
});
});
});
does it log anything
this is from my project,
$.getJSON(url, {format: 'json'}, function (wikiobj) {
//this goes through each object
$.each(wikiobj.query.pages, function (k, v) {
it does log some data
use the .each to go through the array of objects, ...i think is what you need to do
hmm, i think i saw this somewhere. k, v are used as key, value?
that what they stand for but im not sure if its accurate
{format: 'json'} is new to me as well, i'll see what I can come up with.
this may be key in my data retrieval, thanks for the nudge in the right direction!
Hello guys, i created that tribute page but i created it offline and hosted it in free hosting. So can i post link for my page instead.. of the codepen app??
you cannot just paste it in code pen?
@xeroxysandesh i think that's fine, ..not 100% sure
http://koiralasandesh.com.np/idol please review
i would just put your link in there and if it ever becomes a problem paste it to codepen then
@eweiss17 i can but i thought .the page might go crazy..
@xeroxysandesh looks good enough to complete the user stories
but the picture is all distorted
Thanks, actually spent whole day to code it.
it feels a little in my face, ...like it needs some padding or margin and a smaller font or something
And couldn't find better quality image over the internet, also, thought page would load faster with that image
my opinion on that one, ...and the clickable text isn't obvious enough,
confusing to a user what is clickable and not
I'll watch the font. Thanks, its actually 22px i think,
it doesn't need to be a better or different image, ...just give it a set size so it doesn't get distorted
Okay, need to look at clickable text too
No the image is just about 400px large, so, seeting it's size won't help
@moT01 did you view it on desktop? Or phone?
desktop
Guys I need a small help
I need a horizontal line that is responsive near the logo on top right
I'm looking to make a header
It is pretty messy just ignore the text
Hey whats the difference between "name" and name in javascript object
for example:
{
name: "shivam"
}
and
{
"name" : "shivam"
}
for example:
{
name: "shivam"
}
and
{
"name" : "shivam"
}
@Thayyebsalim This is one approach to give an idea - you can adjust styling as desired:
<hr class="logo-hr"><img class="logo" src="https://image.ibb.co/cWt1av/logo.png">.logo-hr {
border-width: 2px;
display: inline-block;
width:50%;
vertical-align: middle;
}
.logo {
width:50%;
}
@SkyC0der How do put code in a box like you did???
@archalien I also want to know
@archalien Use backticks ``` https://gitter.zendesk.com/hc/en-us/articles/200176682-Markdown-basics
This chat uses markdown for formatting
click on the mark down help
@SkyC0der Thank you
archalien sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1634 | @skyc0der |http://www.freecodecamp.com/skyc0der
@skycoder but 50% will be huge in full view
In the corner. Markdown help shows you the special actions you can do
@shivamg11000 There's no difference between those two objects. I think most style guides prefer you leave the quotes off the property name
Hey whats the difference between "name" and name in javascript object
for example:
''' {
name: "shivam"
}
and
{
"name" : "shivam"
}
for example:
''' {
name: "shivam"
}
and
{
"name" : "shivam"
}
:bulb: to format code use backticks! ``` more info
@Thayyebsalim That's why I said to adjust styling as desired
It's just an idea of how to go about it - change the width
so do you think using @media would be better? @SkyC0der
I would not use "" on your properties
Yes, it will be required if you want the logo to have certain sizes depending on the device/screen size
thanks @SkyC0der
thayyebsalim sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1635 | @skyc0der |http://www.freecodecamp.com/skyc0der
@shivamg11000
var myObj1 = {
name: "shivam"
};
var myObj2 = {
"name": "shivam"
};
console.log(myObj1.name) // "shivam"
console.log(myObj2.name) // "shivam"
@SkyC0der whats the difference, learning json
No difference as far as I know - the code above shows the same result
in python dictionary name is not valid
We don't learn Python here at FCC
@shivamg11000 Some good reading perhaps: https://stackoverflow.com/questions/380855/json-syntax-for-property-names
Can somebody point me in the right direction. I'm trying to make a see-thru box on top of a background. What would I look up? For my portfolio page.
opacity maybe?
@archalien "rgba" for transparent colors
red green blue, what is a
@eweiss17 @SkyC0der Ok thank you both. a is alpha
archalien sends brownie points to @eweiss17 and @skyc0der :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @eweiss17 |http://www.freecodecamp.com/eweiss17
:warning: archalien already gave skyc0der points
@eweiss17 a = alpha
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
didn't know that was a thing
I've used it for putting text over images and giving the right contrast
assuming it is just equivalent to using rgb and opacity together
The Opacity property will affect everything inside a div, including the text
@SkyC0der , you see anything funky with my first for loop or if statement here?
function translatePigLatin(str) {
var vowels = ['a', 'e', 'i', 'o', 'u', 'y'];
str = str.split('');
for (var i = 0; i < vowels.length; i++) {
if (str.indexOf(vowels[i]) === 0) {
var str2 = str.join('') + 'way';
return str2;
}
else if (str[0] !== vowels[i] && str[1] !== vowels[i]) {
var firstLetter = str.shift();
var secondLetter = str.shift();
var str3 = str.join('');
str3 = str3.concat(firstLetter, secondLetter,'ay');
return str3;
}
else {
var firstLetter2 = str.shift();
var str4 = str.join('');
str4 = str4.concat(firstLetter2, 'ay');
return str4;
}
}
}
translatePigLatin("eigth");For words starting with 'a', the function works, but not for other vowels..
@sjurs1 Is there a way to not affect the text?
@archalien You mean to not split it up?
@sjurs1 yes
@sjurs1 I think you want to check if the index is not equal to -1 in that first loop
Been a while since I did that challenge lol, need to go look up the instructions
My pig latin is rusty
I completed that one recently
@archalien Do you mean that as a nudge in the right direction?
@eweiss17 Is that advanced algorithms. I'm still only at the beginning ones.
it's the second phase of algorithms
they are tough, i didn't even finish them all
@sjurs1 No sorry I meant to send that message to @SkyC0der . He was talking about rgba affecting text as well as my background.
@eweiss17 I'm having problems on the first phase.
@SkyC0der If I do that, every word regardless of the first letter being a constant or vowel gets the "vowel word treatment"
@archalien
opacity affects everything, rgba just affects the color
@sjurs1 Yeah, I need to revisit that challenge, it's been 3 months :)
@sjurs1 I did mine way different
@SkyC0der Ok, that helps alot. Thanks once again
archalien sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: archalien already gave skyc0der points
I didn't use any for loops in mine
just indexOf and .substr()
Forgot when to add 'way' vs 'ay'
Forgot when to add 'way' vs 'ay'
if
for
for
if
if
for me
for
for
if
if
for me
@SkyC0der What's frustrating about it is that I can't for the life of me understand why it isn't working. It works for all words except words starting with vowels besides 'a'
maybe I'll just start over and use str.substr
yo
I think i figured it out
Just wish I knew why it doesn't work when in my mind IT CLEARLY SHOULD :P
i is always 0, it returns something before it goes to 1, 2, 3, 4
For the tribute page are we supposed to build two pages or just one?
a is at index 0, so it works for a, but never hits any other vowels
@Isabelgarcia3 One
@archalien Thank you!
isabelgarcia3 sends brownie points to @archalien :sparkles: :thumbsup: :sparkles:
:cookie: 257 | @archalien |http://www.freecodecamp.com/archalien
@Isabelgarcia3 You're welcome
yeah @eweiss17 I agree. Why doesn't it iterate though?
oh
Because it hits a return and doesn't care about iterating
wait a second
yep
return = i'm done with this function
@eweiss17 Yep. I put my else if statements withing the same for loop. So instead of iterating it just jumps to else if
@eweiss17 Thank you!
sjurs1 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @eweiss17 |http://www.freecodecamp.com/eweiss17
They got rid of /helpJavascript?
How can I submit two html scripts for running a single page inside CodePen?
No, but it was crazy as balls over there @eweiss17
i do not see helpjavascript room
@neuronphysics two html files?
yup
why do you need two?
this is outside of fcc?
i havent used their new projects option, but i think you can if you go that way
if not, maybe github or elsewhere?
because I made a navigation bar and the script for clicking on items is in the other script
can I submit a challenge without using codepen
the script for clicking on items
what do you mean
javascript?
no I used only jQuery
@neuronphysics List each script individually, click "Add another resource" to add more than two
jquery is javascript
is your script in <script> tags
yes
you can just leave it in the html and it will work
It works in brackets
or you can put it in the javascript section
I want to transfer it to codepen
code pen has html / css / javascript
put whatever is appropriate in the appropriate sections
or is it possible to put it in the github
this is for the starting projects?
is the codepen the only tool to submit the challenge?
yup
Regardless, it seems like you can transfer it easily
you have <html> tags right? put whatever is in those in the html section
but if they called different names
called different names?
look, brackets is great, it's great that you know how that works. Codepen is also pretty great, you should learn how it works as well, regardless of completing this challenge
thanks for the help
what do you mena called different names?
If i made an html document, I could copy the entire thing and paste it into codepen and it should work
I have main part of my code in index.html script
then I use this line:
$(document).ready(function(){
$('#MyNavBar ul li a').click(function(){
$('#content').load('details.html #' + $(this).attr('href'));
return false;
});
});
$('#MyNavBar ul li a').click(function(){
$('#content').load('details.html #' + $(this).attr('href'));
return false;
});
});
That is javscript (JQuery)
That will work in codepen
to execute the items in my navigation bar from details.html script
as long as you go to settings -> javascript -> quickadd (jquery)
your profile has multiple pages?
@neuronphysics I don't think you can load a separate .html file from codepen. You can use GitHub to host your final projects for Free Code Camp if you want to do that.
I can still put it in my html code the jQuery
This:
Will be complicated to figure out in codepen, but it is possible - maybe going to take longer than needed
$('#content').load('details.html #' + $(this).attr('href'));Will be complicated to figure out in codepen, but it is possible - maybe going to take longer than needed
@eweiss17 @SkyC0der I finally managed, although I guess in a mildly unorthodox and tedious way:
function translatePigLatin(str) {
var vowels = {a:'', e:'', i:'', o:'', u:'', y:''};
str = str.split('');
if (str[0] in vowels) {
var str2 = str.join('') + 'way';
return str2;
}
if (!(str[0] in vowels) && !(str[1] in vowels)) {
var firstLetter = str.shift();
var secondLetter = str.shift();
var str3 = str.join('');
str3 = str3.concat(firstLetter, secondLetter,'ay');
return str3;
}
if (!(str[0] in vowels) && str[1] in vowels) {
var firstLetter2 = str.shift();
var str4 = str.join('');
str4 = str4.concat(firstLetter2, 'ay');
return str4;
}
}
translatePigLatin("california");
You would need to create another codepen and refer to that html file instead
Thanks for pushing me in another direction!
Whoa, fancy object :)
Hahaha
For future projects you should have an html page for every page on your site
the profile is only one page, you shouldn't have more than 1 html page, it isn't necessary
none of the projects require you to have more than 1 page
how can i make my feature pictures bigger ? https://codepen.io/bestintown23/pen/LLVjOd
@bestintown23 how big are the actual images you are grabbing?
Hello, can any one please help me out? Been racking my brains over a couple of projects that broke all of a sudden when they used to be working great, here's the link for one: https://codepen.io/bitscaa/pen/WpvYYN
And another: https://codepen.io/bitscaa/pen/aJbNaW
.white-border {
border-color: white;
border-width: 35px;
border-style: solid; - bottom of border only comes down to below text, how can I make it reach the bottom of the page?
border-color: white;
border-width: 35px;
border-style: solid; - bottom of border only comes down to below text, how can I make it reach the bottom of the page?
Seemed that some data became blocked?
I forgot to copy }
@bitscaa check what the console it saying
@mitchtrot if you are working on a project post the pen and I can look at it
@eweiss17 I did. Nothing particular unfortunately
is there any reason to turn in the pen and portfolio? my tribute just isnt uploading correctly, but the portfolio (which i use bootstrap for) uploads fine.
you can continue on the map and turn in the projects later
@eweiss17 the tribute is a lost cause lol it looks good and i learned a ton, but its not responsive at all and i have no clue why it doesnt look right on codepen. Which im ok with, it was mainly just to really learn html and css.
@eweiss17 big big lol
@bitscaa It appears that even though you are using a proxy, your request is getting blocked because the API is served over HTTP while your codepen is served over HTTPS.
Unfortunately, the only way to work around that is to use a different API that supports HTTPS, as codepen requires HTTPS now.
I'm building the Portfolio Webpage but it seems like we haven't been taught how to write all the code that is used in the sample portfolio page. Why is this? this is really frustrating
For your quote machine @bitscaa It's due to a missing API key according to the error I see in the console
@bestintown23 did you increase these numbers?
#man{
width:300px;
}
#arcade{
width:280px;
}
#bos{
width:145px;
}
@Isabelgarcia3 The idea is to give you enough information to star researching on your own. It's how development works. You learn a language, then do lots of research to learn how to use it in different ways, with different libraries
Constant learning process, unfortunately :)
oh okay, what are the Libraries?
Bootstrap will be very helpful for your portfolio project: http://getbootstrap.com/
Spend some time getting familiar with the grid system: http://getbootstrap.com/css/#grid
Try making their navbar: http://getbootstrap.com/components/#navbar and then customize it to your needs
All of the challenges you've learned should help you figure these out - and we're always here to help in this chat room
@SkyC0der Thank you so much! this really helps, I will look into these
isabelgarcia3 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1636 | @skyc0der |http://www.freecodecamp.com/skyc0der
hey, i am done with my Local Weather project https://codepen.io/saeedjassani/full/gROvex/
any feedbacks will be appreciated!
@saeedjassani looks like it meets the projects user stories i think
not a whole lot to it, ...but it works
what is missing?
can you specify?
i didnt say anything was missing
assuming the background image represents the current conditions
yeah
maybe center the display, and make it a little bigge
r
thanks for the feedback.. will try to make it more attractive
@saeedjassani Very cool idea to use the pixabay API to search for a background image based on the current weather conditions :)
For feedback - make your background image work on all screen sizes. This article may help: https://css-tricks.com/perfect-full-page-background-image/
For code feedback - maybe use navigator.geolocation + reverse geocode for your location name - it will be much more accurate
Thanks @SkyC0der
saeedjassani sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1637 | @skyc0der |http://www.freecodecamp.com/skyc0der
Can you use anchor elements in <p>?
And why does my "a" in css (a {
color: black;
}) only work for the "a" which comes before the anchor element in my paragraph and not work for the anchor element nested in the paragraph?
color: black;
}) only work for the "a" which comes before the anchor element in my paragraph and not work for the anchor element nested in the paragraph?
Can someone help me with javascript in Simon Game project? I have a problem of function executing even though it shouldn't and I can't figure out why.
Hi all, has anyone got a minute to look at my portfolio page (in progress). Having some problem with web fonts. Somebody mentioned CORS and mixed content issues but they’ve lost me completely.
:bulb: to format code use backticks! ``` more info
Hi!
I have a problem with api query in wheather app
url = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=" + apikey;
url = encodeURIComponent(url);I want to pass this to getJSON, but unfortunately i can see in console that it get 404 from server.
I have tried multiple combinations like %26 directly but it also do not work
Please help me to proceed
@mitchtrot Yes, you can use <a> inside a <p> tag. Your CSS probably has a conflict somewhere, I would have to see all of your code to know for sure what's going on, but happy to help if you can show the rest of your code.
@quarkmonkey If you open your browser's developer console (Ctrl+Shift+J on Windows/Linux, Command+Option+J on Mac), you will see several errors:
everypage-d56a54df8098861494a1dd36fc55100e4d428b8688014728be2127ad85b56b20.js:1 Mixed Content: The page at 'https://s.codepen.io/quarkmonkey/pen/MmVoOZ/' was loaded over HTTPS, but requested an insecure font 'http://www.theawesomeconsultancy.com/botafont/birth_of_a_hero-webfont.woff'. This request has been blocked; the content must be served over HTTPS.
When your website's address starts with HTTPS:, all the resources you ask for (fonts, javascript libraries, etc) must also have https:// addresses.
@Gr8Gonadini whats the problem?
@khazarr Your URL should star with
http:// or https:// when you use getJSON.
If you're building your weather project in codepen, you will need to use https://, and OpenWeatherMap won't work over HTTPS :( so you'll have to use a different API like Dark Sky: https://darksky.net/dev/docs
@SkyC0der just came back and saw your response. Thanks a lot! I'll look into that.
bitscaa sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1638 | @skyc0der |http://www.freecodecamp.com/skyc0der
@moT01 https://codepen.io/Gr8Gonadini/pen/YQKqqN?editors=1010 for now I run function playerTurn, when after each button click I want to evaluate if players move is not equal to computers, I wrote first if statement to test if it will work, alarm goes of even though it shoudln't
im not sure what you're trying to ask
i hit start, it plays two sounds, ...then i can just click away
https://codepen.io/Ambuja/pen/BZNzRx can some one help me on how to add link when the link changes to color orange and acts an active link
@moT01 sorry, after initial request I started messing with it, thanks anyway
gr8gonadini sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 711 | @mot01 |http://www.freecodecamp.com/mot01
@Gr8Gonadini so you got it?
@SkyC0der OMG! Thanks that helped :D
khazarr sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1639 | @skyc0der |http://www.freecodecamp.com/skyc0der
@moT01 Nope. I'll try to give better explanation: I've set up value turn to be = 2. So computer after hitting start will play 2 notes (as for 2nd turn) then during players turn, after pressing each button, I want to check if the button pressed is the same as computers. I so, I want to update turn + 1, if not, eather repeat turn, or reset everything to starting point. For now function doesn't play next turn, becouse I wan to see if evaluating even works.
@moT01 https://codepen.io/Gr8Gonadini/pen/YQKqqN?editors=1011 this is updated
console.log(stamp);
your stamp gets set to 0 every time
@Gr8Gonadini
Hi all. Just working on the quote generator project. I've got the basic functionality going alright, but I am having a minor issue with
encodeURIComponent for sending my quote to twitter. It comes out with some encoded characters in the text box and I don't really get why this is happening. If I avoid using it altogether, the whole thing works really well until I get a character like an apostrophe, which cuts the remainder of the string off. Here's my project, any advice on this point would be appreciated: https://codepen.io/tomerobe/pen/mwdvpR
@moT01 is it be becouse it's outside of button function?
it gets set when you run that function, ...im not sure. i feel like that is set up kinda goofy... maybe its just me. I think you should get rid of the playturn function, and make a test after a button click
so like make a var computerPlaying = true/false then set it to false at the end of computer turn, ...and test if(computerPlaying) on your button click
@tomerobin Your
encodeURIComponent is working fine, the problem is that you are not removing all the HTML in the qtext variable.encodeURIComponent will convert percent encoded strings, you're getting HTML entities, which need to be converted with the unescape() method.
You can also let jQuery convert all that HTML for you:
var qtext = $(post.content).text();
How do I get my <div class="container" id="logo-nav"> not to cover up my <h1> As The Circle City Turns!</h1>......? Shouldn't it automatically clear it since I put clear: both; in the css?
@ambuja to add a link you'll need to use
$("thingYouWantToLink").attr('href', 'https://whatever.com') This should help https://www.w3schools.com/jquery/html_attr.asp
@SkyC0der ok thanks, didn't know that. So just to clarify there are still HTML elements even though I removed the
<p> tags with regex?
tomerobin sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1640 | @skyc0der |http://www.freecodecamp.com/skyc0der
@tomerobin Not elements, but HTML Entities - for example, an apostrophe in HTML is
’
Hi I am working on the local weather app. I want to use the icons. I found a git repo with this script: https://github.com/darkskyapp/skycons/blob/master/index.html My question is how do I use this? Should I copy all this code and put it in the js section of my codepen? thanks in advance!
@MichielHuijse You can add this as an external resource: https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js
@MichielHuijse perhaps add the icon code to codepen and play around with it until you figure out how it works, then add it to your app
i'm guessing there is a working example of how the code works, tinker with it until you understand it
"titanic".match(/t[a-z])*i/);
@SkyC0der thanks
@SkyC0der thanks
michielhuijse sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1641 | @skyc0der |http://www.freecodecamp.com/skyc0der
got a JS question for someone:
for(var i=0; i<10; i++){
$("#textbox").append("something to add to the page ");
// wait 200ms and execute the next time
}how can i make this code happen in increments of 200ms? I have some CSS that i'd like to delay on the page. research says to use the setTimeout function, but need some help making that happen.
when i hover on the outside of the icon it changes color. how do i stop this. I just want the icon to change color when i hover the icon. https://codepen.io/anon/pen/dRYpyR
@GitHub-Henry thanks that might be a good idea to seperate it :)
:cookie: 345 | @github-henry |http://www.freecodecamp.com/github-henry
michielhuijse sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
@MichielHuijse separating your code into parts is a good idea in general, makes debugging easier when there is a problem.
@SwarmSE you can wrap the whole thing in setTimeout(yourfunction, 200)
Is there anyway I can get a file (logo.svg) from my computer into pen?
I understand <img> but wondering if this is possible
@SwarmSE actually would need to be setTimeout(function(){your function}, 200)
@mitchtrot host the image online, then refer to that location in the src
@mitchtrot I second what @GitHub-Henry said, I usually host in a folder on my github acct
I need a regex for checking name like "Jack123", it will only return true if all number are behind all letter, and 2 character name will be all letter.
Ah cool, good idea, thanks. @GitHub-Henry @monicaparrillo
mitchtrot sends brownie points to @github-henry and @monicaparrillo :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @github-henry |http://www.freecodecamp.com/github-henry
:cookie: 283 | @monicaparrillo |http://www.freecodecamp.com/monicaparrillo
Hello All,
I'm unable to get the following code to work<i class="fa fa-free-code-camp" aria-hidden="true"></i>
I'm trying to get the freecodecamp icon on my project
@monicaparrillo i'll give this a try! thanks for the help!
swarmse sends brownie points to @monicaparrillo :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @monicaparrillo |http://www.freecodecamp.com/monicaparrillo
@Hello911 That parenthesis after the
find a
The
Then you have a
z] shouldn't be there. The * in regular expressions is a wildcard, so your expression says:find a
t followed by a-zThe
* says, "match the a-z 0 or more timesThen you have a
i after that
so you match everthing but the final
c in titanic
@sconde Make sure you are using v4.7 of font awesome. The free code camp icon was added to font-awesome recently
@SkyC0der thank you so much
sconde sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1642 | @skyc0der |http://www.freecodecamp.com/skyc0der
hey guys...can anyone send me link of their codepen of project "Build a Personal Portfolio Webpage"?
@SwarmSE i recommend to look up setTimeout on MDN (should be the first link if you google setTime JS)
@SkyC0der Tjanks
Hi, is there some command in JavaScript which stops programme execution for some time in the same way like alert() but without the need of the interaction from the user?
@Hello911 I'm not great at regex, but I think this would work for your
jack123 problem:/^[a-z]{2}$|^[a-z]{2,}[0-9]{2,}$/
@radekjohn setTimeout() perhaps?
@SkyC0der Does ^ mean no something. What does {2} and {2,} mean?
@Hello911
^ is where the word starts, {2} means match it exactly two times, {2,} means two or more times.
Hello guys, how's it going
I suppose you could use
* instead of the {2,} at the end actually
I'm a noob when it comes to regex :)
Hi @LordMathis
I am a even biiger noob
@SkyC0der I was trying setTimeout, but I was not successful. It is in my computerTurn function. I want JavaScript to play several sounds one after another.
I had to interrupt FCC for about 45 days and I forgot a lot
My Tribute Page Challenge, can someone give me someone help me with aligning the logo (in the bottom left corner) to be central like the rest of the elements, and padded evenly between the text and the bottom of the page? Thanks.https://codepen.io/mitchtrot/pen/gRabbK
@radekjohn Are your sounds out of context?
Now it all appears
@radekjohn I haven't finished simon yet, but have the playback working with a jQuery queue: https://s.codepen.io/skycoder/pen/NjQYNW
Someone else may be able to help you with a setTimeout approach - it should work, I think that's what a lot of people use
@monicaparrillo I got it working :)
@eweiss17 I do not know :-)
@mitchtrot You can add
mx-auto d-block as classes for your image: https://codepen.io/skycoder/pen/xqbGor?editors=1100
@SkyC0der thanks a lot. I did it when I was making the pomodoro clock. It should be similar
radekjohn sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1643 | @skyc0der |http://www.freecodecamp.com/skyc0der
@SkyC0der the coffee cup looks great
@radekjohn why do you have if stimuli[i] == 1 twice
Thanks @radekjohn :coffee: That was fun to build
skyc0der sends brownie points to @radekjohn :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @radekjohn |http://www.freecodecamp.com/radekjohn
@eweiss17 probably typo
you need to start i at 1
and then have it be less than or equal to length
@SkyC0der I never tryed to make animations with CSS
@eweiss17 yes, true. thanks a lot
radekjohn sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @eweiss17 |http://www.freecodecamp.com/eweiss17
That was my first attempt, aside from using .animate() in jQuery @radekjohn
Fun practice project
@radekjohn i'm reconsidering, scratch what I said before, i don't think it matters
so i = 0; i < stimuli.length (this is always 3)
@eweiss17 yes, I tryed it. the meaning is the same
oh wait
you push to stimuli?
okay you do push to it in your stimgen
yes, but now it does not matter. it is for the future
I am just starting the wholw thing. the stimgne will generate stimuli in the future
is your problem the fact that it plays both sounds too fast one after the other?
but now it is commented out in the cumputerTurn()
@eweiss17 yes
@radekjohn The problem with for cycle and setTimeout is that when the timeout is set it moves to the next cycle, it doesn't wait until the timer runs out so if you want to use setTimeout you need to make it recursive
@eweiss17 the alert command is just an experiment how to stop javasript executing the function
in java there is Thread.sleep(), i searched and it looks like the javascript equivalent is what you have
@LordMathis yes, but alert stops everything. is there something which behave in similar way without clicking? I think it would be very practical
gl with your recursion
@radekjohn setTimeout does but instead of doing it in for cycle you need to make it recursive
@SkyC0der Thanks for that, great cheat sheet.
mitchtrot sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1644 | @skyc0der |http://www.freecodecamp.com/skyc0der
Hey guys. I want my "temptype1" (°C) element to be in focus on page load. I have this in the script:
$(window).load(function() {
document.getElementById("temptype1").focus();...but it doesn't work. Any help would be appreciated.
https://codepen.io/mattpavo/pen/qjBezw
@mitchtrot Glad it helped. I drove over the Trail Ridge Road last summer. Nearly passed out from lack of oxygen lol
That's a lot of altitude to climb :)
@eweiss17 @LordMathis well, thanks, guys
radekjohn sends brownie points to @eweiss17 and @lordmathis :sparkles: :thumbsup: :sparkles:
:warning: radekjohn already gave eweiss17 points
:cookie: 343 | @lordmathis |http://www.freecodecamp.com/lordmathis
@radekjohn If I can find it I can send you a code snippet that I made for another user with the same problem
@LordMathis to by bylo super :-)
@mattpavo I would move my eventlistener outside of the other eventlistener.
@mattpavo Because the
document.load fires later then the window.load.
Haha, sweet! Looks like a beautiful place, would love to go there @SkyC0der
@mattpavo
$(document).ready runs when the page loads, put that code up there$(document).ready(function() {
$("#temptype1").focus();
...
@ivancsicsmarkus Hey Markus. I just placed it outside of 'document.load', and it's still not in focus
I'm not sure what you expect to happen when you .focus() on that though - it's an empty element on page load
<span id="temptype1"></span>
@mattpavo a span can’t really have a focus
@SkyC0der Hey Sky. I want it to be clear that "°C" is selected on load. I didn't consider that that could be why it's not working
@radekjohn tu je to :smile:
function playAll(i) {
if (i === simon.length) return;
if (simon[i] === "green") {
$(".green").addClass('lightGreen');
setTimeout(function() {
$('.green').removeClass('lightGreen');
return playAll(i++);
},350);
}
else if (simon[i] === "red") {
$(".red").addClass('lightRed');
setTimeout(function() {
$('.red').removeClass('lightRed');
return playAll(i++);
},350);
}
else if (simon[q] === "yellow") {
$(".yellow").addClass('lightYellow');
setTimeout(function() {
$('.yellow').removeClass('lightYellow');
return playAll(i++);
},350);
}
else if (simon[i] === "blue") {
$(".blue").addClass('lightBlue');
setTimeout(function() {
$('.blue').removeClass('lightBlue');
return playAll(i++);
},350);
}
}
and you call it with playAll(0);The code snippet was created for another user who wanted to highlight colored buttons so you will have to change it till it fits your needs but it illustrates recursion for this problem pretty well
@mattpavo Probably best to use
.addClass() and give it a class that makes it bold, or a different color
@ivancsicsmarkus It can't? Looks like I have to do some reading. Would a div work?
@LordMathis wow, kouknu na to. dik moc
@SkyC0der that's a very simple solution. Thank you.
mattpavo sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1645 | @skyc0der |http://www.freecodecamp.com/skyc0der
@radekjohn ešte použi ++i namiesto i++
@mattpavo It has. But it is not default shown.
@LordMathis kdysi jsem chodil na nejake programovani a rikali nam, ze je to rozdil. ale uz nevi jaky
@LordMathis taky si to nekde prectu
@radekjohn i++ vrati hodnotu i a potom ju zvysi, ++i najprv zvysi a potom ju vrati
@LordMathis hm, vyzkouÅ¡Ãm to. dÃk moc.
see you all later
Is there a way to troubleshoot js code in sublime? for ex, if i want to check that var num is the number im expecting, and run console.log(num); in sublime, theres no console that shows me the value of nu,
@fullmetal7777 no that I know off. You can debug you js code in browser
jquery is kind of hard
How can I prevent the text from using more lines until it can't? I want it to maintain the lines it has (equal to width of image) and then change sizes - with the image, to a size that works with the current desktop width. https://codepen.io/mitchtrot/pen/gRabbK
@mitchtrot you can't really unless you turn it into an image that's a the same size. It's not possible: even if you use a specific font and a specific font size and measure the size of the text container exactly, all I have to do is zoom the browser a tiny bit and it's broken immediately. Closest you get is to use vh or vw for the font-size units, which would mean it's sized based on the height or the width of the viewport respectively. Note this means it will be really tiny if the screen is tiny, this can be mitigated by using calc - like
font-size: calc(0.75rem + 5vh); is .75rem plus 5% of the viewport height. Basically, you can make the text scale. You can't fix it the way you want because it's the web, not a book, you can't fix sizes that way otherwise you break it for users.
guys can anyone help me on js ?
@fdemaa whats up
@moT01 i did it man ! feeling like a champ xd
nice
Thanks for the explanation, makes a lot more sense now @DanCouper
mitchtrot sends brownie points to @dancouper :sparkles: :thumbsup: :sparkles:
:cookie: 757 | @dancouper |http://www.freecodecamp.com/dancouper
please i seem not to be able to use bootstrap navbar functionality on codepen is any thing wrong?
@blackcytographer you are probly using a different version
@moT01 different version of what sir codepen or bootstrapp. as for bootstrap im using version 4
bootstrap, are you using the 4 syntax?
@moT01 yes sir iam
Can anyone check out my portfolio to tell me what they think?
Codepen.io/whereismikehawk/full/JJoaXM/
Codepen.io/whereismikehawk/full/JJoaXM/
@blackcytographer well, im not sure then. I brought that up cause a lot of people use syntax for 3.x since that's what is in the lessons
@WhereIsMikeHawk they are awesome A+ please what version of bootsrapp did u use in your narbar
@moT01 thanks
blackcytographer sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 712 | @mot01 |http://www.freecodecamp.com/mot01
@WhereIsMikeHawk look great man!
@blackcytographer I actually didn't use bootstrap for the Navbar, I used just UL and all that with CSS styling
@fdemaa thank you!
whereismikehawk sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 163 | @fdemaa |http://www.freecodecamp.com/fdemaa
@WhereIsMikeHawk smart guy
Thanks! @blackcytographer
whereismikehawk sends brownie points to @blackcytographer :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @blackcytographer |http://www.freecodecamp.com/blackcytographer
`code``code`
damn it
wait a sec
I hoping someone in here can help with this... I'm working on my weather app and can't call my weather.description into my html. Here's my pen: https://codepen.io/jrwoods42/pen/WObNRP
@jrwoods42
Ctrl + Shift + J if you're on a windows press that and it will take you to your browser's console. You'll see a Mixed content error.
@jrwoods42 codepen won't let you use http:// in you weather api.
I've tried using dark sky api as well with the same result. How do I correct this? @jtan3
@jrwoods42 https://darksky.net/dev/docs/forecast does your api look that the example?
@jrwoods42 https://crossorigin.me/ also put that in front of your darkskyapi
@jtan3 a space is count as character in javascript?
@fdemaa i think so