These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Dec 2016
grantknaver
@grantknaver
Dec 27 2016 00:01
anyone around
perty please
Islam Ibakaev
@dagman
Dec 27 2016 00:28
you guys i finally deployed my react calculator. check it out and give your thoughts :smile:
@grantknaver 404 pen nod found
James Payne
@jamespayne
Dec 27 2016 01:05
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.
c0d0er2
@c0d0er2
Dec 27 2016 01:05
Can anyone please help me make the <li></li> have bullets? https://codepen.io/c0d0er2/pen/MbdqEz
James Payne
@jamespayne
Dec 27 2016 01:13
@c0d0er2 Do you mean in the navigation?
lewis reynolds
@lreynl
Dec 27 2016 01:17
@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)
James Payne
@jamespayne
Dec 27 2016 01:20
@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.
CamperBot
@camperbot
Dec 27 2016 01:20
:cookie: 387 | @lreynl |http://www.freecodecamp.com/lreynl
jamespayne sends brownie points to @lreynl :sparkles: :thumbsup: :sparkles:
James Payne
@jamespayne
Dec 27 2016 01:22
I have got it working with dark sky but I prefer the data content from openweathermap. Seems much more simple.
lewis reynolds
@lreynl
Dec 27 2016 01:24
I just used http://codepen.io instead of https. But then you need a different location api.
James Payne
@jamespayne
Dec 27 2016 01:28
@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.
CamperBot
@camperbot
Dec 27 2016 01:28
jamespayne sends brownie points to @lreynl :sparkles: :thumbsup: :sparkles:
:warning: jamespayne already gave lreynl points
prabaker
@prabaker
Dec 27 2016 01:41
Has anyone here ever used jframe for a project?
lewis reynolds
@lreynl
Dec 27 2016 01:58
@Voidereles Did you try converting it to jpg?
brycemcdonald86
@brycemcdonald86
Dec 27 2016 03:00
Has anyone had problems w/ the wikipedia api? Cant figure out what's wrong w/ my getJSON function. It is not successful
lewis reynolds
@lreynl
Dec 27 2016 03:04
@brycemcdonald86 Could you post a link?
brycemcdonald86
@brycemcdonald86
Dec 27 2016 03:10
nathanthai
@nathanthai
Dec 27 2016 03:20
html selfie.JPG
I don't know why the blue part is causing more space
lewis reynolds
@lreynl
Dec 27 2016 03:21
@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}
Tom
@moT01
Dec 27 2016 03:27
@brycemcdonald86 add &callback=? to the end of your url
worked for me
Tom
@moT01
Dec 27 2016 03:38
know a good site that has like mp3 sound effects? that i can just use their link, not download
Jscar87
@Jscar87
Dec 27 2016 03:42
Hello world I want to learn code and create things using code
CamperBot
@camperbot
Dec 27 2016 03:42

welcome to FreeCodeCamp @Jscar87!

