These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Aug 2016
KL Tah
@ee7klt
Aug 10 2016 00:31
hi guys, anyone know how to get around the no access control allow origin header is present on the requested resource error on the weather app assignment?
sfmajors373
@sfmajors373
Aug 10 2016 00:31

Good evening! I was trying to add icons to my buttons but for some reason they are not showing up. This is the code I have: <div class="row">
<div class="col-md-3">
<a href="www.dropbox.com"><button class= "btn btn-block btn-custom"><i class="fa fa-dropbox" ></i>Dropbox</button></a>
</div>
<div class="col-md-3">
<a href='www.pocket.com'><button class= "btn btn-block btn-custom"><i class="fa fa-get-pocket" ></i>Pocket</button></a>
</div>
<div class="col-md-3">
<a href='www.pinteres.com'><button class= "btn btn-block btn-custom"><i class="fa fa-pinterest-p" ></i> Pinterest</button></a>
</div>
<div class="col-md-3">

<button class= "btn btn-block btn-custom"><i class="fa fa-share-alt" ></i>Share</button>
</div>
</div>

KL Tah
@ee7klt
Aug 10 2016 00:31
i've tried all the solutions posted out there including putting https in the codepen.io url, and using various other services like forecast.io and wunderground
@sfmajors373 what's the error?
sfmajors373
@sfmajors373
Aug 10 2016 00:32
Oh, Sorry, the icons aren't showing up
Stephen James
@sjames1958gm
Aug 10 2016 00:32
@ee7klt Are you using jquery and $.getJSON?
KL Tah
@ee7klt
Aug 10 2016 00:33
nope just plain xmlhttprequest
Stephen James
@sjames1958gm
Aug 10 2016 00:33
@ee7klt Then you need to research how to do jsonp with plain xmlhttprequest. JSONP is a mechanism to get around CORS issues.
KL Tah
@ee7klt
Aug 10 2016 00:34
i see
thanks, i'll give that a shot
Harindu Dilshan
@harindu95
Aug 10 2016 00:37
@JLuboff Thanks for the advice. Still I like the minimalistic look.
CamperBot
@camperbot
Aug 10 2016 00:37
harindu95 sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @jluboff |http://www.freecodecamp.com/jluboff
Harindu Dilshan
@harindu95
Aug 10 2016 00:37
Finally figured how to correct flexbox overflow
Stephen
@stephepush
Aug 10 2016 00:51
I need help with my code. I'm trying to make variables global but in trying to do that, i broke my apps functionality:
http://codepen.io/stephepush/pen/dXQKjW?editors=0010
Greg Duncan
@GregatGit
Aug 10 2016 01:01
@stephepush you should have 1 function that for getting quotes that is called when the page loads and gets called when you push the button
Stephen
@stephepush
Aug 10 2016 01:08
should I define the function before the jquery events?
@GregatGit, could you take a look?
http://codepen.io/stephepush/pen/dXQKjW?editors=0010
Greg Duncan
@GregatGit
Aug 10 2016 01:28
@stephepush before or after is fine - put a simple alert in alert('hi'); to see if it fires
@stephepush
$(document).ready(function() {
  quoteGen();
});
Felipe Chermont
@chernox27
Aug 10 2016 01:32
guys im having trouble in Link to External Pages with Anchor Elements lesson
can someone look at my code?
Greg Duncan
@GregatGit
Aug 10 2016 01:32
@stephepush
$(document).ready(function() {
  quoteGen(); // this fires when it loads
  $('#newQuote').click(quoteGen); // this fires when you click
});
@chernox27 sure
@stephepush when you use append it will add to your html rather than replace
Felipe Chermont
@chernox27
Aug 10 2016 01:34
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<a href="http://freecatphotoapp.com">cat photos</a>


