@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.
@andrewmparker , they seem to be working ok now. The Nav bar works great.
@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
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.
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/
@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
@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?
@Cornielle @fullmetal7777 guys i finish my portfolio recently what do you think?
@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
andrewmparker sends brownie points to @fullmetal7777 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @fullmetal7777 |http://www.freecodecamp.com/fullmetal7777
fdemaa sends brownie points to @fullmetal7777 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @fullmetal7777 |http://www.freecodecamp.com/fullmetal7777
@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
@fullmetal7777 have a good time/night bro!
@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
what is wrong with my social media buttons
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!
@andrewmparker - I'm trying to see if I can understand what's going on...
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?
@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.
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.
@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
@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">
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
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;
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?
@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?
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
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
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>
@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
@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.
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>
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 - 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.
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?
@Leena8392 You should add angular.js script to the bottom of the body (just above your app.js)
@Leena8392 maybe it helps
@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
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
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?
@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
try that maybe
@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
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'"."
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?
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...
didnt know that
@kirbyedy as much stuff as there is on WP it doesnt really cover reselling sites
@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
@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
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
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?
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
When resizing the line should shrink
I didn't even notice that the line wasn't shrinking lol
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.
@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.
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
@kirbyedy You the last standing veteran in the front-end section?
There used to be a lot of seasoned veterans to help out the rookies like me :D
and no I am not a veteran :)
seasonal newbie :D
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>
in the browser
yes it is undefined??
???
working on my portfolio page. Get ge bootstrap to work. help
cant get bootstrap to work
do i put something in css file?
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
they are required for the navbar
?
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?
@whdhli you're using Bootstrap 3 classes, but adding Bootstrap 4 in the settings
you have to add the version 3 one
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
Unless you only want links
deonoli4 sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
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 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.
@h1tag I didn't jquery and bootsrap.js before and it was working fine.
don't know how it was working before
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
@Apex005 if u copy pasted the official bootstrap template, it should work
where'd you get this navbar code from?
and I can't really remember the site i got it from.
guys, do you recommend any good resources from where you can get free background pictures for FCC projects?
osirisseye sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 839 | @h1tag |http://www.freecodecamp.com/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.
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
look at wat they're passing the function
iben1907 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 841 | @h1tag |http://www.freecodecamp.com/h1tag
@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
@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
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
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
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.
@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
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
But I am not able to understand the code. Please see if you can. Thanks!!
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
guys anyone does anyone know how to create a line horizontal line in HTML that is responsive and shrinks
@sreeram004 http://api.jquery.com/JQuery.each/
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
@OrangeKulture Thanks for you feedback about my quote machine
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
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);
});
i put 33, got "033", i put 22, got "03322"
It is treating the numbers entered as a string, not an int
@eweiss17 any hint?i'm stuck,plus,i don't have what you got,i have nothing
pilarmireles22 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @eweiss17 |http://www.freecodecamp.com/eweiss17
@eweiss17 The image is just a design so it looks more beautiful
@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
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
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
I do not live in New York, but I live a couple states away
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
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!
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
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
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...
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
the data is a handful of results?
$(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);
});
});
});
this is from my project,
$.getJSON(url, {format: 'json'}, function (wikiobj) {
//this goes through each object
$.each(wikiobj.query.pages, function (k, v) {
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?
{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??
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..
but the picture is all distorted
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
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?
I need a horizontal line that is responsive near the logo on top right
I'm looking to make a header
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%;
}
This chat uses markdown for formatting
archalien sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1634 | @skyc0der |http://www.freecodecamp.com/skyc0der
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"
}
It's just an idea of how to go about it - change the width
so do you think using @media would be better? @SkyC0der
Yes, it will be required if you want the logo to have certain sizes depending on the device/screen size
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"
No difference as far as I know - the code above shows the same result
@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.
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
#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 */
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 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
@eweiss17 Is that advanced algorithms. I'm still only at the beginning ones.
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"
@sjurs1 Yeah, I need to revisit that challenge, it's been 3 months :)
archalien sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: archalien already gave skyc0der points
just indexOf and .substr()
Forgot when to add 'way' vs 'ay'
Forgot when to add 'way' vs 'ay'
@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
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 sends brownie points to @archalien :sparkles: :thumbsup: :sparkles:
:cookie: 257 | @archalien |http://www.freecodecamp.com/archalien
oh
yep
@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
How can I submit two html scripts for running a single page inside CodePen?
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
what do you mean
javascript?
@neuronphysics List each script individually, click "Add another resource" to add more than two
is your script in <script> tags
put whatever is appropriate in the appropriate sections
is the codepen the only tool to submit the challenge?
yup
you have <html> tags right? put whatever is in those in the html section
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
If i made an html document, I could copy the entire thing and paste it into codepen and it should work
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 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.
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
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
@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?
@mitchtrot if you are working on a project post the pen and I can look at it
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.
@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.
@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 :)
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
any feedbacks will be appreciated!
not a whole lot to it, ...but it works
can you specify?
assuming the background image represents the current conditions
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
saeedjassani sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1637 | @skyc0der |http://www.freecodecamp.com/skyc0der
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.
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.
@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
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
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
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
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
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 :)
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
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
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)
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.
I'm a noob when it comes to regex :)
Hi @LordMathis
@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 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
@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 sends brownie points to @radekjohn :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @radekjohn |http://www.freecodecamp.com/radekjohn
and then have it be less than or equal to length
@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)
you push to stimuli?
okay you do push to it in your stimgen
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?