Tom
@moT01
Dec 27 2016 03:47
hello @Jscar87
brycemcdonald86
@brycemcdonald86
Dec 27 2016 03:59
@moT01 @lreynl Thanks guys! Adding the callback worked. getJSON is just a shortened form of ajax, so it should just work the same way
CamperBot
@camperbot
Dec 27 2016 03:59
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
Tom
@moT01
Dec 27 2016 04:13
any feedback? thoughts or suggestions on my clock?
http://codepen.io/moT01/pen/PbrzQo
lettda
@lettda
Dec 27 2016 04:30
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/
Greg Duncan
@GregatGit
Dec 27 2016 04:38
@lettda there is no red rabbit in the graphics folder
you're missing the file
Daniel
@DanJP2016
Dec 27 2016 04:41
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/
lettda
@lettda
Dec 27 2016 04:42
@GregatGit strange it was there before hmmm..
Greg Duncan
@GregatGit
Dec 27 2016 04:45
@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
lettda
@lettda
Dec 27 2016 04:47
@GregatGit it's there now and still not showing
it's weird because my other svg's work just fine
Greg Duncan
@GregatGit
Dec 27 2016 04:49
@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
lettda
@lettda
Dec 27 2016 04:53
@GregatGit i think i figured out what happened....alot of work i did got deleted :(
Greg Duncan
@GregatGit
Dec 27 2016 04:54
@lettda css/Graphics/red_rabbit.svg
i put that in and it worked
Nicolas Nielsen
@niconielsen
Dec 27 2016 04:56
@DanJP2016 amazing
Greg Duncan
@GregatGit
Dec 27 2016 04:57
redrabbit.JPG
Nicolas Nielsen
@niconielsen
Dec 27 2016 04:57
@DanJP2016 i believe making it responsive wont be dfficult and it worth
Greg Duncan
@GregatGit
Dec 27 2016 04:57
@lettda
Daniel
@DanJP2016
Dec 27 2016 04:57
@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
CamperBot
@camperbot
Dec 27 2016 04:57
danjp2016 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 806 | @gregatgit |http://www.freecodecamp.com/gregatgit
Daniel
@DanJP2016
Dec 27 2016 04:59
@niconielsen thanks, i was thinking of that, I wanted to avoid using any frameworks, so I'm still learning media queries and responsive layouts
CamperBot
@camperbot
Dec 27 2016 04:59
danjp2016 sends brownie points to @niconielsen :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @niconielsen |http://www.freecodecamp.com/niconielsen
Greg Duncan
@GregatGit
Dec 27 2016 04:59
@DanJP2016 It's one of the best I've seen
Daniel
@DanJP2016
Dec 27 2016 05:00
@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
CamperBot
@camperbot
Dec 27 2016 05:00
danjp2016 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: danjp2016 already gave gregatgit points
Matheus Gritz
@masgritz
Dec 27 2016 05:34
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>
Blessed
@nullx5
Dec 27 2016 05:34
Hi, can you help me with this challenge. I do not understand what to do.
blob
走你飛艇
@gofighting123
Dec 27 2016 05:37
hi there, what is the css selector if i want to get only td text font color white only?
Justin Woodward
@jwoo92
Dec 27 2016 05:41
@GregatGit How has it been?
c0d0er
@c0d0er
Dec 27 2016 05:42
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
Justin Woodward
@jwoo92
Dec 27 2016 05:43
@c0d0er float right or flexbox flex-end
c0d0er
@c0d0er
Dec 27 2016 05:44
@jwoo92 i tried but doesnt work
Matheus Gritz
@masgritz
Dec 27 2016 05:44
Never mind, just found an example on the bootstrap site that works.
Justin Woodward
@jwoo92
Dec 27 2016 05:46
@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.
c0d0er
@c0d0er
Dec 27 2016 05:48
@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
CamperBot
@camperbot
Dec 27 2016 05:48
c0d0er sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 416 | @jwoo92 |http://www.freecodecamp.com/jwoo92
Justin Woodward
@jwoo92
Dec 27 2016 05:49
@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 :)
Ankit Agarwal
@ankit-prgmr
Dec 27 2016 06:12
@DanJP2016 Awesome work. Definitely the best
Sorin Ruse
@sorinr
Dec 27 2016 06:17

@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
c0d0er
@c0d0er
Dec 27 2016 06:20
@sorinr you really rock! thank you so much!
CamperBot
@camperbot
Dec 27 2016 06:20
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1010 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 27 2016 06:21
@c0d0er welcome
Benedict
@Bene2dict
Dec 27 2016 06:35
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
Benedict
@Bene2dict
Dec 27 2016 06:41
can no one help me or there's nobody online
Sorin Ruse
@sorinr
Dec 27 2016 06:46
@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
Josh
@joshfilippi
Dec 27 2016 07:01

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

Sorin Ruse
@sorinr
Dec 27 2016 07:21
@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
Josh
@joshfilippi
Dec 27 2016 07:23
very strange...
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
Sorin Ruse
@sorinr
Dec 27 2016 07:30
@joshfilippi np
jayisray
@jayisray
Dec 27 2016 08:14
Should you ever comment your HTML, CSS code? I feel like these two languages should always be super self-explanatory
Greg Duncan
@GregatGit
Dec 27 2016 08:15
@jwoo92 I'm good - how have you been doing?
Alexander Domikov
@AlexanderDom
Dec 27 2016 08:27
@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 :)
alpox
@alpox
Dec 27 2016 10:21
@joshfilippi Seems to work always for me
alpox
@alpox
Dec 27 2016 10:28
@jayisray You almost never comment any of those
CSS doesn't even allow it, in HTML you do it sometime though
sac314
@sac314
Dec 27 2016 11:08
i m doing my 1st basic front end project how to work on my own code pen??
Ritvars
@RitvarsZ
Dec 27 2016 11:16
@joshfilippi If I remember correctly, the API only works in http. Just my guess, I migjt be wrong
Ritvars
@RitvarsZ
Dec 27 2016 11:39
@joshfilippi yep, just remove https from the url and it should work:)
Maciej Żelazo
@Voidereles
Dec 27 2016 12:37
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
Ayobami
@purpose50
Dec 27 2016 12:47

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

