anyone around
perty please
you guys i finally deployed my react calculator. check it out and give your thoughts :smile:
@grantknaver 404 pen nod found
Hey everyone, has anybody actually managed to get the openweathermap api to work for the map Show the local weather? From my research, it seems to be a CORS issue but I can't seem to get it working. I have an APPID etc. Here is my pen: https://codepen.io/jlpayne/pen/zoeXQw?editors=1111 TIA.
Can anyone please help me make the
<li></li> have bullets? https://codepen.io/c0d0er2/pen/MbdqEz
@c0d0er2 Do you mean in the navigation?
@jamespayne You need a premium account at openweathermap to access it with https. You're trying to do https <-> http which is getting blocked.
(Hence 'Mixed content' error)
@lreynl Thanks. I forgot about that. So there is basically no way to use it without a premium account other than using something like http://crossorigin.me? I tried using that but it didn't seem to work.
:cookie: 387 | @lreynl |http://www.freecodecamp.com/lreynl
jamespayne sends brownie points to @lreynl :sparkles: :thumbsup: :sparkles:
I have got it working with dark sky but I prefer the data content from openweathermap. Seems much more simple.
I just used http://codepen.io instead of https. But then you need a different location api.
@lreynl Hmm, ah well.. Might just use the dark sky api as that works. Sort of frustrating but anyway... Thanks a lot for your help.
jamespayne sends brownie points to @lreynl :sparkles: :thumbsup: :sparkles:
:warning: jamespayne already gave lreynl points
Has anyone here ever used jframe for a project?
@Voidereles Did you try converting it to jpg?
Has anyone had problems w/ the wikipedia api? Cant figure out what's wrong w/ my getJSON function. It is not successful
@brycemcdonald86 Could you post a link?
I don't know why the blue part is causing more space
@brycemcdonald86 I used a $.ajax request. It saved lots of trouble. For example,
$.ajax({
url: url,
type: 'GET',
dataType:'json',
success: function(data) {do stuff}
@brycemcdonald86 add &callback=? to the end of your url
worked for me
know a good site that has like mp3 sound effects? that i can just use their link, not download
Hello world I want to learn code and create things using code
welcome to FreeCodeCamp @Jscar87!
hello @Jscar87
@moT01 @lreynl Thanks guys! Adding the callback worked. getJSON is just a shortened form of ajax, so it should just work the same way
brycemcdonald86 sends brownie points to @mot01 and @lreynl :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 388 | @lreynl |http://www.freecodecamp.com/lreynl
any feedback? thoughts or suggestions on my clock?
http://codepen.io/moT01/pen/PbrzQo
http://codepen.io/moT01/pen/PbrzQo
Need a little help, 1. My svg logo doesn't show up on the github pages hosted site, but loads fine on my local machine. 2. the width is alos slightly off on the gh pages site.Can anyone see how I can fix these? https://lettda.github.io/Portfolio-2.0/
@lettda there is no red rabbit in the graphics folder
you're missing the file
I think I am finished with the random quote machine project. Would someone mind taking a look at it and letting me know if I need to change anything? http://codepen.io/bones211/full/YpoWmK/
@GregatGit strange it was there before hmmm..
@lettda I even looked in your github and it was missing
@DanJP2016 Bloody impressive!! You have an eye for design - I would recommend you make the author's name bigger
@GregatGit it's there now and still not showing
it's weird because my other svg's work just fine
@lettda I looked in the folder and the other 3 are there - but not red rabbit
@lettda you have a typo
red_rabbit not red rabbit - in the html
@GregatGit i think i figured out what happened....alot of work i did got deleted :(
@lettda css/Graphics/red_rabbit.svg
i put that in and it worked
@DanJP2016 amazing
@DanJP2016 i believe making it responsive wont be dfficult and it worth
@lettda
@GregatGit Thanks for the feedback. I will adjust the authors name and maybe redesign the buttons, people told me they were kinda small in a different room
danjp2016 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 806 | @gregatgit |http://www.freecodecamp.com/gregatgit
@niconielsen thanks, i was thinking of that, I wanted to avoid using any frameworks, so I'm still learning media queries and responsive layouts
danjp2016 sends brownie points to @niconielsen :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @niconielsen |http://www.freecodecamp.com/niconielsen
@DanJP2016 It's one of the best I've seen
@GregatGit thank you. when i came up with the idea for it I did not know how to code those animations, so I spent about 2 weeks on it lol
danjp2016 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: danjp2016 already gave gregatgit points
Hey, guys. I'm trying to make a bootstrap button to my social media pages in the Portfolio Project and I can't figure out how to include the link.
<button class="btn btn-primary"><i class="fa fa-free-code-camp" aria-hidden="true"></i></button>
Hi, can you help me with this challenge. I do not understand what to do.
hi there, what is the css selector if i want to get only td text font color white only?
@GregatGit How has it been?
does anybody have any idea to make the delete and edit buttons both to the right side only with the change of css? http://codepen.io/c0d0er/pen/RoEBvx?editors=0110
@c0d0er float right or flexbox flex-end
@jwoo92 i tried but doesnt work
Never mind, just found an example on the bootstrap site that works.
@c0d0er of course it would :)
@c0d0er if you put the buttons inside a container thats sized properly, then you can achieve what you are wanting.
@jwoo92 i know that will make easier, but adding that div will mess up the react code, so dont really want to do that
@jwoo92 thanks
c0d0er sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 416 | @jwoo92 |http://www.freecodecamp.com/jwoo92
@c0d0er Then fix the reset to work that way :) simple enough!
Do not solve a problem with a problem. Step back and look at an universal fix. Maybe it will help you out in the future as well :)
@DanJP2016 Awesome work. Definitely the best
@c0d0er another way to do it in css is:
#delBtn{
margin-top: 10px;
display: inline-block;
margin-right: 10px;
margin-left: 35%;
}
#myBtn{
margin-top: 10px;
display: inline-block;
}but you have to deal with margin-left: 35% using media query for smaller screens
@c0d0er as @jwoo92 said think its better to wrap the btns into a container. didn't tested the above on how would behave on mobile
@sorinr you really rock! thank you so much!
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1010 | @sorinr |http://www.freecodecamp.com/sorinr
@c0d0er welcome
hello campers please i need help
my fa symbol inserter refuse to work i dunno what i'm doing wrong ...
<ul>
<li><a href="https://www.facebook.com/jeffrey.egbadon" class="button social"><i class="fa fa-fw fa-facebook fa-3x"></i><a/></li>
<li><a href="https://www.freecodecamp.com/bene2dict" class="button social"><i class="fa fa-fw fa-freecodecamp"></i></a></li>
<li><a href="https://github.com/Bene2dict" class="button social"><i class="fa fa-fw fa-github"></i><a/></li> please where i'm i going wrong
anyone there
hellooooooo
can no one help me or there's nobody online
@Bene2dict think you don't need fa-fw just fa fa-facebook
@Bene2dict have you loaded the fa library? if yes witch version? because some icons added in 4.7.0 for example will not work with an earlier version
Hello fellow campers.
I've just implemented the functionality of my random quote generator using an API
Here is the API:
http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?
It works correctly and generates a new quote at the click of a button as it is programmed to do. However, once the pen is closed and reopened it no longer generates random quotes. To get it to work again I needed to create a new pen and copy and paste all code into it from the previous pen. It then works again until it is closed.
Has anyone else had this problem? Is it possible the API doesn't want to deal with my request the second time the pen is opened? Does anyone have a solution?
Thank you
@joshfilippi never encountered this behavior. for me your pen its working. closed it and reopened and still working. i've create even a new instance of the pen in another tab and both are working as expected
very strange...
when i close and reopen the box is empty. when i click the new quote button nothing happens..
when i close and reopen the box is empty. when i click the new quote button nothing happens..
thank you for taking the time to try it
@joshfilippi np
Should you ever comment your HTML, CSS code? I feel like these two languages should always be super self-explanatory
@jwoo92 I'm good - how have you been doing?
@jayisray not always, and everybody don't know same thing so if you work on a personal project why not even in that case sometimes when you look at your old code some explanation can help :)
@joshfilippi Seems to work always for me
@jayisray You almost never comment any of those
CSS doesn't even allow it, in HTML you do it sometime though
i m doing my 1st basic front end project how to work on my own code pen??
@joshfilippi If I remember correctly, the API only works in http. Just my guess, I migjt be wrong
@joshfilippi yep, just remove https from the url and it should work:)
Hello guys
Can somebody look at it? http://codepen.io/Voidereles/pen/ObeMwx
I don't know why my transition after clicking the button "About" doesn't work
Thank you
Hi guys, maybe i can be helped here...
i've been on this since yesterday.. my ajax call is failing, any help please
my ajax call is failing
my code:
$(document).ready(function(e) {
e.preventDefault;
$("#submit").on("click", function() {
var title = $('#title').val();
var link = "https://en.wikipedia.org/w/api.php?action=query&list=search&srwhat=text&prop=links&origin=*&srsearch=" + title + "&format=json";
$.ajax({
url:link,
success: function (json) {
var resultArray = json.query.search[0].title;
alert(resultArray);
},
error: function(errorMessage) {
alert("failed");
}
});//end ajax call
});//end click
// function search(title) {
// }
});//end document ready
// function search(title) {
// }
// $.ajax( {
// url: "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm",
// data: queryData,
// dataType: 'json',
// type: 'POST',
// headers: { 'Api-User-Agent': 'Example/1.0' },
// success: function(data) {
// // do something with data
// }
// });my codepen link: http://codepen.io/purpose/pen/pNmmoB
please i need yur help guys, i'm tired, no error in the console
@purpose50 It says "success" when I submit.
yeah, thanks, it's fixed.. :+1:
@Voidereles Add jQuery to your codepen and it should work :)
@RitvarsZ thank you, its working :)
voidereles sends brownie points to @ritvarsz :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @ritvarsz |http://www.freecodecamp.com/ritvarsz
How do i make each pages for each navigation tab? Do i make another html and href it in tmy nav?
How do i make each pages for each navigation tab? Do i make another html and href it in tmy nav?
@tranpatrick01 Can you be more specific? or do you have a codepen?
@Blockshot12 Yes, but i dont know how to add pictures to codepen.
<nav class="navbar fixed-header" role="navigation">
<a class="nav-brand"> <img style="width:200px;height:200;" src="logo.jpg"> </a>
<a class="facebook" target="_blank" title="follow me on facebook" href="http://www.facebook.com/PLACEHOLDER">
<img alt="follow me on facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/badgefacebook.png" border=0></a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Treats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galleries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
@tranpatrick01 What is it you want to do?
is anyone very familiar with media queries? I would like to adjust the size of the elements if the user has a screen size under a certain number of pixels on my tictactoe project. is that the appropriate way to use media queries for responsiveness? https://codepen.io/jrandall/pen/ENGWVZ
@Blockshot12 I'm making a website for my aunt bakery
also general feedback on the UI (colors, design, topography, etc) is appreciated
@Blockshot12 So i've made navigation tabs such as Home, about us, treats, and galleries. Now how do i make it whenever a user click a tab they will see the content on that tab?
@tranpatrick01 First of all I must say, if your making a pure HTML/CSS website codepen is great for testing, but not a full website.
Use a program like sublime or atom.
@Blockshot12 Yes i do have the program atom
@Blockshot12 thats not the only code that i have...i only copy a portion of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<title>Thiên Hang Bakery</title>
<link rel="shortcut icon" href="icon.ico">
<style>
nav { width:95%;
font-size: 20px;
font-family: 'Lobster Two', cursive;
}
.nav{ float: right;
}
.nav-brand { float: left;
}
.wedding-background { position: relative;
width: 100%;
height: 852px;
}
p { position: absolute;
top: 550px;
left: 100px;
width: 100;
font-size: 60px;
font-family: 'Arima Madurai', cursive;
}
</style>
</head>
<body>
<nav class="navbar fixed-header" role="navigation">
<a class="nav-brand"> <img style="width:200px;height:200;" src="logo.jpg"> </a>
<a class="facebook" target="_blank" title="follow me on facebook" href="http://www.facebook.com/PLACEHOLDER">
<img alt="follow me on facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/badgefacebook.png" border=0></a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Treats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galleries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</ul>
</nav>
<div>
<img class=" wedding-background" src="wedding-cake.jpg" alt="">
<p><span> Welcome to <strong> Thiên Hang Bakery</strong> <br/>
We serve the best,<i> how you like it</i></br> And <i> how you want it</i></span></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
@tranpatrick01 The answer to your question:
You’ll have multiple files like index.html, about.html, etc
Your nav will look like this:
You’ll have multiple files like index.html, about.html, etc
Your nav will look like this:
<nav>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About</a></li>
<li><a href=“some_folder/some_page.html”>...</a></li>
</ul>
</nav>
Does this help?
@Blockshot12 Thanks a lot
tranpatrick01 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @blockshot12 |http://www.freecodecamp.com/blockshot12
@tranpatrick01 Your welcome! If you want to use clean url’s try this:
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about/index.html”>About</a></li>
<li><a href="some_page/index.html">Some Page</a></li>
</ul>
</nav>
@jrandallhansen Yes, that’s how you use media queries. Nowadays you should use mobile first, but it is the same principle.
@jrandallhansen
.tic-tac-toe {
width: 320px;
height: 320px;
@media only screen and (min-device-width: 768px) {
width: 600px;
height: 600px;
}
@media only screen and (min-device-width: 992px) {
width: 800px;
height: 800px;
}
...
}
@jrandallhansen So you start with your mobile layout and use media queries to adjust your tablet and desktop layouts.
@Blockshot12 http://prnt.sc/doi2r1 now i have another problem...when the browser get smaller, the text on the picture doesn't seem to be contained. BTW i've tried to google it but no luck
For the first project of Front End dev (build a tribute page), does the tribute page have to have identical content to the example, or can it be an entirely different tribute?
@tranpatrick01 https://www.smashingmagazine.com/2016/05/fluid-typography/
Use media queries to adjust your font-size.
@ComradePup It can be a tribute to your liking!
@Blockshot12 Thank you! :)
comradepup sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @blockshot12 |http://www.freecodecamp.com/blockshot12
@Blockshot12 thanks
tranpatrick01 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:warning: tranpatrick01 already gave blockshot12 points
what is wrong with this
$("#target4").html("<em>target4</em>");
ANy suggestiong on best way to check if what the user enters returns any articles? So that I can display a retry message if not? http://codepen.io/ssgriffen/pen/PbgNbL?editors=1010
@mohamedsaieed It looks fine! What is the problem?
Hey guys what do you think could be done to my site to make it more modern? http://codepen.io/bestintown23/pen/woPMBV
Can anyone see why my list isn't appearing? http://codepen.io/ssgriffen/pen/PbgNbL?editors=1010
@mohamedsaieed If this is for the challenge "Change Text Inside an Element Using jQuery", you are missing the
# in front of target4:$("#target4").html("<em>#target4</em>");
In the example solution, the computer for the tic-tac-toe seems to be sentient. I cannot figure out an algorithm.
I created a jagged array with all the winning combos.
Then I filter out the combos that do not contain the user's selection
I then randomly chose an index twice to get a space
What have others done?
@ssgriffen You're erasing your #searchList with this line of code:
$("#mainContent").html("");
@TylerMoeller Ya my bad..noticed that after sent the message, thanks tho
ssgriffen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1202 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
for everything in life there is always that moment called finally..even the human life has its own finally, i have been working on the wikipedia viewer project since yesterday...i got very frustrated seeing how much the documentation for the API is, i got stock a couple of times and with the help of good people in this room i was lifted up to carry on..i would say programming can be very frustrating
but the frustration is so interesting, it is very thrilling..i couldnt quantify my joy as i finshed this project, i kept jumping in my room, dancing when there is no music..
this is the finally of my wikipedia viewer project, please check it out guys and review..
http://codepen.io/purpose/full/pNmmoB
but the frustration is so interesting, it is very thrilling..i couldnt quantify my joy as i finshed this project, i kept jumping in my room, dancing when there is no music..
this is the finally of my wikipedia viewer project, please check it out guys and review..
http://codepen.io/purpose/full/pNmmoB
@idahogurl I think the example uses the Minimax algorithm: https://en.wikipedia.org/wiki/Minimax
I did a simpler approach: If there is a winning move, take it. Else, if the computer can block the human from winning, take it, else take a corner, else take a random square.
I did a simpler approach: If there is a winning move, take it. Else, if the computer can block the human from winning, take it, else take a corner, else take a random square.
@TylerMoeller how did you determine if the computer could block
or if there was a winning move?
@idahogurl Make an array of all the possible win combinations and check if 2 of those 3 squares have been marked.
@TylerMoeller So I would find winning combos that match the selection
Then I would check each one to see if 2/3 are checked by that current player (user or computer)
@idahogurl You would check to see if marking a square ends up matching one of the winning combinations, if that makes sense.
I am trying to wrap my head around the loop needed.
It's a tough one to do efficiently - one of the main challenges to this project
For every winning combination, if two of the three squares for that winning combo are marked, block or win.
Alright, I will give it a shot. Thank you @TylerMoeller
idahogurl sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1203 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hello, I am trying to nest a list inside of a div to create a well, but the list will not nest properly. The well is much smaller then my list. Help?
*than
@einsteinIam Do you have a codepen?
@Blockshot12 Yes
@einsteinIam Can you post a link here to your codepen so we can see your code and/or the problem?
@Blockshot12 Here. https://codepen.io/eisteinIam/pen/gLNvro?editors=1100
I put a border around the well to see it easier.
how do you set a picture as a background. Im want to use this function for my personal portfolio page.
@troutman21 I believe you can use the background-image function in css. Google the function to see the details. I have not used that in a while.
Thank you. @einsteinIam
troutman21 sends brownie points to @einsteiniam :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @einsteiniam |http://www.freecodecamp.com/einsteiniam
@einsteinIam In Bootstrap, columns need to be inside of rows. place your list in a <div class="row"></div>
@einsteinIam Your using some of the bootstrap classes wrong.
<div class="well well-sm”>
<ul class="list-group”>
<li class="list-group-item">
Oops, sorry @Blockshot12, thought you had left
no problem
@Blockshot12 @TylerMoeller Thank you both! Thought there might be a nuance.
einsteiniam sends brownie points to @blockshot12 and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @blockshot12 |http://www.freecodecamp.com/blockshot12
:star2: 1204 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@einsteinIam Take a look at this source code of a bootstrap html page: view-source:https://blackrockdigital.github.io/startbootstrap-heroic-features/
or use inspect element in your browser
@Blockshot12 I see how that works now. Thanks!
einsteiniam sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:warning: einsteiniam already gave blockshot12 points
hi is anyone here good with bootstrap?
@rsmith731 What is your question?
@Blockshot12 i have some bootstrap pills, but i only want the active one to be open and the inactive pills to close when the other is open, but i am unable to get it to work
@ankit-prgmr i will check that out…thanks
@rsmith731 :+1:
@rsmith731 I think this is much easier with the bootstrap scripts: http://getbootstrap.com/javascript/#collapse-example-accordion
could someone tell me why my video doesnt work?
can I make my own tribute page using other person or company rather than Dr. Borlaug in "Build a Tribute Page" project?
@ellievo4 I think yes and i will make tribute to my father
oh yeah!
thanks
@ellievo4 Welcome And Good Luck
has anyone here used jframe for a project?
@GregatGit Great! Have you landed your new job yet?
please help i dont remember anything i've learnt
@chipotle298 Your using Bootstrap so you can use class
.img-responsiveto make <img class=“img-responsive” src=“…” alt=“…” /> responsive.
Hey can someone tell me what this line of code mean:
body {
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
I know "!important" is used for overriding. But I put copied this line of code from somebody else's code into my own CSS on codepen.io. Nothing happen.
Does anyone know a way that i can add and image to my code from my computer? If the image isn't online is there no way to add it?
no URL right ?
anyone? ...
could any one tell why buttons not aligned properly
https://codepen.io/charan1922/pen/zoQmWo
https://codepen.io/charan1922/pen/zoQmWo
@troutman21 Nope, your images need to bee online. You can get a pro account or use one of the following services:
http://cloudinary.com/
https://ryanmo.co/2013/11/03/dropboxsharedlinks/
http://cloudinary.com/
https://ryanmo.co/2013/11/03/dropboxsharedlinks/
How do I paste my code on here to where it looks like the code from the challenge?
@RedHoodJT use ``` before and after
Thanks.
@charan1922 Make your buttons the same width.
@charan1922
<button class=“btn__calculator” value=“/“>÷</button>
@Blockshot12 tq
charan1922 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @blockshot12 |http://www.freecodecamp.com/blockshot12
Need help guys! my css code was behaving in an unexpected way, so i thought to put the page here through codepen but when put the code in codepen then it just worked completely fine in an expected way. i thought my firefox might hv bug so i tried to run that page in chrome IE and even safari but still in all the browser the page is shown in an unexpected way
i am counting on for help...
i am counting on for help...
@charan1922 You have some extra spaces in your code between the <button> tags, remove those to get your first row of buttons to line up
An easy way (with my codepen settings) is to click the down arrow at the top, right-hand corner of your HTML panel and select "Tidy HTML"
@NeelDVirus when your CSS does not behave as expected, does your console report any errors? (Ctrl+Shift+J to bring up the console)
@TylerMoeller thank you sooo much :smile:
charan1922 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1205 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@charan1922 Looks better now :)
I am having trouble with my Twitch App. My code is currently adding the
http://codepen.io/Hudson_Taylor11/pen/YpjxKm?editors=0010
offline-icon class to all streamers instead of just the ones who are offline. Any thoughts?http://codepen.io/Hudson_Taylor11/pen/YpjxKm?editors=0010
Hello there!
Can somebody help me with the nav bar for the personal portfolio page?
@GDim85 Sure, I'll try!
I have built my website! http://codepen.io/DimPap85/pen/rWgOXQ
@hudsontaylor
I have divided into different divs in order to built the nav bar.
@TylerMoeller No error is shown! But in codepen also i just noticed a bug. just see in the top part of the silver block (the text "blasting off" doesn't belong there)
http://codepen.io/neel111/pen/ObevZJ
http://codepen.io/neel111/pen/ObevZJ
have you any ready code for a responsive nav bar so i can make it @hudsontaylor ?
@GDim85 Nice! So, if you go to the Bootstrap docs (http://getbootstrap.com/components/#navbar), you can get the code for their pre-made navbar. Then you can customize it as needed!
Thank you very much @hudsontaylor !
gdim85 sends brownie points to @hudsontaylor :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @hudsontaylor |http://www.freecodecamp.com/hudsontaylor
@TylerMoeller i cant see that text in the preview of codepen i sent here to you. i am oblivious of what's happening. if possible try to run that code with bootstrap in your text editor...
@NeelDVirus I'm seeing this error in the console, regarding the "blasting off" text:
2016-12-27 12:03:24.168 http://s.codepen.io/boomerang/9033c8d27628f7fe9c78a7f2fa33421f1482869003889/images/img-header.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
You can upload the picture to a site like https://postimage.org to use an URL for that image instead
@GDim85 You're welcome!
The reason you may not see it is because you only make the image visible on md and lg sized screens:
<div class="col-md-6 visible-md visible-lg">
<img src="images/img-header.jpg" alt="Blasting Off" title="Blasting off"/>
</div>
@hudsontaylor The reason your code isn't working as expected is because of the way asynchronous functions work in JavaScript. Add
console.log(i) to the first line of your getJSON function to get an idea of what's going on.
The for loop runs to completion while your getJSON goes out and gets the data, by the time you would expect it to come back and get data for the next user, the for loop has already finished. Use .forEach() or .map() instead of a for loop to help with this.
@TylerMoeller Oops My bad, that was actually an "alt" attribute for the img i havnt uploaded. i thought it ws because of something on heading!
well buddy i wud really appreciate if you can run that code in your editor and check that whether the lightgrey background-color really do seen in the browser, because when i run that in my index.html file then the lightgrey background isn't seen...
and is there any way to send you the .zip file here?
well buddy i wud really appreciate if you can run that code in your editor and check that whether the lightgrey background-color really do seen in the browser, because when i run that in my index.html file then the lightgrey background isn't seen...
and is there any way to send you the .zip file here?
@NeelDVirus If you can copy and paste your code into codepen, as you have it in your editor, I can take a closer look
@Blockshot12 thanks francois!
:cookie: 274 | @blockshot12 |http://www.freecodecamp.com/blockshot12
chipotle298 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
@TylerMoeller Oh, I see... Is there any way around this? Or do I have to completely refactor?
@hudsontaylor Instead of a for() loop, use .map() - it has a callback, so it doesn't proceed to the next user in the array until the callback fires.
i already did copy paste (execpt for img which is not uploaded) and bootstrap is embedded there in codepen!
there is only one issue i am getting, lightgrey background-color do executed in codepen as expected but it is not executed in any of my browser.
are you in skype, i can send you zip file there
there is only one issue i am getting, lightgrey background-color do executed in codepen as expected but it is not executed in any of my browser.
are you in skype, i can send you zip file there
@TylerMoeller Thanks!
:star2: 1206 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Hello, World
welcome to FreeCodeCamp @nullx5!
@NeelDVirus Does your text editor also have a separate panel for CSS?
I can't tell you what's wrong unless I see the exact same code, like how you are referencing your CSS in your text editor
@NeelDVirus There should be code like this at the top of your HTML:
<head>
<link rel='stylesheet prefetch' href='file_with_lightgrey_background_css_in_it.css'>
</head>
i dont see any separate panel in my text editor whch is "sublime" text editor. i am referencing my page with .css file and .html file
i am doing copy-paste of the code here
i am doing copy-paste of the code here
Welcome, by the way, @nullx5
@TylerMoeller
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-md-12">
<h1>Blasting Off With Bootstrap</h1>
</div>
</div>
<div class="row dff">
<div class="col-md-6">
<h2>The Fastest Way to Space</h2>
<p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button>Take the Tour</button>
<button>Book Tickets Now</button>
</div>
<div class="col-md-6 visible-md visible-lg">
<img src="images/img-header.jpg" alt="Blasting Off" title="Blasting off"/>
</div>
</div>
<div class="row text-center features">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase" ></i>
<h3>Book Today!</h3>
<p>Even if you are Traveling tomorrow, you can still get tickets today. we Have a numeber of conveniently located ports around the globe to service evryone</p>
</div>
<div class="col-sm-4 col-xs-6 ">
<i class="glyphicon glyphicon-random" ></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, Why not try out a transporter? Despite the claimd, there are have been no deaths in the last 6weeks!</p>
</div>
<div class="col-sm-4 col-xs-6 ">
<i class="glyphicon glyphicon-send" ></i>
<h3>RocketBus®</h3>
<p>For cheapest fare, catch the next RocketBus® to the star, Cheaper on your wallet, and easiest way to make friends</p>
</div>
</div>
</div>
</body>
</html>main.css code:
.features .glyphicon {
font-size: 32px;
}
.dff {
background-color: lightgrey;
}@TylerMoeller I tried using .map() like you said, but I must be doing something wrong:
var users = ["freecodecamp", "trymacs"];
var links = users.map(function(val) {
$.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + val, function(data) {
return data.stream;
});
});
console.log(links);Thanks!
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: hudsontaylor already gave tylermoeller points
@NeelDVirus The only thing I can think of is that your .css file is not located at
css/main.css. Your code works fine for me, I get a gray background.
@hudsontaylor You are using .map() correctly, the problem is that you are trying to return
data from your anonymous .getJSON function. The only way to do that is to pass it to another function:var users = ["freecodecamp", "trymacs"];
var links = users.map(function(val) {
$.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + val, function(data) {
logTheData(data.stream);
});
});
function logTheData(data) {
console.log(data);
}
@TylerMoeller Ok, thanks again!
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: hudsontaylor already gave tylermoeller points
how do you make the imgs side by side? https://codepen.io/c0d0er2/pen/oYrppg
@TylerMoeller No, my .css file is located at
css/main.css. i am getting the larger font also of 32px as in the main.css . Even the whole page goes lightgrey if i replace the class.dff with .row. Can you please preview that page directly in your any browser (by clicking directly in the neelD.html to open in your browser) because that's the only place (only browser) where i am geting the issue.
Hello World!!!!!!!!
welcome to FreeCodeCamp @Stjose!
@NeelDVirus Opening a file in your browser like that won't always work for various reasons. It's best to use an HTML previewer in your editor or install a web server locally so you can view the page via http://localhost
Welcome, @Stjose
Question - so for Tic Tac Toe, should I be creating the AI myself as well ? It does sound like fun...
working in my tribute page
any suggestion
@TylerMoeller Oh i didn't knew that. Thanks for this vital information!
neeldvirus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1207 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Using the .col-md-6 class doesn't work. Can someone help me? https://codepen.io/sziko/pen/zoVzZE?editors=1100
Ok, i dont get it. When i open it here it works
@c0d0er2 Since you are using bootstrap, you can put them in columns using the grid system. http://getbootstrap.com/css/#grid
Here are some examples of different ways to align things side by side depending on the screen size: https://s.codepen.io/TylerMoeller/pen/qNrbok
Here are some examples of different ways to align things side by side depending on the screen size: https://s.codepen.io/TylerMoeller/pen/qNrbok
@homerallen Yes, all the code required for the project, including the AI, should be written by you.
@TylerMoeller Thanks!
c0d0er2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1208 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@sziko md is for medium screens, use l and xl for larger ones and s, xs for smaller ones
@gbsimon87
Hey guys...Hope everyone is well
Got a quick jquery text function question if anyone can help...
Hey guys...Hope everyone is well
Got a quick jquery text function question if anyone can help...
@TylerMoeller I tried to view my page via
http://localhostafter installing a webserver locally. But still the issue exist
@gbsimon87 Fire away
@Blockshot12 thank you but it seems I'm being helped in the other chat, if no resolution I'll ask here again, cheers :)
:cookie: 276 | @blockshot12 |http://www.freecodecamp.com/blockshot12
gbsimon87 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
ok
@NeelDVirus What’s the problem? i’ve scrolled up, but couldn’t find your original question.
@Blockshot12
my css code was behaving in an unexpected way, so i thought to put the page here through codepen but when put the code in codepen then it just worked completely fine in an expected way. i thought my firefox might hv bug so i tried to run that page in chrome IE and even safari but still in all the browser the page is shown in an unexpected way.
Html code and css file is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-md-12">
<h1>Blasting Off With Bootstrap</h1>
</div>
</div>
<div class="row dff">
<div class="col-md-6">
<h2>The Fastest Way to Space</h2>
<p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button>Take the Tour</button>
<button>Book Tickets Now</button>
</div>
<div class="col-md-6 visible-md visible-lg">
<img src="images/img-header.jpg" alt="Blasting Off" title="Blasting off"/>
</div>
</div>
<div class="row text-center features">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase" ></i>
<h3>Book Today!</h3>
<p>Even if you are Traveling tomorrow, you can still get tickets today. we Have a numeber of conveniently located ports around the globe to service evryone</p>
</div>
<div class="col-sm-4 col-xs-6 ">
<i class="glyphicon glyphicon-random" ></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, Why not try out a transporter? Despite the claimd, there are have been no deaths in the last 6weeks!</p>
</div>
<div class="col-sm-4 col-xs-6 ">
<i class="glyphicon glyphicon-send" ></i>
<h3>RocketBus®</h3>
<p>For cheapest fare, catch the next RocketBus® to the star, Cheaper on your wallet, and easiest way to make friends</p>
</div>
</div>
</div>
</body>
</html>.features .glyphicon {
font-size: 32px;
}
.dff {
background-color: lightgrey;
}If i run this code directly in web browser then i dont see the lightgrey background as expected, but the lightgrey background color can be seen in codepen(link given below) as expected
http://codepen.io/neel111/pen/ObevZJ
so where is the catch here
Can anyone help me center an image inside of a div? I tried <div style="margin: auto"> on the parent div and <img href="#" style="margin: auto"> on the image itself... here is the link to my project:
@NeelDVirus Can you describe the unexpected way?
@Blockshot12 when i view preview my page directly in browser(any browser) then i must see the
background-color:lightgrey of .dff class being executed (the expected way), but i dont see lightgrey executing (which is unexpected)
nevermind, I got it!
@Delighted-Turtle i see it already centered
an anyone telly me why I am not getting the columns I expect in CodePen, the following code for example stacks: <div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
@remdata it wud be better if you directly send the codepen link of it
@NeelDVirus And you still have this problem viewing locally in your browsers?
Have you tried adding the bg color inline like this (see what happens):
Have you tried adding the bg color inline like this (see what happens):
<div class=“dff" style=“background-color: lightgrey”>…</div>
@NeelDVirus . its https://codepen.io/ibanton/pen/GNLpjJ
@Blockshot12 What the hack!! YEah man i got the expected result when i added the bg color inline.
But why it is not executed from .css file while other properties in .css file are being executed nicely...?
and did you tried it in the browsers from your side?
But why it is not executed from .css file while other properties in .css file are being executed nicely...?
and did you tried it in the browsers from your side?
@NeelDVirus Not yet
I downloaded the zip from codepen and I don’t have the problem. What do you see when you inspect the element in your browser?
@remdata you haven't integrated the bootstrap file in your codepen.
check this:
http://codepen.io/neel111/pen/dOBjOj
check this:
http://codepen.io/neel111/pen/dOBjOj
hey guys, I need a little help with the slideshow of my client's site: https://amitp88.github.io/Khmer-Family-Cafe/
I'm trying to get the description box to the bottom of each slide as opposed to being on the right side
I've tried using display flex and display inline-flex but it's not working
@NeelDVirus How do I integrate the bootstrap file in codepen?
@Blockshot12 Hey man i would go mad now LOL :D :D when i tried to review the page again by wiping up the inline style then now its just working as expected. i mean after i added the style property directly into html, then .css property of lightgrey is also working fine (when i wiped up the html style of bg color)
now i am blunt and being oblivious
now i am blunt and being oblivious
@NeelDVirus Haha, sometimes these things happen. Just move on.
@remdata click the setting icon at the left corner of the CSS panel, scroll down, click on the drop-down arrow on quick-add and then click on bootstrap. At last click on "Save and close" and its done
@Blockshot12 This quirk totaly fried my brain. Anyways Thanks man for being a helping hand
neeldvirus sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @blockshot12 |http://www.freecodecamp.com/blockshot12
@NeelDVirus . Thanks, works fine now; thought I was loosing my mind over this issue.
:cookie: 83 | @neeldvirus |http://www.freecodecamp.com/neeldvirus
remdata sends brownie points to @neeldvirus :sparkles: :thumbsup: :sparkles: