These are chat archives for FreeCodeCamp/HelpFrontEnd

16th
Sep 2016
greg
@wearenotgroot
Sep 16 2016 00:00
@AshriSoft it's not working btw, if you console.log(data) ---> gives you bad request
Walid Ashri
@walidashri
Sep 16 2016 00:02
@wearenotgroot bad request
greg
@wearenotgroot
Sep 16 2016 00:02
yep
Sara Seiser
@Pandafairies
Sep 16 2016 00:02
hey everyone, i'm trying to do my portfolio and I can't figure out how to get my menu buttons to scroll to the appropriate area when its clicked, should I be using jquery?
greg
@wearenotgroot
Sep 16 2016 00:03
@Pandafairies did you point the links to the id's of the sections in question?
Sara Seiser
@Pandafairies
Sep 16 2016 00:04
ill try that
greg
@wearenotgroot
Sep 16 2016 00:05
@Pandafairies oh you are using buttons. you can just use <a> tags and just style them however you want
Sara Seiser
@Pandafairies
Sep 16 2016 00:07
ok thank you, I forgot about <a> tags
greg
@wearenotgroot
Sep 16 2016 00:07
@Pandafairies also you can look at bootstrap nav setup ------>http://getbootstrap.com/components/
Pedro Gomes
@pedrouid
Sep 16 2016 00:10
This one

function getIndexToIns(arr, num) {

  arr.sort(function(a,b){
    return a-b;
  });
  var next = arr.filter(function(value){
    return value > num;
  }).join("");

  return arr.indexOf(next);
}

getIndexToIns([60, 40], 50);
It's returning -1
I have checked arr and next before the return and they are correct
And if I type the number inside indexOf() it returns 1 of course
greg
@wearenotgroot
Sep 16 2016 00:12
@gomesphoto well next will become a string after the join()
try
return arr.indexOf(Number(next)); //<-------Number(..) will turn it back to a number
vínαч puppαl
@vinaypuppal
Sep 16 2016 00:13
This message was deleted
Pedro Gomes
@pedrouid
Sep 16 2016 00:14
Got it! Thanks @wearenotgroot
CamperBot
@camperbot
Sep 16 2016 00:14
gomesphoto sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1702 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Sep 16 2016 00:14
@vinaypuppal cool
vínαч puppαl
@vinaypuppal
Sep 16 2016 00:15
This message was deleted
greg
@wearenotgroot
Sep 16 2016 00:15
@vinaypuppal goin to test it
@vinaypuppal but right now my bed is calling me :smile:
vínαч puppαl
@vinaypuppal
Sep 16 2016 00:16
@wearenotgroot @TylerMoeller do you guys still have problem with headers as i used axios for my AJAX req did not try with JQuery
@wearenotgroot oh okay :smile:
greg
@wearenotgroot
Sep 16 2016 00:16
going to catch some :zzz:
GL and HAppy Coding :sparkles: :wave:
Tyler Moeller
@TylerMoeller
Sep 16 2016 00:20
@vinaypuppal it works fine for me - headers with ajax or a client_id Param on the end of the URL when using getJSON
Just can't get the key they put in that help article to work consistently.
vínαч puppαl
@vinaypuppal
Sep 16 2016 00:21
@TylerMoeller oh okay
Sara Seiser
@Pandafairies
Sep 16 2016 00:22
thanks for the help guys :)
Dillon Estrada
@dillonestrada
Sep 16 2016 00:32

Hey everyone, sorry to post my question again, but I only got one response last time and it didn't help.

Can someone help me with the Local Weather app? I've got the API's to work, but only by naming the functions and calling them through the console. Calling them in the code doesn't work, and just having them run with the rest of the code also doesn't work. Only naming them and calling them in the console. Any reason why that would be? http://codepen.io/dillonestrada/pen/kkrvkk

If you run getWeather() and getName() in the console it'll work. If you take those functions out of the variables it won't do anything.
getCity()* not getName()
Also, I don't have the icon CSS set up correctly yet, so it shouldn't be working unless the weather happens to be 'slightly-cloudy-day'
Tyler Moeller
@TylerMoeller
Sep 16 2016 00:40
@dillonestrada Your call to the google maps api needs to use HTTPS. Also, your weather function doesn't know about your lat, lon variables. Pass those to your weather function so you can build the correct URL with the latitude and longitude.
vínαч puppαl
@vinaypuppal
Sep 16 2016 00:43
@dillonestrada Do these things it will work
  • move getWeather(); and getCity(); calls inside callback success function and
  • move getWeather and getCityfunction definitions to top of your code since function expressions wont get hoisted atleast place them top of success function that way there are accessible inside it
  • and finally as @TylerMoeller suggested use https for google API request
@dillonestrada and also load your pen over https
Dillon Estrada
@dillonestrada
Sep 16 2016 00:50
Awesome thanks for all the help! I got it to work and I can finally move on. :+1: I will switch everything over to https
gs-developer
@gs-developer
Sep 16 2016 01:54
Hi, Can someone help me please with a float property
There is a div element containing a p element. So If i define a class with float-left and assign it to the div element. what will happen.
will zhou
@zhoulinux
Sep 16 2016 02:10
Can someone help me with twitch tv api
$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(data) {
console.log(data);
});
but there is an error message"No client id specified"
vínαч puppαl
@vinaypuppal
Sep 16 2016 02:15
@zhoulinux As said in error message you require client-id to access API check below link https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.fy1yyynr4
will zhou
@zhoulinux
Sep 16 2016 02:35
@vinaypuppal Thank you, I've got one cliend-id and the code works.
CamperBot
@camperbot
Sep 16 2016 02:35
zhoulinux sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 526 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
LPR-309
@LPR-309
Sep 16 2016 02:43
Hey everyone. I've run into a problem during coding my Twitch.tv app. I'm trying to use promises to log data from an .ajaxcall in a for loop, but I can't figure out how to say "when all these promises are resolved (or failed), write the results to my page". This is a snippet from what I have so far. Any help is appreciated.
```
var $searchInput = $("#searchInput");
    var $searchButton = $("#searchButton");
    var $resultsBox = $("#resultsBox");

    var twitchArr = ["freecodecamp", "ESL_SC2", "OgamingSC2", "brunofin", "comster404"];
    var promiseArr = [];
    var url = "";
    var results = {
        online: "",
        offline: "",
        defunct: "",
    };

    for (var i = 0; i < twitchArr.length; i++) {
        var d = $.ajax({
            method: "GET",
            dataType: "json",
            url: "https://api.twitch.tv/kraken/streams/" + twitchArr[i],
            headers: {
                "Accept": "application/vnd.twitchtv.v3+json",
                "Client-ID": blankedthisout
            },
        })
            .done(function(data) {

            })
            .fail(function(data) {
                buildResults(twitchArr[i], "twitch_logo.png", "temp", "defunct");
            });

            $.when(d).done(function(v) {
                promiseArr[i] = v;
            });
    }
    $resultsBox.html(results.defunct);
buiphuking
@buiphuking
Sep 16 2016 02:52
any advice for markdown previewer guys, i have no idea where to start, anybody ever use mark.js ?
vínαч puppαl
@vinaypuppal
Sep 16 2016 02:58
@LPR-309 You can use https://api.jquery.com/jquery.when/ this i think to wait till all promises resolve
@buiphuking i used https://github.com/chjj/marked do you need any help with it??
LPR-309
@LPR-309
Sep 16 2016 03:02
@vinaypuppal I'm thinking that too, but I checked the docs, and it says that $.when fires likes this "The method will resolve its master Deferred as soon as all the Deferreds resolve, or reject the master Deferred as soon as one of the Deferreds is rejected." Right now I'm trying to populate an array with deferreds (promiseArr), but unless I set some sort of interval to allow the ajax calls to complete, promiseArr is empty on page load - even though I have an assignment to its index inside a $.when clause. I'm really stumped. Should I be using let inside the loop instead?
vínαч puppαl
@vinaypuppal
Sep 16 2016 03:06
@LPR-309 what i would do is generate promises array and pass it to $.when . Is this what you said above??
@LPR-309 If you need more flexibility try https://github.com/mzabriskie/axios
it has axios.all([promise1, promise2]) which solves your problem. I used axios for my twitch project
LPR-309
@LPR-309
Sep 16 2016 03:08
@vinaypuppal Thank you, I'll check that out
CamperBot
@camperbot
Sep 16 2016 03:08
lpr-309 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 527 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Rodolfo
@cryptshell
Sep 16 2016 03:26
Anybody know how can I perfectly center a position:absolute <div> in the middle of the page(like nested inside another <div>, i.e the background) so it stays perfectly centered even if you resize the browser without using bootstrap? Plan HTML + CSS3?
vínαч puppαl
@vinaypuppal
Sep 16 2016 03:32

@cryptshell try this assume we have a div with class .parent and a div with with class .child inside it

body{
  margin: 0;
}
.parent{
  min-height: 100vh;
  position: relative;
  background: #000;
}

.child{
  width: 100px;
  height: 100px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

another way using flexbox

body{
  margin: 0;
}
.parent{
  min-height: 100vh;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child{
  width: 100px;
  height: 100px;
  background: #fff;
}
Chad Powell
@cjpowellaz
Sep 16 2016 03:41
working on the Random Quote machine, would someone mind looking at my code? <a href="http://codepen.io/cjpowell/pen/VKwmxz">Here</a>
it doesn't pull a quote, what would be my next step in the API request?
vínαч puppαl
@vinaypuppal
Sep 16 2016 03:45
@cjpowellaz Syntax of your ajax req is incorrect and you can use $.getJSON() instead of $.get() -> http://api.jquery.com/jquery.getjson/
as you will get parsed JSON with $.getJSON()
$.getJSON( "API_URL", function( data ) {
 console.log(data);
});
Chad Powell
@cjpowellaz
Sep 16 2016 03:47
so I have been reading a lot about this from different places (keeping it free!) what is the difference between $.getJSON(), $.get(), and using $.ajax()?
vínαч puppαl
@vinaypuppal
Sep 16 2016 03:49
@cjpowellaz $.gettJSON() function is a shorthand Ajax function (internally use $.get())and it sets Request type to GET and data Type to json by default and no need to set them manually
Chad Powell
@cjpowellaz
Sep 16 2016 03:52
is that what is meant by having to "process" the response from the server? I read that HTML is automatically used but other forms like JSON or XML need processed first?
vínαч puppαl
@vinaypuppal
Sep 16 2016 03:55
@cjpowellaz yes they need to be processed first.
Chad Powell
@cjpowellaz
Sep 16 2016 03:56
ok, thank you @vinaypuppal , I am not sure why doing APIs seems so hard compared to JavaScript.
CamperBot
@camperbot
Sep 16 2016 03:56
:cookie: 528 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
cjpowellaz sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
vínαч puppαl
@vinaypuppal
Sep 16 2016 03:56
@cjpowellaz if u need more knowledge about AJAX do this course over udacity it will help a lot while doing these projects
https://www.udacity.com/course/intro-to-ajax--ud110
Chad Powell
@cjpowellaz
Sep 16 2016 03:57
will look into that
looks helpful
vínαч puppαl
@vinaypuppal
Sep 16 2016 03:58
@cjpowellaz yes it teaches well about AJAX, how to work with few API's, JSON, JSONP etc..
Rodolfo
@cryptshell
Sep 16 2016 04:01
@vinaypuppal seems to have worked. Didn't try the flexbox method because I haven't gotten into flexbox yet, trying to master HTML+CSS3 first. Thanks a lot!
CamperBot
@camperbot
Sep 16 2016 04:01
cryptshell sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 16 2016 04:03
@cryptshell oh okay checkout flexbox also it makes life easier while making layouts
Rodolfo
@cryptshell
Sep 16 2016 04:05
@vinaypuppal will do, anything that makes my life easier 😝
@vinaypuppal thanks
CamperBot
@camperbot
Sep 16 2016 04:05
cryptshell sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: cryptshell already gave vinaypuppal points
labeebahmad414
@labeebahmad414
Sep 16 2016 04:13

HTML
<p>abc</p>

CSS
p{
background: green;
animation:animateP 1s linear;
}

@keyframes animateP{
  0%{
    display:block;
  }
  100%{
    display:none;
  } 
}

Though this MDN docs says that display is animatable.

Still why am I unable to animate display:none with animation property?
vínαч puppαl
@vinaypuppal
Sep 16 2016 04:18
@labeebahmad414 as far as i know display property in css is not animatable
@labeebahmad414 can you provide link which says its animatable??
Ctrl + F and write animatable you would find it.
@vinaypuppal Ctrl + F and write animatable you would find it.
vínαч puppαl
@vinaypuppal
Sep 16 2016 04:22
@labeebahmad414 your are reading SVG display property docs
here is the docs for CSS display property
https://developer.mozilla.org/en-US/docs/Web/CSS/display
@labeebahmad414 CSS display property is not animatable as you see in docs
labeebahmad414
@labeebahmad414
Sep 16 2016 04:23
@vinaypuppal Thanks
CamperBot
@camperbot
Sep 16 2016 04:23
labeebahmad414 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 530 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Matt-White12
@Matt-White12
Sep 16 2016 05:33
hey guys, is anyone else having an issue getting current location in the latest version of chrome? When i call getCurrentPosition() it tells me it doesnt work on insecure origins
Im working on the weather app project
kirbyedy
@kirbyedy
Sep 16 2016 05:42
make sure your codepen link starts with https://
Matt-White12
@Matt-White12
Sep 16 2016 05:43
seriously aha thanks
kirbyedy
@kirbyedy
Sep 16 2016 05:43
aha seriously :)
Randy Goldsmith
@Dueldrawer8
Sep 16 2016 06:17
could anyone find out why when i click on the minus sign under break session it only decreases by 1 min and when i click again it wont go down another 1min?
http://codepen.io/duel_drawer8/pen/yYwwBj?editors=1111
Sorin Ruse
@sorinr
Sep 16 2016 06:42
@Dueldrawer8 its because you have: var breakSessionTime = 300; inside the click event and every time you click it makes it 300 again. the var should be outside (global)
Pattani Hiren
@hirenpattani
Sep 16 2016 06:53
how to embed youtube playlist with side list?
ZZPot
@ZZPot
Sep 16 2016 07:34
how to set size of tbody as size of table?
Islam Ibakaev
@dagman
Sep 16 2016 07:52
Have recently scaffolded project using mern-starter(in educational purposes).
After i get familiar with it i tried to delete test project but got an issue.
The source file name(s) are larger than is supported by files system. Try moving to a location which has a shorter path name, or try renaming to shorter name(s) before attempting thid operation.
And now i can't delete this test project. Can you guys figure this out please?
Sorin Ruse
@sorinr
Sep 16 2016 08:01
@Finn199587 :+1:
Irakli Gikashvili
@Vikingiii
Sep 16 2016 09:07
Hello Guys, How can i make the menu for my header as a horizontal list?
Abdelaziz Mokhnache
@Abdelaziz18003
Sep 16 2016 09:14
I have got a Client-ID from twitch tv Api .. but it still does not work .. does some one know why ?
Brian Liu
@bliu9883
Sep 16 2016 09:20
does anyone know why my weather variable in getJSON isn't getting logged? https://codepen.io/bliu9883/pen/bwpLrp?editors=1012
vínαч puppαl
@vinaypuppal
Sep 16 2016 09:28
@bliu9883 in URL you need protocol https:// you missed that
and openweather API wont support https:// but geolocation works only on https://
so go through this discussion FreeCodeCamp/FreeCodeCamp#9145 you will find some alternatives to use
grantknaver
@grantknaver
Sep 16 2016 10:33
Everytime I use a blockquote this weird thing pops up on the left
It looks like a greyed out cursor mark. Does anyone have any ideas on how to get rid of it?
Richard Smith
@r1chard5mith
Sep 16 2016 10:45
@grantknaver I just tried adding a css reset snippet to your css and it fixed the problem - i grabbed it from here http://meyerweb.com/eric/tools/css/reset/
vínαч puppαl
@vinaypuppal
Sep 16 2016 10:46
@grantknaver its a left border on blockquote to remove that use
blockquote{
border-left: none;
}
Richard Smith
@r1chard5mith
Sep 16 2016 10:47
that's a better solution :)
grantknaver
@grantknaver
Sep 16 2016 10:48
thank you
you b awesome!!!!
Wilson Oberholzer
@Wilson-Oberholzer
Sep 16 2016 11:37
For the personal portfolio page should I make my "contact me" forms actually submittable?
Ken Haduch
@khaduch
Sep 16 2016 11:39
@Wilson-Oberholzer - as far as I know, it's hard to do that without a webserver to handle the "backend" part of actually sending the mail or handling the submission of the form - I think that putting an email address is important at forst, perhaps when we get to the full-stack development, the form can be submitted? Perhaps others have more information... Does the example project have the contact form?
Wilson Oberholzer
@Wilson-Oberholzer
Sep 16 2016 11:40
I think for the time being I'll just have them there for appearances and maybe later add functionality. Maybe have the submit button just clear all forms?
vínαч puppαl
@vinaypuppal
Sep 16 2016 11:47
@Wilson-Oberholzer for contact form you can use this service http://formspree.io
Wilson Oberholzer
@Wilson-Oberholzer
Sep 16 2016 11:49
Thanks @vinaypuppal , I'll have to give that a try
CamperBot
@camperbot
Sep 16 2016 11:49
wilson-oberholzer sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 531 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Joris Labie
@labiej
Sep 16 2016 12:12
@Wilson-Oberholzer @vinaypuppal I would advise against that, it'll allow spammers to find your email address way too easy, prepare for a lot of spam if you use it
vínαч puppαl
@vinaypuppal
Sep 16 2016 12:14
@labiej yeah thats a disadvantage of it but if you really want a contact form to be submitted and stored then you need to setup backend for it
Joris Labie
@labiej
Sep 16 2016 12:15
I know, I would say that's the better option anyway
vínαч puppαl
@vinaypuppal
Sep 16 2016 12:18
@labiej but i use Cloudflare for my domian i have my email in my about page but cloudflare just hides it for bots like this so if you use cloudflare like service then no problems to use http://formspree.io i think.
<p class="email"><strong>Email: </strong><a target="_blank" href="/cdn-cgi/l/email-protection#274a4267514e49465e57525757464b0944484a"><span class="__cf_email__" data-cfemail="6f020a2f1906010e161f1a1f1f0e03410c0002">[email&#160;protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a></p>
vínαч puppαl
@vinaypuppal
Sep 16 2016 12:28
@labiej and you can also obfuscate an e-mail address in java script like above and use it to keep you safe from spam bots
honesty1997
@Honesty1997
Sep 16 2016 12:49
Hey Guys Have some problems here.
https://codepen.io/Honesty1997/pen/xEVEZX
I want it to search info as long as I click enter or the button.
$('#search_bloc').keypress(function(e) {
if (e.keyCode === 13) search_info
});
this is the line of code i wrote to trigger the function
but it didn't work.Just try to figure out what the problem is
vínαч puppαl
@vinaypuppal
Sep 16 2016 12:52
@Honesty1997 You just mentioned function name but you need to call it like below
if (e.keyCode === 13) search_info(); // <--
honesty1997
@Honesty1997
Sep 16 2016 12:53
Oh thanks
Why the click function don't need the ()?
or it just instantly execute the function i mentioned in the quotes.
vínαч puppαl
@vinaypuppal
Sep 16 2016 12:55
@Honesty1997 because $('button').click(search_info); expecting a function as click handler and it will execute it when anyone clicks the button
@Honesty1997 but in before case you manually want to execute when keypress is enter key so you need to call function manually
honesty1997
@Honesty1997
Sep 16 2016 12:57
@vinaypuppal Thanks a lot! DIdn't know that before!
CamperBot
@camperbot
Sep 16 2016 12:57
honesty1997 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 532 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
honesty1997
@Honesty1997
Sep 16 2016 12:57
Try to remember that next time.
It is still kind of hard to me.
vínαч puppαl
@vinaypuppal
Sep 16 2016 13:01
@Honesty1997 Don't worry you will learn more stuff like these as you do projects that's what FreeCodeCamp is about. :smile:
Alex
@delk0
Sep 16 2016 13:39
Anyone knows how to accomplish this?
Im using css scaling but dont know how to make it fullscreen
vínαч puppαl
@vinaypuppal
Sep 16 2016 14:00
Walid Ashri
@walidashri
Sep 16 2016 14:20
@vinaypuppal thanks :)
CamperBot
@camperbot
Sep 16 2016 14:20
ashrisoft sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 533 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Alex
@delk0
Sep 16 2016 14:33
@vinaypuppal pretty good, thanks :smile:
CamperBot
@camperbot
Sep 16 2016 14:33
delk0 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 534 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Dan
@dcgoings
Sep 16 2016 14:36
question, how can i make a fontawesome icon fully clickable?
wrapping the div in an anchor isn't working. there's still an unselectable area of the icon.
Sorin Ruse
@sorinr
Sep 16 2016 14:39
@dcgoings just use: <a href="your url"><i class="fa fa-xxxx class"></i></a>
Dan
@dcgoings
Sep 16 2016 14:40
yes, that's what i've tried already.
because it's the globe icon, there's a portion that is not selectable.
Sorin Ruse
@sorinr
Sep 16 2016 14:44
@dcgoings its because you are nesting wrongly too many elements in an <a> tag. thats not the way to do it
Dan
@dcgoings
Sep 16 2016 14:45
...
                <div class="row">
                    <div class="col-xs-12">
                        <div>
                            <a href="https://en.wikipedia.org/wiki/Special:Random"><i class="fa fa-globe fa-5x" aria-hidden="true"> </i></a>
                        </div>
                    </div>
                </div>
how is that nesting wrongly?
in my original link, yeah, i had the anchor surrounding several more divs. but before i came here, i tried it every way i could, including wrapping no divs like i just posted. still the same issue.
Sorin Ruse
@sorinr
Sep 16 2016 14:47
@dcgoings the above posted link was not like that
Dan
@dcgoings
Sep 16 2016 14:47
understood, i just clarified.
Toni Shortsleeve
@KoniKodes
Sep 16 2016 14:47
@dcgoings I don't think you need a row and col. Try to take out those two and make other div as class pull-center, and put hfref before that div
Dan
@dcgoings
Sep 16 2016 14:47
but i already tried it that way.
@KoniKodes k sec
@KoniKodes like this?
        <section id="random">
            <a href="https://en.wikipedia.org/wiki/Special:Random">
                <div class="pull-center">
                    <i class="fa fa-globe fa-5x" aria-hidden="true"> </i>
                </div>
            </a>
        </section>
still the same issue.
Toni Shortsleeve
@KoniKodes
Sep 16 2016 14:50
@dcgoings Rats, I hoped that would work. Give me a moment.
Dan
@dcgoings
Sep 16 2016 14:51
it's like.. only the bottom half of the icon is selectable as an anchor.
Sorin Ruse
@sorinr
Sep 16 2016 14:51
@dcgoings why do you need <div class="pull-center"> inside of an<a> yag?
Dan
@dcgoings
Sep 16 2016 14:51
@sorinr it was @KoniKodes suggestion
Toni Shortsleeve
@KoniKodes
Sep 16 2016 14:52
@sorinr @dcgoings Guilty. He had a separate row and col-12 so it could be centered, it was a replacement for that. Would the icon work wrapped inside a button, and that button attached to the href?
Sorin Ruse
@sorinr
Sep 16 2016 14:53
@dcgoings just get rid of that divs and put class="pull-center" to your section id="random" if you want the content centered
Dan
@dcgoings
Sep 16 2016 14:54
everything is centered fine. the icon is just not 100% clickable
it's literally only the bottom 1/3 of the icon that i can click
Toni Shortsleeve
@KoniKodes
Sep 16 2016 14:54
@sorinr I forgot we can have id and class in same section.
vínαч puppαl
@vinaypuppal
Sep 16 2016 14:57
This message was deleted
Marc Ruemekorf
@MarcRuemekorf
Sep 16 2016 14:58
Hey guys hope I'm in the right room for this but I have a small issue with a Wordpress website I'm building. I've got a custom logo set which has a link back to the homepage. This link however is acting like margin-bottom. For some reason the anchor tag (which holds the image of the logo) has a height. Is there a way to tell it to behave?
Dan
@dcgoings
Sep 16 2016 14:58
nevermind
i figured it out
my css was messing it up
Toni Shortsleeve
@KoniKodes
Sep 16 2016 14:58
@dcgoings Glad you fixed it :-)
Marc Ruemekorf
@MarcRuemekorf
Sep 16 2016 14:59
I should note that the anchor tag doesn't actually have a height and giving it a height: 0; doesn't fix it.
Dan
@dcgoings
Sep 16 2016 14:59
so i had this:
#random, #search {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  height: 50px;
}
in order to make it vertically and horizontally centered on the page
and now i dont know how to vertically center it on the page again
fml
Marc Ruemekorf
@MarcRuemekorf
Sep 16 2016 15:00
top: 50%;
vínαч puppαl
@vinaypuppal
Sep 16 2016 15:01
Dan
@dcgoings
Sep 16 2016 15:01
oh, got it
fml
Sorin Ruse
@sorinr
Sep 16 2016 15:01
Dan
@dcgoings
Sep 16 2016 15:02
all i had to do was change it to the icon
maybe not. gdi.
Toni Shortsleeve
@KoniKodes
Sep 16 2016 15:05
@dcgoings centering the icon was what you wanted. Does the full icon link now?
Dan
@dcgoings
Sep 16 2016 15:05
@KoniKodes im messing with it but this is what it's doing now
it is clickable through the full width of the page
Toni Shortsleeve
@KoniKodes
Sep 16 2016 15:08
@dcgoings Try to put a width on Random.
or the icon
Dan
@dcgoings
Sep 16 2016 15:10
how does this work for you?
Toni Shortsleeve
@KoniKodes
Sep 16 2016 15:11
@dcgoings Very good! I only get the pointer for the icon, and I get the pointer for entire icon.
Dan
@dcgoings
Sep 16 2016 15:11
great! finally
i guess i just needed a separate div.
Toni Shortsleeve
@KoniKodes
Sep 16 2016 15:11
@dcgoings Congrats on solving it :-)
Dan
@dcgoings
Sep 16 2016 15:11
thanks @KoniKodes @sorinr @vinaypuppal
CamperBot
@camperbot
Sep 16 2016 15:11
dcgoings sends brownie points to @konikodes and @sorinr and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 535 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:cookie: 707 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 369 | @konikodes |http://www.freecodecamp.com/konikodes
Toni Shortsleeve
@KoniKodes
Sep 16 2016 15:12
@dcgoings Thank you for the brownie
CamperBot
@camperbot
Sep 16 2016 15:12
konikodes sends brownie points to @dcgoings :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @dcgoings |http://www.freecodecamp.com/dcgoings
Sorin Ruse
@sorinr
Sep 16 2016 15:30
@dcgoings welcome. you just need to add to your <a> for random quote: target="_blank" to have the quote opened into another tab
Manase Neil
@nmanase
Sep 16 2016 15:59
Hey Guys Have some problems here.
Jason Luboff
@JLuboff
Sep 16 2016 15:59
Lets hear them
the click doesn't reload a new quote
idk if i need to change the API.
Jason Luboff
@JLuboff
Sep 16 2016 16:06
@nmanase Looking at the console (I added a console.log(a) in your API call), its just getting the same quote each time, but its technically working
@nmanase Ok, I think I'm onto something here
Manase Neil
@nmanase
Sep 16 2016 16:07
yeah the quote doesn't change :/
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:08
@JLuboff @nmanase no if you open same link in browser you get new quote as you refresh everytime http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
Jason Luboff
@JLuboff
Sep 16 2016 16:08
in your api url, "...&filter[post_per_page]=#" Thats set to 1, which is only getting one quote at a time
If I change it to 5, I get 5 quotes (and it displays the first one), in that case, its an array
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:09
@JLuboff yes that's what he want get one new quote on every click i think
Jason Luboff
@JLuboff
Sep 16 2016 16:10
Its not receiving it as an array so shift isn't going to work
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:11
@nmanase dont use shift() to grab first item just use var post = a[0];
Manase Neil
@nmanase
Sep 16 2016 16:11
yes i got 1 quote with [posts_per_page]=1 then i grab it in post cause its an array. then i display.
oh i'll try
Jason Luboff
@JLuboff
Sep 16 2016 16:12
I'm thinking how you currently have it, you'd want the API call to load on page (with more quotes grabbed), and then have the click function within there to iterate through the array
Manase Neil
@nmanase
Sep 16 2016 16:14
yeah there is that solution where i create an array of quotes and a randomly iterate through them on click
but the API should work just like this as well. i don't know.
Jason Luboff
@JLuboff
Sep 16 2016 16:16
I didn't even use an API for my quote generator, I just made my own array of quotes heh...
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:16
@nmanase yes it works when using in browser address bar its returning a new quote everytime but with AJAX it just returning same quote everytime
Manase Neil
@nmanase
Sep 16 2016 16:17
yeah i guess i'll go with the array.
or i'll try another API
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:19
@nmanase if you want to try without API these are array of quotes you can use
https://gist.github.com/signed0/d70780518341e1396e11
Manase Neil
@nmanase
Sep 16 2016 16:19
oh! thanks i'll look into it.
i'm away for a bit guys thanks for the support!
Tyler Moeller
@TylerMoeller
Sep 16 2016 16:22
@nmanase Your code works fine if you change the callback to use a ?:
$(document).ready(function(){
  $('#newQuote').on('click', function(e){
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(a) {
        var post = a[0]; // The data is an array of posts. Grab the first one.
        $('#quote-title').html(post.content);
        $('#quote-content').html("-" + post.title);
    });
  });
});
^^ That's the second URL provided at: https://quotesondesign.com/api-v4-0/
Manase Neil
@nmanase
Sep 16 2016 16:24
OMG---thanks a bunch
i didn't see that little change! silly me
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:26
@TylerMoeller oh thats why i don't see new request in Network tab before. I was puzzled why its not working thanks understood now.
CamperBot
@camperbot
Sep 16 2016 16:26
vinaypuppal sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 840 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 16 2016 16:29
@vinaypuppal The other way to do it without a callback is to change the number of posts returned per page and choose a random one:
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=20", function(a) {
    var rand = Math.floor(Math.random() * a.length)
    var post = a[rand]; // The data is an array of posts. Grab the first one.
    $('#quote-title').html(post.content);
    $('#quote-content').html("-" + post.title);
  });
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:31
@TylerMoeller yeah i know that, but i was thinking why its not working as i cant see new request in Network tab for every button click. And why its only working for first button click?? And how does adding ? makes it work for subsequent clicks
@TylerMoeller i know adding callback in URL makes it JSONP request but i dont understand how ? makes a difference
Tyler Moeller
@TylerMoeller
Sep 16 2016 16:35
@vinaypuppal jquery converts that ? into a random number at the end of the URL. I think the browser is caching the API response, the random number prevents that. This also works without the callback:
$(document).ready(function(){
  $.ajaxSetup({ cache: false });
  $('#newQuote').on('click', function(e){
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(a) {
        var post = a[0]; // The data is an array of posts. Grab the first one.
        $('#quote-title').html(post.content);
        $('#quote-content').html("-" + post.title);
    });
  });
});
A big "IMHO" :)
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:37
@TylerMoeller oh okay got it thanks :smile:
CamperBot
@camperbot
Sep 16 2016 16:37
vinaypuppal sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: vinaypuppal already gave tylermoeller points
Naveen Raju Mudhunuri
@naveenrajum
Sep 16 2016 16:37
Hello world
CamperBot
@camperbot
Sep 16 2016 16:37

welcome to FreeCodeCamp @Naveencoder!

Joffrey Nolting
@Yovvel
Sep 16 2016 16:44
@Naveencoder welcome!
Naveen Raju Mudhunuri
@naveenrajum
Sep 16 2016 16:46
Thanks @Yovvel
CamperBot
@camperbot
Sep 16 2016 16:46
naveencoder sends brownie points to @yovvel :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @yovvel |http://www.freecodecamp.com/yovvel
Naveen Raju Mudhunuri
@naveenrajum
Sep 16 2016 16:47
I am very glad to be here @Yovvel
Joffrey Nolting
@Yovvel
Sep 16 2016 16:47
@Naveencoder good to hear! new to coding?
Naveen Raju Mudhunuri
@naveenrajum
Sep 16 2016 16:47
Yes @Yovvel
Freelancer and domainer
Past works
Joffrey Nolting
@Yovvel
Sep 16 2016 16:48
okay
well good luck :)
Manase Neil
@nmanase
Sep 16 2016 16:55
Thanks @TylerMoeller @vinaypuppal
CamperBot
@camperbot
Sep 16 2016 16:55
nmanase sends brownie points to @tylermoeller and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 536 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:cookie: 841 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Manase Neil
@nmanase
Sep 16 2016 16:56
thanks again guys!
Tyler Moeller
@TylerMoeller
Sep 16 2016 16:58
@nmanase Happy to help - we learned some new things about that API too :)
vínαч puppαl
@vinaypuppal
Sep 16 2016 16:58
@TylerMoeller @nmanase yeah me too learned few new things
Byron
@jbgcrugers
Sep 16 2016 17:12

hi ... i've stumbled at the first hurdle in Build a Personal Portfolio Webpage. Could someone tell me how to get the tabs in the header to be horizontal across the page? I googled and found <ul class="list-inline">, but menus are still listed vertically.

<div class ="container-fluid" <ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">thing 1</a></li>
<li><a href="#">thing 2</a></li>
<li><a href="#">thing 3</a></li>
</ul>
</div>

tommy
@tommygebru
Sep 16 2016 17:17
how to put an icon inside of an input ?
Screen Shot 2016-09-16 at 10.17.04 AM.png
U-ways
@U-ways
Sep 16 2016 17:20
@tommygebru You better off not doing so. Instead, you can create another <div> beside it as a small box with an icon inside!
@jbgcrugers Hello! Yeah that's a tough one!
Read about it here: CSS/HTML Nav bars
Example: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float
Byron
@jbgcrugers
Sep 16 2016 17:22
@U-ways THANKS
CamperBot
@camperbot
Sep 16 2016 17:22
jbgcrugers sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @u-ways |http://www.freecodecamp.com/u-ways
U-ways
@U-ways
Sep 16 2016 17:22
@jbgcrugers Keep in mind that secret is CSS; the display property. You can read about the display property more here: http://www.w3schools.com/cssref/pr_class_display.asp
tommy
@tommygebru
Sep 16 2016 17:22
thanks guys i have done some googling but nothing has come up as a definitive "how to"
Tyler Moeller
@TylerMoeller
Sep 16 2016 17:27
@tommygebru here's an answer: http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box
<div class="form-group has-feedback">
    <label class="control-label">Search</label>
    <input type="text" class="form-control" placeholder="Search" />
    <i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
Byron
@jbgcrugers
Sep 16 2016 17:28
@U-ways not sure what you mean there ... so i can do this by adding something to the CSS panel as opposed to HTML code in the top panel? (the 3 panels in codepen confuse me, not sure what to put where when)
U-ways
@U-ways
Sep 16 2016 17:30
@jbgcrugers I meant that using the CSS code is the one that is able to turn you navigation part horizontally, you can add CSS externally and internally. For example, inyour HTML you can add the <style></style> tag and add CSS inside it!
Byron
@jbgcrugers
Sep 16 2016 17:33
@U-ways got it ... thank you
CamperBot
@camperbot
Sep 16 2016 17:33
jbgcrugers sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:warning: jbgcrugers already gave u-ways points
Alex
@delk0
Sep 16 2016 17:35
anyone knows if i could achieve this effect with ONLY css?
tommy
@tommygebru
Sep 16 2016 17:37
look into animation @delk0
Its not perfect but I was able to do some effect here... what i am working on now
click on my submit button
@U-ways @TylerMoeller @jbgcrugers many thanks, i was able to solve it by having the parent div have a position of relative... and then give the child element a position of absolute :+1:
CamperBot
@camperbot
Sep 16 2016 17:39
tommygebru sends brownie points to @u-ways and @tylermoeller and @jbgcrugers :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for jbgcrugers
:cookie: 439 | @u-ways |http://www.freecodecamp.com/u-ways
:cookie: 842 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
tommy
@tommygebru
Sep 16 2016 17:44
@delk0 maybe something like change with transition property for speed and change in shape so give it a border-radius of 50%; then move on to giving it a width and height that is 100vh and 100vw ... meaning the entire screen
Alex
@delk0
Sep 16 2016 18:03
@tommygebru gotcha, thanks
CamperBot
@camperbot
Sep 16 2016 18:03
delk0 sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:cookie: 759 | @tommygebru |http://www.freecodecamp.com/tommygebru
tommy
@tommygebru
Sep 16 2016 18:06
let me know how it turns out... i would like to try it out....
Jimmy Huynh
@jkchuynh829
Sep 16 2016 18:26
Hello, can someone help me figure out how to implement rxjs library in a project. I've only used jQuery in my projects in the past using the cdn.
Please and thank you
Gang Zhao
@crumpx
Sep 16 2016 18:28
have you tried import 'rxjs/Rx';
angular2?
Jimmy Huynh
@jkchuynh829
Sep 16 2016 18:29
no, just vanilla js
mjcreate
@mjcreate
Sep 16 2016 18:29
I have a question - just using CSS & HTML & bootstrap (I'm not at JavaScript yet) is there a way to keep a horizontal bar at the top of the page (like a menu)? Here is what I'm working on. I want the dark blue bar to always be at the top of the screen even when I scroll.
Jimmy Huynh
@jkchuynh829
Sep 16 2016 18:30
yes, you can used fixed position
mjcreate
@mjcreate
Sep 16 2016 18:30
ok I will look that up
Jimmy Huynh
@jkchuynh829
Sep 16 2016 18:31
change the width of your navbar, maybe block display, and add a top margin to your lower div
Thanks, @crumpx
CamperBot
@camperbot
Sep 16 2016 18:31
jkchuynh829 sends brownie points to @crumpx :sparkles: :thumbsup: :sparkles:
:warning: jkchuynh829 already gave crumpx points
mjcreate
@mjcreate
Sep 16 2016 18:33
thanks @jkchuynh829
CamperBot
@camperbot
Sep 16 2016 18:33
mjcreate sends brownie points to @jkchuynh829 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @jkchuynh829 |http://www.freecodecamp.com/jkchuynh829
Zheng
@FireFalcon1155
Sep 16 2016 19:32
guys i have a question, so i needa create a function that takes an array (init array) followed by multiple parameters. whataever is in multiple parameters need to be deleted from the init array.
function destroyer(arr, one, two, three) {
  var self=arr;
  var o,t,h;
  o=one;
  t=two;
  h=three;
  for(var i in self){
    if(self[i]===o){
      self.splice(o,1);
    }else if(self[i]===t){
      self.splice(t,1);
    }else if(self[i]===h){
      self.splice(h,1);
    }
  return arr;
}
}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);
Tyler Moeller
@TylerMoeller
Sep 16 2016 19:41
@FireFalcon1155 Check out the Arguments object, you don't need to pass multiple parameters into the function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
Jasmeet Singh Saini
@JSSaini07
Sep 16 2016 19:46
@FireFalcon1155
function destroyer(arr, one, two, three) {
  var self=arr;
  var o,t,h;var i=0;
  o=one;
  t=two;
  h=three;
  while(i<self.length){
       if(self[i]===o||self[i]===t||self[i]===h){
       self.splice(i,1);
       }else{i++}
   }
   return arr;
}
Byron
@jbgcrugers
Sep 16 2016 20:14

hi ... any guesses why i can't get a background image to show? in the HTML pane i've got:

<div class= "firstpage">
<p>test</p>
</div>

and in CSS:

.firstpage {
background-image:url ("https://s-media-cache-ak0.pinimg.com/564x/b9/80/36/b98036c7d42ba824990ceeca9fa14584");
}

vínαч puppαl
@vinaypuppal
Sep 16 2016 20:15
@jbgcrugers https://s-media-cache-ak0.pinimg.com/564x/b9/80/36/b98036c7d42ba824990ceeca9fa14584 if i open in browser i am getting Access Denied error
@jbgcrugers thats why it's not showing up in UI
Byron
@jbgcrugers
Sep 16 2016 20:17
@vinaypuppal thanks ... that was a copy/paste error. Even with a good line, i can't get it to show
.first-page {
background-image:url ("http://sev.h-cdn.co/assets/15/24/1600x800/landscape-1433777123-hogwarts-school-of-witchcraft-and-wizardry-harry-potter-movie-hd-wallpaper-1920x1080-4707.jpg");
}
CamperBot
@camperbot
Sep 16 2016 20:17
jbgcrugers sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 537 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Byron
@jbgcrugers
Sep 16 2016 20:17
*link (not line)
vínαч puppαl
@vinaypuppal
Sep 16 2016 20:18
@jbgcrugers may be give some height to .firstpage and check
Byron
@jbgcrugers
Sep 16 2016 20:26

@vinaypuppal i've tried background-size: 100%; and background-size: cover;

but no luck

vínαч puppαl
@vinaypuppal
Sep 16 2016 20:27

@jbgcrugers no i said just height

.firstpage {
background-image:url(http://sev.h-cdn.co/assets/15/24/1600x800/landscape-1433777123-hogwarts-school-of-witchcraft-and-wizardry-harry-potter-movie-hd-wallpaper-1920x1080-4707.jpg);
  height: 600px;
}

or see this demo i added few extra syles as well http://jsbin.com/fajisa/2/edit?css,output

Rick
@rangerrick337
Sep 16 2016 20:55
Ok peeps, I've been at this for a few hours and I'm stuck. I am trying to create a clickable image with text over top for my portfolio page (I'm going to have projects tiled). I've tried it by adding the image to the CSS via "background-image" which allowed me to put text over the image but doesn't allow me to make the image clickable. I've also tried it with adding the image in the HTML with <img> but then I can't get text over top of the image. I'm lost... here's the link if looking at the code helps you help me: https://codepen.io/RickLee/pen/BLzpAR
Byron
@jbgcrugers
Sep 16 2016 21:00
@vinaypuppal still no luck, but many thanks for trying
CamperBot
@camperbot
Sep 16 2016 21:00
jbgcrugers sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: jbgcrugers already gave vinaypuppal points
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:01
@jbgcrugers can you show your pen and did you checkout my demo link ??
underOneFlag
@underOneFlag
Sep 16 2016 21:02
@rangerrick337 don't you make an anchor for clickables like
<style>
p { background-image: url('img'); }
</style>
<a href="url">
  <p>Text node</p>
</a>
Rick
@rangerrick337
Sep 16 2016 21:05
Thanks @underoneflag, I think I've done that in the first one but then only the "Text node" text is clickable, not the whole image space.
Byron
@jbgcrugers
Sep 16 2016 21:06
@vinaypuppal wait, its worked ... thanks!
CamperBot
@camperbot
Sep 16 2016 21:06
jbgcrugers sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: jbgcrugers already gave vinaypuppal points
underOneFlag
@underOneFlag
Sep 16 2016 21:07

@rangerrick337 i have this in a single home.html file

<style>
a { text-decoration: none; }
p {
    background-image: url('img.jpg');
    display: block;
    width: 50px;
    height: 50px;
}
</style>
<a href="http://www.google.com/" target="_blank">
    <p>test</p>
</a>

and you can click the whole thing

Rick
@rangerrick337
Sep 16 2016 21:08
Thanks @underOneFlag, I'll check to see if that does the trick!
CamperBot
@camperbot
Sep 16 2016 21:08
rangerrick337 sends brownie points to @underoneflag :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @underoneflag |http://www.freecodecamp.com/underoneflag
underOneFlag
@underOneFlag
Sep 16 2016 21:09
if anyone has some time can someone test the functionality of my wiki viewer
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:09
@underOneFlag p is already a block level element no need of display: block; on p
@rangerrick337 You can try in this way also
<a href="https://codepen.io/RickLee/pen/WGAgXV">Coding</a>
a{
  font-size: 32px;
  height: 200px;
  line-height: 200px;
  text-decoration: none;
  color: #fff;
  display: block;
  background-image: url("http://static1.squarespace.com/static/57bdc06359cc68eaf79d8c40/t/57c08c6bf5e23182b3d1ccef/1472752676959/");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
underOneFlag
@underOneFlag
Sep 16 2016 21:11
@vinaypuppal you are correct, thanks :)
CamperBot
@camperbot
Sep 16 2016 21:11
underoneflag sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 538 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:15
@underOneFlag And your wiki Viewer is working perfectly as expected. One thing i would suggest is add viewport meta tag also. Good Job
@underOneFlag this one
<meta name="viewport" content="width=device-width, initial-scale=1">
underOneFlag
@underOneFlag
Sep 16 2016 21:16
@vinaypuppal thanks Vinay. i'll have to look up view ports but are those the ones that are used for scrolling?
CamperBot
@camperbot
Sep 16 2016 21:16
underoneflag sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: underoneflag already gave vinaypuppal points
underOneFlag
@underOneFlag
Sep 16 2016 21:17
@vinaypuppal ah, right i used that on my tribute page but i don't know if it actually did anything
i have to read up more on it, thanks again
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:18
@underOneFlag no they make media queries work on mobile screens and you can use bunch of properties like setting width of screen to device width initially.Read more here https://mdn.io/viewport
Rick
@rangerrick337
Sep 16 2016 21:18
Thanks @vinaypuppal
CamperBot
@camperbot
Sep 16 2016 21:18
rangerrick337 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 539 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Nixotem
@Nixotem
Sep 16 2016 21:26
http://codepen.io/nixotem/pen/WGxRzX Anyone able to help me make the navigation bar not be overlayed by writing in the main body? ^^
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:30
@Nixotem try this
.top {
    z-index: 1;
}
Nixotem
@Nixotem
Sep 16 2016 21:32
@vinaypuppal That worked! Thank you so much! What does the command do exactly?
CamperBot
@camperbot
Sep 16 2016 21:32
nixotem sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 540 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:33
@Nixotem it brings stacked elements to the top, higher the value higher in the stack the element will be.
Jake
@jbradshaw4
Sep 16 2016 21:33
Hi- I am working on my Tribute page...I tried to create a link using <a href but it doesn't go to the http site I linked to it just stays in Codepen...I tried using target="_blank" but that doesnt work either....any suggestions?
Nixotem
@Nixotem
Sep 16 2016 21:33
Sweet, thank you
underOneFlag
@underOneFlag
Sep 16 2016 21:34
@jbradshaw4
<a href="http://www.google.com" target="_blank">Text users see.</a>
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:35
@Nixotem If interested read more about it here http://mdn.io/z-index
Jake
@jbradshaw4
Sep 16 2016 21:38
@underOneFlag - thank you....I just realized I am an idiot....I forgot= as in <a href="http://
CamperBot
@camperbot
Sep 16 2016 21:38
jbradshaw4 sends brownie points to @underoneflag :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @underoneflag |http://www.freecodecamp.com/underoneflag
Joran de Haan
@LeCoquille
Sep 16 2016 21:42
Hey everyone. Almost finished my portfolio page for the challenge. There's just one thing i ruined accidentely and i don't know how to fix it. The dropdown menu for my navbar used to have a black background and there shouldn't be a gap between the header bar and the dropdown. I think I accidentely did something to a css command or moved something in the html, but I don't remember what I did... Anybody who cares to take a look? Much appreciated. https://codepen.io/LeCoquille/pen/zKxvqo?editors=1100
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:52

@LeCoquille on around line 270 in CSS you extra closed } check that and for background-color of navbar use

.navbar-collapse{
  background: #000;
}

and on line 73 its margin not marign

Joran de Haan
@LeCoquille
Sep 16 2016 21:55
@vinaypuppal yesss thanks!
CamperBot
@camperbot
Sep 16 2016 21:55
lecoquille sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 541 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:55
@LeCoquille since i added some css code those line numbers are not precise for margin its this code
.img-center {
  marign:0 auto;
}
Joran de Haan
@LeCoquille
Sep 16 2016 21:56
@vinaypuppal yes, i don't think i need that css
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:56
@LeCoquille :smile: no i am saying you have typo as i said previously in this segment of your code
@LeCoquille did you correct it -> margin not marign ??
Joran de Haan
@LeCoquille
Sep 16 2016 21:58
@vinaypuppal yes thanks! I mean that I found it and figured I don't need this line of css at all:P
CamperBot
@camperbot
Sep 16 2016 21:58
lecoquille sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: lecoquille already gave vinaypuppal points
vínαч puppαl
@vinaypuppal
Sep 16 2016 21:58
@LeCoquille oh okay :+1:
Michael Bomholt
@bomholtm
Sep 16 2016 22:09
any idea what toFixed() value to go with for the JS calculator? how high can i go?
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:15
@bomholt as per the docs you can go from 0 to 20 http://mdn.io/tofixed
i rounded upto 5 in my Project :smile:
Michael Bomholt
@bomholtm
Sep 16 2016 22:19
@vinaypuppal yea you cant go to high if you dont want 0.1*0.2 to result in 0.020000000000000004
wasnt sure which is like the lowest value where js has no mess ups you know?
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:20
@bomholt sorry i did not understand what you mean
Michael Bomholt
@bomholtm
Sep 16 2016 22:21
0.1 x 0.2 is 0.020000000000000004 in JS right?
thats why we use toFixed
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:22
Michael Bomholt
@bomholtm
Sep 16 2016 22:22
toFixed(20) wouldn't work as is would display this wrong math
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:23
@bomholt yeah just tried it in console understood what you mean now
Michael Bomholt
@bomholtm
Sep 16 2016 22:23
so i wondered if there is a perfect value
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:24
@bomholt A workaround would be define your own Rounding function
Michael Bomholt
@bomholtm
Sep 16 2016 22:25
for getting most characters as possible but less enough to fix the %$"& ups of JS (every programming language) ^^
@vinaypuppal i have a working solution i think but its not finished and yea looking for that value ^^
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:33
@bomholt i used this in my code, I think I found over stackoverflow. But i can explain what it does. num + "e+5" -> we are converting num to scientific form i.e multiplying by 10^5 and then rounding off and then "e-5" converts again to floating-point number. and finally + before it converts string to Number
+(Math.round((0.1*0.2) + "e+5")+"e-5")
@bomholt Math.round((0.1*0.2) only returns 0
@bomholt e+5 you can modify it to round upto any number
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:42
@bomholt you can read about how + before it converts String to Number here https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch4.md#explicitly-strings----numbers
and this book is best if you need to understand Coercion
Michael Bomholt
@bomholtm
Sep 16 2016 22:43
@vinaypuppal thank you
CamperBot
@camperbot
Sep 16 2016 22:43
bomholt sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 542 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Michael Bomholt
@bomholtm
Sep 16 2016 22:44
@vinaypuppal
return function(){
      var result = eval(hiddenResult.innerHTML).toFixed(11);
      visibleResult.innerHTML = parseFloat(result);
    };
i probably go with this for now as it works fine for me
also need to implement sin cos tan and ln log and all that stuff
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:45
@bomholt :+1:
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:50
@bomholt Hey if you want to implement sin cos tan and ln log then checkout math.js http://mathjs.org/
Michael Bomholt
@bomholtm
Sep 16 2016 22:51
@vinaypuppal it works actually just fine by writing pure js
its not ready by any means
and only sin, cos, tan, and ( ) are implemented right now
but yea you can acutally see how it works ... having to display divs right now for checking the code
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:54
@bomholt oh okay. Nice Design :smile:
Michael Bomholt
@bomholtm
Sep 16 2016 22:54
@vinaypuppal thank you =)
CamperBot
@camperbot
Sep 16 2016 22:54
bomholt sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: bomholt already gave vinaypuppal points
Michael Bomholt
@bomholtm
Sep 16 2016 22:54
its bacically the android calculator ^^
just need to make that yellow column pullable on mobile
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:55
@bomholt yes i noticed. Found few bugs though as you said its not complete try to fix them.
Michael Bomholt
@bomholtm
Sep 16 2016 22:56
so that there is just a tiny yellow column on the right side and if you pull it the extended keys appear
@vinaypuppal which bugs did you find... maybe its something that i didnt noticed
maybe its just not done
=)
vínαч puppαl
@vinaypuppal
Sep 16 2016 22:56
@bomholt it allows ....
@bomholt and (((((
@bomholt and 7 * * *
@bomholt did you think of these ??
Michael Bomholt
@bomholtm
Sep 16 2016 22:58
ah okay thought about ... but ((((( will be tricky because there a option where you might need multiple ((((
and didnt thought about multiple operators
why didnt i thought of that when my head allready was thinking about multiple ...
maybe because i was so into the whole floating point debacle ^^
vínαч puppαl
@vinaypuppal
Sep 16 2016 23:00
@bomholt oh okay then lot more work :wink:
Michael Bomholt
@bomholtm
Sep 16 2016 23:00
@vinaypuppal but yea thank you
CamperBot
@camperbot
Sep 16 2016 23:00
bomholt sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: bomholt already gave vinaypuppal points
vínαч puppαl
@vinaypuppal
Sep 16 2016 23:00
@bomholt and how are you planing to implement touch slide pull of yellow buttons on mobile??
@bomholt or did you already implement it??
Michael Bomholt
@bomholtm
Sep 16 2016 23:01
@vinaypuppal at the moment the yellow column is just hidden on mobile
i think i will add a div with the same content which is hidden on desktop
vínαч puppαl
@vinaypuppal
Sep 16 2016 23:03
@bomholt may be try hammer.js it will help you with handling touch events
Michael Bomholt
@bomholtm
Sep 16 2016 23:03
because i think you cant pull bootstrap columns ^^ but no idea how to do it yet
i did a sidebar before but i was over the complete page
vínαч puppαl
@vinaypuppal
Sep 16 2016 23:03
@bomholt you can see http://hammerjs.github.io/
Michael Bomholt
@bomholtm
Sep 16 2016 23:03
should work similiar just for a div
i will look into it
but im trying to build the calc on pure JS actually
used jquery in all my projects before and stuff like motion ui or jquery ui
vínαч puppαl
@vinaypuppal
Sep 16 2016 23:05
@bomholt on mobile absolute position them so they will be removed out of document flow and translate them to far right(right:100%) of screen and with hammer.js touch events translate it from far right(right:0)
Michael Bomholt
@bomholtm
Sep 16 2016 23:06
and yea thought its a great thing to do to get better with JS
i need to meet my girl but now probably will take the laptop to work on that haha
but first i will make all keys work and fix all the multiple operator issues
pull menu come when i do the css of the display div
vínαч puppαl
@vinaypuppal
Sep 16 2016 23:09
:smile: @bomholt :+1: happy coding :wink: lot of fixes ahead
Michael Bomholt
@bomholtm
Sep 16 2016 23:09
you are very kind and helpful sir thanks for that @vinaypuppal even think you helped me before on some issue =)
CamperBot
@camperbot
Sep 16 2016 23:09
bomholt sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: bomholt already gave vinaypuppal points
Michael Bomholt
@bomholtm
Sep 16 2016 23:09
@vinaypuppal thats right but i am very happy that the basic functionallity is working
most of the people wont press * but yea its should be fixed for sure
lot of fixes but most of it easy work
have a nice night =)
vínαч puppαl
@vinaypuppal
Sep 16 2016 23:11
yes i love the design. You almost recreated Android Calculator. Good job
jrandallhansen
@jrandallhansen
Sep 16 2016 23:54
does anyone know if it is now necessary to register for a client ID to use the twitch.tv api?
Walid Ashri
@walidashri
Sep 16 2016 23:57
@jrandallhansen yes it's