Johnny
@JohnnyBizzel
Dec 27 2016 13:24
@purpose50 It says "success" when I submit.
Ayobami
@purpose50
Dec 27 2016 13:24
yeah, thanks, it's fixed.. :+1:
Ritvars
@RitvarsZ
Dec 27 2016 13:28
@Voidereles Add jQuery to your codepen and it should work :)
Maciej Żelazo
@Voidereles
Dec 27 2016 13:30
@RitvarsZ thank you, its working :)
CamperBot
@camperbot
Dec 27 2016 13:30
voidereles sends brownie points to @ritvarsz :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @ritvarsz |http://www.freecodecamp.com/ritvarsz
Patrick Tran
@tranpatrick01
Dec 27 2016 14:37
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?
Francois van Leersum
@Blockshot12
Dec 27 2016 15:05
@tranpatrick01 Can you be more specific? or do you have a codepen?
Patrick Tran
@tranpatrick01
Dec 27 2016 15:16
@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>
</ul>
Francois van Leersum
@Blockshot12
Dec 27 2016 15:17
@tranpatrick01 What is it you want to do?
jrandallhansen
@jrandallhansen
Dec 27 2016 15:18
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
Patrick Tran
@tranpatrick01
Dec 27 2016 15:18
@Blockshot12 I'm making a website for my aunt bakery
jrandallhansen
@jrandallhansen
Dec 27 2016 15:18
also general feedback on the UI (colors, design, topography, etc) is appreciated
Patrick Tran
@tranpatrick01
Dec 27 2016 15:19
@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?
Francois van Leersum
@Blockshot12
Dec 27 2016 15:22
@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.
Patrick Tran
@tranpatrick01
Dec 27 2016 15:23
@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>

Francois van Leersum
@Blockshot12
Dec 27 2016 15:27
@tranpatrick01 The answer to your question:
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?
Patrick Tran
@tranpatrick01
Dec 27 2016 15:32
@Blockshot12 Thanks a lot
CamperBot
@camperbot
Dec 27 2016 15:32
tranpatrick01 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @blockshot12 |http://www.freecodecamp.com/blockshot12
Francois van Leersum
@Blockshot12
Dec 27 2016 15:35
@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>
Francois van Leersum
@Blockshot12
Dec 27 2016 15:42
@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;
  }
  ...
}
Francois van Leersum
@Blockshot12
Dec 27 2016 15:53
@jrandallhansen So you start with your mobile layout and use media queries to adjust your tablet and desktop layouts.
Patrick Tran
@tranpatrick01
Dec 27 2016 15:58
@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
ComradePup
@ComradePup
Dec 27 2016 16:02
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?
Francois van Leersum
@Blockshot12
Dec 27 2016 16:03
Use media queries to adjust your font-size.
@ComradePup It can be a tribute to your liking!
ComradePup
@ComradePup
Dec 27 2016 16:07
@Blockshot12 Thank you! :)
CamperBot
@camperbot
Dec 27 2016 16:07
comradepup sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @blockshot12 |http://www.freecodecamp.com/blockshot12
Patrick Tran
@tranpatrick01
Dec 27 2016 16:15
@Blockshot12 thanks
CamperBot
@camperbot
Dec 27 2016 16:15
tranpatrick01 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:warning: tranpatrick01 already gave blockshot12 points
mohamedsaieed
@mohamedsaieed
Dec 27 2016 16:20
what is wrong with this
$("#target4").html("<em>target4</em>");
Sam Griffen
@ssgriffen
Dec 27 2016 16:27
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
Francois van Leersum
@Blockshot12
Dec 27 2016 16:31
@mohamedsaieed It looks fine! What is the problem?
Chris
@bestintown23
Dec 27 2016 16:35
Hey guys what do you think could be done to my site to make it more modern? http://codepen.io/bestintown23/pen/woPMBV
Sam Griffen
@ssgriffen
Dec 27 2016 16:38
Can anyone see why my list isn't appearing? http://codepen.io/ssgriffen/pen/PbgNbL?editors=1010
Tyler Moeller
@TylerMoeller
Dec 27 2016 16:39
@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>");
Rebecca Vest
@idahogurl
Dec 27 2016 16:41
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?
Tyler Moeller
@TylerMoeller
Dec 27 2016 16:47
@ssgriffen You're erasing your #searchList with this line of code: $("#mainContent").html("");
Sam Griffen
@ssgriffen
Dec 27 2016 16:48
@TylerMoeller Ya my bad..noticed that after sent the message, thanks tho
CamperBot
@camperbot
Dec 27 2016 16:48
ssgriffen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1202 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ayobami
@purpose50
Dec 27 2016 16:49
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
Tyler Moeller
@TylerMoeller
Dec 27 2016 16:50
@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.
Rebecca Vest
@idahogurl
Dec 27 2016 16:54
@TylerMoeller how did you determine if the computer could block
or if there was a winning move?
Tyler Moeller
@TylerMoeller
Dec 27 2016 16:56
@idahogurl Make an array of all the possible win combinations and check if 2 of those 3 squares have been marked.
Rebecca Vest
@idahogurl
Dec 27 2016 16:58
@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)
Tyler Moeller
@TylerMoeller
Dec 27 2016 16:59
@idahogurl You would check to see if marking a square ends up matching one of the winning combinations, if that makes sense.
Rebecca Vest
@idahogurl
Dec 27 2016 17:00
I am trying to wrap my head around the loop needed.
Tyler Moeller
@TylerMoeller
Dec 27 2016 17:00
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.
Rebecca Vest
@idahogurl
Dec 27 2016 17:03
Alright, I will give it a shot. Thank you @TylerMoeller
CamperBot
@camperbot
Dec 27 2016 17:03
idahogurl sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1203 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
einsteinIam
@einsteinIam
Dec 27 2016 17:04
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
Francois van Leersum
@Blockshot12
Dec 27 2016 17:07
@einsteinIam Do you have a codepen?
einsteinIam
@einsteinIam
Dec 27 2016 17:08
@Blockshot12 Yes
Francois van Leersum
@Blockshot12
Dec 27 2016 17:21
@einsteinIam Can you post a link here to your codepen so we can see your code and/or the problem?
einsteinIam
@einsteinIam
Dec 27 2016 17:23
I put a border around the well to see it easier.
Phillip Troutman
@troutman21
Dec 27 2016 17:32
how do you set a picture as a background. Im want to use this function for my personal portfolio page.
einsteinIam
@einsteinIam
Dec 27 2016 17:33
@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.
Phillip Troutman
@troutman21
Dec 27 2016 17:33
Thank you. @einsteinIam
CamperBot
@camperbot
Dec 27 2016 17:33
troutman21 sends brownie points to @einsteiniam :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @einsteiniam |http://www.freecodecamp.com/einsteiniam
Tyler Moeller
@TylerMoeller
Dec 27 2016 17:34
@einsteinIam In Bootstrap, columns need to be inside of rows. place your list in a <div class="row"></div>
Francois van Leersum
@Blockshot12
Dec 27 2016 17:34
@einsteinIam Your using some of the bootstrap classes wrong.
<div class="well well-sm”>
  <ul class="list-group”>
    <li class="list-group-item">
