These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Oct 2016
Rick
@rangerrick337
Oct 19 2016 00:00
Hy team. My basic getJSON method inside of a form submit function isn't firing. Any advice?
    $("form").on("submit", function(event) {
      event.preventDefault();
      var query = $( this ).serialize().slice(2);
      var queryLink = "https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch="+query;
      console.log(queryLink);

      $.getJSON(queryLink, function(data) {
        console.log(data);
      });
    });
Jeff Greenlee
@JeffGreenlee42
Oct 19 2016 00:00
@dhuddleston Not sure what you are looking for.. The HTML doesn't look like HTML.. Were you trying to use Emmet? If so, it looks like you didn't expand .container.
Or the 2 elements after it.
Rick
@rangerrick337
Oct 19 2016 00:02
the console.log(queryLink) fires just fine but the console.log inside the getJSON method never shows :(
Jeff Greenlee
@JeffGreenlee42
Oct 19 2016 00:10
@dhuddleston Ooop.. forgot to check... You had it in jade. Never mind ... But still.. Your codePen project doesn't look "broken" to me.. It looks to me like it is doing exactly what you told it to do.. What were you expecting it to do?
Yacob Gugsa
@yacobgugsa
Oct 19 2016 00:21
I have three questions about the second challenge (portfolio). First, is it a better idea to delay adding parallax scrolling until I go through the JS waypoints and have a better understanding of the actual syntax? Moreover, is it a better idea to use the CSS3 parallax scrolling functionality (since I've already used CSS3 in the first project), given that not all browsers support it?
And finally, does the portfolio have to be about me specifically? I am considering creating one for a pre-existing person or organization.
(I will eventually write a portfolio page for myself as well.)
Rick
@rangerrick337
Oct 19 2016 00:28
@yacobgugsa no rules, do as you like. Using CSS3 is fine I believe. I used a faux parallax scrolling look by fixing the background image. You could make the profile page about someone else but assuming you'll want to get a job as a developer at some point it might be time well spent making one.
Yacob Gugsa
@yacobgugsa
Oct 19 2016 00:31
@rangerrick337 So you'd recommend that I do the page for myself, and not someone else?
Rick
@rangerrick337
Oct 19 2016 00:33
Totally up to you, I don't think FCC will be bothered. But I've noticed people creating a basic one when they complete the challenge (meeting the user stories) and then going back to it and beefing it up when they have more skills.
Yacob Gugsa
@yacobgugsa
Oct 19 2016 00:37
@rangerrick337 Okay. Do you know of any mockup wireframe prototyping sites? I learned about Balsamiq and Sketch through Team Treehouse, but they're both payware. I'd prefer a free utility.
Kyle W Pilkinton
@tadake
Oct 19 2016 00:50
hey guys can someone tell me what they think of this photo gallery im working on?
it doesnt look quite right to me haha
it isnt done yet either ive just started
jordanssite.png
Salomon
@zarruk
Oct 19 2016 01:07
can someone please explain me why is this code returning testif no elements in arrwould pass the function test?

function dropElements(arr, func) {
  var a = [];
  for (var i = 0; i < arr.length;  i++){
    if ([arr[i]].filter(func) !== []){
      return "test";
    }
  }
}

dropElements([1, 2, 3, 4], function(n) {return n > 5; });
Omar Salem
@OmarSalem563
Oct 19 2016 01:07
hey guys wats uup
Lionole
@Lionole
Oct 19 2016 01:09
@tarkiz did you figure it out?
Lionole
@Lionole
Oct 19 2016 01:19
@zarruk have you tried
@zarruk if (arr [i])
Salomon
@zarruk
Oct 19 2016 01:20
@Lionole look how I am doing it:

function dropElements(arr, func) {
  var a = [];
  for (var i = 0; i < arr.length;  i++){
    if ([arr[i]].filter(func) !== "[]"){
      a = arr.slice(i, arr.length);
      break;
    }
  }
  return a;
}

dropElements([1, 2, 3, 4], function(n) {return n > 5; });
Lionole
@Lionole
Oct 19 2016 01:25
@zarruk sometimes code works better when it's simpler. You are basically saying if not empty array, maybe it is taking it as if not array? Could be the [] around arr. But, if you put if (arr [i]) you are saying if that element in the array exist, then return "test" if it does not exist then it shouldn't return anything.
@zarruk sorry, wish I was at my laptop. That is my only thought without being able to try it myself...
Salomon
@zarruk
Oct 19 2016 01:27
@Lionole thanks anyways!
CamperBot
@camperbot
Oct 19 2016 01:27
:cookie: 226 | @lionole |http://www.freecodecamp.com/lionole
zarruk sends brownie points to @lionole :sparkles: :thumbsup: :sparkles:
dhuddleston
@dhuddleston
Oct 19 2016 01:33
@JeffGreenlee42 I was trying to port over this app to use AJAX calls instead of getJSON so that I could use the Client-ID in the header. http://codepen.io/dhuddleston/pen/dXoZrX
Lionole
@Lionole
Oct 19 2016 01:35
@zarruk that last one showed the brackets in quotes, that would make the brackets a string and not empty array. And the brackets should not be around arr[i] (this could be why it didn't work the way you originally had it) have you tried removing them?
c0d0er
@c0d0er
Oct 19 2016 01:37
@jdtdesigns yep, a lot learn!
Salomon
@zarruk
Oct 19 2016 01:44
@Lionole yes, the brackets should in fact be around arr[i] beacuse the filter() method only works with arrays, so I have to make arr[i] an array
Chris Cullen
@123xylem
Oct 19 2016 02:21
@MohammadHasham some vids on utube but mainly or java.. i didnt find much good ones
c0d0er
@c0d0er
Oct 19 2016 02:32
function updateInventory(arr1, arr2) {
    var len1=arr1.length;
    var len2=arr2.length;
    var removed=[];
    for(var i=0; i<len1; i++){
        for(var j=0; j<len2; j++){
            if(arr1[i].includes(arr2[j][1])){
            arr1[i][0]+=arr2[j][0];
        //    arr2.splice(j,1);//--->why here shows: Cannot read property '1' of undefined? how to slice or splice arr2?
            }}}
 return arr1;
}
updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]]);//should return [[88, "Bowling Ball"], [2, "Dirty Sock"], [3, "Hair Pin"], [3, "Half-Eaten Apple"], [5, "Microphone"], [7, "Toothpaste"]].
Chris Cullen
@123xylem
Oct 19 2016 02:35
http://codepen.io/123xylem/pen/jrAKPN?editors=1111
Review Critique and Honour my SImon game!!!
Ivan
@gonzalezi2
Oct 19 2016 02:42
Hey guys I'm looking for help with multidimensional arrays. I have an empty array and then a multidimensional arrays and want to push certain arrays from the multidimensional array into the empty array. These are the arrays var basePairs = [["A", "T"], ["C", "G"], ["G", "C"], ["T", "A"]]; var newPair = [];
  var basePairs = [["A", "T"], ["C", "G"], ["G", "C"], ["T", "A"]];
  var newPair = [];
How would I push basePairs[0] into newPair=[]; so that it became newPair=[["A", "T"]]; ?
Ivan
@gonzalezi2
Oct 19 2016 02:48
nvm I figured it out.
I'm not sure why it wasn't working but you do it exactly like you're thinking. you would just do newPair.push(basePairs[0])
c0d0er
@c0d0er
Oct 19 2016 03:21
@jdtdesigns thanks
CamperBot
@camperbot
Oct 19 2016 03:21
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 700 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Chris Cullen
@123xylem
Oct 19 2016 03:29
http://codepen.io/123xylem/pen/jrAKPN?editors=1111
Last reveiw before i submit the simon game..
Thanks to all that helped me with this one it was tough
Pavan Srinivas
@pavansrinivas
Oct 19 2016 03:54
how to align center the unordered list ??
Richa
@richa-coder
Oct 19 2016 04:09

@pavansrinivas <html>
<head>
<style type="text/css">

        ul {
            margin:0;
            padding:0;
            text-align: center;
            list-style:none;                
        }
        ul  li {
            padding: 2px 5px;               
        }

        ul li:before {
            content:url(http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);;
        }
    </style>
</head>
<body>

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

</body>

</html>

try doing something like this
Sawyer Cutler
@TheGreatAxios
Oct 19 2016 04:12
https://axios-framework-thegreataxios.c9users.io Hi all I am making a website and using an overlay. But for some reason the overlay headers and links are not lineing up properly the link should work. If anybody has an idea to a fix or at least an idea to strike up some ideas I would be very appreciative.
JD Tadlock
@jdtdesigns
Oct 19 2016 04:14
@TheGreatAxios How are you wanting them to line up?
Sawyer Cutler
@TheGreatAxios
Oct 19 2016 04:15
The Top three (comptuers, info, and design should be horizontally aligned. And the links underneath them are already vertically algined but i would like the top four to be vertically aligned as well.
@jdtdesigns i am using all the different ways to align them but design refused to move up.
Pavan Srinivas
@pavansrinivas
Oct 19 2016 04:22
just added ul{
padding: 0px 20px 10px 250px;
}
just added ul{
padding: 0px 20px 10px 250px;
} @richa-coder tnq
Eduardo Garcia
@eagarcia8
Oct 19 2016 04:24
I don't know where I remember this from, probably heard it from here or on an article, but does anyone know what the software is called that downloads all the documentation for many computer languages where I think you can access it through command line?
Offline
Pierre Humberdroz
@phumberdroz
Oct 19 2016 04:27

Any React wiz around ?
And also I would like to get some review from everyone for the form handling

https://bingetrackr.com/register

JD Tadlock
@jdtdesigns
Oct 19 2016 04:29
Martialis39
@Martialis39
Oct 19 2016 04:31
hey guys
oh, hey JD! @jdtdesigns
Sawyer Cutler
@TheGreatAxios
Oct 19 2016 04:31
Thank You! @jdtdesigns I will incoroportate your little pieces into what I have. Appreciate all the help
CamperBot
@camperbot
Oct 19 2016 04:31
thegreataxios sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 701 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Martialis39
@Martialis39
Oct 19 2016 04:32
I had to reformat and ended up losing the url for the discord thing :/
JD Tadlock
@jdtdesigns
Oct 19 2016 04:32
@TheGreatAxios welcome ;)
sup @Martialis39
Martialis39
@Martialis39
Oct 19 2016 04:32
Anyway, guys, teach me, I have this button and a small animation
JD Tadlock
@jdtdesigns
Oct 19 2016 04:32
i'll get ya the link in a sec
whenever I click it, the parent div's height changes
what do I need to do to prevent that?
@jdtdesigns thanks Jd!
CamperBot
@camperbot
Oct 19 2016 04:33
martialis39 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 702 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 19 2016 04:36
Here's the link https://discord.gg/dPFRP
I'll check your code @Martialis39
Martialis39
@Martialis39
Oct 19 2016 04:36
The text box formatting is also messed up but not the issue at the moment
I have it looking nice on my localhost, I just quickly pasted the thing to codepen
Ian Lee
@asparism
Oct 19 2016 04:37
is this code correct to get the height of an element, assign it to a variable, and use that variable to manipulate the height of a different element?
var pHeight = $(".pBox").css("height");

  $("#border").css("height", pHeight);
JD Tadlock
@jdtdesigns
Oct 19 2016 04:37
@Martialis39 All i see is some css on the page lol
rgba(0,0,0,0)
Martialis39
@Martialis39
Oct 19 2016 04:38
@jdtdesigns huh , strange
OK, thanks, lemme see about that
Casey Heath
@ExhibitArts
Oct 19 2016 04:38
Any Bootstrap people who can help me with this problem I'm facing? My code is making the width of the content mobile size, but it only does this when I scale-down the browser window. - http://codepen.io/anon/pen/ALJzaK
Martialis39
@Martialis39
Oct 19 2016 04:38
@jdtdesigns If you dont mind having a nother look
should be ok now
if not, back to the drawing board
Casey Heath
@ExhibitArts
Oct 19 2016 04:39
PM me if you can help me out.
JD Tadlock
@jdtdesigns
Oct 19 2016 04:39
@Martialis39 there now
@Martialis39 It's because your setting border size to 1px on active
the box then shrinks
because the button is not as big
Martialis39
@Martialis39
Oct 19 2016 04:44
Yup
I tried to
JD Tadlock
@jdtdesigns
Oct 19 2016 04:44
just put a fixed height on the box
height: 320px;
Martialis39
@Martialis39
Oct 19 2016 04:45
Ah ok
JD Tadlock
@jdtdesigns
Oct 19 2016 04:45
instead of auto
Martialis39
@Martialis39
Oct 19 2016 04:45
Since its height
its not going to become unresponsive, right?
JD Tadlock
@jdtdesigns
Oct 19 2016 04:45
you shouldn't be worried about height responsive at 320px
Martialis39
@Martialis39
Oct 19 2016 04:46
:D
JD Tadlock
@jdtdesigns
Oct 19 2016 04:46
but if you need to adjust it, a media query will make it easy
Martialis39
@Martialis39
Oct 19 2016 04:46
Its this damn iPhone 5 that they have in the Chrome dev console
ruins everything with its tiny screen :D
Mostly kidding, : )
@jdtdesigns thank you JD ; )
CamperBot
@camperbot
Oct 19 2016 04:46
martialis39 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: martialis39 already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Oct 19 2016 04:47
@Martialis39 You can add width: 95%; to your inputs as well to make them adjust correctly. You're welcome ;)
Martialis39
@Martialis39
Oct 19 2016 04:48
@jdtdesigns Excellent
Id have one more question but maybe this is too vague, too pie in the sky
JD Tadlock
@jdtdesigns
Oct 19 2016 04:48
go for it
Martialis39
@Martialis39
Oct 19 2016 04:50
I want to store these flash cards below the input div, in a separate div. Lets say that div is 200px wide. Is there a way to add 2 inline element to that div so that they scale to amount of text inside? So for example. element with not much text would take lets say 25% of that 200px and the other one would take up 75%. Both would take up 50% if they are equal. The height would be auto
so basically I want that whole div filled to the brim at all times, but the elements size would vary according to the amount of text inside
Im sure this is actually super simple and im being a newb about this :D
JD Tadlock
@jdtdesigns
Oct 19 2016 04:52
so you want text elements going down vertically with 2 in each row?
Martialis39
@Martialis39
Oct 19 2016 04:52
yeah, exactly
and I thought it be a nice effect and it'd readability
if the size of those elements in a row would vary
JD Tadlock
@jdtdesigns
Oct 19 2016 04:53
the elements will be different sizes if the text amount is different between the two
Martialis39
@Martialis39
Oct 19 2016 04:54
So something like
''The Capitol of the United States" would take up most of the space and the back side of that card "Washington, DC" would take less
ok @jdtdesigns
JD Tadlock
@jdtdesigns
Oct 19 2016 04:54
are you wanting the 2 elements beside each other to be the same height?
Martialis39
@Martialis39
Oct 19 2016 04:54
Yeah, I would
I still have to decide on the height
JD Tadlock
@jdtdesigns
Oct 19 2016 04:54
flexbox will work for that
Martialis39
@Martialis39
Oct 19 2016 04:54
and how I\ll handle input length in the app
@jdtdesigns ok, cool
JD Tadlock
@jdtdesigns
Oct 19 2016 04:54
if you wrap the two text elements in a flex row, they'll be the same height always no matter how much text is in each one
Martialis39
@Martialis39
Oct 19 2016 04:55
Ok, perfect
Thanks for showing me the way, now I\ll just have to walk it : )
JD Tadlock
@jdtdesigns
Oct 19 2016 04:55
good luck
:D
Martialis39
@Martialis39
Oct 19 2016 04:55
I'm sure to be back if there are any major issues
JD Tadlock
@jdtdesigns
Oct 19 2016 04:56
of course
Martialis39
@Martialis39
Oct 19 2016 04:56
And one more thing, you want to grow the discord channel right? Just in case I run into some like minded people online
JD Tadlock
@jdtdesigns
Oct 19 2016 04:56
they're always welcome
it was made to help and to communicate with fellow devs/progs
Martialis39
@Martialis39
Oct 19 2016 04:57
Excellent, I'll try and spread the good word whereever possible ;)
JD Tadlock
@jdtdesigns
Oct 19 2016 04:59
great ;)
Martialis39
@Martialis39
Oct 19 2016 05:35
@jdtdesigns Wanted to thank you again, I'm well on my way
CamperBot
@camperbot
Oct 19 2016 05:35
martialis39 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 703 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
mohanCloud
@mohanCloud
Oct 19 2016 06:30
Hi guys..
I am getting this error "Cannot read property 'getMonth' of null" while using formvalidation....
anyone got any idea about this
Abhishek Baliyan
@abhishekdevinfo
Oct 19 2016 07:22

need help
my boss say me i have to publish Monthly magazines on websites.
i am unable to understand what he trying to say me.
whats my work

i am not sure. correct me if i am wrong
its like i have to make the whole magazine first then when its complete
i boss will give me the website code and then i have to modify the code and put magazine code in the website code
so the final result is like a modified website thats show the magazine as well

JD Tadlock
@jdtdesigns
Oct 19 2016 07:23
@Martialis39 Playin around and made this just for fun and to show you some tricks to achieve your goal. ;) http://jsbin.com/bumaka/edit?output
Ivo Tsolov
@ivoTsolov
Oct 19 2016 07:23
anyone up to help me with building my portfolio website ?
kirbyedy
@kirbyedy
Oct 19 2016 07:26
@jdtdesigns hows the simon going ?
JD Tadlock
@jdtdesigns
Oct 19 2016 07:26
@abhishekdevinfo Sounds like they'll give you a full magazine that will need to be viewable. You'll probably have to build some kind of functionality to flip through each page. You also might be required to set up storing the magazine data.
@kirbyedy Which one lol
I finished simon awhile ago.
I just made a recent one as an example for someone
kirbyedy
@kirbyedy
Oct 19 2016 07:27
yea that one on fiddle :)
JD Tadlock
@jdtdesigns
Oct 19 2016 07:27
i finished it ;)
kirbyedy
@kirbyedy
Oct 19 2016 07:29
cool
Abhishek Baliyan
@abhishekdevinfo
Oct 19 2016 07:31
@jdtdesigns its like a hard work
ok thanks a lot @jdtdesigns
CamperBot
@camperbot
Oct 19 2016 07:31
:cookie: 704 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
abhishekdevinfo sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
原田 美幸
@mykhrd
Oct 19 2016 08:22
hi guys if I need to ask something about jquery would it be against the chatroom etiquette knowing that this room is for frontend? rofl
kirbyedy
@kirbyedy
Oct 19 2016 08:25
no this is the correct room for that
原田 美幸
@mykhrd
Oct 19 2016 08:28
thanks for replying! I’m just having trouble about getting js check a div if its children are all hidden to show another div. If it’s not too much trouble you can also check my pen. >_< http://codepen.io/mykhrd/pen/XjxOvB
kirbyedy
@kirbyedy
Oct 19 2016 08:33
no idea, sorry
原田 美幸
@mykhrd
Oct 19 2016 08:33
thanks ~! anyway, how do you give brownie points here
kirbyedy
@kirbyedy
Oct 19 2016 08:35
no need for that, help was not provided :)
Chritineragy
@Christineragy
Oct 19 2016 08:37
how to Create a class called silver-background with the background-color of silver. Assign this class to your div element.
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 08:39
@Christineragy in your css, put something like
.silver-background { ... }
and in your HTML, add the class to you div element like
<div class='silver-background'>...</div>
Chritineragy
@Christineragy
Oct 19 2016 08:45
sthg like this ?

.silver-background {
background-color: silver;
}

<div class='silver-background'>background-color: silver</div>

Nitin Chandran Nair
@NitinNair89
Oct 19 2016 08:47
@Christineragy your div need not have anything inside it. If you want to make a silver box, just put empty div
<div class='silver-background'></div>
Bashaar (Bas)
@Chiefbas
Oct 19 2016 08:58
@NitinNair89 <div class="silver-background"></div> =)
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 09:00
Is this the room for the basic front end projects as well? Rather not bother people unnecessarily
Sunil B N
@connecttobn
Oct 19 2016 09:01
shoot it .. its ok @EatSleepCodeSheit
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 09:01
Cool - no questions yet just got to the second project but i like to be prepared for the inevitable
Sunil B N
@connecttobn
Oct 19 2016 09:02
You are go to go :)
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 09:02
@Chiefbas I didn't get you.
All the best @EatSleepCodeSheit :)
Sunil B N
@connecttobn
Oct 19 2016 09:03
@NitinNair89 he meant you can create a div without any content in it and assign css class to it
avi twito
@aviTwito
Oct 19 2016 09:04
can someone help me get a responsive square to be in the middle of the screen like a litter layout for the quotes in the random quote challenge?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 09:04
@connecttobn Yeah, that's what I suggested to @Christineragy :)
原田 美幸
@mykhrd
Oct 19 2016 09:04
This message was deleted
avi twito
@aviTwito
Oct 19 2016 09:05
why the flex box message was deleted?
and i dont know what it is but i dont see why not
although i prefer to just use css do design a div which will be that laylout
原田 美幸
@mykhrd
Oct 19 2016 09:06
I haven’t checked the random quote challenge so I don’t think I’m allowed to answer though. but anyway
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 09:07
@aviTwito Could you show your code?
原田 美幸
@mykhrd
Oct 19 2016 09:07
yeah. just use display: flex; align-item: center;
avi twito
@aviTwito
Oct 19 2016 09:07
@mykhrd im just starting. there it is http://codepen.io/avitt/pen/ORBxXL
and for some reason the sware i had sudddenly vanished
kirbyedy
@kirbyedy
Oct 19 2016 09:08
flexbox is a good thing to know
@aviTwito check your classes
avi twito
@aviTwito
Oct 19 2016 09:09
@kirbyedy is it a class?
原田 美幸
@mykhrd
Oct 19 2016 09:09
and if you want a fast way to make a container responsive, just use % rather than px
Sorin Ruse
@sorinr
Oct 19 2016 09:11
another good video on flexbox is this: flexbox essentials video
kirbyedy
@kirbyedy
Oct 19 2016 09:12
:D
avi twito
@aviTwito
Oct 19 2016 09:13
THANKS ALL
Sorin Ruse
@sorinr
Oct 19 2016 09:13
@kirbyedy :) haven't seen ur post
DC
@vuvu10
Oct 19 2016 09:14
I need help with this : https://www.freecodecamp.com/challenges/change-text-inside-an-element-using-jquery#?solution=%0Afccss%0A%20%20%24(document).ready(function()%20%7B%0A%20%20%20%20%24(%22%23target1%22).css(%22color%22%2C%20%22red%22)%3B%0A%20%20%20%20%0A%20%20%7D)%3B%0Afcces%0A%0A%3C!--%20Only%20change%20code%20above%20this%20line.%20--%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Ch3%20class%3D%22text-primary%20text-center%22%3EjQuery%20Playground%3C%2Fh3%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23left-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22left-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target1%22%3E%23target1%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target2%22%3E%23target2%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target3%22%3E%23target3%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-6%22%3E%0A%20%20%20%20%20%20%3Ch4%3E%23right-well%3C%2Fh4%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22well%22%20id%3D%22right-well%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target4%22%3E%23target4%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target5%22%3E%23target5%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-default%20target%22%20id%3D%22target6%22%3E%23target6%3C%2Fbutton%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A
Sorin Ruse
@sorinr
Oct 19 2016 09:21
@vuvu10 $('#target4').html('<em>#target4</em>');
DC
@vuvu10
Oct 19 2016 09:25
@sorinr thank you so much, it did work.
CamperBot
@camperbot
Oct 19 2016 09:25
vuvu10 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 775 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 19 2016 09:26
@vuvu10 welcome
This message was deleted
Rasmus Storm
@femganger
Oct 19 2016 09:31
Heya, working on my portfolio: https://codepen.io/femganger/full/jAapbN/
Here I use background-image in my body element, followed by a div element with a solid background color.
Problem: There's a black space inbetween the background image and the div element.
Attempted solution: I tried to compensate for this by adding "margin-top: -40px" in the div element. This makes it look good in my browser, however on my mobile there's still a big black line inbetween.
If I compensate by increasing the negative margin in order for it to look good on the mobile, this causes the div element to have significant overlap in my desktop browser. Any thoughts on how to solve the issue?
Sorin Ruse
@sorinr
Oct 19 2016 09:37
@femganger use margin: 0; into your body css
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 09:38
@femganger Have you checked your navbar? It does not resize when in smaller screens. This is causing your background image to expand (you can see the grass) in smaller screens
So for that add the background-size: cover; in your body css. I tested it on your codepen. This will, um. hide, some of the bottom parts of your actualy background image (the grass will be hidden)
*actual
Sorin Ruse
@sorinr
Oct 19 2016 09:43
@femganger and u can use background-size: fill; if this is what u want to achive
Rasmus Storm
@femganger
Oct 19 2016 09:46
@sorinr Hmm, having added background-size: fill; and margin: 0; the black line is still there
Karthi Keyan
@mskarthi95
Oct 19 2016 09:46
stuck in contact form creation
by using php Apache server

<?php

if(isset($_POST['email'])) {

// EDIT THE 2 LINES BELOW AS REQUIRED

$email_to = "mskarthi95@gmail.com.com";

$email_subject = "Send confirm";





function died($error) {

    // your error code can go here

    echo "We are very sorry, but there were error(s) found with the form you submitted. ";

    echo "These errors appear below.<br /><br />";

    echo $error."<br /><br />";

    echo "Please go back and fix these errors.<br /><br />";

    die();

}



// validation expected data exists

if(!isset($_POST['first_name']) ||

    !isset($_POST['last_name']) ||

    !isset($_POST['email']) ||

    !isset($_POST['telephone']) ||

    !isset($_POST['comments'])) {

    died('We are sorry, but there appears to be a problem with the form you submitted.');       

}



$first_name = $_POST['first_name']; // required

$last_name = $_POST['last_name']; // required

$email_from = $_POST['email']; // required

$telephone = $_POST['telephone']; // not required

$comments = $_POST['comments']; // required



$error_message = "";

$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

if(!preg_match($email_exp,$email_from)) {

$error_message .= 'The Email Address you entered does not appear to be valid.<br />';

}

$string_exp = "/^[A-Za-z .'-]+$/";

if(!preg_match($string_exp,$first_name)) {

$error_message .= 'The First Name you entered does not appear to be valid.<br />';

}

if(!preg_match($string_exp,$last_name)) {

$error_message .= 'The Last Name you entered does not appear to be valid.<br />';

}

if(strlen($comments) < 2) {

$error_message .= 'The Comments you entered do not appear to be valid.<br />';

}

if(strlen($error_message) > 0) {

died($error_message);

}

$email_message = "Form details below.\n\n";



function clean_string($string) {

  $bad = array("content-type","bcc:","to:","cc:","href");

  return str_replace($bad,"",$string);

}



$email_message .= "First Name: ".clean_string($first_name)."\n";

$email_message .= "Last Name: ".clean_string($last_name)."\n";

$email_message .= "Email: ".clean_string($email_from)."\n";

$email_message .= "Telephone: ".clean_string($telephone)."\n";

$email_message .= "Comments: ".clean_string($comments)."\n";

// create email headers

$headers = 'From: '.$email_from."\r\n".

'Reply-To: '.$email_from."\r\n" .

'X-Mailer: PHP/' . phpversion();

@mail($email_to, $email_subject, $email_message, $headers);

?>

<p> success </p>

<?php

}

?>

Rasmus Storm
@femganger
Oct 19 2016 09:48
@NitinNair89 the grassbeing visible is OK, it's the space between the background and the next div element that I have issues with
@NitinNair89 Good idea on the navbar being the possible issue, will look into that
Rasmus Storm
@femganger
Oct 19 2016 10:05
Hmm, commenting out the navbar and shortening my h1 element to one word makes black line pixel distance consistent between mobile and desktop. The issue currently on mobile is that the navbar and the h1 element overflow into several rows. For some reason, this causes the distance between the body background and the next div element to increase. Gonna try to find some documentation on why this is the case. Now there's a quick and dirty fix to make the page look good on both versions, but I gotta find out why it works like it does :p
Ian Carreras
@IanCarreras
Oct 19 2016 10:15
@jdtdesigns thanks
CamperBot
@camperbot
Oct 19 2016 10:15
1spicoli sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 705 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 10:17
@femganger Did you try what I suggested? There's no more black background.. that black background was present in your body css. When you use "cover" the background image will take over it. :)
Rasmus Storm
@femganger
Oct 19 2016 10:25
@NitinNair89 Thanks, yes, that solves the issue in a way, on my mobile the div elements starts just under the first cloud and there is no black gap using cover. However, I still don't understand why the interaction works as it does without it which is my main issue, hehe
CamperBot
@camperbot
Oct 19 2016 10:25
femganger sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Rasmus Storm
@femganger
Oct 19 2016 10:26
not necessarily trying to make the page look good, just trying to understand why it doesn't look good under the previous setup :smile:
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 10:28
You're welcome @femganger I hope you find out the actual cause for the previous setup! :)
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 10:47
Okay, so if I create a button in CSS for example
.button {
background-color: green
} etc etc in side brackets
how do I link it to a specific portion within HTML?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 10:48
in HTML just add the class as "button" where you want this style to be applied - @EatSleepCodeSheit
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 10:48
<div class="button"> would that automatically create a button with those perimeters?
@NitinNair89 ok thanks :)
CamperBot
@camperbot
Oct 19 2016 10:49
eatsleepcodesheit sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 10:49
nope, it will create a box with background color as green
use the <button> element
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 10:49
Ok! off to test it - ty ty
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 10:49
or if you are good with some frameworks like Bootstrap or Foundation or Materialize, they will do the styling for you :)
Artur Arsalanov
@kurumkan
Oct 19 2016 11:07
@EatSleepCodeSheit yes those frameworks are cool. Have a look at how bootsrap creates button design for you http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
Adhetya Narayan
@Adhetya
Oct 19 2016 11:26
How do I center a div?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 11:26
@Adhetya Depends on the container. Use can also use the margin: 0 auto; trick
vínαч puppαl
@vinaypuppal
Oct 19 2016 11:29
@Adhetya If you are using Bootstrap then you can use center-block class on that div . http://getbootstrap.com/css/#helper-classes-center
Philipp Scholz
@philipp32
Oct 19 2016 11:35
I want to to re-design my portfolio to be responsive. The basic code for responsive design is beknown to me. http://codepen.io/philipp32/pen/BLqqAo?editors=1100 As you may notice, I have used only the margin/padding commands to position my pictures. What is the best way to measure in the pictures for responsive design (bootstrap grid, etc.)? Or can I leave everything as it is?
kirbyedy
@kirbyedy
Oct 19 2016 11:37
@philipp32 this is how I see your page:
check the image
Screen Shot 2016-10-19 at 14.36.39.png
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 11:38
@philipp32 I liked your concept. You should go ahead with Bootstrap, Foundation or Materialize to make it responsive.
Philipp Scholz
@philipp32
Oct 19 2016 11:38
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 11:39
I saw your code in codepen buddy! :)
Philipp Scholz
@philipp32
Oct 19 2016 11:39
So instead of margin-top I would use class="col-xs-4"?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 11:40
it doesn't work like that. You need to know what to be used when. This is where I learnt Boostrap on my own - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
Philipp Scholz
@philipp32
Oct 19 2016 11:40
Thanks a lot. I will take a look at some bootstrap tutorials. @NitinNair89
CamperBot
@camperbot
Oct 19 2016 11:40
philipp32 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 11:41
Making it responsive at this moment, will mean changing lots of code. So take a backup and code from scratch if you can. :)
Philipp Scholz
@philipp32
Oct 19 2016 11:45
that's what I am planning to do right now :/ ;)
kirbyedy
@kirbyedy
Oct 19 2016 11:45
@philipp32 using media queries can solve your problem, and wont take you long to fix it, but if you choose bootstrap I think you will have to redo the whole site
Philipp Scholz
@philipp32
Oct 19 2016 11:46
I think I will redo the whole site because I need to learn bootstrap anyways.
@ @kirbyedy Thank you as well. :)
CamperBot
@camperbot
Oct 19 2016 11:47
philipp32 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1469 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Oct 19 2016 11:47
bootstrap is easy to use from the box, but once you want to customise and adapt to your needs, and your site is like a custom made one, you will have to know what you are doing, you might get very frustrated :D
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 11:47
http://codepen.io/EatSleepCodeComplete/full/VKVkWV/ if you look at just the nav bar. It seems to be in the background. How can I change it so it's always on the foreground
Philipp Scholz
@philipp32
Oct 19 2016 11:48
take z-index: -2/+2
add that to the css properties
kirbyedy
@kirbyedy
Oct 19 2016 11:48
@EatSleepCodeSheit you dont put <ul> list in the <head> never ever :)
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 11:49
o. how come? willing to learn here haha
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 11:49
Welcome back @EatSleepCodeSheit :D Please fix the <head> tag and also add everything inside <body>
vínαч puppαl
@vinaypuppal
Oct 19 2016 11:51
@EatSleepCodeSheit I think you meant <header> instead of <head> in your code :smile:
kirbyedy
@kirbyedy
Oct 19 2016 11:51
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 11:51
yeah i definitely did
vínαч puppαl
@vinaypuppal
Oct 19 2016 11:54
@EatSleepCodeSheit then change it to header and wrap your ul tag inside nav and add z-index: 1 to your ul like below
ul {
    z-index: 1
}
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 11:55
ty @NitinNair89 @vinaypuppal @kirbyedy
CamperBot
@camperbot
Oct 19 2016 11:55
eatsleepcodesheit sends brownie points to @nitinnair89 and @vinaypuppal and @kirbyedy :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
:cookie: 622 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:star2: 1470 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 12:00
oh... ok so by doing so you use a bootstrap element of navbar
How do you make it active? I'll search :)
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 12:02
add the JS files necessary for bootstrap as well. I saw you added it's CSS. A little while ago, I shared the link to a good BootStrap tutorial (where i learnt). Check that out. :)
*its
Pavan Srinivas
@pavansrinivas
Oct 19 2016 12:02
how to circle a rectangular image?
i am an oval shape image if use img-circle class
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 12:03
@pavansrinivas Which framework are you using?
Pavan Srinivas
@pavansrinivas
Oct 19 2016 12:03
bootstrap
vínαч puppαl
@vinaypuppal
Oct 19 2016 12:04
@pavansrinivas First convert it to Square image by giving it same width and height (Eg: width: 100px and height: 100px)and give image border-radius: 50%
Pavan Srinivas
@pavansrinivas
Oct 19 2016 12:04
tnq @vinaypuppal i will try
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 12:10

Guys, Here's my Random Quote Machine - http://codepen.io/Nitin-Chandran-Nair/full/dXkqGA
I made some changes in the UI and put it on GitHub - https://github.com/NitinNair89/RandomQuotesMachine

Could you please provide your suggestions and how i can improve further?

vínαч puppαl
@vinaypuppal
Oct 19 2016 12:16
@NitinNair89 Nice Design. Few things I noticed
  • Can you reduce the width of quotes container and center it because sometimes author text is far right to screen while small quotes are in middle
  • Once check on mobile devices(devtools chrome device emulator especially on iPhone 5) the Randomize Button overlaps with footer since its fixed to bottom
Mr Dao
@tikikun
Oct 19 2016 12:35
hi everyone, could anyone have a look at my pen
:D
i made a code for the right button to replace the iframe that twitter code make with original "<a>" element
but i don't know why it does not replace the <a> -> iframe again
Philipp Scholz
@philipp32
Oct 19 2016 12:41
So I've looked into bootstrap for an hour or so and I get the basic principles of that. Just one question which is really important to me. How do I measure all those objects in? Can I even use things like margin-top? This is really confusing for me.
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 12:44
Thanks @vinaypuppal - Please check my GitHub version. The CodePen version is very old and I did it for freecodecamp challenge. :)
CamperBot
@camperbot
Oct 19 2016 12:44
nitinnair89 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 623 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 12:45
@tikikun I didn't understand your query. Can you please explain again?
Mr Dao
@tikikun
Oct 19 2016 12:47
so the most important part is this
kirbyedy
@kirbyedy
Oct 19 2016 12:47
@philipp32 you can use those things, but the problem is you have to override default bootstrap attributes, which sometimes can be frustrating if you dont know what are you looking for
Mr Dao
@tikikun
Oct 19 2016 12:47
 $("#getMessage").on("click", function(){ var something =string[randomNumber()];
      // Only change code below this line.
      $(".message").html(something);                                        $(".twitter-share-button").replaceWith('<a href="https://twitter.com/share" id="amount" class="awesome twitter-share-button" data-text="">Tweet</a>');
       document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text",something) 
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
omg the code look horrible when copy
my idea was like this
because i cannot update data-text the time when it is rendered as a full twitter button
i decide to do this
first the <a> i i said is
<a href="https://twitter.com/share" id="amount" class="awesome twitter-share-button" data-text="">Tweet</a>
kirbyedy
@kirbyedy
Oct 19 2016 12:50
@philipp32 at this point if you want to start with bootstrap you should use the basic bootstrap example page, and start building around it
Mr Dao
@tikikun
Oct 19 2016 12:50
then after i click
the twitter code will turn it into an iframe
you can see it in the inspector
the inspector has twitter-share-button class
kirbyedy
@kirbyedy
Oct 19 2016 12:51
@philipp32 for example this one: http://getbootstrap.com/examples/jumbotron-narrow/
Mr Dao
@tikikun
Oct 19 2016 12:51
so i want to return it back to the "<a>" after i click the right button
kirbyedy
@kirbyedy
Oct 19 2016 12:51
donwload it and play
Mr Dao
@tikikun
Oct 19 2016 12:51
so i add
$(".twitter-share-button").replaceWith('<a href="https://twitter.com/share" id="amount" class="awesome twitter-share-button" data-text="">Tweet</a>');
before the twitter code
but after i run on the second or third click
althought the iframe was changed to <a> again
i cannot be rendered back into an iframe
vínαч puppαl
@vinaypuppal
Oct 19 2016 12:52
@NitinNair89 oh okay i saw your github one https://nitinnair89.github.io/RandomQuotesMachine/
[You should have pasted this link instead of repo URL :wink: ]
BTW It is nice :smile:
Mr Dao
@tikikun
Oct 19 2016 12:52
you should open inspector to understand what i mean
tks so much
Philipp Scholz
@philipp32
Oct 19 2016 12:54
http://codepen.io/philipp32/full/BLqqAo/ @kirbyedy this is my basic page thus far. I want to rebuild it from scratch.
With this layout it is kinda hard to build around the bootstrap design. :/
http://codepen.io/thepeted/pen/LpPWWQ In this example, which portion of the code is actually the responsive design? I couldn't find it. If I know it I can start to understand how it fits in an example code.
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 12:59

<span class="glyphicon glyphicon-picture"><a href"http://i2.asntown.net/h4/13/animals/5/cool-looking-fish/crowntail-betta.jpg"></span>Fish</a>

How do I make it so the button actually links to a website. hmm.

vínαч puppαl
@vinaypuppal
Oct 19 2016 12:59
@EatSleepCodeSheit href=url see you missed = in above code
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 12:59
<span class="glyphicon glyphicon-picture"> makes it a button and fish is what its called but how do I make that button link to a website. Frustration 3/10 atm
nhinerhhnjenajhhnjnhajehnjrenjahnjarenj
@vinaypuppal ty.
CamperBot
@camperbot
Oct 19 2016 13:00
eatsleepcodesheit sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 624 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
tropped
@tropped
Oct 19 2016 13:01
hi! i need help with one thing on the tribute page
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 13:02
Whatcha need tropped
tropped
@tropped
Oct 19 2016 13:02
i'd like the caption of the image to start where the image starts, not where the div starts
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 13:02
:)
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 13:04

http://codepen.io/oshikurou/pen/qayrpY?editors=1012

why in my js in mysecond function showWeather (by id) i cant see the weather attributes of my API in the console?

kirbyedy
@kirbyedy
Oct 19 2016 13:06
@philipp32 bootstrap classes were used in the html
for example <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 13:09
@vinaypuppal Yeah, do you want the repo URL?
vínαч puppαl
@vinaypuppal
Oct 19 2016 13:10
@NitinNair89 No i was just saying you pasted
repo link https://github.com/NitinNair89/RandomQuotesMachine
before instead of
demo link https://nitinnair89.github.io/RandomQuotesMachine/
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 13:11
ahh ok! The repo has the demo link :P
Amy Walters
@codecampamy
Oct 19 2016 13:11
Hey all - has anyone got a moment to take a look at my tribute page? I'm wondering why my image is sitting in a white box rather than with the blue background I've identified for my jumbatron: https://codepen.io/codecampamy/pen/ALmAJV
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 13:12
@tropped - Message me. What help do you need?
vínαч puppαl
@vinaypuppal
Oct 19 2016 13:13
@NitinNair89 oh okay i did not scroll Readme file , usually I find demo links beside repo description, so thought no demo link :smile:
tropped
@tropped
Oct 19 2016 13:13
i'll try messing with a pair of things and if i don't get it i'll mention you again @NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 13:14
ok @vinaypuppal , @tropped
@codecampamy Your HTML is a little messed up. Can you click the arrow on the right and choose "Analyze HTML"? Try to fix those errors and let know how it went :)
Also put all your style related code into the CSS editor
tropped
@tropped
Oct 19 2016 13:16
if you have a single element you need to style
with like 4 properties
should you id it, put all the style in the #thing{}?
rather than styling in the html?
vínαч puppαl
@vinaypuppal
Oct 19 2016 13:17
@codecampamy Hi if you are new to codepen read this article on how to use codepen efficiently https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 13:21
@tropped You are partially correct. Always use internal or external styles rather than inline..it helps in analysis and debugging later.
So yes, you do the #thing{...}
tropped
@tropped
Oct 19 2016 13:21
okk thanks @NitinNair89
CamperBot
@camperbot
Oct 19 2016 13:21
tropped sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
riversword
@riversword
Oct 19 2016 13:26
Hi, is anyone can help me ? The Random Quote Machine needs to fetch random quotes from the server , where can I get a server?
Stephen James
@sjames1958gm
Oct 19 2016 13:27
@RiverSword it is not a requirement to fetch the quotes from an API - you can code the quotes directly in your js.
However, many have used http://forismatic.com/en/api/
riversword
@riversword
Oct 19 2016 13:28
@sjames1958gm OK, thank you
CamperBot
@camperbot
Oct 19 2016 13:28
riversword sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3894 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
tropped
@tropped
Oct 19 2016 13:29
hm, okay, i'll ask for help now @NitinNair89 https://codepen.io/tropped/pen/KgGxjd
i've managed to make the white div to have fixed width
but i still don't know how to make the caption start where the image starts
not where the div starts
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 13:30
ok, let me check
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 13:35
@tropped By using the 'center-block' the image is aligned to center. You can center-align the caption as well. However, to make it start right below the image, you would need to left:... and give some positioning (I don't recommend it), but doing this would also make your elements go out of bounds.
tropped
@tropped
Oct 19 2016 13:37
i guess my best choice is to just center it
thanks anyway @NitinNair89
CamperBot
@camperbot
Oct 19 2016 13:37
tropped sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: tropped already gave nitinnair89 points
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 13:39
hmm, yeah..Sorry I could not help much
ADIL KARMOUZI
@mradil16
Oct 19 2016 13:40
hi everyone , How can I remove that default inset-shadow when hovering an input ?
kirbyedy
@kirbyedy
Oct 19 2016 13:41
:focus { 
  outline: 0;
}
try
or box-shadow: none;
I would have to see the code dough, its hard to guess
avi twito
@aviTwito
Oct 19 2016 14:03

hi, why does the font of my h1 tag doesnt change to this font: https://fonts.google.com/specimen/Bitter?selection.family=Bitter
i added this to the head elemnt in the html settings:

<link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">

and this is my h1 in css:

.h1{
  font-family: 'Bitter', serif;
}

this is the text i want to change the font:

 <center><h1>Random Qoute Machine</h1></center>

Edit: nvm its because of the DOT in the CSS

Nitin Chandran Nair
@NitinNair89
Oct 19 2016 14:04
@aviTwito remove the period in your CSS. <h1> is an element. Classes are selected with periods in CSS and tags with their tag names :)
Yeah, right! :D
avoid using the <center> tags, they are no longer used even though browsers will interpret them. Use text-align wherever needed. :)
avi twito
@aviTwito
Oct 19 2016 14:05
@NitinNair89 ok thx
CamperBot
@camperbot
Oct 19 2016 14:05
avitwito sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 14:06
Welcome buddy! @aviTwito
avi twito
@aviTwito
Oct 19 2016 14:12
is there anynone maybe wants to do the qute machine together with TEAMVIEWR or something?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 14:12
i can
Majda Puaca
@supermajda
Oct 19 2016 14:12
Hi everyone, Im doing Free Code Camp homework, building web portfolio from scratch. You can see it here http://codepen.io/supermajda/full/ozaEOR/ - need some help, particularly I'm interested to know what would be the most elegant way to add space between thumbnail images in 'portfolio' section.
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 14:12
I have teamviewer installed.
avi twito
@aviTwito
Oct 19 2016 14:13
ok lets talk in private
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 14:13
ok
avi twito
@aviTwito
Oct 19 2016 14:14
how do i open private chat? is it possible?
Philipp Scholz
@philipp32
Oct 19 2016 14:18
@kirbyedy thanks
CamperBot
@camperbot
Oct 19 2016 14:18
philipp32 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1471 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Philipp Scholz
@philipp32
Oct 19 2016 14:19
@supermajda looks great. where did you learn the responsive design?
I have 2 pictures, exact same size and I imported them into html. Why is one displayed bigger than the other?
Amy Walters
@codecampamy
Oct 19 2016 14:30
Thank you for the link @vinaypuppal
CamperBot
@camperbot
Oct 19 2016 14:30
codecampamy sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 625 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Majda Puaca
@supermajda
Oct 19 2016 14:43
@philipp32 Thanks! I've been kinda self-thought and doing this for a while.. now finally have time to get certified! with your question.. no idea, tho same is happening to my page!
CamperBot
@camperbot
Oct 19 2016 14:43
supermajda sends brownie points to @philipp32 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @philipp32 |http://www.freecodecamp.com/philipp32
Pavan Srinivas
@pavansrinivas
Oct 19 2016 14:45
my icon tag <i class="fa fa-fw fa-coffee"> </i> not working..Any help?
my icon tag <i class="fa fa-fw fa-coffee"> </i> not working..Any help?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 14:49
Did you import font-awesome css in your code?
Pavan Srinivas
@pavansrinivas
Oct 19 2016 14:50
yes
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 14:51
is fa-fw a valid class?
Pavan Srinivas
@pavansrinivas
Oct 19 2016 14:51
it is working thanks..i missed a letter in font-awesome import
yes it is a valid class
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 14:52
:)
Monesul Haque
@mones-cse
Oct 19 2016 14:59
@kurumkan thanks for your advice :D
CamperBot
@camperbot
Oct 19 2016 14:59
mones-cse sends brownie points to @kurumkan :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @kurumkan |http://www.freecodecamp.com/kurumkan
Dhaval Gajjar
@dhaval3
Oct 19 2016 15:05
can anyone give feedback
i think it is too simple
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:06
Yeah, it is @DG-Demon :)
Dhaval Gajjar
@dhaval3
Oct 19 2016 15:07
what can i modify more @NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:07
You can add some animations using the "animate.css" - https://github.com/daneden/animate.css
It will make it simple and special (As per me) :)
Dhaval Gajjar
@dhaval3
Oct 19 2016 15:08
i dont know animate.css
i completed html & css part
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:08
Refer the link I gave you :)
You will learn something interesting
Dhaval Gajjar
@dhaval3
Oct 19 2016 15:08
okay
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:08
it's the 119th challenge, right?
Dhaval Gajjar
@dhaval3
Oct 19 2016 15:09
yes..
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:09
Hmm.. ok! All the best!
Dhaval Gajjar
@dhaval3
Oct 19 2016 15:10
thanks bro
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:10
:D
tropped
@tropped
Oct 19 2016 15:10
it's more like the 1st challenge
the previous challenges are not really a challenge
Dylan
@dhcodes
Oct 19 2016 15:11
the first challenge is understanding that fcc challenges aren't numbered
lol
:)
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:11
haha
tropped
@tropped
Oct 19 2016 15:11
hahaha
Dylan
@dhcodes
Oct 19 2016 15:11
the number is brownie points :+1:
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:12
this is my first day here..on gitter..and i am enjoying a lot :+1:
Dylan
@dhcodes
Oct 19 2016 15:12
it's a good place
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:12
Yep
tropped
@tropped
Oct 19 2016 15:12
how long have you been on FCC tho?
Dylan
@dhcodes
Oct 19 2016 15:12
i honestly think the community is what sets fcc apart from places like codecademy
Stephen James
@sjames1958gm
Oct 19 2016 15:12
@dhcodes :+1:
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:13
yeah, agreed
I joined FCC in June
:D
still working on TwitchTV challenge.. I am slow-ish
Mayur
@mayurpande
Oct 19 2016 15:20
is it bad practice to have a while loop wihtin a foor loop?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:20
Depends on what your code actually does.
Mayur
@mayurpande
Oct 19 2016 15:22
well I want to loop through an array using a for-loop then within the for loop have a while loop that continues popping or shifting until a specific number is met?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:23
Okay, try it, but do not manipulate the loop counters within one another
Mayur
@mayurpande
Oct 19 2016 15:23
cool will do thanks
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:29
Anyone wanna explain what happened? I had a nice little nav bar and everything was fine and dandy and now everything looks basic as fuck without any style lol http://codepen.io/EatSleepCodeComplete/full/VKVkWV/
My code is complete dog shit though so might as well wipe the whole thing (too many div not enough closing /div and it's a mess etc etc) but... still would like to know
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:30
Your CSS window has nothing.. hence..
Did you delete your code by any chance? Try doing UNDO after keeping your cursor inside the CSS window
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:31
But even with that (yeah my formating got deleted) CSS doesn't dictate bootstrap functionality or am I off my rocker?
for example the buttons should be animated, the nav bar should exist.
Long Phan
@longp
Oct 19 2016 15:33
@EatSleepCodeSheit what do you mean by bootstrap functionality, you can override bootstrap css classes with your own
@EatSleepCodeSheit or are you using the bootstrap js library for fx
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:33
for example
Long Phan
@longp
Oct 19 2016 15:34
you jsut want that navbar right @EatSleepCodeSheit
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:34
It doesn't need CSS because the nav bar is done in bootstrap / the HTML portion
yeah
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:34

Click the settings icon and import the correct bootstrap - https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

The current URL is wrong :)

Long Phan
@longp
Oct 19 2016 15:35
@EatSleepCodeSheit did you include this lib <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:36
@NitinNair89 thank you - my word replacer fucked me over lmao.
CamperBot
@camperbot
Oct 19 2016 15:36
eatsleepcodesheit sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:37
@EatSleepCodeSheit LOL! You're welcome buddy! :)
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:37
@longp ty for problem searchin with me haha. I clicked add bootstrap but have certain social media blacklisted and hence... it shit the bed lol
CamperBot
@camperbot
Oct 19 2016 15:37
eatsleepcodesheit sends brownie points to @longp :sparkles: :thumbsup: :sparkles:
:cookie: 35 | @longp |http://www.freecodecamp.com/longp
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:38
I can't stop laughing @EatSleepCodeSheit .. i liked the way you talked here.. :P hahahaha
Long Phan
@longp
Oct 19 2016 15:38
@EatSleepCodeSheit just add this link to the settings in your code pen
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:40
Well at least I can make yalls day better :) keep at it good folks. And @longp yeah i had that but thats js not css unless js includes css.... hm.
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:40
haha
Long Phan
@longp
Oct 19 2016 15:40
@EatSleepCodeSheit you need that js lib to have the navigation fx
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:41
Agree with @longp ..add the JS using "Quick ADD" in settings
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:42
Yeah was actually gonna ask about that but figured i'd ask once i got started on the js portion - You guys are too fast for me :D
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:42
:P
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:43
will have to add drop down functionality eventually etc etc. Lots to look forward to - second website on my fourth day here. Things are moving quickly
second pen*
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:44
u no need to code it.. bootstrap will do it for you
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:46
hm, but it doesn't do it right now. Do you see anywhere i might have messed up?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:46
ok
Theodore P.
@Ierofantis
Oct 19 2016 15:46
Is there anybody good in React?
(or better than me who I am a newbie in React :P)
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:48
@supermajda your portfolio is bumping. Keep it up.
Stephen James
@sjames1958gm
Oct 19 2016 15:48
I have some experience
@Ierofantis I have some
Theodore P.
@Ierofantis
Oct 19 2016 15:50
@sjames1958gm hey :), I am making my first project on data visualisation and I was pretty sure that It was ok but It is nor rendering at all. Because I am new in React I don't have a clue why is this happening.Here is my pen and i would love if you come with any clue on why this is happening
https://codepen.io/Ierofantis/pen/qarNAb?editors=1010
Artur Arsalanov
@kurumkan
Oct 19 2016 15:52

@sjames1958gm

ReactDOM.render(<Editor />,document.getElementById("app"));

now it renders. Is that what you expect?
It's a good style to make your textarea as "controlled component" https://facebook.github.io/react/docs/forms.html

Pavan Srinivas
@pavansrinivas
Oct 19 2016 15:52
in navigation bar if i press a button..it is moving ahead of the section ...any help??
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:52
That's pretty normal pavan - at least in my experience. If you look at the example it does the same thing
Pavan Srinivas
@pavansrinivas
Oct 19 2016 15:54
is it possible to adjust the position..
Theodore P.
@Ierofantis
Oct 19 2016 15:55
@kurumkan now I saw your message and I fixed It and no It is not what I expected. I wanted the output to change from my input and not to have a fixed value. Where I am wrong?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:56
@EatSleepCodeSheit Sorry i thought i replied you.. You had two imports for bootstrap..one was incorrect. only add the correct version and try
Theodore P.
@Ierofantis
Oct 19 2016 15:57
@kurumkan maybe my fault is that I have to add props and not state?
Artur Arsalanov
@kurumkan
Oct 19 2016 15:57
@longp value= {this.state.value} try add this to your textarea
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 15:58
@NitinNair89 nope still the same hmmm.... hmmmmmmmmmmm.
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 15:58
And @EatSleepCodeSheit Add your JQuery library first and then the Bootstrap ones
in the settings panel :)
Sorry i missed that one
Artur Arsalanov
@kurumkan
Oct 19 2016 15:59
@longp
 var Editor = React.createClass({
  getInitialState: function() {
    return {value: 'Type here'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  rawMarkup: function(value) {
      var rawMarkup = marked(value, {sanitize: true});
      return { __html: rawMarkup };
    },
  render: function() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          value= {this.state.value}
          defaultValue={this.state.value} />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML=
           {this.rawMarkup(this.state.value)}
        />
      </div>
    );
  }
});

ReactDOM.render(<Editor />,document.getElementById("app"));
Theodore P.
@Ierofantis
Oct 19 2016 16:00
@kurumkan thanks now It is working!
CamperBot
@camperbot
Oct 19 2016 16:00
ierofantis sends brownie points to @kurumkan :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @kurumkan |http://www.freecodecamp.com/kurumkan
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 16:01
grrrrr... nope - still the same. Unless I am too stupid to add it correctly lol
Theodore P.
@Ierofantis
Oct 19 2016 16:01
@kurumkan I remove defaultValue={this.state.value} also It was wrong. Anyway thank you again!
CamperBot
@camperbot
Oct 19 2016 16:01
ierofantis sends brownie points to @kurumkan :sparkles: :thumbsup: :sparkles:
:warning: ierofantis already gave kurumkan points
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 16:01
so your javascript tab should show first the jquery library and then the bootstrap library
@EatSleepCodeSheit
Artur Arsalanov
@kurumkan
Oct 19 2016 16:02
@Ierofantis your textarea - now it's a controlled component. Please read more about https://facebook.github.io/react/docs/forms.html
Theodore P.
@Ierofantis
Oct 19 2016 16:02
@kurumkan Ok , I will read this
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 16:04
@NitinNair89 wow - I should go to bed lmao. You were 100% correct thank you.
CamperBot
@camperbot
Oct 19 2016 16:04
eatsleepcodesheit sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: eatsleepcodesheit already gave nitinnair89 points
EatSleepCodeSheit
@EatSleepCodeSheit
Oct 19 2016 16:05
works again. Didnt realize it got deleted as well
Good night folks! Keep working hard - this community is amazing for scrubs like myself. Remember this shit is frustrating but it's not impossible :D :D
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 16:07
@EatSleepCodeSheit I am sorry i didn't see your PM :(
Stephen James
@sjames1958gm
Oct 19 2016 16:18
@Ierofantis Sorry boss came in, did you get the help you needed?
Sebastián Ventura
@sevgit
Oct 19 2016 16:18

How would you tidy up this? The code returns a newarray that contains values that are not present on both initial arrays


function diffArray(arr1, arr2) {
  var newArr = arr2.filter(notintheother);
  var tryout = arr1.filter(notintheother2);
  function notintheother(value) {
    return arr1.indexOf(value) < 0;
  }

  function notintheother2(value) {
    return arr2.indexOf(value) < 0;
  }

  return newArr.concat(tryout);
}



diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);

I know this works because it solved the challenge. However, I'm certain there has to be a way to make it just one function and a lot cleaner overall. Any ideas?

Stephen James
@sjames1958gm
Oct 19 2016 16:22
@sevgit - the second parameter to filter is bound to the this pointer
function diffArray(arr1, arr2) {
  var newArr = arr2.filter(notintheother, arr1);
  var tryout = arr1.filter(notintheother, arr2);
  function notintheother(value) {
    return this.indexOf(value) < 0;
  }

  return newArr.concat(tryout);
}
JD Tadlock
@jdtdesigns
Oct 19 2016 16:23
@sevgit
function diffArray(arr1, arr2) {
  var newArr = arr1.concat(arr2);

  return newArr.filter(function(val) {
    return arr1.indexOf(val) < 0 || arr2.indexOf(val) < 0;
  });

}
Stephen James
@sjames1958gm
Oct 19 2016 16:23
@jdtdesigns :+1:
Theodore P.
@Ierofantis
Oct 19 2016 16:39
@sjames1958gm yes @kurumkan helped me on this, thanks you for your time too
CamperBot
@camperbot
Oct 19 2016 16:39
ierofantis sends brownie points to @sjames1958gm and @kurumkan :sparkles: :thumbsup: :sparkles:
:warning: ierofantis already gave kurumkan points
:star2: 3898 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Oct 19 2016 16:40
@Ierofantis good
Sebastián Ventura
@sevgit
Oct 19 2016 16:55
thanks @sjames1958gm and @jdtdesigns it helped a lot
CamperBot
@camperbot
Oct 19 2016 16:55
sevgit sends brownie points to @sjames1958gm and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 3900 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
:cookie: 706 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Rick
@rangerrick337
Oct 19 2016 17:04
G'day everyone. I'm stuck on the wiki api challenge. I can't seem to get JQuery's $.getJSON method to work. I've put it inside a form submit function, I think that should be fine but can't get it to fire. Any advice? http://codepen.io/RickLee/pen/vXVzra
Stephen James
@sjames1958gm
Oct 19 2016 17:05
@rangerrick337 If you open the devtools console you will see a cross-origin error. wiki API provides a solution for this adding origin= to the URL
`https://en.wikipedia.org/w/api.php?action=query&origin=
&list=search&format=json&srsearch=`
Rick
@rangerrick337
Oct 19 2016 17:08
Awesome sauce @sjames1958gm, there's always something isn't there. Thanks.
CamperBot
@camperbot
Oct 19 2016 17:08
rangerrick337 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3901 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Rick
@rangerrick337
Oct 19 2016 17:15
@sjames1958gm, still getting the same cross origin error. I tried just origin= and origin=myURL. Neither made the difference.
Rick
@rangerrick337
Oct 19 2016 17:27
Fixed it by setting origin=*. It must be a codepen problem doing it with the codepen url. Solution found here: http://stackoverflow.com/questions/23952045/wikipedia-api-cross-origin-requests
Jack Marks-Thomas
@JackMarksThomas
Oct 19 2016 17:35
Hey guys, could anyone point me in the right direction for a video screen capture, I'm hoping to capture a Website homepage I made to be used as an example on my portfolio
SlimxaQ
@SlimxaQ
Oct 19 2016 17:36
Someone can borrow me 3 USD on PayPal?
Stephen James
@sjames1958gm
Oct 19 2016 17:38
@rangerrick337 Sorry was offline - the markdown hid the *
https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&format=json&srsearch=
Rick
@rangerrick337
Oct 19 2016 17:39
:+1:
Suzanne Atkinson
@AdventureBear
Oct 19 2016 17:39
anyone else get really motivated to code and even dream about it...then when it comes time to do it just run out of steam?
Jack Marks-Thomas
@JackMarksThomas
Oct 19 2016 17:45
@AdventureBear Yep, this whole week
Suzanne Atkinson
@AdventureBear
Oct 19 2016 17:48
@JackMarksThomas I made SO MUCH progress the past few days with learnyounode, expressworks and the first 2 microapi services...I'm pumped!
but sooooooo tired.
what are you working on?
Jack Marks-Thomas
@JackMarksThomas
Oct 19 2016 17:53
@AdventureBear I'm working on my portfolio, just relocated and it's time to stop making people boring wordpress sites and join an agency or company
Suzanne Atkinson
@AdventureBear
Oct 19 2016 17:54
@JackMarksThomas great motivation! :)
Jack Marks-Thomas
@JackMarksThomas
Oct 19 2016 18:04
I really need to get to know Javascript a little better, to be honest I've never needed to have a huge knowledge on it, but it seems everywhere looking for front end devs really want it
Abraham Danquah
@AbrahamDanquah
Oct 19 2016 18:08
Hi
Stephen James
@sjames1958gm
Oct 19 2016 18:09
@AbrahamDanquah Hello
Abraham Danquah
@AbrahamDanquah
Oct 19 2016 18:09
I want to make an image in my tribute page respond to browser resize. Any help for me?
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 18:09
are you using any responsive frameworks?
Abraham Danquah
@AbrahamDanquah
Oct 19 2016 18:10
No
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 18:10
give the height and width in %
Abraham Danquah
@AbrahamDanquah
Oct 19 2016 18:10
Ok @NitinNair89 Will try and let you know
Thanks very much @NitinNair89 working as I want now
CamperBot
@camperbot
Oct 19 2016 18:12
abrahamdanquah sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 19 2016 18:13
You're welcome mate! @AbrahamDanquah :)
Maksim Kulichenko
@makstheimba
Oct 19 2016 18:14
can somebody give me a clue on how to make audio play constantly, while user pushes the button, in simon game? So far I've tried setting "loop = true" and buffering audio, so the new one starts before previous not yet ended. None of this worked
It always plays with delay
Lee
@winterfive
Oct 19 2016 18:22
I am working on my tribute page and I am stuck with an issue with my responsive grid. Here's a link to the codepen page: http://codepen.io/winterfive/pen/WGaJqN?editors=1100. I am trying get the 3rd <p> and the image directly right to line up with the rest. Help plx!
Peter Svedman
@petersvedman
Oct 19 2016 18:30
Hey people, I finally have the blasted Weather Machine working! https://codepen.io/petersvedman/pen/LRgKBV
Success!
Stephen James
@sjames1958gm
Oct 19 2016 18:31
@petersvedman :+1:
:checkered_flag:
Peter Svedman
@petersvedman
Oct 19 2016 18:32
Last night I was ready to bring out the propane torch and "persuade" the computer to work.
Any suggestions?
Artur Arsalanov
@kurumkan
Oct 19 2016 18:34
@petersvedman on my not super old mozilla - the geolocation doesn't work. And it's normal - the geolocation is still very unreliable!
Peter Svedman
@petersvedman
Oct 19 2016 18:35
Yeah, as I said - propane Torch!
Artur Arsalanov
@kurumkan
Oct 19 2016 18:36
@petersvedman and it's not your fault. I mean I wouldnt recommend use this feature and try to find another way to find one's location
Sagar Bathini
@bathini
Oct 19 2016 18:36
@winterfive set image height to 200px.
Peter Svedman
@petersvedman
Oct 19 2016 18:37
I tried that @kurumkan, but It was for some reason even more difficult to work with
Artur Arsalanov
@kurumkan
Oct 19 2016 18:37
I made some research on that when I was working weather api too - and I my code working on chrome - was able to work properly on some other clients
Lee
@winterfive
Oct 19 2016 18:37
@bathini Won't that keep the image sized fixed even when the page is resized?
Abraham Danquah
@AbrahamDanquah
Oct 19 2016 18:37
Am done with my tribute page and I want to include the link to my CodePen. Should I copy the entire url as displayed in the address bar?
Peter Svedman
@petersvedman
Oct 19 2016 18:37
For me its a Codepen issue
I have a open-api.com solution working fine for me locally, but it wont run in codepen....
Sagar Bathini
@bathini
Oct 19 2016 18:39
@winterfive you set that image in a class "col-md-@" , so this div will resize according to the screen..
Peter Svedman
@petersvedman
Oct 19 2016 18:39
It reports either Codepens AWS location or the proxys....
Artur Arsalanov
@kurumkan
Oct 19 2016 18:39
@petersvedman there is issue with open api working on codepen- as I remeber it will not work on https:// so try http:// but it was long time ago..
Peter Svedman
@petersvedman
Oct 19 2016 18:41
Yeah @kurumkan , I have tried just about everything, geolocation is the only thing I can get working there.
JD Tadlock
@jdtdesigns
Oct 19 2016 18:41
@petersvedman what's the issue?
Peter Svedman
@petersvedman
Oct 19 2016 18:41
Im looking for the users position
Lee
@winterfive
Oct 19 2016 18:42
@bathini help appreciated but it's not doing what I want it to do, sigh. I want the image to resize to match the height of the column to it's left and for both of those columns to be the same width of the previous columns. I think I am getting ahead of myself code wise here.
Peter Svedman
@petersvedman
Oct 19 2016 18:42
And it works at home with various methods, but only with geolocation interface in Codepen
Michael Davis
@mhdavis
Oct 19 2016 18:42
@jdtdesigns just the person i wanted to see!
JD Tadlock
@jdtdesigns
Oct 19 2016 18:43
@petersvedman seems to be working fine for me in codepen
Michael Davis
@mhdavis
Oct 19 2016 18:43
I've been looking over your js, and its been helping a lot in terms of understand how jQuery interacts with css/html
JD Tadlock
@jdtdesigns
Oct 19 2016 18:44
glad to hear @mhdavis
Michael Davis
@mhdavis
Oct 19 2016 18:44
im have a few problems and would love your input tho
Peter Svedman
@petersvedman
Oct 19 2016 18:44
Yeah, its working using geolocation, but that is sometimes iffy, doesnt work for everyone which is why I wanted a different solution
But Hey, It works !
JD Tadlock
@jdtdesigns
Oct 19 2016 18:44
here's another little thing i made for someone yesterday http://jsbin.com/bumaka/1/edit?output @mhdavis
Michael Davis
@mhdavis
Oct 19 2016 18:44
I'm trying to integrate some of the stuff you did with my code to see if I'm really getting the concepts
JD Tadlock
@jdtdesigns
Oct 19 2016 18:45
@petersvedman The only thing i noticed was a 10 second delay in the api success
Peter Svedman
@petersvedman
Oct 19 2016 18:46
Yeah, for some reason it sometimes lags
Redwan Yassin Mohammedberhan
@rymo90
Oct 19 2016 18:46
i would like to get some help with this exercise
Bootstrap Fluid container.png
Peter Svedman
@petersvedman
Oct 19 2016 18:47
I get the JSOn payloads right away, checked with postman and with the console. I THINK its related to the skycons code
It builds the animation etc, a scope issue
Michael Davis
@mhdavis
Oct 19 2016 18:48
@jdtdesigns its neat to see that code because its the first time ive seen JS used to pull and push stuff into the HTML
Peter Svedman
@petersvedman
Oct 19 2016 18:48
Anyway, thanks @kurumkan @jdtdesigns for the look
CamperBot
@camperbot
Oct 19 2016 18:48
petersvedman sends brownie points to @kurumkan and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @kurumkan |http://www.freecodecamp.com/kurumkan
:cookie: 707 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Michael Davis
@mhdavis
Oct 19 2016 18:51
so there is one thing that I'm getting stuck on while looking at your code @jdtdesigns
the forsmatic api has a getQuote method in the json
TasmaniaKrama
@TasmaniaKrama
Oct 19 2016 18:52

Hello, I kinda need some help with Ceasars Chiper problem. For example:
var abc = "NJFOIERJNF";
for (var i =0;i<abc.length;i++){ if (abc.charCodeAt(i)>77) {
abc.charCodeAt(i)-13;
}
else if(abc.charCodeAt(i)>77) {
abc.charCodeAt(i)+13;
}

}

Artur Arsalanov
@kurumkan
Oct 19 2016 18:52
@petersvedman I saw my old code - i used ip api. My app doesn't work on https:// but works on http://So try the your open api solution with deiffrent protocols. Who knows. it could work
TasmaniaKrama
@TasmaniaKrama
Oct 19 2016 18:52
// so now I pretty much have the code that takes the value and decrypts it but I don't know how to put those values in String.fromCharCode()
JD Tadlock
@jdtdesigns
Oct 19 2016 18:54
@mhdavis That's just a callback function to return jsonp
Peter Svedman
@petersvedman
Oct 19 2016 18:55
I will have another look tomorrow @kurumkan, as I said, it works fine here at home in a local version, but not on CodePen. :smiley:
Michael Davis
@mhdavis
Oct 19 2016 18:55
you mean the method in the json api?
JD Tadlock
@jdtdesigns
Oct 19 2016 18:57
@mhdavis so i could set it to my getQuote function as the callback to run when the data is returned, but instead i have an anonymous function.
it's just related to the function you call in the callback of the getJSON
? means anonymous
Michael Davis
@mhdavis
Oct 19 2016 19:00
I'm sort of following but not entirely
The only time i see that is when you are getting the author and if it returns anonymous you set the author to unknown
so its sort of like shorthand for this?
    function getNewQuote() {
    $ajax({
      url: 'http://api.forismatic.com/api/1.0',
      jsonp: 'jsonp',
      dataType: 'jsonp',
      data: {
        method: 'getQuote',
        lang: 'en',
        format: 'jsonp'
      },
      sucesss: function(response) {
       quote = response.quoteText;
       author - response.quoteAuthor;
        if (author) {
          $('#author').text('- ' + author);
        } else {
          $('#author').text('- Unknown');
        }
      }
    });
if success was spelled right lol
JD Tadlock
@jdtdesigns
Oct 19 2016 19:02
@mhdavis yep ;)
Michael Davis
@mhdavis
Oct 19 2016 19:04
so you used $.getJSON to extract the info you want rather than all of this stuff, in the example i sent i explicitly am asking the API to send everything to me in jsonp
oh i see, you call .done on the function once its pulled everything from the api
Sagar Bathini
@bathini
Oct 19 2016 19:05
@winterfive https://teamtreehouse.com/community/bootstrap-3-question-responsive-col-width-and-height check the answer from this page.. it worked fine.
Michael Davis
@mhdavis
Oct 19 2016 19:05
and if it works, you append it to the html
JD Tadlock
@jdtdesigns
Oct 19 2016 19:06
@mhdavis the .done() method just makes sure the request is complete and the api has responsed
Tyler Moeller
@TylerMoeller
Oct 19 2016 19:08
@petersvedman You can remove all the skycon code from your JS and link to it here instead: https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js
You can have the skycon be responsive if you specify width and height as 100%:
<canvas id="icon1" width="1000" height="1000" style="width: 100%; height: 100%"></canvas>
Also, crossorigin.me lags, especially this time of day. Remove it and change your getJSON to use a ?callback=? so it isn't needed:
$.getJSON(weatherUrl+String(crd.latitude)+","+String(crd.longitude)+"?callback=?").then(workItOut);
You'll notice your weather and the icon will load much more quickly after making these changes and the icon will fit in your div panel regardless of screen size.
Michael Davis
@mhdavis
Oct 19 2016 19:09
@jdtdesigns and .done() is a built in method
to jQuery specifically?
JD Tadlock
@jdtdesigns
Oct 19 2016 19:10
@mhdavis yes
Michael Davis
@mhdavis
Oct 19 2016 19:11
makes sense
Michael Davis
@mhdavis
Oct 19 2016 19:22
@jdtdesigns does the $document.ready(function {}) act as a main function for jQuery
JD Tadlock
@jdtdesigns
Oct 19 2016 19:26
@mhdavis .ready() is basically an old school way of making sure the document was loaded before running your js
devs used to put the js script in the head of the html
now it's common practice to put it before </body>
Michael Davis
@mhdavis
Oct 19 2016 19:27
I see
I'm running into a problem
if you look at lines 20 -49 im having a bit of trouble organizing the JS
its mainly an organization problem
with your $.getJSON you pull the bits that you care about and only load it up once everything has been grabbed from the API
the one problem im running into is with my shareQuote button, i need to get the author and quote as global variables so that I can use them to post the quote and author to twitter
oh okay I think i have a solution
JD Tadlock
@jdtdesigns
Oct 19 2016 19:32
@mhdavis You're running into this problem http://jsbin.com/yevovuv/6/edit?output
lucky for you, i made an animation lol
Ian Arsenault
@ianarsenault
Oct 19 2016 19:32
@jdtdesigns So what is your js supposed to be without using .ready()?
Is everything just called in your js file? but without putting it inside a $(document).ready(function().... ?
JD Tadlock
@jdtdesigns
Oct 19 2016 19:34
@GorgonsMaze if you call your script before </body>, you don't need .ready()
because the page will be loaded already
Ian Arsenault
@ianarsenault
Oct 19 2016 19:34
@jdtdesigns Ah I see. Good to know.
Michael Davis
@mhdavis
Oct 19 2016 19:35
@jdtdesigns lol what are the odds that you have a animation for that
@jdtdesigns okay so if thats improper, what would be better?
or is the animation illustrating proper Ajax usage
(i understood it to show how the js is being processed)
JD Tadlock
@jdtdesigns
Oct 19 2016 19:36
@mhdavis With ajax, you never know when the data will be received
js runs line by line
so it won't stop when an ajax request is called
it just keeps on going
if you're setting html text to some variables that depend on the ajax data outside of the ajax request, the data will not be there
because it usually takes upwards of 200ms to get the data back
all of your js will run in less than 1ms
Michael Davis
@mhdavis
Oct 19 2016 19:37
i see what you mean
so in the animation, its showing that var quote and author with spit out before the ajax completes the request
JD Tadlock
@jdtdesigns
Oct 19 2016 19:38
correct
so where do you think they belong?
Michael Davis
@mhdavis
Oct 19 2016 19:39
they belong inside of the getJSON
JD Tadlock
@jdtdesigns
Oct 19 2016 19:39
right
or you can chain function calls using .done() and .then()
$.getJSON('url', function(data) {
  //set data
}).done(myFirstFunction).then(mySecondFunction);
@mhdavis
Michael Davis
@mhdavis
Oct 19 2016 19:41
okay i see

okay but when i sent you this bit of code, it works because the ajax has to succeed in pulling the json from the API before it updates the variables?

```
    function getNewQuote() {
    $ajax({
      url: 'http://api.forismatic.com/api/1.0',
      jsonp: 'jsonp',
      dataType: 'jsonp',
      data: {
        method: 'getQuote',
        lang: 'en',
        format: 'jsonp'
      },
      sucesss: function(response) {
       quote = response.quoteText;
       author - response.quoteAuthor;
        if (author) {
          $('#author').text('- ' + author);
        } else {
          $('#author').text('- Unknown');
        }
      }
    });

```

looking at it again, I think the problem still arises if you define the variables outside of the function
unless success works by only letting the js continue by updating the values for quote and author once it has them from the API
JD Tadlock
@jdtdesigns
Oct 19 2016 19:44
function getNewQuote() {
    $ajax({
      url: 'http://api.forismatic.com/api/1.0',
      jsonp: 'jsonp',
      dataType: 'jsonp',
      data: {
        method: 'getQuote',
        lang: 'en',
        format: 'jsonp'
      },
      sucesss: function(response) {
       quote = response.quoteText;
       author - response.quoteAuthor;
        if (author) {
          $('#author').text('- ' + author);
        } else {
          $('#author').text('- Unknown');
        }
      }
    }).done(showQuote);
}
@mhdavis
Michael Davis
@mhdavis
Oct 19 2016 19:44
i see, so only once the function is done, will it show quote
JD Tadlock
@jdtdesigns
Oct 19 2016 19:44
only once the '$.ajax' is done
and you don't have a '.' after the '$'
which will throw an error ;)
Michael Davis
@mhdavis
Oct 19 2016 19:45
is it more quote-on-quote proper to use getJSON or to use $.ajax?
JD Tadlock
@jdtdesigns
Oct 19 2016 19:46
@mhdavis it's shorthand vs longhand
works either way, but less code with $.getJSON()
Michael Davis
@mhdavis
Oct 19 2016 19:46
yea that makes sense
okay so i tried cleaning up my code and using the shorthand, but im getting an error
I'm trying to organize it so that I have all my functions and then a main function that calls them all in the proper order and such
I just realized im missing a getNewQuote method
Michael Davis
@mhdavis
Oct 19 2016 19:51
okay let me fix it, I think i see whats wrong
JD Tadlock
@jdtdesigns
Oct 19 2016 19:52
@mhdavis you can't load codepen through https and use forismatic through http
also, your variables are mixed up
you trying to set the bg with a variable from another function
variables inside functions are scoped to the inside of that function only
Michael Davis
@mhdavis
Oct 19 2016 19:56
right that makes sense
okay so if I'm trying to do it this way were I have a main function
is that not proper to do in this context?
I'm trying to group up my functions and then call them as needed
how do i make author and quote global without running into the ajax problems that you previously mentioned
Dennis Onder
@ShadowpathHD
Oct 19 2016 20:00
How can i set all of my text to be in the center in my html page,doing the tribute page challenge
Michael Davis
@mhdavis
Oct 19 2016 20:00
@ShadowpathHD you set your <div> class containing your text to have a class="text-center"
JD Tadlock
@jdtdesigns
Oct 19 2016 20:00
$(document). ready(function() {
  var output = $('#quote'), quote, author;
@mhdavis
Dennis Onder
@ShadowpathHD
Oct 19 2016 20:01
@mhdavis i knew that,but i thought of is there a possibility to do it in just one line of code lol
Michael Davis
@mhdavis
Oct 19 2016 20:02
@jdtdesigns gotcha, so then am i treating my $(document).ready as my main function?
JD Tadlock
@jdtdesigns
Oct 19 2016 20:03
@mhdavis You don't need .ready() lol
.ready() is specifically and 'only' to make sure the document is loaded before running the code inside
Michael Davis
@mhdavis
Oct 19 2016 20:04
@jdtdesigns right so then just remove it all together
JD Tadlock
@jdtdesigns
Oct 19 2016 20:04
since codepen loads your code before </body>, you don't need it
you can remove it
Michael Davis
@mhdavis
Oct 19 2016 20:13
@jdtdesigns im not sure where my error is anymore
if you look at the setBackground function, i define it before I define getNewPicture
and yet codepen says that its undefined?
Peter Svedman
@petersvedman
Oct 19 2016 20:14
@TylerMoeller Thanks, I will have a look at that. Didnt know there was a cdn for skycons. :+1: As for the callback, I will look into that tomorrow . :smile:
CamperBot
@camperbot
Oct 19 2016 20:14
petersvedman sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 891 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
JD Tadlock
@jdtdesigns
Oct 19 2016 20:23
@mhdavis right click the preview and hit 'inspect'
you'll see errors
then click on the console tab
first error being you're loading codepen through https:// and trying to call the api with http:
take the https:// off the codepen url and reload the page
then start with the other errors
Dennis Onder
@ShadowpathHD
Oct 19 2016 20:26
How can i turn the text and the list even more towards the center?
Tyler Moeller
@TylerMoeller
Oct 19 2016 20:27
@jdtdesigns @mhdavis another gotchya, .load(function() {}) changed to .on("load", function() {}) in jQuery 3
Michael Davis
@mhdavis
Oct 19 2016 20:28
huh, changed that thanks for the catch
Rimi.
@Codevotee
Oct 19 2016 20:31
@ShadowpathHD bro you need to verify your email address so we can view the pen in full view, otherwise we only see editor view
Tyler Moeller
@TylerMoeller
Oct 19 2016 20:32
@APRim05 You can always use debug if they haven't verified email: http://codepen.io/shadowpath/debug/bwQRka
Rimi.
@Codevotee
Oct 19 2016 20:33
@TylerMoeller oh nice didn't know that, thanks!
CamperBot
@camperbot
Oct 19 2016 20:33
:cookie: 892 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
aprim05 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Oct 19 2016 20:33
He should still verify his email :)
Rimi.
@Codevotee
Oct 19 2016 20:34
@ShadowpathHD because you're using Bootstrap, you can add the "text-center" class to the elements you want to center
JD Tadlock
@jdtdesigns
Oct 19 2016 20:34
Michael Davis
@mhdavis
Oct 19 2016 20:35
im still running into debuging problems and i think they are logic related.
Rimi.
@Codevotee
Oct 19 2016 20:35
@jdtdesigns that aligns all the text inside body
Dennis Onder
@ShadowpathHD
Oct 19 2016 20:35
@jdtdesigns Exactly! Now i need to just solve the issue why the dots of the unordered list arent properly aligned
Evan W
@Dirtier
Oct 19 2016 20:35
any CSS masters out there
Rimi.
@Codevotee
Oct 19 2016 20:35
@jdtdesigns sorry wrong person
Evan W
@Dirtier
Oct 19 2016 20:35
that want to help me get these damn things in line
Rimi.
@Codevotee
Oct 19 2016 20:35
@jdtdesigns nvm right person
JD Tadlock
@jdtdesigns
Oct 19 2016 20:35
@APRim05 ?
Rimi.
@Codevotee
Oct 19 2016 20:36
@jdtdesigns i just got confused, thought you were OP
Evan W
@Dirtier
Oct 19 2016 20:36
@jdtdesigns ayy buddy. Do you know why they wont sit in line? O.o
keredc
@keredc
Oct 19 2016 20:36
probably a stupid question but I'm having trouble getting an image in my tribute page without upgrading to pro.
Evan W
@Dirtier
Oct 19 2016 20:37
@keredc in codepen?
are you trying to link locally or something?
JD Tadlock
@jdtdesigns
Oct 19 2016 20:37
@Dirtier the bar and the number with border and arrow are supposed to be in a row?
Rimi.
@Codevotee
Oct 19 2016 20:37
@keredc you link it <img src=""/>
JD Tadlock
@jdtdesigns
Oct 19 2016 20:37
@ShadowpathHD Those dots aren't part of the text content
Evan W
@Dirtier
Oct 19 2016 20:38
@jdtdesigns Yea I actually want the label, the slider AND the value in row
JD Tadlock
@jdtdesigns
Oct 19 2016 20:38
those are added by the browser
Dennis Onder
@ShadowpathHD
Oct 19 2016 20:38
@jdtdesigns oh,so i just shouldnt worry about it?
Evan W
@Dirtier
Oct 19 2016 20:38
But I think it's because the slider is taking up too much room, I tried forcing it smaller but it didnt do anything
keredc
@keredc
Oct 19 2016 20:38
i was trying to link locally...i was doing a tribute page to my wife
Rimi.
@Codevotee
Oct 19 2016 20:38
@keredc ah locally doesn't work :/
@keredc has to be uploaded then linked
Evan W
@Dirtier
Oct 19 2016 20:39
@keredc Yea codepen pro is the only way to link to an assets folder, otherwise you have to use src
And even then the assets folder is inside codepen, not on your actual computer
keredc
@keredc
Oct 19 2016 20:40
guess I can't do that...i used an iframe to embed a picture from facebook but that is causing another set of formatting issues...i.e. not responsive
JD Tadlock
@jdtdesigns
Oct 19 2016 20:40
@ShadowpathHD there are ways to adjust the indentation if you want
Evan W
@Dirtier
Oct 19 2016 20:40
@keredc why use an iframe? just link to the image
JD Tadlock
@jdtdesigns
Oct 19 2016 20:40
@Dirtier looking over it
Evan W
@Dirtier
Oct 19 2016 20:40
iframe is a website inside a website
keredc
@keredc
Oct 19 2016 20:41
@Dirtier i'll try that...still new..lol
Evan W
@Dirtier
Oct 19 2016 20:41
its to view another website, inside your website. If you want to show an image just use the img tag
@jdtdesigns ok thanks
CamperBot
@camperbot
Oct 19 2016 20:41
dirtier sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 708 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
use the bs flex grid instead
Evan W
@Dirtier
Oct 19 2016 20:51
@jdtdesigns am I missing something? Bc that looks just like what I have
JD Tadlock
@jdtdesigns
Oct 19 2016 20:52
you didn't have a row and you didn't have col classes on your inner elements(label, input, span)
Evan W
@Dirtier
Oct 19 2016 20:53
Oh ok so you're saying make those the columns instead of putting them all in one like a container?
also, I didn't even know there was another type of bootstrap
is that a stable release?
JD Tadlock
@jdtdesigns
Oct 19 2016 20:53
@Dirtier yes
Evan W
@Dirtier
Oct 19 2016 20:54
Ok. can I do the same thing with normal bootstrap?
or would it only work with that?
JD Tadlock
@jdtdesigns
Oct 19 2016 20:54
it's not going to change anything except make your rows display flex for all browsers that support it
instead of creating floated elements inside
Evan W
@Dirtier
Oct 19 2016 20:55
Ok cool, I'll try that. Thanks
JD Tadlock
@jdtdesigns
Oct 19 2016 20:55
which is pretty much pointless these days
JD Tadlock
@jdtdesigns
Oct 19 2016 21:00
@Dirtier Like i've said before, i would just ditch BS and go with your own css.
css3 has huge support now
no reason to not use all it has to offer ;)
Evan W
@Dirtier
Oct 19 2016 21:01
Yea, I just love how quick and easy bootstrap is
JD Tadlock
@jdtdesigns
Oct 19 2016 21:01
i can code a site in half the time someone using bs can
because bs is not made to do custom design
Evan W
@Dirtier
Oct 19 2016 21:01
Really? Isn't that the point of bs though? For 'rapid prototyping'?
JD Tadlock
@jdtdesigns
Oct 19 2016 21:02
'prototyping' is the key word
Evan W
@Dirtier
Oct 19 2016 21:02
I don't think it's meant for final production though
Yea
Jason Luboff
@JLuboff
Oct 19 2016 21:02
Anybody want to take a look at my calculator? I haven't finished the look, but I think the functionailty is there: http://s.codepen.io/jluboff/debug/ALJdkd
Evan W
@Dirtier
Oct 19 2016 21:02
Idk I'm by no means a css master, I'm constantly bottle necked by it lol
Gotta get better at it
JD Tadlock
@jdtdesigns
Oct 19 2016 21:03
@Dirtier Once you learn css, you'll never use frameworks
Evan W
@Dirtier
Oct 19 2016 21:04
@jdtdesigns really???? I understand bootstrap, but not even sass or lean? my irl friend, who is currently working on Sprints website atm, says their design team uses Sass all the time
Jason Luboff
@JLuboff
Oct 19 2016 21:05
If my limited understanding of SASS is correct, then its just CSS at its forefront.
Evan W
@Dirtier
Oct 19 2016 21:05
Well yea, but you can do a lot of stuff with it that you can't do with plain CSS
JD Tadlock
@jdtdesigns
Oct 19 2016 21:06
@Dirtier sass isn't a framework lol
it's a pre-processor
Evan W
@Dirtier
Oct 19 2016 21:06
It's still a framework
lol
JD Tadlock
@jdtdesigns
Oct 19 2016 21:06
it's the programmer's css
not a framework at all
Evan W
@Dirtier
Oct 19 2016 21:06
framework is a very vague term
Look on their website lol they even call themselves a framework
Jason Luboff
@JLuboff
Oct 19 2016 21:07
No, it compiles common CSS into groups
(very broad way of stating it)
JD Tadlock
@jdtdesigns
Oct 19 2016 21:07
'Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.'
Evan W
@Dirtier
Oct 19 2016 21:07
A framework can be anything from a library, to a collection of libraries, to having functions and what-not
JD Tadlock
@jdtdesigns
Oct 19 2016 21:07
not a framework
JD Tadlock
@jdtdesigns
Oct 19 2016 21:09
it's not a library either lol
Evan W
@Dirtier
Oct 19 2016 21:09
I wouldnt consider bootstrap a framework either
but it says it is too
Jason Luboff
@JLuboff
Oct 19 2016 21:09
Bootstrap is definitely a framework. Its a structure of html/css/javascript
Evan W
@Dirtier
Oct 19 2016 21:10
'A framework can be everything you use in application development. It can be a library, a collection of many libraries, a collection of scripts, or any piece of software you need to create your application. Framework is just a very vague term.'
and this is from wikipedia 'A software framework is a re-usable design for a software system (or subsystem). A software framework may include support programs, code libraries, a scripting language, or other software to help develop and glue together the different components of a software project. Various parts of the framework may be exposed through an API.'
JD Tadlock
@jdtdesigns
Oct 19 2016 21:10
frameworks are code created for you that you use instead of vanilla
a pre-processor is commands/interface that take code and functionally change it
Evan W
@Dirtier
Oct 19 2016 21:14
idk what you said sounds exactly like a library too lol, you use different syntax, that matches up against essentially a giant object and refers back a block of code
JD Tadlock
@jdtdesigns
Oct 19 2016 21:16
library is a usually a list of functions for use that make things easier
Evan W
@Dirtier
Oct 19 2016 21:17
idk how sass cant be a framework then though
bc it certainly isnt a library
it has loops and functions
idk just everything I read when looking up sass vs less described them as frameworks
JD Tadlock
@jdtdesigns
Oct 19 2016 21:19
This message was deleted
this doesn't exist in css
@mixin size($point) {
  @if ($point == small) {
    width: 300px;
   }
}
that is an example of a pre-processor
that has it's own functionality that doesn't exist in the vanilla code
Evan W
@Dirtier
Oct 19 2016 21:20
I know what a pre-processor is, I'm saying it does that by being a framework
JD Tadlock
@jdtdesigns
Oct 19 2016 21:21
framework uses code that exists
Evan W
@Dirtier
Oct 19 2016 21:21
it has a script that analyzes that and then adds the appropriate css
JD Tadlock
@jdtdesigns
Oct 19 2016 21:21
and just manipulates it
it doesn't have it's own language
Evan W
@Dirtier
Oct 19 2016 21:21
like in sass loops, it goes through and makes those css statements
wdu mean
JD Tadlock
@jdtdesigns
Oct 19 2016 21:21
correct but the code to make those loops 'does not' exist in css
Evan W
@Dirtier
Oct 19 2016 21:22
It does though, Sass uses Ruby
JD Tadlock
@jdtdesigns
Oct 19 2016 21:22
not what sass is built, on
what css is built on
Evan W
@Dirtier
Oct 19 2016 21:23
idk I guess, I think its just pretty subjective, thats why you see different definitions like everywhere
JD Tadlock
@jdtdesigns
Oct 19 2016 21:23
it makes sense if you stop trying to deny the obvious lol
Evan W
@Dirtier
Oct 19 2016 21:24
Lol did you read anything I posted?
JD Tadlock
@jdtdesigns
Oct 19 2016 21:24
framework = vanilla code written in a way to do things for you
Evan W
@Dirtier
Oct 19 2016 21:24
It might make sense to you because you already have your mind made up
JD Tadlock
@jdtdesigns
Oct 19 2016 21:24
pre-processor = new programming made to do things for a certain language
Dennis Onder
@ShadowpathHD
Oct 19 2016 21:24
http://codepen.io/shadowpath/pen/bwQRka?editors=1100 any tips to make this more stylish,any tips appretiated <3
JD Tadlock
@jdtdesigns
Oct 19 2016 21:24
library = list of helper functions
i've dealt with a lot of things over 8 years, so i understand the difference due to me using every one of those types @Dirtier
Evan W
@Dirtier
Oct 19 2016 21:26
Ok but pre-processors aren't in one of their own categories
kat-mag
@kat-mag
Oct 19 2016 21:26
@ShadowpathHD your paragraph looks a bit squished
Evan W
@Dirtier
Oct 19 2016 21:27
like
JD Tadlock
@jdtdesigns
Oct 19 2016 21:27
@Dirtier how so?
Evan W
@Dirtier
Oct 19 2016 21:27
frameworks can be written using preprocessors
kat-mag
@kat-mag
Oct 19 2016 21:27
Geeez. Sass is an extension of CSS. Not a new language, not a lib, not a framework
Dennis Onder
@ShadowpathHD
Oct 19 2016 21:27
@kat-mag did that on purpose,will probaly give it some more wiggle room
kat-mag
@kat-mag
Oct 19 2016 21:28
If you're talking Sass - call Compass a framework.
Evan W
@Dirtier
Oct 19 2016 21:31
Idk the whole damn thing is confusing. Bootstrap calls itself a framework, most people say it isnt. Fuck it
kat-mag
@kat-mag
Oct 19 2016 21:33
@Dirtier Technically it is a framework :D Makes you use it's own classes & functions in a specific way to achieve specific effect... Doesn't really let you do what you want. Though you can override some of it's behaviour.
Evan W
@Dirtier
Oct 19 2016 21:35
From what I understand, most of it is just helper stuff like it's a library. The only parts that use functions and what-not are the optional parts. You can also only use different, small pieces of Bootstrap. Whereas with normal frameworks, you can't do that
kat-mag
@kat-mag
Oct 19 2016 21:35
Hmmm.
AngularJS is a framework. You can use it's core and write the rest in vanilla JS (with slight modifications) xD So you know... Hard to tell these days :D
Evan W
@Dirtier
Oct 19 2016 21:38
Yea but you have to include the entire angular file, right?
But with bootstrap you can just include individual pieces of it if you want
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 21:39

http://codepen.io/oshikurou/full/amjvBd/

i want thoughts on my "SHOW THE LOCAL WEATHER" project :) opinions and rate it 0-10 :)

Ivan Pryymak
@primchuk
Oct 19 2016 21:40

Hi guys! I made this Tribute Page:
https://codepen.io/primchuk/pen/YGRAWj

and i have several questions. Could anybody help me?

I wonder how can I make 'thumbnail' and 'image' fit better, i mean, if you resize window to smaller, it fits perfectly. How can I do this to full-size window?
And another one: for keeping 'quote' in the middle I just used padding, which is bad(I think). How can I do this without padding?

I will be so grateful if somebody help me.

kat-mag
@kat-mag
Oct 19 2016 21:40
@Dirtier The parts being some fat css & js. Yeah, not really a choice.
@thodorisanta Hm, works. But it could be more fancy :D 7
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 21:42
@kat-mag i know. i was kinda lazy on the css to be honest :)
Evan W
@Dirtier
Oct 19 2016 21:43
Idk I'm just saying I don't think it's nearly as cut and dry as he was making it seem
If you look around theres a ton of wiggle room, and like no consensus whatsoever
kat-mag
@kat-mag
Oct 19 2016 21:43
@primchuk Don't use inline styles. That's why you got CSS tab right there.
@primchuk I can't look over your code like that.
@Dirtier Well, he was kinda right tho. I mean with definitions and all ;D
Jason Luboff
@JLuboff
Oct 19 2016 21:49
@thodorisanta For some reason it just says " ,US" I'm guessing its supposed to say my city?
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 21:50
@JLuboff yeah i dont know the exact problem with that...it works on some cities but not it others...and i dont know why
kat-mag
@kat-mag
Oct 19 2016 21:51
@JLuboff It displays correctly for me, so it might be ISP's fault? Or API's.
Jason Luboff
@JLuboff
Oct 19 2016 21:51
@thodorisanta Ah...its due to the IP API you're using...it doesn't list a city
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 21:52
@JLuboff it list city in me and in a couple of my friends in another city. but not in all of them. so what could be the problem?
Jason Luboff
@JLuboff
Oct 19 2016 21:53
@thodorisanta The IP based API can't get my city for some reason. When I built my weather app I was using an IP API at first, but didn't like it due to giving the wrong city or if on mobile, it would give a completely different state
Ivan Pryymak
@primchuk
Oct 19 2016 21:54
@kat-mag I changed it, could you check it again?
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 21:55
@JLuboff so what do you suggest? what should i do differently? by the way the same problem appears in the example project given by freeCodeCamp
Jason Luboff
@JLuboff
Oct 19 2016 21:56
@thodorisanta You're correct, it does haha. I used Geolocator and then used https so it would work cross browser (required using a proxy for the api)
kat-mag
@kat-mag
Oct 19 2016 21:58
@primchuk Yeah. You can set width on your quote, and just use text-center, so you don't have to do that padding trick.
Evan W
@Dirtier
Oct 19 2016 21:59
@thodorisanta You can use geoplugin
Worked well for me, can get city, latitude and longitude, whatever
kat-mag
@kat-mag
Oct 19 2016 22:01
@primchuk setting a width on your image may let you fit it in your panel as well. Height will adjust itself
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 22:01
@Dirtier i just have to put the script and then just call the function for the city or the one i want? is it that simple?
Evan W
@Dirtier
Oct 19 2016 22:02
Yep
That simple
geoplugin_city() or geoplugin_latitude()/whatever you need
kat-mag
@kat-mag
Oct 19 2016 22:03
@thodorisanta It will point to someone's ISP anyways. I'm always getting different cities ;3
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 22:03
@kat-mag haha why should i use it then?
Evan W
@Dirtier
Oct 19 2016 22:04
What will?
geoplugin gives me the exact same lat/long as navigator
even on mobile
It doesn't just use IP address, it uses the same algorithm for GPS
Spyrantis Theodoros
@thodorisanta
Oct 19 2016 22:06
@Dirtier okay i will give it a try tommorow then cause its kinda late in here (greece) :) good night see ya tomorrow
kat-mag
@kat-mag
Oct 19 2016 22:06
Well. It's gonna use 3g/4g/lts whatever on mobile.
so location might be more accurate
@thodorisanta :wave:
Evan W
@Dirtier
Oct 19 2016 22:09
phones use actual GPS, they just dont receive directly from the satellite
they send it to the provider over the internet like you said and then it sends back the info from the actual satellites
kat-mag
@kat-mag
Oct 19 2016 22:10
If you enable your gps, that is.
</