<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
Greg Duncan
@GregatGit
Aug 10 2016 01:37
@chernox27 check to make sure the address http://freecatphotoapp.com is right
Stephen
@stephepush
Aug 10 2016 01:40
@GregatGit , thanks a bunch! Here's what I did:
$(document).ready(function() {
  quoteGen();
  $('#newQuote').on("click", function(){
    $("#quote, #author").empty();
    quoteGen();
  });
CamperBot
@camperbot
Aug 10 2016 01:40
stephepush sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 730 | @gregatgit |http://www.freecodecamp.com/gregatgit
Stephen
@stephepush
Aug 10 2016 01:41
Guess I could use .text(); or .val()?
Greg Duncan
@GregatGit
Aug 10 2016 01:42
@stephepush this line $("#quote, #author").empty(); can go in the function
and you can have $('#newQuote').click(quoteGen);
Stephen
@stephepush
Aug 10 2016 01:43
ah, I see.
it seemed that it was breaking before, but now it works
probably entered something wrong
@GregatGit: What I have now, and it works
var quoteGen = function() {
        $("#quote, #author").empty();
        $.getJSON( 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?' , function(data){                                        
        $('#quote').append("<p>" + data.quoteText + "</p>");
        $('#author').append("<p>" + "-" + data.quoteAuthor + "</p>");
        submitQuote;
        var twitterLinkRoot = "https://twitter.com/intent/tweet?text=" 
            /*this variable is the raw link from the html twitter button. Up next the parameters, in this case, the words of a generated                   quote, will be parsed and added in param form so that the user can tweet their favorite quotes*/
        var tweetQuote = data.quoteText + " " + data.quoteAuthor;
        var tweetQuote = twitterLinkRoot + tweetQuote.split(" ").join('%20');
        var submitQuote = $('.twitter-share-button').attr('href',tweetQuote);
});
};//end of "quoteGen" function
Greg Duncan
@GregatGit
Aug 10 2016 01:46
@stephepush there is a drop down on the js tab in codepen - click on that then click on "TIDY JS" - it will make your code neater
Stephen
@stephepush
Aug 10 2016 01:49
cool, thanks @GregatGit , if that is all
CamperBot
@camperbot
Aug 10 2016 01:50
stephepush sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: stephepush already gave gregatgit points
Juan Sierra
@juan-sierra
Aug 10 2016 02:00
hi guys anyone here familiar with grunt
LiYang
@jusheng
Aug 10 2016 02:02
有人吗
is anyone here?
Sabrina Ferguson
@itsacoyote
Aug 10 2016 02:10
@jasierragarcia I'm a bit familiar with grunt. Been a while though since I've switched to gulp
Scott
@scaley29
Aug 10 2016 02:11
Does anyone on here know how add different sections for <nav bar element to link sections on one page. I want 5 sections on my page with different images behind them and also be able to have the writing in front of the images. I have been stuck on this for a few days now and everything I seem to try seems like I am getting farther behind. I have tried multiple suggestions that I have been given and still having issues. message me if you can help me out and I will send link to code,pen to look at
Juan Sierra
@juan-sierra
Aug 10 2016 02:12
oh hey there again @itsacoyote just having trouble trying to run express server + livereload
Sabrina Ferguson
@itsacoyote
Aug 10 2016 02:13
@jasierragarcia ooh, ok, what's the issue you're having?
Juan Sierra
@juan-sierra
Aug 10 2016 02:15
I don’t know if I’m setting up my task correctly
have watched this more than a couple of times, which might be a little out of date lol @itsacoyote
Lanitta
@DivaWeb
Aug 10 2016 02:16
@scaley29 what project are you working on
Scott
@scaley29
Aug 10 2016 02:17
portfolio lesson 152 i think
Lanitta
@DivaWeb
Aug 10 2016 02:17
@scaley29 are you building your portfolio page?
Scott
@scaley29
Aug 10 2016 02:17
@DivaWeb yes
Lanitta
@DivaWeb
Aug 10 2016 02:18
@scaley29 ok so this is what you have to use it is an item through bootstrap called spy- scroll
Scott
@scaley29
Aug 10 2016 02:19
@DivaWeb ok
Lanitta
@DivaWeb
Aug 10 2016 02:21
@scaley29 I sent you a private message
laststand0810
@laststand0810
Aug 10 2016 02:24

guys can u review my page?
https://codepen.io/laststand0810/full/bZxGkA/

got additional feature of only updating after 15min if staying in the radius of 500 meters (from the last register point) or if moving out of the radius(5s check) but I haven't check yet for i'm not going outside much =.='

might need location for working
Sabrina Ferguson
@itsacoyote
Aug 10 2016 02:26
@jasierragarcia I don't think grunt has changed much since then, it just may be some slight misconfiguration that's causing the issue.
Juan Sierra
@juan-sierra
Aug 10 2016 02:27
I think @itsacoyote I’ll try another tutorial video thanks for your help though
CamperBot
@camperbot
Aug 10 2016 02:27
jasierragarcia sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Lanitta
@DivaWeb
Aug 10 2016 02:34
@laststand0810 well it worked for me
Scott
@scaley29
Aug 10 2016 02:38
@itsacoyote @DivaWeb Thank You for your help.
CamperBot
@camperbot
Aug 10 2016 02:38
scaley29 sends brownie points to @itsacoyote and @divaweb :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @divaweb |http://www.freecodecamp.com/divaweb
:cookie: 339 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Jeff Hernandez
@JeffH2322
Aug 10 2016 02:39
@jtla3 Did you find any info? I am in the same boat with regards to this "build my own portfolio page".
Lanitta
@DivaWeb
Aug 10 2016 02:40
@JeffH2322 scrollspy is the key word
kengiro
@kengiro
Aug 10 2016 02:46
this is my first day in FreeCodeCamp yeahhh!!
Lanitta
@DivaWeb
Aug 10 2016 02:46
@kengiro welcome
kengiro
@kengiro
Aug 10 2016 02:48
@DivaWeb Thanks!!!
CamperBot
@camperbot
Aug 10 2016 02:48
kengiro sends brownie points to @divaweb :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @divaweb |http://www.freecodecamp.com/divaweb
laststand0810
@laststand0810
Aug 10 2016 02:52
@DivaWeb really? thanks a lot :), been finding someone to check out since yesterday TT.TT
CamperBot
@camperbot
Aug 10 2016 02:52
laststand0810 sends brownie points to @divaweb :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @divaweb |http://www.freecodecamp.com/divaweb
Jeff Hernandez
@JeffH2322
Aug 10 2016 03:02
@DivaWeb Thanks can you send me what exactly you mean by that keyword in a direct message.
CamperBot
@camperbot
Aug 10 2016 03:02
jeffh2322 sends brownie points to @divaweb :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @divaweb |http://www.freecodecamp.com/divaweb
Jeff Hernandez
@JeffH2322
Aug 10 2016 03:03
@divaweb thank you for your assistance
CamperBot
@camperbot
Aug 10 2016 03:03
jeffh2322 sends brownie points to @divaweb :sparkles: :thumbsup: :sparkles:
:warning: jeffh2322 already gave divaweb points
AR Setiawan
@arra-sy
Aug 10 2016 03:11
why my bootstrap "navbar collapse" can't expand?
http://codepen.io/ar_setiawan/pen/ZOmdVy?editors=1000
AR Setiawan
@arra-sy
Aug 10 2016 03:24
solved, before in instruction fcc already setting javascript & css behavior, must add jquery js & bootstrap js+css again in source. Thanks. :)
Mia T.
@miaaaaaa3
Aug 10 2016 04:08
I am trying to build my personal portfolio webpage and I have no idea where to start
NicEaton38
@NicEaton38
Aug 10 2016 04:13
@miaaaaaa3 I started by looking into bootstrap navbars via Google and worked my way down the page
@miaaaaaa3 90% of building it, for me, was going down a Google hole looking for answers haha
Mia T.
@miaaaaaa3
Aug 10 2016 04:44
okay I'll try that. Thanks so much @NicEaton38
CamperBot
@camperbot
Aug 10 2016 04:44
miaaaaaa3 sends brownie points to @niceaton38 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @niceaton38 |http://www.freecodecamp.com/niceaton38
NicEaton38
@NicEaton38
Aug 10 2016 04:45
@miaaaaaa3 Of course :smile: I started here http://www.w3schools.com/bootstrap/bootstrap_navbar.asp but had to kind of cannibalize their code with stuff I found elsewhere to get the look I wanted
Ken Haduch
@khaduch
Aug 10 2016 04:47
@miaaaaaa3 - I second the recommendation for w3schools.com/bootstrap, and especially helpful (after you get some bootstrap basics) at least for me, was their section on the bootstrap "Themes" - they walk through the design and bootstrap / HTML coding to do pages similar to the freecodecamp example.
Mia T.
@miaaaaaa3
Aug 10 2016 04:51
wow. thanks thanks thanks so much. i was staring at my computer for like two hours super confused and typing in a bunch of random stuff. ya'll are so helpful @NicEaton38 @khaduch
CamperBot
@camperbot
Aug 10 2016 04:51
miaaaaaa3 sends brownie points to @niceaton38 and @khaduch :sparkles: :thumbsup: :sparkles:
:warning: miaaaaaa3 already gave niceaton38 points
:star2: 1526 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Aug 10 2016 05:03
@miaaaaaa3 - I hope it helps. It was good for some learning and ideas... good luck!
Faisal Zulfiqar
@faisal1337
Aug 10 2016 05:11
Some one with good bootstrap skills willing to help me with making a portfolio site responsive?
Oxide Debbarma
@oxide94Git
Aug 10 2016 05:25
hey friends, how to get the city names with geolocation.coords?
Jaren Escueta
@jarenescueta731
Aug 10 2016 05:33
@oxide94Git if it's not working for you try using ip-api.com
Elbert Cortez
@trip16661
Aug 10 2016 05:39
@oxide94Git you can get the city and the weather with just one call from the weather api
by just using the coords as paremeters
Oxide Debbarma
@oxide94Git
Aug 10 2016 05:40
@jarenescueta731 wow ip-api is awesome. this site knows everything. thanks
CamperBot
@camperbot
Aug 10 2016 05:40
:cookie: 351 | @jarenescueta731 |http://www.freecodecamp.com/jarenescueta731
oxide94git sends brownie points to @jarenescueta731 :sparkles: :thumbsup: :sparkles:
Oxide Debbarma
@oxide94Git
Aug 10 2016 05:41
@trip16661 really ? i thought that wouldn't do. and kept searching.. tahnks :smile:
@trip16661 thanks :smile:
CamperBot
@camperbot
Aug 10 2016 05:41
oxide94git sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @trip16661 |http://www.freecodecamp.com/trip16661
Elbert Cortez
@trip16661
Aug 10 2016 05:42
@oxide94Git well ofc it depends on the weather api but most of them including the one who fcc recomends
gives the city name as a property
in my case I did something a bit more special so
i got the names from another source
Oxide Debbarma
@oxide94Git
Aug 10 2016 05:43
@trip16661 what did you do ? :smile:
Elbert Cortez
@trip16661
Aug 10 2016 05:43
check it i just linked it
Oxide Debbarma
@oxide94Git
Aug 10 2016 05:50
wow that was awesome @trip16661
Faisal Zulfiqar
@faisal1337
Aug 10 2016 05:54
http://codepen.io/faisal1337/pen/bZONag?editors=1100 I want to eliminate the horizontal scroll bar. It just won't go away! Any ideas how to?
Oxide Debbarma
@oxide94Git
Aug 10 2016 05:58
@trip16661 what is with the inacuracy of coords? was it accurate for you
Elbert Cortez
@trip16661
Aug 10 2016 05:58
@oxide94Git yes it is acurated to me
but i think it has to do with
Oxide Debbarma
@oxide94Git
Aug 10 2016 05:59
@trip16661 mine for example -the example was inaccurate too
Elbert Cortez
@trip16661
Aug 10 2016 06:00
the coords are taken based on antennas
but dont worry there are ways to make it more accurated
you can check it while you make it
Oxide Debbarma
@oxide94Git
Aug 10 2016 06:01
@trip16661 i was just going to ask that :smile:
Elbert Cortez
@trip16661
Aug 10 2016 06:02
@faisal1337 what you want is called overflow
@faisal1337 you can call overflow based on the axis too (x, y)
Artis Raudive
@ar14059
Aug 10 2016 06:50
Hi, everyone! I work on wikipedia viewer project. Can someone tell me, why $("#search_result").empty(); on line 38 don't work: http://codepen.io/artisraudive/pen/JKkWXR?editors=0010 (if i search for some word, it should show 5 results, but instead it shows 15)?
Manoj
@Manoj-Fernando
Aug 10 2016 07:13
hey guys i'm going to design my personal portfolio webpage. i dont know how to implement the scrolling feature where when i scroll , its corresponding button gets selected. how its done guys ....help me out!!!
Haib Zhang
@nperhb
Aug 10 2016 07:15
This message was deleted
@ar14059 I have meet the similar problem before, then i get the Inspire from http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful
in a word ,I think js is asynchronous , your function could create the new thread task,so the '$("#search_result").empty();'is excuted before the new thread (it' my own thought , maybe have some wrong, but the link is useful):)
collinstommy
@collinstommy
Aug 10 2016 07:22
For those of you who have completed the Javascript calculator. Didi you use a framework for the layout. I'm thinking its not needed for this project. Just wondering is fixed width and height the way to go.
arif hussain
@arifhussain0
Aug 10 2016 07:39
hello.. I need help with the personal portfolio webpage assignment
RompePC
@RompePC
Aug 10 2016 07:39
@collinstommy You're right
arif hussain
@arifhussain0
Aug 10 2016 07:39
how to go to specific part of the page by clicking button?
Sorin Ruse
@sorinr
Aug 10 2016 07:40
@arifhussain0 search for in page linking
collinstommy
@collinstommy
Aug 10 2016 07:40
@RompePC Figured. Thanks for the advice
CamperBot
@camperbot
Aug 10 2016 07:40
collinstommy sends brownie points to @rompepc :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @rompepc |http://www.freecodecamp.com/rompepc
RompePC
@RompePC
Aug 10 2016 07:40
@arifhussain0 http://www.w3schools.com/html/html_links.asp, HTML Links - Create a Bookmark section
arif hussain
@arifhussain0
Aug 10 2016 07:58
thanks
Sorin Ruse
@sorinr
Aug 10 2016 08:00
welcome
the doer
@ewathedoer
Aug 10 2016 08:24
@TasmaniaKrama no worries, now you can put just the thumbnail images. Belive me that until you reach your frontend dev certificate, you will have much stuff to put there. Good luck and no worries about it now. Keep on coding!
Nazim Abdimomunov
@dm-nz
Aug 10 2016 08:24
This message was deleted
Hello. Can anybody help me with this? Math.random in randomID function generates 12 numbers at a time. Why this happens?

        <script>
            $(document).ready(function() {
                function newQuote() {
                    $.getJSON('/json/quotes.json', function(json){
                        jsonLength = Object.keys(json).length;
                        function randomID() {
                            randomNumber = Math.round(Math.random() * jsonLength);
                            console.log(randomNumber);
                            return randomNumber;
                        };
                        json = json.filter(function(val) {
                            return (val.id == randomID());
                        });
                        json.forEach(function(val) {
                            quote = val.quote;
                            author = val.author;
                            img = val.img;
                        });
                        $("#quote").text(quote);
                        $("#author").text(author);
                        $("body").css('background-image', 'url(/img/' + img + ')');
                        $("a.tweet").attr('href','https://twitter.com/intent/tweet?text="' + quote + '" - ' + author)
                    });                    
                }
                $('#new-quote').click(function() {
                    newQuote();
                });
            });
        </script>
JohnWatsonDev
@johnwatsondev
Aug 10 2016 08:43
hello. I want to make two columns in a row responsive. Can somebody help me ?
I have set the bootstrap class in column.
blob
JohnWatsonDev
@johnwatsondev
Aug 10 2016 08:48
I'd like put the paragraph below of the avatar i.e. set the avatar and intro text in a single column.
Islam Ibakaev
@dagman
Aug 10 2016 08:52
guys would you please test my pomodoro for any bugs?
Sorin Ruse
@sorinr
Aug 10 2016 08:54
@johnwatsondev if you go by bootstrap grid then i will get rid of this class .vertical-align and take a look here: https://css-tricks.com/centering-css-complete-guide/
Rasmunis
@Rasmunis
Aug 10 2016 08:56
Hey, I'm just wondering if there's any differences between using external APIs in codepen and outside of codepen?
Sorin Ruse
@sorinr
Aug 10 2016 09:00
@Rasmunis don't think they are
JohnWatsonDev
@johnwatsondev
Aug 10 2016 09:01
@sorinr I have remove the .vertical-align. I just want to make the div with row in center of the div with container.
Joel Santos
@St3ps
Aug 10 2016 09:01
@Rasmunis Why do you ask?
@dagman works just fine on a first glance? but:
you can't pause it. only way to stop it is by resetting it
Rasmunis
@Rasmunis
Aug 10 2016 09:03
@St3ps I'm just struggling to get the API I'm using to work. And earlier I tried for hours to get my jQuery to work until somebody told me I had to enable jQuery in codepen haha, so that's why I was wondering
Islam Ibakaev
@dagman
Aug 10 2016 09:05
@St3ps one click to start and one click to pause doesn't it work for you?
Joel Santos
@St3ps
Aug 10 2016 09:05
@dagman oops my bad
it does pause
Islam Ibakaev
@dagman
Aug 10 2016 09:06
@St3ps :smile:
Stephen James
@sjames1958gm
Aug 10 2016 09:07
@Rasmunis codepen provides facilities for loading libraries into your webpage, outside of codepen you will need to still load those libraries via script tags.
Joel Santos
@St3ps
Aug 10 2016 09:07
@Rasmunis well, ok hold on, there's 2 things going:
1) if you're using jquery, you need to add the jquery library into your codepen
2) Uh, is the API getting loaded correctly? I'm asking because i've had problems loading API's in codepen which i wouldn't encounter were i to use, i dont know, a local IDE
Rasmunis
@Rasmunis
Aug 10 2016 09:10
@St3ps Yeah, I've added the library. But it doesn't seem to load correctly, I've tried a simple alert("hello") inside the getJSON-function and nothing happens.
@sjames1958gm That's good to know
Stephen James
@sjames1958gm
Aug 10 2016 09:12
@Rasmunis Now that you are doing API in your codepen it is more important that you use the devtools in your browser to see any errors.
the codepen console only shows what you console.log but the devtools will show network errors or errors processing responses, etc.
Joel Santos
@St3ps
Aug 10 2016 09:14
@Rasmunis yeap, network errors would be an answer to why the code withing your getJSON function is not coming through
Rasmunis
@Rasmunis
Aug 10 2016 09:14
@sjames1958gm Where can I find those tools?
Joel Santos
@St3ps
Aug 10 2016 09:14
within*
just type in ctrl+shift+i
works in chrome and FF
Stephen James
@sjames1958gm
Aug 10 2016 09:15
@Rasmunis F12 also works in chrome.
Rasmunis
@Rasmunis
Aug 10 2016 09:16
@St3ps I see, now I have to decipher this thing :D
@sjames1958gm @St3ps So, I'm inside the network-tab, what should I expect to see when trying to access the API?
Stephen James
@sjames1958gm
Aug 10 2016 09:17
@Rasmunis Starting with this link are a series of videos on chrome devtools in FCC
https://www.freecodecamp.com/videos/chrome-dev-tools-elements
Rasmunis
@Rasmunis
Aug 10 2016 09:18
@sjames1958gm Oh, nice! Thanks
CamperBot
@camperbot
Aug 10 2016 09:18
rasmunis sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2469 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Joel Santos
@St3ps
Aug 10 2016 09:18
@Rasmunis Just test it, and see if any messages appear.
Rasmunis
@Rasmunis
Aug 10 2016 09:18
@St3ps I did, but nothing appeared
Stephen James
@sjames1958gm
Aug 10 2016 09:18
@Rasmunis If you are doing an API, there is a filter for XHR that should show you message flow. Check the console below for any errors.
Can you link your pen?
Stephen James
@sjames1958gm
Aug 10 2016 09:21
@Rasmunis When I clicked on your button I saw a new line in the messages list.
And this error in the console
XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/method=getQuote&key=457653&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
This is a common error when starting with APIs. And is easily solved with $.getJSON
Rasmunis
@Rasmunis
Aug 10 2016 09:22
@sjames1958gm Oh yeah, I found the messages now
Stephen James
@sjames1958gm
Aug 10 2016 09:22
Well maybe not with this API, I saw issues with this API before
generally adding &callback=? to your URL will turn on JSONP (research on wikipedia).
Rasmunis
@Rasmunis
Aug 10 2016 09:24
Then I got "method=getQuote&key=457653&format=json&lang=en&callback=jQuery22407332919128850351470821018405?=1…:1 Uncaught SyntaxError: Unexpected identifier"
Stephen James
@sjames1958gm
Aug 10 2016 09:25
@Rasmunis Yeah, There is something special about this API to get it to return the correct information.
Rasmunis
@Rasmunis
Aug 10 2016 09:26
@sjames1958gm So, maybe I should switch to another one?
Stephen James
@sjames1958gm
Aug 10 2016 09:29
@Rasmunis http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=? This is the format that seems to work.
Rasmunis
@Rasmunis
Aug 10 2016 09:33
@sjames1958gm That works perfectly, thanks :D
CamperBot
@camperbot
Aug 10 2016 09:33
rasmunis sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: rasmunis already gave sjames1958gm points
Stephen James
@sjames1958gm
Aug 10 2016 09:33
@Rasmunis :+1: APIs can be tough because there are no real standards
Be sure to take time later to read up on JSONP just to understand why the original didn't work.
Rasmunis
@Rasmunis
Aug 10 2016 09:34
@sjames1958gm Sure can :) Ok, I will
Tomáš Kalný
@Sleepy-guy
Aug 10 2016 10:04
hello I'm doing pomodoro clock and I have no idea how to do it ... can someone point me a right direction ?
Manoj
@Manoj-Fernando
Aug 10 2016 10:11
can anyone help me with building personal portfolio page
Tyler Conoff
@Yoplay8
Aug 10 2016 10:12
@Manoj-Fernando What you need help with on it?
Manoj
@Manoj-Fernando
Aug 10 2016 10:14
@Yoplay8 when the page is scrolled the navigation buttons gets automatically selected correspondingly. what element does that work? i have used <nav> element to design my navigation tab
Manoj
@Manoj-Fernando
Aug 10 2016 10:24
can anyone help me with building personal portfolio page
Tyler Conoff
@Yoplay8
Aug 10 2016 10:40
@Manoj-Fernando So im currently in the process of finishing this project. Right now im not 100% sure yet. But im thinking on something along the lines of using the javascript onMouseOver () event when it passes over one of the corresponding sections
@Manoj-Fernando Well I just found my solution this is what you can use. http://www.w3schools.com/jsref/event_onscroll.asp
Tyler Conoff
@Yoplay8
Aug 10 2016 10:56
@Manoj-Fernando But to answer your question I pretty sure no element does that work unless its being manipulated by java script events
d1sr3
@d1sr3
Aug 10 2016 10:57
Hello is there a site with sound effects like https://s3.amazonaws.com/freecodecamp/simonSound4.mp3 I'd like to add a beep for wrong click and I have no idea where should I look for it
Tyler Conoff
@Yoplay8
Aug 10 2016 10:57
Do you want to see mine :D It soo cool. https://codepen.io/yoplay8/pen/AXmZod
d1sr3
@d1sr3
Aug 10 2016 11:04
@Yoplay8 nope
Tyler Conoff
@Yoplay8
Aug 10 2016 11:07
Its not the same sound but heres a wrong sound. https://www.freesound.org/people/SgtPepperArc360/sounds/341732/
Jeremy Barbe
@eemebarbe
Aug 10 2016 11:58
can anyone help with react?
Manar Kurmanov
@manar-mk
Aug 10 2016 12:13
hi, have anyone written tests for angular1+ typescript under karma and webpack
Hüseyin Emecan
@Guvargam
Aug 10 2016 13:16
hi everyone!
ı just ask something
Stephen James
@sjames1958gm
Aug 10 2016 13:17
@Guvargam ask away
Hüseyin Emecan
@Guvargam
Aug 10 2016 13:18
how can ı make this screen
upcoming screen
Stephen James
@sjames1958gm
Aug 10 2016 13:18
help format
CamperBot
@camperbot
Aug 10 2016 13:18

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Hüseyin Emecan
@Guvargam
Aug 10 2016 13:22
camoonnn
ıs there anyone here*
Stephen James
@sjames1958gm
Aug 10 2016 13:23
@Guvargam You want to duplicate that behavior? I wouldn't know how, but no-one responding. Maybe use inspector to see what makes up the page.
Dany Din
@danydin
Aug 10 2016 13:23
can i have quick explantion please for the meaning of cdn
not the full word but what it does/means
Stephen James
@sjames1958gm
Aug 10 2016 13:25
@danydin CDN as in content delivery network? It is a set of servers and networks that facilitates the delivery of content to web sites.
Designed for high storage capacity, high availability and high bandwidth.
@danydin Also, many of the js/css files are stored in CDN for rapid retrieval.
Dany Din
@danydin
Aug 10 2016 13:28
Ya but what it does what are his advantages thanks
@sjames1958gm
It used to save cache from. Users I think right
Lanitta
@DivaWeb
Aug 10 2016 13:54
@JeffH2322 the type of page you need to create is a scrollspy page. if you do some research on this you will find what you need to create your page.
good morning all
Joel Santos
@St3ps
Aug 10 2016 14:39
Is there anyway you can change a attribute in html through css? Like, let's say i'm doing media-queries, and i want an attribute (not a property) of an element to increase with the viewport size
Is there a way i can do this through css?
Sorin Ruse
@sorinr
Aug 10 2016 14:48
@St3ps hope this will give you some clues on attributes: http://www.w3schools.com/css/css_attribute_selectors.asp
Joel Santos
@St3ps
Aug 10 2016 15:02
@sorinr This will 'select' elements with certain attributes, what i was looking for was to change attributes with css, I don't think it's possible, at least in a straightforward manner, but i've 'sorted' it out :p, thanks anyway Sorin
CamperBot
@camperbot
Aug 10 2016 15:02
st3ps sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 650 | @sorinr |http://www.freecodecamp.com/sorinr
Sammy Ibrahim
@sammy11111
Aug 10 2016 15:05
@St3ps With css, none that I'm aware of..How about using Angular?
Randy Goldsmith
@Dueldrawer8
Aug 10 2016 15:08
ive been stuck on this calculator project for awhile. Any hints on how to use eval? So far I have whenever I click the = button.. i want something to happen. I know i have to get the values or output from the p element and evalulate it but i dont know how to code it.
http://codepen.io/duel_drawer8/pen/rLygWG
Stephen James
@sjames1958gm
Aug 10 2016 15:10
@danydin sry been afk. High availability is one advantage. high bandwidth mean low latency.
Randy Goldsmith
@Dueldrawer8
Aug 10 2016 15:14
could i create a function for when i am appending numbers to the html and insert that function into the eval() method to calculate?
Joel Santos
@St3ps
Aug 10 2016 15:17
@sammy11111 Eventually, but -- this is my case -- perhaps one ought to become more envolved into js, bootstrap, jquery, and css/sass first before, adding more layers of complexity into one's work
Regardless, the workaround is quite simple and fortunately the case is unique :p
Ken Haduch
@khaduch
Aug 10 2016 15:18
@Dueldrawer8 - The eval() function evaluates JavaScript code represented as a string (From MDN eval docs )- so you just have the javascript mathematical equation or code and pass it to eval.
Sammy Ibrahim
@sammy11111
Aug 10 2016 15:19
@St3ps I see your point…from a learning perspective it’s best to learn the foundations before getting involved with frameworks.
Randy Goldsmith
@Dueldrawer8
Aug 10 2016 15:19
@khaduch yes so i can pass numbers and operations into it and it will evaluate it
Ken Haduch
@khaduch
Aug 10 2016 15:19
@Dueldrawer8 - and they point out the dangers of using eval - it will run any code. They point out: There are safer (and faster!) alternatives to eval() for common use-cases.
@Dueldrawer8 - yes, it should work. Check out the documentation on that page, loads of examples, and information...
Randy Goldsmith
@Dueldrawer8
Aug 10 2016 15:20
@khaduch for the purposes of a calculator i think eval is fine
@khaduch and yes i have been looking at the examples, i just don't know how to select the output from the html
and evaluate it
you can see the code i have so far in my codepen
Joel Santos
@St3ps
Aug 10 2016 15:21
@sammy11111 Precisely! Hopefully soon i'll be envolved with Angular, what would you say is the biggest advantage of using it?
Randy Goldsmith
@Dueldrawer8
Aug 10 2016 15:21
i have selected the equals button.. and used a .click
so whenever the equals button is pressed.. i want it to perform some function
Ken Haduch
@khaduch
Aug 10 2016 15:22
@Dueldrawer8 - I think that as the code is entered, you accumulate the digits, when an operation is selected, you tack the equivalent javascript into the string you are building, and when = or whatever should trigger an evaluation is pressed, then run the eval? I'll take a peek at your code... just a little short on time! :)
Ken Haduch
@khaduch
Aug 10 2016 15:24
@Dueldrawer8 - you are basically forming the equation in your calculator display - just keep that string in a javascript variable (so you don't have to fetch it back from the DOM) and when = is clicked, evaluate it! (Might not be as easy as it sounds, but I think that's how I would try to do it to start out. ) You might have to make some adjustments - try operations on a real calculator and see - usually when you enter digits and then an operation, it clears the display and the numbers are being accumulated in the calculator somewhere. Then if you hit "C", it will clear the current value being entered and retain the previous, unless you hit "C" twice (or have an "AC" button.)
Randy Goldsmith
@Dueldrawer8
Aug 10 2016 15:26
@khaduch thanks, i figured i have to save it in a variable but don't know how to go about that since i already saved the output within another function
CamperBot
@camperbot
Aug 10 2016 15:26
dueldrawer8 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1527 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Aug 10 2016 15:28
@Dueldrawer8 - make a global variable and store it there - you can get it from the DOM, but that's not a good methodology to use (besides, it is a lot like a global variable anyway.)
Randy Goldsmith
@Dueldrawer8
Aug 10 2016 15:29
@khaduch yeah sounds like i have a lot of adjustments to make lol
@khaduch make a variable that stores the display values
Ken Haduch
@khaduch
Aug 10 2016 15:37

@Dueldrawer8 - I did a really simple-minded thing -

$('.num, .ops').click(function(){
  var $getNumbers = $(this).text();
  $('.boxAnswer p').append($getNumbers);
  myequation += ' '  + $getNumbers;
});

and

$('.total').click(function(){
  console.log( "myequation = " + myequation);
  console.log(eval(myequation));
})

along with a global variable myequation. It works for one operation because I didn't think about what was going to happen to the accumulated equation after hitting = - but it works for one operation. It might be that you have to get the result up to that point and replace the contents of myequationwith that result, and then continue adding new operations and input. You probably have to make a state machine of sorts to keep track of what's going on. For instance, if you entered 7 + 9 = you would expect to see 16. Then if you hit + 7 = you would expect to see 23. But if you did 7 + 9 = you would expect to see 16, but then started entering numbers instead of another operator, you would probably want to throw away the current answer and start accumulating new numbers. That kind of thing you have to consider how you want to handle it.

Tomáš Kalný
@Sleepy-guy
Aug 10 2016 15:40
var break_minutes = 0;
var seconds=  60;
 var break_interval = setInterval(function(){
      seconds = 60;
      break_minutes = break_minutes - 1;
      break_minutes = break_minutes < 10 ? '0'+break_minutes: break_minutes;
    },60000)
   var break_secint =  setInterval(function(){
      seconds = seconds - 1;
      seconds = seconds < 10 ? '0'+seconds: seconds;
      console.log(break_minutes+':'+seconds);
     if (seconds[1] === 0 && break_minutes === 0){
      clearInterval(break_interval);
       clearInterval(break_secint);
    }
    },1000)
any ideas what is wrong with my if statement?
Darth Skywalker
@adityaparab
Aug 10 2016 15:40

Greetings,

Initial Draft of Wiki Viewer using React. Awaiting Early feedback :grinning:

After entering search term, the dropdown should show up, please wait till it does. It may get slower because it is embedded in the codepen

http://codepen.io/AdityaParab/full/zByGbA/

Sonny R. Recio
@reciosonny
Aug 10 2016 15:42
hi
To all experienced developers out there: Do I need to know how to design a website creatively(creating style guides, creativity, etc.) in order to become a front-end developer? Or will I just be provided with a wireframe then design it using my html/css and js skills? Need an answer to this as I am interested to become a front-end developer lately.
Ken Haduch
@khaduch
Aug 10 2016 15:42
@Sleepy-guy - seconds is not an array. But i guess you can treat it as such, since it is a string. I would recommend that you only keep the count of seconds in your code - 10 minutes = 600 seconds, etc. Then your calculations are much simpler, and you just convert to mm:ss as you output to your display.
Ashraful Islam
@iashraful
Aug 10 2016 15:46
@reciosonny you are required to know both drawing(making graphical icons/buttons/interfaces in photoshop/illustrator) plus some html/css to make style guides when you are a Designer
Joel Santos
@St3ps
Aug 10 2016 15:47
@adityaparab Looks pretty good, you've made me embarassed of my wiki viewer :p
Tomáš Kalný
@Sleepy-guy
Aug 10 2016 15:47

@khaduch isn't there any other solution ? :D simplier ? I mean after 2 days I sort of figured out pomodoro and now I need to do it again from scratch because of if statement ? I know its not array but even so seconds1 returned correct number if I delete this line

seconds = seconds < 10 ? '0'+seconds: seconds;

it works perfectly

Sonny R. Recio
@reciosonny
Aug 10 2016 15:48
Well, I was wondering about that too since there are some job postings with front-end 'developer' or front-end 'designers'..I'm a little bit confused.
Ashraful Islam
@iashraful
Aug 10 2016 15:48
but as a developer these are usually not required(from the number of Front-End developer job postings I've seen), but some companies(esp. start-ups) are short on budget so they want to hire all-in-one(designer+dev) in that case you may need to know such stuff
Darth Skywalker
@adityaparab
Aug 10 2016 15:48
@St3ps : haha! Thanks mate! Let me know if you have any suggestions on improvement (of any kind) :D
CamperBot
@camperbot
Aug 10 2016 15:48
adityaparab sends brownie points to @st3ps :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @st3ps |http://www.freecodecamp.com/st3ps
Ken Haduch
@khaduch
Aug 10 2016 15:48
@Sleepy-guy - oh, yeah, and you probably don't really want to have two interval timers running - way too complicated for this! Also, the real problem with your if statement is that it looks like you might have string values in your break_minutes and seconds might or might not be a string, that is probably what is really going on - sometimes seconds[1] will work (if it's a string) and it won't work if it is an integer value... just getting yourself confused! And if you are trying to do strict equality then you might never get the match you want.
Ashraful Islam
@iashraful
Aug 10 2016 15:48
specially beginner/starting developers often has to know these stuff, but once you gather experience and your Resume grows to something they won't want you doing those things
developer = codemonkeys, designers = creatives with photoshop/illustrator/sketch ninjutsu
Ken Haduch
@khaduch
Aug 10 2016 15:50
@Sleepy-guy - the code will be so much simpler if you go to one count of seconds - but you can try to stick with what you are doing. I would definitely eliminate the two interval timer values, though. I cannot see that causing you anything but trouble!
Tomáš Kalný
@Sleepy-guy
Aug 10 2016 15:51
@khaduch http://codepen.io/Sleepy-guy/pen/oLQXkB?editors=0010 well this is my codepen :D I didn't have any trouble with 2 intervals until now :D .
greg
@wearenotgroot
Aug 10 2016 15:53
@Sleepy-guy imgur and codepen not a good match :(
Joel Santos
@St3ps
Aug 10 2016 15:53
@adityaparab Ok, found something, i think. This isn't mobile-friendly, is it?
Tomáš Kalný
@Sleepy-guy
Aug 10 2016 15:54
@wearenotgroot why ?
Darth Skywalker
@adityaparab
Aug 10 2016 15:55
@St3ps : Nope! Not mobile responsive yet.
greg
@wearenotgroot
Aug 10 2016 15:55
@Sleepy-guy imgur block codepen traffic
Tomáš Kalný
@Sleepy-guy
Aug 10 2016 15:56
@wearenotgroot oh so is there any other solution ?
greg
@wearenotgroot
Aug 10 2016 15:56
@Sleepy-guy well using other free hosting image site
Joel Santos
@St3ps
Aug 10 2016 15:58
@adityaparab alright, then i have nothing to add, good work
Darth Skywalker
@adityaparab
Aug 10 2016 16:02
@St3ps : :+1:
Ken Haduch
@khaduch
Aug 10 2016 16:14
@Sleepy-guy - well, I don't know if the two interval timers will always stay in sync with each other, or if there could be a race condition where the seconds change before the minutes or vice-versa (whatever would cause the most problems?) You could solve your problems with the if statement and the varying types by keeping your seconds and minutes in a variable and only converting to the two-digit leading zero format for outputting to the DOM... that way you would always have a consistent way to compare them.
Sorin Ruse
@sorinr
Aug 10 2016 16:22
@Sleepy-guy i would also use a fallback for the background in case the link is broken like: background: url('http://i.imgur.com/XCEYs7l.png') red/blue/whatever but not white;
dongooden
@dongooden
Aug 10 2016 16:41
Hello world. My name is don, im new to fcc i stumbled across fcc december of last year and tried to start and stay committed, but then of course intervened. So here i am again with a stringer fortitude to complete all four levels by this time next year. Why? Because in 4 years there will be more jobs the developers. Also for the artistic side of coding. Creating something out of thin air and watching it come to fruition. Hooe to meet some cool code fellows and have fun learning to code
CamperBot
@camperbot
Aug 10 2016 16:41

welcome to FreeCodeCamp @dongooden!

Lanitta
@DivaWeb
Aug 10 2016 16:46
hello all
Ken Haduch
@khaduch
Aug 10 2016 16:52
@dongooden - welcome, Don - it does take dedication and it sounds like you're motivated for it. Good luck!
Shyamli
@cshyamli
Aug 10 2016 16:53
hola
Tim B.
@rbird3d
Aug 10 2016 16:54
Help please, I'm in the JQuery assignment "Target Elements by Class Using jQuery" and can't figure it out. Here's what i have...
CamperBot
@camperbot
Aug 10 2016 16:54
no wiki entry for: please im in the jquery assignment target elements by class using jquery and cant figure it out heres what i have
Tim B.
@rbird3d
Aug 10 2016 16:54
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addclass("animated shake");
});
</script>
Jason Luboff
@JLuboff
Aug 10 2016 16:59
Without looking at the actual assignment...I'm guessing the issue is you aren't defining "button" as a class...try making it "#button"
@rbird3d
Norvin Burrus
@ndburrus
Aug 10 2016 17:08
@dongooden (Don - excellent goal/s!) Welcome to Free Code Camp & the community! :sparkles:
you may enjoy these: :sparkles: How To Rapidly Progress When Learning To Code, Start for New Campers, & * Please don’t quit — every expert was once a beginner
Sorin Ruse
@sorinr
Aug 10 2016 17:34
@JLuboff class .button , id #button. class and id two diff things
Jason Luboff
@JLuboff
Aug 10 2016 17:36
@sorinr You are correct, I'm clearly still half a sleep :smile:
Tomáš Kalný
@Sleepy-guy
Aug 10 2016 17:36
This message was deleted
cBrayton
@cBrayton
Aug 10 2016 17:41
I'm working on querying the weather, but I get a Not Found error, which according to SO means my url is bad. Can someone point out where this call is wrong? $.getJSON("api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&APPID={APPID}",{lat: lat, lon: lon, APPID: "22c33353eb8bc2de3a276c444cce3309"} ,function(json)
Jason Luboff
@JLuboff
Aug 10 2016 17:43
@cBrayton add http:// to the beginning of the url
Norvin Burrus
@ndburrus
Aug 10 2016 17:44
@rbird3d which lesson is this?
cBrayton
@cBrayton
Aug 10 2016 17:45
@JLuboff haha thanks, now I get an unauthorized error though. Did I use the key wrong?
CamperBot
@camperbot
Aug 10 2016 17:45
cbrayton sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @jluboff |http://www.freecodecamp.com/jluboff
Stephen James
@sjames1958gm
Aug 10 2016 17:46
@cBrayton Did you get your own APPID?
Jason Luboff
@JLuboff
Aug 10 2016 17:48
@cBrayton you may want to just have the api key plugged into the url instead of like a variable (at least I think thats how its being accessed now?)
cBrayton
@cBrayton
Aug 10 2016 17:51
@sjames1958gm @JLuboff Thanks! Adding the key to the url instead of a parameter fixed it!
CamperBot
@camperbot
Aug 10 2016 17:51
cbrayton sends brownie points to @sjames1958gm and @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2481 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
:warning: cbrayton already gave jluboff points
Stephen James
@sjames1958gm
Aug 10 2016 17:51
@cBrayton :+1:
Rahul Nayak
@pragyes31
Aug 10 2016 17:53
guys, what does a shallow copy of array signifies?
Janine vN
@janine9vn
Aug 10 2016 17:59
@pragyes31 It doesn't copy over the element details. You could google shallow copy vs deep copy for a much better explanation. It's a common topic
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:03
hi All
Is this the right place to ask a question about the tribute project?
Rahul Nayak
@pragyes31
Aug 10 2016 18:03
@janine9vn ohh thanks :)
CamperBot
@camperbot
Aug 10 2016 18:03
pragyes31 sends brownie points to @janine9vn :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @janine9vn |http://www.freecodecamp.com/janine9vn
Janine vN
@janine9vn
Aug 10 2016 18:04
@patrickkeogh Sure!
jrandallhansen
@jrandallhansen
Aug 10 2016 18:05
could someone take a look at my attempted API call to openweather API for the Local Weather challenge? it is my first api call and i cant get it to work correctly
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:05
I am trying to link to an image in my html but the image isnt showing
Is there something special we need to do for images on code pen?
Jason Luboff
@JLuboff
Aug 10 2016 18:06
@patrickkeogh make sure you have the image hosted somewhere...I used photobucket
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:06
I was using freedomainpictures
Jason Luboff
@JLuboff
Aug 10 2016 18:07
@patrickkeogh can you post your codepen?
@jrandallhansen if you console.log(data), do you get any results?
jrandallhansen
@jrandallhansen
Aug 10 2016 18:09
@JLuboff No. But i do get a response if i write a console.log('hello world') ;outside the .getJSON function
so i can reasonably conclude i have an issue with the function. the URL is correct if you try it in the browser.
Stephen James
@sjames1958gm
Aug 10 2016 18:10
@jrandallhansen You are requesting a http:// url from a https:// site which is not allowed, reconnect to codepen over http://
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:11
ah
jrandallhansen
@jrandallhansen
Aug 10 2016 18:12
@sjames1958gm that is exactly what the issue is!! thank you
CamperBot
@camperbot
Aug 10 2016 18:12
jrandallhansen sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2482 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Sorin Ruse
@sorinr
Aug 10 2016 18:12
@jrandallhansen if you run your pen over http not https you will get a response. only that the temp is in Kelvin so you will have to add in your var api something like &unit=metric or &unit=imperial at the end of the api string
jrandallhansen
@jrandallhansen
Aug 10 2016 18:13
@sorinr thanks for that suggestion! i was going to write a function to convert it but if i can access the temp with a diff API call I may look into that option instead
CamperBot
@camperbot
Aug 10 2016 18:13
jrandallhansen sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 651 | @sorinr |http://www.freecodecamp.com/sorinr
Stephen James
@sjames1958gm
Aug 10 2016 18:13
@jrandallhansen Now, if you run codepen over http:// and you use chrome you will not be able to get the location from the browser :(
You can use an ip to location API just as ip-api.com/json (less accuracy but sufficient for this task)
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:13
Heres my codepen I can't get image to load
jrandallhansen
@jrandallhansen
Aug 10 2016 18:14
@sjames1958gm I do use Chrome so I guess I get to learn about a second API call on this assignment! LOL
Jason Luboff
@JLuboff
Aug 10 2016 18:14
@patrickkeogh change "scr" to "src"
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:15
oh how silly of me
jrandallhansen
@jrandallhansen
Aug 10 2016 18:15
@sorinr where could i learn more about what to add to the call to get the temp correctly? or are you sure &unit=metric and &unit=imperial are correct?
@sorinr I didn't see anything in the API documentation
Jason Luboff
@JLuboff
Aug 10 2016 18:15
it would be &units=imperial or metric
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:16
only problem is its rotating my image
hmm
jrandallhansen
@jrandallhansen
Aug 10 2016 18:16
@sorinr @JLuboff thank you!!
CamperBot
@camperbot
Aug 10 2016 18:16
jrandallhansen sends brownie points to @sorinr and @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @jluboff |http://www.freecodecamp.com/jluboff
:warning: jrandallhansen already gave sorinr points
Stephen James
@sjames1958gm
Aug 10 2016 18:17
@jrandallhansen Search this page for imperial http://openweathermap.org/current
Jason Luboff
@JLuboff
Aug 10 2016 18:18
@patrickkeogh This is why I like to use photobucket, I can rotate the image within photobucket. Otherwise, you'll want to google how to rotate an image with CSS or html (I'm not familiar with doing so)
jrandallhansen
@jrandallhansen
Aug 10 2016 18:19
@sjames1958gm i see now. learning to read documentation is key
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:19
can we link to images in wikipedia?
Sorin Ruse
@sorinr
Aug 10 2016 18:20
@patrickkeogh yes
Stephen James
@sjames1958gm
Aug 10 2016 18:21
@jrandallhansen :+1:
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:22
I am trying to link to this image
Dylan
@dhcodes
Aug 10 2016 18:22
@patrickkeogh if you're using codepen, it could be a security issue
try removing s from https:// in your link or adding s to your codepen url
they need to be the same
Sorin Ruse
@sorinr
Aug 10 2016 18:23
@patrickkeogh rotate your image. here some info: https://css-tricks.com/almanac/properties/t/transform/
jrandallhansen
@jrandallhansen
Aug 10 2016 18:24
is it possible to pass an API call over https: protocol or is it always http:
?
Jason Luboff
@JLuboff
Aug 10 2016 18:25
You can, its dependent on the API and what protocol they use. If you wanted to use https:// you can use a proxy server such as https://crossorigin.me to help
Sorin Ruse
@sorinr
Aug 10 2016 18:27
@patrickkeogh i tried to load that img over http but don't work , so as @dhcodes said you have to load your pen over https instead of http
@patrickkeogh even so, if you have other links that are working only on http but https you will encounter problems
Lanitta
@DivaWeb
Aug 10 2016 18:28
so I am a little lost about retrieving info from an api
I have the basics of the code should look like but unsure how to take all the info they give for an api and incorporate it into the code
Sorin Ruse
@sorinr
Aug 10 2016 18:29
@DivaWeb what problems?
@DivaWeb how do u make the call to the api?
Lanitta
@DivaWeb
Aug 10 2016 18:30
@sorinr I guess that would be it
@sorinr here is the api I am going to use http://forismatic.com/en/api/
@sorinr here is my codehttps://codepen.io/DivaWeb/pen/BKoEZj
Jason Luboff
@JLuboff
Aug 10 2016 18:32
@DivaWeb the url for the API needs to go into the .getJSON function
.getJSON(url, function(result){ ...})
Lanitta
@DivaWeb
Aug 10 2016 18:33
@JLuboff so I do not need to put it into the html side at all?
Jason Luboff
@JLuboff
Aug 10 2016 18:34
No, at least in my experience I have not
Sorin Ruse
@sorinr
Aug 10 2016 18:35
@DivaWeb ok. here: $.getJSON() you should have something like: $.getJSON(url, function(response){ here your logic to manage the response}); the url i have used is 'http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en'
i open the image in picMonkey and it isnt rotated
I show in here or in codepen and it is
very weird
if you click the link the image appears correct
Lanitta
@DivaWeb
Aug 10 2016 18:38
@sorinr so you used both together as one link?
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:39
can someone try the link to the above image. Does it open correct ina browser?
Sorin Ruse
@sorinr
Aug 10 2016 18:40
@DivaWeb this is the syntax of the function $.getJSON. here more info: http://api.jquery.com/jquery.getjson/
kennyq94
@kennyq94
Aug 10 2016 18:40

Hey guys do you know why i cant get my bootstrap columns to work ?

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6">
<div class = "logo">
<h1>CODING</h1>
<h1 class = "diffcolor">WILL</h1>
<h1>CHANGE</h1>
<h1 class = "diffcolor">MY</h1>
<h1>LIFE</h1>
</div>
</div>
<div class = "col-md-6">
<p>I CANT GET THIS ON THE SECOND COLLUMN</p>
</div>
</div>
</div>

Lanitta
@DivaWeb
Aug 10 2016 18:41
@sorinr @JLuboff thank you for your help
CamperBot
@camperbot
Aug 10 2016 18:41
divaweb sends brownie points to @sorinr and @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @jluboff |http://www.freecodecamp.com/jluboff
:cookie: 652 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 10 2016 18:41
@DivaWeb welcome
Jason Luboff
@JLuboff
Aug 10 2016 18:43
@kennyq94 just plugged this into a fresh codepen with bootstrap add-in (via the CSS add-in menu) and it works?
kennyq94
@kennyq94
Aug 10 2016 18:47
@JLuboff weird my <p>I CANT GET THIS....</p> element still doesnt appear on the second collumn after the add on
Sorin Ruse
@sorinr
Aug 10 2016 18:49
@patrickkeogh :point_up: August 10, 2016 9:23 PM
better
Sorin Ruse
@sorinr
Aug 10 2016 18:52
@patrickkeogh yea
Patrick Keogh
@patrickkeogh
Aug 10 2016 18:53
still doesnt match the demo
kennyq94
@kennyq94
Aug 10 2016 18:55

<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6">
<div class = "logo">
<h1>CODING</h1>
<h1 class = "diffcolor">WILL</h1>
<h1>CHANGE</h1>
<h1 class = "diffcolor">MY</h1>
<h1>LIFE</h1>
</div>
</div>
<div class = "col-md-6">
<p>I like u alot</p>
</div>
</div>
</div>

can someone help me :( i cant get my <p></p> element to appear in the second column.

view that full screen and its working as you like?
kennyq94
@kennyq94
Aug 10 2016 18:57
I wanted to put the I like u alot to appear on the right side of the page
Tyler Moeller
@TylerMoeller
Aug 10 2016 18:57
@kennyq94 Your code is correct. Is your screen big enough to show it in two columns? Maybe change the md to xs to verify.
Jason Luboff
@JLuboff
Aug 10 2016 18:58
@kennyq94 yes, in full screen it does. But as @TylerMoeller just mentioned, in smaller screens it will not be in two columns unless we try changing the column size
kennyq94
@kennyq94
Aug 10 2016 18:59
ysasssss got it to work guys
thanks @JLuboff and @TylerMoeller
CamperBot
@camperbot
Aug 10 2016 18:59
kennyq94 sends brownie points to @jluboff and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 726 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 273 | @jluboff |http://www.freecodecamp.com/jluboff
kennyq94
@kennyq94
Aug 10 2016 18:59
it was the xs
Tyler Moeller
@TylerMoeller
Aug 10 2016 19:00
Glad you got it working :smile:
Sorin Ruse
@sorinr
Aug 10 2016 19:01
@patrickkeogh the demo its just a demo. you can design your page as you wish. you don't have to copy that design. here is my tribute page
Norvin Burrus
@ndburrus
Aug 10 2016 19:10
This message was deleted
Jason Luboff
@JLuboff
Aug 10 2016 19:10
@sorinr F1 fan :+1:
Sorin Ruse
@sorinr
Aug 10 2016 19:14
@patrickkeogh the most important thing is to mark the users stories in the challenge ( to have a link on the page to take you to a new external page where u can read more info about the subject you decided to present). the design of the page its all up to your imagination
@JLuboff :+1:
@JLuboff i had the chance to see live an f1 Grand Prix only once in 2008 in Singapore
Jason Luboff
@JLuboff
Aug 10 2016 19:18
@sorinr I'm jealous! I'm hoping to be able to attend either the USGP or Canadian GP sometime in the future when I can afford it haha
Sorin Ruse
@sorinr
Aug 10 2016 19:19
@JLuboff it happened to be there with biz problems and a Singaporean friend had tickets :)
Jason Luboff
@JLuboff
Aug 10 2016 19:21
@sorinr nice friend :smile:
Sorin Ruse
@sorinr
Aug 10 2016 19:25
@JLuboff yes
Artis Raudive
@ar14059
Aug 10 2016 19:42
Hello everyone!
Ashraful Islam
@iashraful
Aug 10 2016 19:43
@ar14059 Hello! :D
Edwin Cruz
@edwinlcruz
Aug 10 2016 19:43
Hello everyone!
So I am up to the part when i have to make the portfolio.
Ashraful Islam
@iashraful
Aug 10 2016 19:44
@edwinlcruz Hi!
congratulations! :D
Edwin Cruz
@edwinlcruz
Aug 10 2016 19:44
Am i suppose to find out how to add all those features through google? beacuse i haven
haven't learned how to do most of that
Ashraful Islam
@iashraful
Aug 10 2016 19:44
the part of all these is that you research yourself, find things read, learn and then implement
:)
Edwin Cruz
@edwinlcruz
Aug 10 2016 19:46
ok
Artis Raudive
@ar14059
Aug 10 2016 19:48
I work now on twitch project, stuck with one problem: when i click on channel title, it suppose to open profile page. It opens new page but it's empth, i can see only background color. When i open profile page in new browser tab, it opens perfectly. How to solve this problem?
My project: http://codepen.io/artisraudive/pen/pbqjJz?editors=0010
Ashraful Islam
@iashraful
Aug 10 2016 19:53
it works for me
the profile pages seems to take a lot of time to load but nevertheless its working
@ar14059
freecodecamp profile loads immediately
but others take some time
Sorin Ruse
@sorinr
Aug 10 2016 19:55
@ar14059 its the same for everyone. the target="_blank" does not fully load the page at least on chrome. have you tested this behaviour on other browsers?
Ashraful Islam
@iashraful
Aug 10 2016 19:57
@sorinr on the contrary its working for me
my chrome is 52.0.2743.116 m (64-bit)
the freecodecamp profile loads immediately, but other profiles takes time
Sorin Ruse
@sorinr
Aug 10 2016 20:02
@iashraful i have 52.0.2743.116 m also 64bit and do the same and i have gigabit connection
Ashraful Islam
@iashraful
Aug 10 2016 20:02
hmm... may be its twitch problem
because when I load it separately it again takes lot of time
or may be these channels are dead?
Artis Raudive
@ar14059
Aug 10 2016 20:03
@sorinr Yes, i tried in firefox, almost the same result
Sorin Ruse
@sorinr
Aug 10 2016 20:05
@ar14059 @iashraful i did it this way: twitch tv app
Shelly Barkley
@recklessmoxie
Aug 10 2016 20:21
beautiful i see you are talking about the twitch api project
i came here to ask a question about it :)
has anyone run into issues with the api requiring a key now?
Sorin Ruse
@sorinr
Aug 10 2016 20:25
@recklessmoxie nope. what do u mean?
Shelly Barkley
@recklessmoxie
Aug 10 2016 20:26
Sorin Ruse
@sorinr
Aug 10 2016 20:29
@recklessmoxie is this working for you? :point_up: August 10, 2016 11:05 PM
@recklessmoxie i have no api key
Shelly Barkley
@recklessmoxie
Aug 10 2016 20:30
Yes, it does work for me. I am not using a client api and don't plan to have a lot of traffic to my app. just don't want to include something in my professional portfolio that might break without me realizing :)
thank you @sorinr
CamperBot
@camperbot
Aug 10 2016 20:31
recklessmoxie sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 653 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 10 2016 20:35
@recklessmoxie welcome. i got your point on portfolio. its bad to try showing something, even if its well done, but at sometime stop working :)
Sorin Ruse
@sorinr
Aug 10 2016 20:47
@recklessmoxie i've read the article. they say that after aug/8 it is required but they also are saying "I’ll keep reminding you to make the transition over the coming months."
Darth Skywalker
@adityaparab
Aug 10 2016 20:47

@sorinr

@recklessmoxie welcome. i got your point on portfolio. its bad to try showing something, even if its well done, but at sometime stop working :)

Let me take that risk

https://adityaparab.github.io/React/wikiviewer/

Sam Griffen
@ssgriffen
Aug 10 2016 20:48
Hey what's the easiest way to send the info from a contact form to your email if you don't know php? I tried <form action="mailto:you@yourdmainhere.com" method="post" enctype="text/plain" > but that doesnt seem to work
Darth Skywalker
@adityaparab
Aug 10 2016 20:50
@ssgriffen : mailto: is a protocol that invokes default mailing application on your computer. It needs to be accessed from href attribute that is defined on anchor tag.
Sorin Ruse
@sorinr
Aug 10 2016 20:51
@adityaparab nice wiki page using materializecss. we where talking about https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.103d96gzq
Sam Griffen
@ssgriffen
Aug 10 2016 20:51
@adityaparab http://www.javascript-coder.com/javascript-form/javascript-email-form.phtml <- so are they doing it wrong in the example onthis page?
Darth Skywalker
@adityaparab
Aug 10 2016 20:52
When you define mailto: on a form as action, the action expects its value to be a URL so it wont send it anywhere
Sam Griffen
@ssgriffen
Aug 10 2016 20:52
okay thanks @adityaparab
CamperBot
@camperbot
Aug 10 2016 20:52
ssgriffen sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 544 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Aug 10 2016 20:52
@ssgriffen : Do you have any mail client installed and configured on your machine? Like outlook, etc?
Ashraful Islam
@iashraful
Aug 10 2016 20:53
technically speaking, you need a server or something that can talk to a mail server to send an email
Sam Griffen
@ssgriffen
Aug 10 2016 20:53
ya thunderbird
Ashraful Islam
@iashraful
Aug 10 2016 20:53
when you use mailto, all it does is open a default email client installed on that pc
Darth Skywalker
@adityaparab
Aug 10 2016 20:53
@ssgriffen : So when you submit your form, is it opening your thunderbird application?
Tyler Moeller
@TylerMoeller
Aug 10 2016 20:53
@ssgriffen mailto: is not supported by all browsers: http://caniuse.com/#search=mailto
You really need to use a back-end script to get it working
Sam Griffen
@ssgriffen
Aug 10 2016 20:54
You can't do it in JS though
@adityaparab No it's not, Thunderbird may not be my default in settings
Darth Skywalker
@adityaparab
Aug 10 2016 20:55
@ssgriffen : Checkout NodeJS
php sucks anyway
Sam Griffen
@ssgriffen
Aug 10 2016 20:55
@adityaparab Fuck ya, NodeJS is legendary, I have a business partner that uses that
Darth Skywalker
@adityaparab
Aug 10 2016 20:56
More specifically, run an express server. and parallelly run this SMTP server
your form action will be a url to your express server route
and from that route, trigger this SMTP server
More on SMTP using node - https://www.npmjs.com/package/smtp-server
Ashraful Islam
@iashraful
Aug 10 2016 20:57
or you can use this api
^ 10000 mails free per month
just call the api, but expect all sorts of spams
ah, they don't have js support, I see
Sam Griffen
@ssgriffen
Aug 10 2016 20:59
@iashraful Not about the spam life
Ashraful Islam
@iashraful
Aug 10 2016 20:59
^ that was super cool word
spam life :sunglasses:
Sam Griffen
@ssgriffen
Aug 10 2016 20:59
@adityaparab That node.js smtp route looks awesome...I just am not at that point of my learning curve yet I feel like to integrate it but we'll see
@iashraful Are you being sarcastic haha?
Ashraful Islam
@iashraful
Aug 10 2016 21:00
am serious
feels like those movie hacker thingy
wow! this smtp-server is awesome
going to implement it tomorrow
Sam Griffen
@ssgriffen
Aug 10 2016 21:01
https://codepen.io/FreeCodeCamp/full/YqLyXB/ can anyone tell me how this guy is sending his contact form to himself.
Ashraful Islam
@iashraful
Aug 10 2016 21:01
:worried: but don't know why do I need it
@ssgriffen lovely profile, I like that big cheque
$1000 for what?
Sam Griffen
@ssgriffen
Aug 10 2016 21:03
Thats not my profile? Its the example im followingg haha
Ashraful Islam
@iashraful
Aug 10 2016 21:03
hmm... that is strange, made with coffee and music, am not familiar with those languages
my tiny brain can only use html/css/js at this point for building webpages
Sam Griffen
@ssgriffen
Aug 10 2016 21:04
@adityaparab Do you know how the example above is sending the contact form?
Ashraful Islam
@iashraful
Aug 10 2016 21:09
@ssgriffen from what I see it's not sending the message anywhere
just a plain old form
Sorin Ruse
@sorinr
Aug 10 2016 21:10
@adityaparab what i don't like about react is that it force you to move your html to js part. i preffered vue.js because you can add almost same functionality to an old html site without the need to rewrite the site
Knight
@aaszkolenia
Aug 10 2016 21:10

hey meaby you can help me...:)
I have:

<div class="col-xs-4">
<button> <i class="btn btn-block btn-primary fa fa-thumbs-up">Like</i></button>
</div>
and I have to do this:

what am I doing wrong?

i have do this: Your fa-thumbs-up icon should be located within the Like button.
:(
Ashraful Islam
@iashraful
Aug 10 2016 21:11
:worried: very complex problem, I'd do something like this
<button> <i class="btn btn-block btn-primary fa fa-thumbs-up"></i>Like</button>
@aaszkolenia
Knight
@aaszkolenia
Aug 10 2016 21:12
i try :D
@iashraful it's not it ;/
Ashraful Islam
@iashraful
Aug 10 2016 21:14
can I see it?
which exercise is it?
link please
Darth Skywalker
@adityaparab
Aug 10 2016 21:15

@ssgriffen as per my understanding and observation of outbound requests, it is not sending any mail. The form doesn't have action attribute to define submit action and there is also nothing in js as far as form submission is concerned.

It just goes back to the same page upon submission.

so no mail is getting sent
Sam Griffen
@ssgriffen
Aug 10 2016 21:15
Thanks @adityaparab
CamperBot
@camperbot
Aug 10 2016 21:15
ssgriffen sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:warning: ssgriffen already gave adityaparab points
Knight
@aaszkolenia
Aug 10 2016 21:16
@iashraful how can I send the link ? it's my first help ...
Ashraful Islam
@iashraful
Aug 10 2016 21:16
@aaszkolenia just copy paste the link from your browser
here
Darth Skywalker
@adityaparab
Aug 10 2016 21:16
@sorinr : I also don't like React. I prefer Angular/Angular 2 1000 times more.
But I am building my portfolio. And I want to have implementation of each project on FCC in 3 frameworks (Angular, Angular2 and React) so I am using react.
Ashraful Islam
@iashraful
Aug 10 2016 21:16
like you did your code
Darth Skywalker
@adityaparab
Aug 10 2016 21:16
given a choice, I'd always go for Angular2
Ashraful Islam
@iashraful
Aug 10 2016 21:18
I think react greatly violates the view and controller rule
putting your html in js is weird thing to do
in the long run it can get messy and hard to maintain
Darth Skywalker
@adityaparab
Aug 10 2016 21:19
@iashraful : React is just a view. It has nothing to do with controller.
Ashraful Islam
@iashraful
Aug 10 2016 21:19
?
Knight
@aaszkolenia
Aug 10 2016 21:19

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

<style>
h2 {
font-family: Lobster, Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>

<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>
</div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row">
<div class="col-xs-4">
<button> <i class="btn btn-block btn-primary fa fa-thumbs-up"></i>Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>

Ashraful Islam
@iashraful
Aug 10 2016 21:19
so what are those logics am writing in react?
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>
</div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row">
<div class="col-xs-4">
<button> <i class="btn btn-block btn-primary fa fa-thumbs-up"></i>Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
Darth Skywalker
@adityaparab
Aug 10 2016 21:20
@iashraful : What you put in js files in react is not HTML. It's a meta language called JSX
Ashraful Islam
@iashraful
Aug 10 2016 21:20
yes
Sorin Ruse
@sorinr
Aug 10 2016 21:20
@adityaparab thats because you are probably going for the certificate that i don't care about :) my scope its just learning new things or to remind the forgeted ones :)
Ashraful Islam
@iashraful
Aug 10 2016 21:20
but putting my html in js feels .... how do I say it, real awkward
Darth Skywalker
@adityaparab
Aug 10 2016 21:21
@iashraful You have a choice not to write it in html like fashion
Ashraful Islam
@iashraful
Aug 10 2016 21:21
so you are saying if I water down my coffee its not coffee anymore?
for the sake of analogy
@aaszkolenia its hard to check whats wrong with your html, I need a link to the exercise
d1sr3
@d1sr3
Aug 10 2016 21:22
hello when I'm building my portfolio do I have to prnt screen my codepen projects to make previews or is there another way like copying the previews directly from the codepen projects?
Ashraful Islam
@iashraful
Aug 10 2016 21:22
the one you see at the top of your browser
@d1sr3 I think you can embed the project previews
Sorin Ruse
@sorinr
Aug 10 2016 21:23
@adityaparab and jade what it is?
Darth Skywalker
@adityaparab
Aug 10 2016 21:23
@sorinr : Oh! Trust me, I'd have completed that certification by sticking to Angular 1.x 3 times by now. I am doing this because I want to play around with mixing in technologies within each other. The github.io page that I sent you earlier, it has a React embedded within angular 2 :D
super complicated shit :D
@sorinr : Jade is a templating framework
have you used Angular? or React?
Ashraful Islam
@iashraful
Aug 10 2016 21:24
@sorinr jade is nice you can do
html
    head
      title meh!
   body
      div.container
          div.row
             h1 hola!
Darth Skywalker
@adityaparab
Aug 10 2016 21:24
Or even Handlebars or Mustache?
holmesrm23
@holmesrm23
Aug 10 2016 21:24
Hey all
Ashraful Islam
@iashraful
Aug 10 2016 21:24
don't need to worry about closing tags and other stuff
but nesting can get real painful in jade
^
I mean nesting inline elements
Sorin Ruse
@sorinr
Aug 10 2016 21:26
jade, jsx or whatever you are writing html
Sam Griffen
@ssgriffen
Aug 10 2016 21:26
This message was deleted
d1sr3
@d1sr3
Aug 10 2016 21:26
@iashraful how?
Darth Skywalker
@adityaparab
Aug 10 2016 21:27
@sorinr : You will understand need for these templating frameworks once you start working on bigger projects. :D
Sam Griffen
@ssgriffen
Aug 10 2016 21:28
Does anyone know why my scrollspy is lagging with showing my sections as active in the navbar? If you scroll down you'll notice the sections in the navbar become highlighted a little too late. http://codepen.io/ssgriffen/pen/yJKRxj
Darth Skywalker
@adityaparab
Aug 10 2016 21:28

@sorinr @iashraful if you use codepen.io, their editor has integrated a nice plugin called emmet. Head over to codepen and in your html section, type

div.row>div.col-xs-12>button.btn.btn-primary[id="test"]{Click me} and hit tab, it will be transformed to

<div class="row">
  <div class="col-xs-12">
    <button class="btn btn-primary" id="test">Click me</button>
  </div>
</div>
you can type in css selectors and they will be reverse constructed to html! pretty nice, ain't it?
holmesrm23
@holmesrm23
Aug 10 2016 21:30
so you can paste css in the html pane basically and just hit tab?
Ashraful Islam
@iashraful
Aug 10 2016 21:30
@adityaparab I have emmet in Sublime, handy but I rarely use it
Darth Skywalker
@adityaparab
Aug 10 2016 21:31
@holmesrm23 : not CSS , CSS Selectors
holmesrm23
@holmesrm23
Aug 10 2016 21:32
i see
what's the technique good for?
Knight
@aaszkolenia
Aug 10 2016 21:32
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
Darth Skywalker
@adityaparab
Aug 10 2016 21:33

in CSS if you want to select a div that has classes col-md-5 and col-md-offset-3- Your CSS selector for that will be

div.col-md-5.col-md-offset-3 and if you type it in the editor and press tab, you will get

<div class="col-md-5 col-md-offset-3"></div>
Sorin Ruse
@sorinr
Aug 10 2016 21:33
@adityaparab i don't use codepen to develop my apps. prefer to work locally and when i'm ready move it to codepen
Darth Skywalker
@adityaparab
Aug 10 2016 21:33
@sorinr What editor do you use?
on local?
Sorin Ruse
@sorinr
Aug 10 2016 21:33
@adityaparab atom
Darth Skywalker
@adityaparab
Aug 10 2016 21:34
atom has a package for emmet
Knight
@aaszkolenia
Aug 10 2016 21:34
@iashraful
my code is same as your

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
  </div>
  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
  <div class="row">
    <div class="col-xs-4">
      <button> <i class="btn btn-block btn-primary fa fa-thumbs-up"></i>Like</button>
    </div> 
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>
holmesrm23
@holmesrm23
Aug 10 2016 21:34
that is neat @adityaparab
Ashraful Islam
@iashraful
Aug 10 2016 21:34
@aaszkolenia what is the name of this exercise?
Jason Luboff
@JLuboff
Aug 10 2016 21:35
I installed Atom...but got lost with it pretty quickly...haven't gone back to try it again yet
Knight
@aaszkolenia
Aug 10 2016 21:35
Ok - Add an i element with the classes fa and fa-thumbs-up.
Wrong - Your fa-thumbs-up icon should be located within the Like button.
Ok - Nest your i element within your button element.
Ok -Make sure your i element has a closing tag.
Darth Skywalker
@adityaparab
Aug 10 2016 21:35
Knight
@aaszkolenia
Aug 10 2016 21:35
Add Font Awesome Icons to our Buttons
Sorin Ruse
@sorinr
Aug 10 2016 21:35
@adityaparab i prefer my own snippets. i rarely using bootstrap :)
Darth Skywalker
@adityaparab
Aug 10 2016 21:37
@sorinr : lol mate! That has nothing to do with bootstrap. It's a write less generate more kinda plugin
Joakim Bajoul Kakaei
@Todai88
Aug 10 2016 21:39

Hi guys,
After some really hard job, a tonne of coffee, even more googling and some serious help from the community I've finally finished my second draft of my portfolio website.
It's not complete and subject to change for a few weeks and it is still NOT RESPONSIVE ON MOBILES.
But here it is:
http://portfolio.kimput.com/

If anyone wants parts of the code or wants to review the actual code, then this is the repo:https://github.com/Todai88/profile

Ashraful Islam
@iashraful
Aug 10 2016 21:40
@aaszkolenia let me check wait
Sorin Ruse
@sorinr
Aug 10 2016 21:40
@adityaparab sorry. haven't read it well what emmet does. it seems a good package. thank you
CamperBot
@camperbot
Aug 10 2016 21:40
sorinr sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 545 | @adityaparab |http://www.freecodecamp.com/adityaparab
Knight
@aaszkolenia
Aug 10 2016 21:40
@iashraful ok
Ashraful Islam
@iashraful
Aug 10 2016 21:41
@aaszkolenia ah, I got it now
here is your mistake
it should be like this
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>
you mistakenly moved the classes for the button into the thumbs up icon
:D
Knight
@aaszkolenia
Aug 10 2016 21:43
awesome! thank you @iashraful
CamperBot
@camperbot
Aug 10 2016 21:43
aaszkolenia sends brownie points to @iashraful :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @iashraful |http://www.freecodecamp.com/iashraful
Sorin Ruse
@sorinr
Aug 10 2016 21:43
@Todai88 hi. have you renounced to the transparent on focus part?
Joakim Bajoul Kakaei
@Todai88
Aug 10 2016 21:45
@sorinr Yep. If you have a look at the repo's /resources/script/snippets.js you will see how I did it! ;)
But basically it's like this:
$('.nav li a').click(function() {
  $(this).blur();
});
sara4sy
@sara4sy
Aug 10 2016 21:46
Hi i am a software eng student i am kinda struggling in my senior project any one can recommended mysql resources ?
Sorin Ruse
@sorinr
Aug 10 2016 21:46
@Todai88 same as i pm-ed you this morning only i kept the part of bg transparent on focus
Sam Griffen
@ssgriffen
Aug 10 2016 21:55
I'm on porfolio project but not sure if I'm ready to move on in FCC..here's my porfolio, be honest and lemme know if you think I still needa work on some things. http://codepen.io/ssgriffen/pen/yJKRxj
Jason Luboff
@JLuboff
Aug 10 2016 21:57
@ssgriffen Looks good to me. Your headshot didn't load for me though
Sam Griffen
@ssgriffen
Aug 10 2016 21:58
@JLuboff thanks, and wow idk why
CamperBot
@camperbot
Aug 10 2016 21:58
ssgriffen sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Aug 10 2016 21:59
Wherever the headshot is hosted may not allow external linking?
Sorin Ruse
@sorinr
Aug 10 2016 22:03
@ssgriffen i would add some "smooth scrolling" to the links on the page. or some other effects fade in/fade out ecc
Sam Griffen
@ssgriffen
Aug 10 2016 22:04
@JLuboff Ohhh
Jason Luboff
@JLuboff
Aug 10 2016 22:05
I have a bootstrap question for anyone who maybe able to answser. My wikipedia viewer has a text field with integrated buttons and looks good on desktop...but on mobile you can read it, but it is difficult, its not large enough. How can I change it only on mobile?
Sorin Ruse
@sorinr
Aug 10 2016 22:11
@JLuboff use @media query for the width you want and transform your <span> including your buttons to a block element not inline so, you will have input on one line and the two buttons right below the input on mobile
Jason Luboff
@JLuboff
Aug 10 2016 22:13
@sorinr Thanks, I'll see what I can do with that
CamperBot
@camperbot
Aug 10 2016 22:13
jluboff sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 654 | @sorinr |http://www.freecodecamp.com/sorinr
Lanitta
@DivaWeb
Aug 10 2016 22:21
is there a way to make links work in codepen
Sam Griffen
@ssgriffen
Aug 10 2016 22:25
I can't figure out why my scrollspy isnt working in codepen..any ideas? http://codepen.io/ssgriffen/pen/yJKRxj
Hadouken
@Harry97
Aug 10 2016 22:26
Does anybody know why isn't the background image being displayed?
https://codepen.io/Hadouken/pen/vKvyJg
@ssgriffen What do you mean by "scrollspy"?
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:29
@Harry97 Your .main div doesn't have any content in it, so it's height is 0. Add a height to your CSS, for example:
.main {
  background-image: url("https://www.nasa.gov/sites/default/files/thumbnails/image/hubble_friday_05062016.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
Lanitta
@DivaWeb
Aug 10 2016 22:29
@ssgriffen what is it doing
Sam Griffen
@ssgriffen
Aug 10 2016 22:30
@DivaWeb its fine now...a little off but working
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:31
@DivaWeb You have to add target="_blank" to URLs in codepen so they open in a new tab. <a href="http://website url/ " target="_blank">
Hadouken
@Harry97
Aug 10 2016 22:31
@TylerMoeller omg I spent hours trying to figure it out lol thanks alot m8
CamperBot
@camperbot
Aug 10 2016 22:31
harry97 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 729 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:31
Happy to help
Lanitta
@DivaWeb
Aug 10 2016 22:32
@TylerMoeller grr I read an update that said you didn't need to add that any more. I will try it thanks
CamperBot
@camperbot
Aug 10 2016 22:32
divaweb sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 730 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:33
@ssgriffen If you add some padding to your section titles, the navbar won't cover them up when you click on links:
.title-row {
  color: #CCCCCC;
  text-align: center;
  font-weight: bold;
  padding-top: 70px;
}
It does alter the look a bit...but it will help with that covering up issue at least. You could also just do this:
.intro-row,
.title-row {
  padding-top: 70px;
}
Hadouken
@Harry97
Aug 10 2016 22:35

@TylerMoeller I apologize for being a dick but do you know how can I start another countdown after a countdown has ended?

http://codepen.io/Hadouken/pen/bEmymd

I can get it to only countdown the session length but it stops at "-1:59"
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:37
@Harry97 You should be able to check when the clock reaches 0, update your min variable with the new time, and then call countDown(min) again.
Hadouken
@Harry97
Aug 10 2016 22:37
I want it to start counting down the break length too. I've tried different methods but they all seem to mess up the countdown speed
@TylerMoeller I did so
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:38
Hmmm, I haven't looked too closely at the code yet. If it's counting faster the next time, then you're missing a clearInterval somewhere
Hadouken
@Harry97
Aug 10 2016 22:38
the countdown sped up insanely and the numbers kept shuffling in a bizzare way
nah it's there
and I'm using clearTimeout btw
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:38
kk, I'll take a look and see
Hadouken
@Harry97
Aug 10 2016 22:39
ty
Jacob Stewart
@JacobStewart1
Aug 10 2016 22:42
hey does anybody know how to center a text box and button
Hadouken
@Harry97
Aug 10 2016 22:42
@JacobStewart1 Try center-block class if you are using Bootstrap
Jacob Stewart
@JacobStewart1
Aug 10 2016 22:42
ok
Hadouken
@Harry97
Aug 10 2016 22:43
or text-align: center; if you want to do it in CSS only
Jacob Stewart
@JacobStewart1
Aug 10 2016 22:43
@Harry97 im trying to center the box and button not the inside text
Hadouken
@Harry97
Aug 10 2016 22:44
oh sry mb
Jason Luboff
@JLuboff
Aug 10 2016 22:45
@JacobStewart1 place items inside <center> </center> tags?
Moisés Man
@moigithub
Aug 10 2016 22:46
ur container should have a width defined..
then u can use margin: 0 auto;
on ur childs elemnts
Jacob Stewart
@JacobStewart1
Aug 10 2016 22:47
ok thanks @JLuboff @moigithub
CamperBot
@camperbot
Aug 10 2016 22:47
jacobstewart1 sends brownie points to @jluboff and @moigithub :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @jluboff |http://www.freecodecamp.com/jluboff
:star2: 1848 | @moigithub |http://www.freecodecamp.com/moigithub
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:50
@Harry97 I'm not seeing in your code how you determine whether it's chill time or work time. When the clock hits 0, you would set the mode to chill/work time, update the minutes, and then call countdown(min). It should happen all in here:
        var timer = setTimeout(function() {
        // if work time and clock is zero, it's chill time.
        // if chill time and clock is zero, it's work time.
        // get the value of the work/chill time and update min
          countdown(min)
        }, 1000);
      }
Hadouken
@Harry97
Aug 10 2016 22:53
@TylerMoeller ok dude thanks alot for helping me out :)
CamperBot
@camperbot
Aug 10 2016 22:53
harry97 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: harry97 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:53
@Harry97 And the clearTimeout won't work the way you have it because it waits until the timer has gone past -1 minutes
That may explain why you're seeing the clock speed up - add a console.log before that clearTimeout(timer) to see if it ever gets called
Hadouken
@Harry97
Aug 10 2016 22:55
tbh I can't wrap my head around how can setTimeout and clearTimeout work in the first place; they aren't supposed to loop
clearInterval is alot more fitting for this kind of work but like I said I've tried using it and things didn't work out
Tyler Moeller
@TylerMoeller
Aug 10 2016 22:59
I used clearInterval in mine. I was honestly having a little trouble at first understanding how you were using setTimeout, but it should work fine the way you've set it up
Hadouken
@Harry97
Aug 10 2016 23:00

```var timer = setTimeout(function() {

      if(min == -1) {
        min = chill;
        seconds = 0;
      }

      countdown(min)
    }, 100);
  } //End of the function

```

:( It goes on infinite loop
Tyler Moeller
@TylerMoeller
Aug 10 2016 23:01

@JLuboff If you don't want to use media queries, you can use the bootstrap helper classes that hide/show divs based on screen size and write two separate input groups. One for mobile (.visible-xs) and one for tablet/desktop (.hidden-xs):

      <div class="input-group hidden-xs">
        <input type="text" class="form-control input-lg" id="userInput" placeholder="Start your search...">
        <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="button" id="search"><i class="fa fa-search"></i> Search</button><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="btn btn-default btn-lg" type="button"><i class="fa fa-random"></i> Random</a></span>
      </div>
      <div class="input-group visible-xs">
        <input type="text" class="form-control input-lg" id="userInput" placeholder="Start your search...">
        <span class="input-group-btn row">
          <button class="btn btn-default btn-lg col-xs-6" type="button" id="search">
            <i class="fa fa-search"></i> Search
          </button>
          <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="btn btn-default btn-lg col-xs-6" type="button">
          <i class="fa fa-random"></i> Random</a>
        </span>
      </div>

^^ just for demo purposes, you'll likely want to change the HTML to make the mobile buttons look a little nicer in that view.

Jason Luboff
@JLuboff
Aug 10 2016 23:03
@TylerMoeller Thanks! I'll take a look and see which route works best! I appreciate it
CamperBot
@camperbot
Aug 10 2016 23:03
jluboff sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 731 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:12
Hello, i'm stuck. The content on my webpage overlaps my navigation bar when scrolling. Can anyone explain why this might be happening?
Greg D
@mosaic-greg
Aug 10 2016 23:14
@NCATrumpet the size of your elements may need to be adjusted
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:17
@mosaic-greg I tried div { z-index:0} in css and that worked but it created a second problem it deactivated my input text boxes. How do I adjust the size?
sorry that was z-index:-1
Greg D
@mosaic-greg
Aug 10 2016 23:20
@NCATrumpet can you link us to your code?
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:21

@mosaic-greg Sure. Here is the link. I appreciate any feedback that you can provide.

http://codepen.io/NCATrumpet/pen/EyGapG

Joel Santos
@St3ps
Aug 10 2016 23:31
http://codepen.io/Steps/pen/AXPVPO
Just finished my pomodoro. What do you guys think?
Lanitta
@DivaWeb
Aug 10 2016 23:33
@NCATrumpet you are getting there just keep working at it
Hadouken
@Harry97
Aug 10 2016 23:34
@NCATrumpet from what I can see there's nothing wrong with your code
I guess you want to achieve an effect like this one: http://haraldurthorleifsson.com/
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:34
@DivaWeb Thank you for the encouragement I am trying!
CamperBot
@camperbot
Aug 10 2016 23:34
ncatrumpet sends brownie points to @divaweb :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @divaweb |http://www.freecodecamp.com/divaweb
Hadouken
@Harry97
Aug 10 2016 23:34
correct?
Lanitta
@DivaWeb
Aug 10 2016 23:34
@NCATrumpet I saw you were missing an image
@NCATrumpet not sure if you planning something later for that spot
Hadouken
@Harry97
Aug 10 2016 23:36
@St3ps How can I decrease or increase the time of the session or break?
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:37
@Harry97 That's an awesome page. I'm pretty new to this. It would be nice to have a page like that one!
Hadouken
@Harry97
Aug 10 2016 23:37
It's not about how the page looks
you want the nav bar to do the same effect?
your nav bar*
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:38
@Harry97 Ah, I see what you mean. That would work. I'm just not sure how to perform that action.
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:39
@DivaWeb I've only completed one freecodecamp project so far. I'll replace the placeholder images as i complete more projects.
@Harry97 Thanks!
CamperBot
@camperbot
Aug 10 2016 23:39
ncatrumpet sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
jrandallhansen
@jrandallhansen
Aug 10 2016 23:41
can anyone help me with some API calls? I need to make my variable available to me outside of the .getJSON function and cant figure out how to do so
Joel Santos
@St3ps
Aug 10 2016 23:42
@Harry97 you can't because i've just brought this all up to codepen from my laptop and, for some reason I can't quite figure out, codepen has decided to ignore that i've got jquery ui included...
But if it were working as intended....
you'd go on settings and you'd just move the slider
Lanitta
@DivaWeb
Aug 10 2016 23:43
@NCATrumpet yeah I know you had place holders but on your gallery page you are missing a place holder it is just the missing image icon
Hadouken
@Harry97
Aug 10 2016 23:43
you can add jquery ui from the settings button
holmesrm23
@holmesrm23
Aug 10 2016 23:44
yeah it looks like you only have jquery
there's a separate jqueryui selection
Joel Santos
@St3ps
Aug 10 2016 23:45
@Harry97 i did, still doesn't work
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:45
@DivaWeb Thanks for the feedback! Everything looks okay on my end. I'll take a look at the page from another device and see if i can resolve the issue.
CamperBot
@camperbot
Aug 10 2016 23:45
ncatrumpet sends brownie points to @divaweb :sparkles: :thumbsup: :sparkles:
:warning: ncatrumpet already gave divaweb points
Joel Santos
@St3ps
Aug 10 2016 23:46
@holmesrm23 @Harry97 i've added jquery 1.11.14, doesn't work, ive added jquery 1.12, doesn't work
i was using 1.12 on my webstorm
UI*
Marcus McKenzie
@NCATrumpet
Aug 10 2016 23:47
@mosaic-greg Thanks for the feedback! I have to run now. Ttyl.
CamperBot
@camperbot
Aug 10 2016 23:47
:cookie: 384 | @mosaic-greg |http://www.freecodecamp.com/mosaic-greg
ncatrumpet sends brownie points to @mosaic-greg :sparkles: :thumbsup: :sparkles:
Hadouken
@Harry97
Aug 10 2016 23:51
@St3ps yeah you're right
I guess Webstorm might be automatically configuring few things for ya that Codepen can't
Johnathan Devaney
@johnathandevaney
Aug 10 2016 23:51
Hi All! Sorry to barge in like this. I'm kind of new here and I'm working on the jQuery section. I just got to "Change Text Inside an Element Using jQuery". I have to ask-- When would this come up in a real life application? When would I want to add to, remove, or change HTML elements via jQuery rather than just edit the HTML? I'm sorry if this is a question that's going to be apparent to me in five minutes. When I'm learning stuff like this is really helps me to know the "why" I'm learning it.
Hadouken
@Harry97
Aug 10 2016 23:52
anyway I really love your project especially that you've taken another mile adding this countdown animation circle
@johnathandevaney I'm sorry but would you please just share your Codepen?
Joel Santos
@St3ps
Aug 10 2016 23:53
@Harry97 I don't think so, i've introduced every required script on my own. Every dependency i had control over it. It's really frustrating.
Hadouken
@Harry97
Aug 10 2016 23:53
@St3ps :D lol its okay
Johnathan Devaney
@johnathandevaney
Aug 10 2016 23:54
@Harry97 Right now I'm not working on a specific bit of code, I'm in the tutorial section learning about this. :)
Hadouken
@Harry97
Aug 10 2016 23:54
keep in mind this project is only for you to gain experience so if u did
holmesrm23
@holmesrm23
Aug 10 2016 23:54
@johnathandevaney It comes in handy in a lot of places. For instance you could have a form with a radio button that answers a question Yes/No. The user checks Yes and it shows a new text field, something like "If yes, explain". Then if the user checks No after entering information into there.. you could use jQuery to "change text" inside that input back to nothing
Joel Santos
@St3ps
Aug 10 2016 23:54
@Harry97 Glad you liked it though! Thanks for your feedback, hopefully i'll have this UI business settled
CamperBot
@camperbot
Aug 10 2016 23:54
st3ps sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Hadouken
@Harry97
Aug 10 2016 23:54
enjoy yourself and celebrate u did some good work right there :smile:
Johnathan Devaney
@johnathandevaney
Aug 10 2016 23:54
@holmesrm23 Awesome! Okay that makes perfect sense. Thank you so much!
CamperBot
@camperbot
Aug 10 2016 23:54
johnathandevaney sends brownie points to @holmesrm23 :sparkles: :thumbsup: :sparkles:
:cookie: 38 | @holmesrm23 |http://www.freecodecamp.com/holmesrm23
holmesrm23
@holmesrm23
Aug 10 2016 23:58
@johnathandevaney absolutely! http://codepen.io/holmesrm23/pen/WxaKLo