Tyler Moeller
@TylerMoeller
Dec 27 2016 17:36
Oops, sorry @Blockshot12, thought you had left
Francois van Leersum
@Blockshot12
Dec 27 2016 17:36
no problem
einsteinIam
@einsteinIam
Dec 27 2016 17:37
@Blockshot12 @TylerMoeller Thank you both! Thought there might be a nuance.
CamperBot
@camperbot
Dec 27 2016 17:37
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
Francois van Leersum
@Blockshot12
Dec 27 2016 17:38
@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
einsteinIam
@einsteinIam
Dec 27 2016 17:41
@Blockshot12 I see how that works now. Thanks!
CamperBot
@camperbot
Dec 27 2016 17:41
einsteiniam sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:warning: einsteiniam already gave blockshot12 points
Rex Smith Jr.
@rsmith731
Dec 27 2016 17:46
hi is anyone here good with bootstrap?
Francois van Leersum
@Blockshot12
Dec 27 2016 17:46
@rsmith731 What is your question?
Rex Smith Jr.
@rsmith731
Dec 27 2016 17:48
@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 Agarwal
@ankit-prgmr
Dec 27 2016 17:50
@rsmith731 This might help you. Have a look at this plugin
http://isotope.metafizzy.co/
Rex Smith Jr.
@rsmith731
Dec 27 2016 17:50
@ankit-prgmr i will check that out…thanks
Ankit Agarwal
@ankit-prgmr
Dec 27 2016 17:50
@rsmith731 :+1:
Francois van Leersum
@Blockshot12
Dec 27 2016 17:58
@rsmith731 I think this is much easier with the bootstrap scripts: http://getbootstrap.com/javascript/#collapse-example-accordion
MIke
@chipotle298
Dec 27 2016 18:09
could someone tell me why my video doesnt work?
Ellie
@ellievo4
Dec 27 2016 18:29
can I make my own tribute page using other person or company rather than Dr. Borlaug in "Build a Tribute Page" project?
Zaghloul
@Zizowannalearn
Dec 27 2016 18:30
@ellievo4 I think yes and i will make tribute to my father
Ellie
@ellievo4
Dec 27 2016 18:31
oh yeah!
thanks
Zaghloul
@Zizowannalearn
Dec 27 2016 18:32
@ellievo4 Welcome And Good Luck
prabaker
@prabaker
Dec 27 2016 18:40
has anyone here used jframe for a project?
Justin Woodward
@jwoo92
Dec 27 2016 18:45
@GregatGit Great! Have you landed your new job yet?
Zaghloul
@Zizowannalearn
Dec 27 2016 18:46
please help i dont remember anything i've learnt
Francois van Leersum
@Blockshot12
Dec 27 2016 18:56
@chipotle298 Your using Bootstrap so you can use class .img-responsiveto make <img class=“img-responsive” src=“…” alt=“…” /> responsive.
Hello911
@Hello911
Dec 27 2016 19:01
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;
}
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.
Phillip Troutman
@troutman21
Dec 27 2016 19:14
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 ?
Phillip Troutman
@troutman21
Dec 27 2016 19:22
anyone? ...
Charan Teja
@charan1922
Dec 27 2016 19:25
could any one tell why buttons not aligned properly
https://codepen.io/charan1922/pen/zoQmWo
Francois van Leersum
@Blockshot12
Dec 27 2016 19:26
@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/
RedHoodJT
@RedHoodJT
Dec 27 2016 19:28
How do I paste my code on here to where it looks like the code from the challenge?
Francois van Leersum
@Blockshot12
Dec 27 2016 19:28
@RedHoodJT use ``` before and after
RedHoodJT
@RedHoodJT
Dec 27 2016 19:29
Thanks.
Francois van Leersum
@Blockshot12
Dec 27 2016 19:33
@charan1922 Make your buttons the same width.
Francois van Leersum
@Blockshot12
Dec 27 2016 19:39
@charan1922
<button class=“btn__calculator” value=/“>÷</button>
Charan Teja
@charan1922
Dec 27 2016 19:40
@Blockshot12 tq
CamperBot
@camperbot
Dec 27 2016 19:40
charan1922 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @blockshot12 |http://www.freecodecamp.com/blockshot12
Jake
@NeelDVirus
Dec 27 2016 19:41
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...
Tyler Moeller
@TylerMoeller
Dec 27 2016 19:42
@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)
Charan Teja
@charan1922
Dec 27 2016 19:44
@TylerMoeller thank you sooo much :smile:
CamperBot
@camperbot
Dec 27 2016 19:44
charan1922 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1205 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 27 2016 19:44
@charan1922 Looks better now :)
hudsontaylor
@hudsontaylor
Dec 27 2016 19:52
I am having trouble with my Twitch App. My code is currently adding the 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
GDim85
@GDim85
Dec 27 2016 19:53
Hello there!
Can somebody help me with the nav bar for the personal portfolio page?
hudsontaylor
@hudsontaylor
Dec 27 2016 19:54
@GDim85 Sure, I'll try!
GDim85
@GDim85
Dec 27 2016 19:56
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.
Jake
@NeelDVirus
Dec 27 2016 19:59
@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
GDim85
@GDim85
Dec 27 2016 19:59
have you any ready code for a responsive nav bar so i can make it @hudsontaylor ?
hudsontaylor
@hudsontaylor
Dec 27 2016 20:01
@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!
GDim85
@GDim85
Dec 27 2016 20:03
Thank you very much @hudsontaylor !
CamperBot
@camperbot
Dec 27 2016 20:03
gdim85 sends brownie points to @hudsontaylor :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @hudsontaylor |http://www.freecodecamp.com/hudsontaylor
Jake
@NeelDVirus
Dec 27 2016 20:03
@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...
Tyler Moeller
@TylerMoeller
Dec 27 2016 20:04
@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
hudsontaylor
@hudsontaylor
Dec 27 2016 20:05
@GDim85 You're welcome!
Tyler Moeller
@TylerMoeller
Dec 27 2016 20:05
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.
Jake
@NeelDVirus
Dec 27 2016 20:09
@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?
Tyler Moeller
@TylerMoeller
Dec 27 2016 20:10
@NeelDVirus If you can copy and paste your code into codepen, as you have it in your editor, I can take a closer look
MIke
@chipotle298
Dec 27 2016 20:11
@Blockshot12 thanks francois!
CamperBot
@camperbot
Dec 27 2016 20:11
:cookie: 274 | @blockshot12 |http://www.freecodecamp.com/blockshot12
chipotle298 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
hudsontaylor
@hudsontaylor
Dec 27 2016 20:13
@TylerMoeller Oh, I see... Is there any way around this? Or do I have to completely refactor?
Tyler Moeller
@TylerMoeller
Dec 27 2016 20:13
@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.
Jake
@NeelDVirus
Dec 27 2016 20:14
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
hudsontaylor
@hudsontaylor
Dec 27 2016 20:15
@TylerMoeller Thanks!
CamperBot
@camperbot
Dec 27 2016 20:15
:star2: 1206 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Blessed
@nullx5
Dec 27 2016 20:16
Hello, World
CamperBot
@camperbot
Dec 27 2016 20:16

welcome to FreeCodeCamp @nullx5!

Tyler Moeller
@TylerMoeller
Dec 27 2016 20:17
@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>
Jake
@NeelDVirus
Dec 27 2016 20:21
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
Tyler Moeller
@TylerMoeller
Dec 27 2016 20:21
Welcome, by the way, @nullx5
Jake
@NeelDVirus
Dec 27 2016 20:24

@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&reg;</h3> 
                    <p>For cheapest fare, catch the next RocketBus&reg; 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;
}
hudsontaylor
@hudsontaylor
Dec 27 2016 20:25

@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!

CamperBot
@camperbot
Dec 27 2016 20:25
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: hudsontaylor already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Dec 27 2016 20:28
@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.
blob
@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);
}
hudsontaylor
@hudsontaylor
Dec 27 2016 20:34
@TylerMoeller Ok, thanks again!
CamperBot
@camperbot
Dec 27 2016 20:34
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: hudsontaylor already gave tylermoeller points
c0d0er2
@c0d0er2
Dec 27 2016 20:35
how do you make the imgs side by side? https://codepen.io/c0d0er2/pen/oYrppg
Jake
@NeelDVirus
Dec 27 2016 20:37
@TylerMoeller No, my .css file is located atcss/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.
Jose Irizarry
@Stjose
Dec 27 2016 20:39
Hello World!!!!!!!!
CamperBot
@camperbot
Dec 27 2016 20:39

welcome to FreeCodeCamp @Stjose!

Tyler Moeller
@TylerMoeller
Dec 27 2016 20:41
@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
Homer Allen
@homerallen
Dec 27 2016 20:45
Question - so for Tic Tac Toe, should I be creating the AI myself as well ? It does sound like fun...
Jose Irizarry
@Stjose
Dec 27 2016 20:46
working in my tribute page
any suggestion
Jake
@NeelDVirus
Dec 27 2016 20:46
@TylerMoeller Oh i didn't knew that. Thanks for this vital information!
CamperBot
@camperbot
Dec 27 2016 20:46
neeldvirus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1207 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Nagy Szilard
@sziko
Dec 27 2016 21:06
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
Tyler Moeller
@TylerMoeller
Dec 27 2016 21:33
@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
@homerallen Yes, all the code required for the project, including the AI, should be written by you.
c0d0er2
@c0d0er2
Dec 27 2016 21:35
@TylerMoeller Thanks!
CamperBot
@camperbot
Dec 27 2016 21:35
c0d0er2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1208 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ritvars
@RitvarsZ
Dec 27 2016 21:52
@sziko md is for medium screens, use l and xl for larger ones and s, xs for smaller ones
Simon Cordova
@gbsimon87
Dec 27 2016 22:43
@gbsimon87
Hey guys...Hope everyone is well
Got a quick jquery text function question if anyone can help...
Jake
@NeelDVirus
Dec 27 2016 22:45
@TylerMoeller I tried to view my page via http://localhostafter installing a webserver locally. But still the issue exist
Francois van Leersum
@Blockshot12
Dec 27 2016 22:46
@gbsimon87 Fire away
Simon Cordova
@gbsimon87
Dec 27 2016 22:48
@Blockshot12 thank you but it seems I'm being helped in the other chat, if no resolution I'll ask here again, cheers :)
CamperBot
@camperbot
Dec 27 2016 22:48
:cookie: 276 | @blockshot12 |http://www.freecodecamp.com/blockshot12
gbsimon87 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
Francois van Leersum
@Blockshot12
Dec 27 2016 22:48
ok
Francois van Leersum
@Blockshot12
Dec 27 2016 22:59
@NeelDVirus What’s the problem? i’ve scrolled up, but couldn’t find your original question.
Jake
@NeelDVirus
Dec 27 2016 23:09

@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&reg;</h3> 
                    <p>For cheapest fare, catch the next RocketBus&reg; 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
Delighted-Turtle
@Delighted-Turtle
Dec 27 2016 23:11

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:

http://codepen.io/anon/pen/woLpLy?editors=1100

Francois van Leersum
@Blockshot12
Dec 27 2016 23:15
@NeelDVirus Can you describe the unexpected way?
Jake
@NeelDVirus
Dec 27 2016 23:19
@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)
Delighted-Turtle
@Delighted-Turtle
Dec 27 2016 23:20
nevermind, I got it!
Jake
@NeelDVirus
Dec 27 2016 23:20
@Delighted-Turtle i see it already centered
Icah Banton
@remdata
Dec 27 2016 23:24
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>
Jake
@NeelDVirus
Dec 27 2016 23:27
@remdata it wud be better if you directly send the codepen link of it
Francois van Leersum
@Blockshot12
Dec 27 2016 23:28
@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):
<div class=“dff" style=“background-color: lightgrey”></div>
Icah Banton
@remdata
Dec 27 2016 23:30
Jake
@NeelDVirus
Dec 27 2016 23:32
@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?
Francois van Leersum
@Blockshot12
Dec 27 2016 23:34
@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?
Jake
@NeelDVirus
Dec 27 2016 23:38
@remdata you haven't integrated the bootstrap file in your codepen.
check this:
http://codepen.io/neel111/pen/dOBjOj
Amit Patel
@AmitP88
Dec 27 2016 23:40
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
Icah Banton
@remdata
Dec 27 2016 23:45
@NeelDVirus How do I integrate the bootstrap file in codepen?
Jake
@NeelDVirus
Dec 27 2016 23:48
@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
Francois van Leersum
@Blockshot12
Dec 27 2016 23:50
@NeelDVirus Haha, sometimes these things happen. Just move on.
Jake
@NeelDVirus
Dec 27 2016 23:51
@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
CamperBot
@camperbot
Dec 27 2016 23:53
neeldvirus sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @blockshot12 |http://www.freecodecamp.com/blockshot12
Icah Banton
@remdata
Dec 27 2016 23:56
@NeelDVirus . Thanks, works fine now; thought I was loosing my mind over this issue.
CamperBot
@camperbot
Dec 27 2016 23:56
:cookie: 83 | @neeldvirus |http://www.freecodecamp.com/neeldvirus
remdata sends brownie points to @neeldvirus :sparkles: :thumbsup: :sparkles: