These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Jul 2016
SwaggyClogs
@SwaggyClogs
Jul 25 2016 00:03
help curriculum
CamperBot
@camperbot
Jul 25 2016 00:03

:point_right: freecodecamp curriculum sequence [wiki]

What you will learn at Free Code Camp in order

  • HTML5 - The structure of web pages.
  • CSS - The visual style of web pages.
  • Bootstrap - A "responsive design" tool that helps your websites look great on tablets and phones.
  • jQuery and Ajax - Easy tools for controlling content in the browser.
  • JavaScript - The one programming language that all web browsers use.
  • Algorithms - Step-by-step recipes for getting things done.
  • Git - A version control system for saving and sharing your projects.
  • MongoDB - A popular non-relational database.
  • D3.js - A JavaScript library for producing dynamic, interactive data visualizations in web browsers.
  • Express.js- A powerful web development framework.
  • Node.js - A platform for creating scalable network applications.
  • SASS - A scripting language that is interpreted into Cascading Style Sheets (CSS).
  • API Development - A set of routines, protocols, and tools for building software and applications.
  • Agile - A set of software development principles that focus the design and production of a project on the needs of its users

:pencil: read more about freecodecamp curriculum sequence on the FCC Wiki

coffeebeanzz
@coffeebeanzz
Jul 25 2016 00:18
@coderHook Chrome has a whatFont extension
DJ
@qualitymanifest
Jul 25 2016 00:20
or you could just use dev tools and inspect the element to see it's style
coffeebeanzz
@coffeebeanzz
Jul 25 2016 00:20
truuuu
Mariya
@mariyadiminsky
Jul 25 2016 00:42
Anyone know how to pass down props in React if using React-Router? I'm really struggling with this one. I want to specifically pass down to <Link> s
Heather Kusmierz
@HKuz
Jul 25 2016 01:14
@Mashadim you may have better luck asking that in the DataViz chatroom - there are some really knowlegable folks there that may know: https://gitter.im/FreeCodeCamp/HelpDataViz
Tiffany White
@twhite96
Jul 25 2016 01:54
Hey guys. There is a bug in my Random Quote Generator where when cycling through quotes and then deciding on one to share, all the quotes you've cycled through pop up in other open tabs. Anyone have any suggestions?
Ken Haduch
@khaduch
Jul 25 2016 02:00
@twhite96 - I'm not seeing that as I cycle through your quotes? Seems to be working fine (Chrome browser on Windows10)
Tiffany White
@twhite96
Jul 25 2016 02:01
Huh. Weird. Yeah I get the same result as you on my mobile browser. I am using Chrome 52 on my Mac with the new Material Design stuff. Not sure why it is happening
@khaduch did you try to share to Twitter after cycling through them?
Ken Haduch
@khaduch
Jul 25 2016 02:01
@twhite96 - no, I haven't tried that... let me do that.
Tiffany White
@twhite96
Jul 25 2016 02:02
I am trying to figure out what is going on. I don't know why this is happening
Allen Pittard
@donaldpittard
Jul 25 2016 02:02
@twhite96 I think your post variable is being trapped in closure. I am seeing the problem but don't know the root cause yet.
Ken Haduch
@khaduch
Jul 25 2016 02:02
@twhite96 - oh, I see it... I didn't really understand that it was a tweet problem. That's a lot of tabs! :)
Tiffany White
@twhite96
Jul 25 2016 02:02
Yeah. Not sure how to fix it
@donaldpittard WOW. Not sure how that happened
Allen Pittard
@donaldpittard
Jul 25 2016 02:03
@twhite96 try swapping $(post.content) for $('p') in your event handler
Tiffany White
@twhite96
Jul 25 2016 02:05
No that doesn't work @donaldpittard
Ken Haduch
@khaduch
Jul 25 2016 02:19
@twhite96 - I think that @donaldpittard was onto something with closure, but I think that I have a way around it, it seems to work. I added the $(document.ready(){}); function to wrap all of your code. And then move the $('#tweet-quote').on('click', function(e) {function after the closing});of your$('#new-quote').on('touchstart click', function(e) {. Also added a global variablepostedQuote` that I save the resulting quote text in, and use that in the tweet function. I'll post the edited JS code. (Sorry about the premature ending of my note.)
Tiffany White
@twhite96
Jul 25 2016 02:20
To what @khaduch? Don't leave me hanging!
I just want to be done with this and for it to work
Ken Haduch
@khaduch
Jul 25 2016 02:23
@twhite96 - here is my edited code, in case my explanation was too piecemeal:
var postedQuote = '';
$(document).ready(function(){
    $('#new-quote').on('touchstart click', function(e) {
        e.preventDefault();
        $.ajax({
            url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=',
            success: function(data) {
                var post = data.shift(); // The data is an array of posts. Grab the first one.
                $('p').html(post.content);
                postedQuote = post.content; // CACHING THE QUOTE IN THE GLOBAL VARIABLE

                // If the Source is available, use it. Otherwise hide it.
                if (typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined') {
                    $('#quote-source').html('Source: ' + post.custom_meta.Source);
                } else {
                    $('#quote-source').text('');
                }
            },
            cache: false
        });
    });
    $('#tweet-quote').on('click', function(e) {
        //We tell our browser not to follow that link
        e.preventDefault();
        //We get the URL of the link
        window.open('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + postedQuote);
    });
});
@twhite96 - it might need a little bit of cleanup, but it seems to prevent the problem of multiple tweet tags, because now the click function for that is only added one time. Like I am not stripping off HTML tags - you might need to do that, or find another way to get the quote text for the tweet window.
Tiffany White
@twhite96
Jul 25 2016 02:27
Nope it works, @khaduch. Thanks for the explanation
CamperBot
@camperbot
Jul 25 2016 02:27
twhite96 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1481 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jul 25 2016 02:30
@twhite96 - :+1:
Sino Olabi
@Sino-
Jul 25 2016 02:50
any admins here?
the personal portfolio page sample is nothing but broken images ( https://codepen.io/FreeCodeCamp/full/YqLyXB/)
friesenet21
@friesenet21
Jul 25 2016 03:41
good day. Can anyone help me with thefetch() api?
friesenet21
@friesenet21
Jul 25 2016 03:46
I am using it with react for "A" weather app. I got JSON requests working with OpenWeatherApi by disabling https on codepen. http://codepen.io/friesenet21/pen/OXOqya?editors=1010
Hong
@designBuildShipSoftware
Jul 25 2016 03:53
@GregatGit There is. My code works well on Firefox
Muhammad Osama Arshad
@asamolion
Jul 25 2016 04:07
Hello, Can anyone point me in the right direction on how to solve the "No repeats please" challenge
I'm thinking of recursively generating all permutations of the string then filtering out the repeats but wouldn't that be super inefficient?
Michael Karpinski
@karpimpski
Jul 25 2016 04:16
hey guys, how can I center align this vertically? i tried a solution but it looks too low
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="stylesheets/css/main.css">
</head>

<body>

<div id="board">
    <div class="row" id="firstRow">
        <div class="first space" id="one"></div>
        <div class="second space" id="two"></div>
        <div class="third space" id="three"></div>
    </div>

    <div class="row" id="secondRow">
        <div class="first space" id="four"></div>
        <div class="second space" id="five"></div>
        <div class="third space" id="six"></div>
    </div>

    <div class="row" id="thirdRow">
        <div class="first space" id="seven"></div>
        <div class="second space" id="eight"></div>
        <div class="third space" id="nine"></div>
    </div>
</div>

<script src="scripts/jquery.js"></script>
<script src="scripts/script.js"></script>
</body>
$space-size: 150px;

#board{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.row{
    display: flex;
    justify-content: center;
}

.space{
    width: $space-size;
    height: $space-size;
}

#firstRow .space, #secondRow .space{
    border-bottom: 1px solid black;
}

.first, .second{
    border-right: 1px solid black;
}
Hong
@designBuildShipSoftware
Jul 25 2016 04:37
@GregatGit I think I know what you meant now. Object.values() is an experimental technology. Thank you
CamperBot
@camperbot
Jul 25 2016 04:37
designbuildshipsoftware sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 707 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 25 2016 04:39
@designBuildShipSoftware did you get it up and running on chrome?
Hong
@designBuildShipSoftware
Jul 25 2016 04:39
@GregatGit Not yet. Haven't figured out how to
Greg Duncan
@GregatGit
Jul 25 2016 04:40
do you have the pen?
you then use Object.keys to get the property names of the different pages
Hong
@designBuildShipSoftware
Jul 25 2016 04:45
@GregatGit Did you get the api from wikipedia's api sandbox?
Greg Duncan
@GregatGit
Jul 25 2016 04:46
@designBuildShipSoftware I couldn't figure the sandbox out - I was given this by another camper
You can play around with the inputs
Hong
@designBuildShipSoftware
Jul 25 2016 04:47
@GregatGit I see. Good idea of playing around with the inputs
Greg Duncan
@GregatGit
Jul 25 2016 04:47
wikipedia's sandbox is very confusing - I know a lot of people have been stopped in their tracks by what should be quite simple
Hong
@designBuildShipSoftware
Jul 25 2016 04:48
@GregatGit Yes, I have played with their sandbox many times
Greg Duncan
@GregatGit
Jul 25 2016 04:48
I think the key issue is the data(json) that come down - how to use it and extract what you need from it
I personally think you end up wasting more time than its worth trying to figur out the sandbox
Hong
@designBuildShipSoftware
Jul 25 2016 04:50
@GregatGit Probably. I was frustrated in their sandbox. Sand all over me
Greg Duncan
@GregatGit
Jul 25 2016 04:51
@designBuildShipSoftware Ha - that's why its the sand box - if you have to spend more than an hour then I think they should simplify it
Hong
@designBuildShipSoftware
Jul 25 2016 04:52
@GregatGit I agree :)
Greg Duncan
@GregatGit
Jul 25 2016 04:54
so just use that api - you can clearly see the searched item is 'germany' and have fun trying to figure out how to extract the data you need-
Hong
@designBuildShipSoftware
Jul 25 2016 04:58
I changed Object.values() to Object.keys(), and it showed an undefined entry list, wthich is better than no list. I will try something with my code, and if it doesn't work out, I will use the recommended api. Thanks, Greg
luis4flames
@luis4flames
Jul 25 2016 05:01
Can someone help me make buttons on my code display closer together. <div class="col-md-4"> I know the number in the code is suppose to determine how the size, but anything higher than 4 and the buttons get out of place compleely. I just want to minimize the space between each button and have them centered.
Stephen
@stephepush
Jul 25 2016 05:05
hey i need help with the twitter button in my quote generator app
I'm trying to revise the code, and found that the tweet button isn't working
can someone take a look?
Xihai Luo
@coolsday
Jul 25 2016 05:57
@stephepush its working for me
buiphuking
@buiphuking
Jul 25 2016 05:58
This message was deleted
kirbyedy
@kirbyedy
Jul 25 2016 06:00
@stephepush works for me :thumbsup:
Lee
@leebut
Jul 25 2016 06:34
@stephepush The first time I clicked the Tweet button, it opened the initial random quote page in a new tab. However, trying again, it seems okay using Firefox.
buiphuking
@buiphuking
Jul 25 2016 06:43
plz someone share me the mp3 link play error music simon game, plz
Martialis39
@Martialis39
Jul 25 2016 06:47
!important
Quick question. When building my portfolio site, is there a way to get preview images from codepen?
Lee
@leebut
Jul 25 2016 07:03
@Martialis39 I'm not sure. All I know is you save and run it to see what it looks like.
kirbyedy
@kirbyedy
Jul 25 2016 07:05
@Martialis39 I dont understand the question
Lee
@leebut
Jul 25 2016 07:10
Hello. I've just reached the 'Random Quote Machine' challenge. I have found an API, but it has 'curl -X POST --include' before the URL, so I'm not really sure what to do with it.
Martialis39
@Martialis39
Jul 25 2016 07:10
@kirbyedy So i want to make a portfolio site
I want to have 6 thumbnails for my completed projects
is there a way I can get a preview thumbnail from codepen
or
do I have to insert the image myself
Darnell Gillead
@dgillead
Jul 25 2016 07:12
anyone looking to pair program for the react projects?
Lee
@leebut
Jul 25 2016 07:12
@Martialis39 So, if I understand correctly, you want to use 6 images from other websites to put into your codepen, right?
@dgillead I'm on intermediate front-end at the moment, so I'd not be much help.
kirbyedy
@kirbyedy
Jul 25 2016 07:14
@Martialis39 oooh now I understand... no idea :D
Martialis39
@Martialis39
Jul 25 2016 07:14
@leebut Yeah, for example
kirbyedy
@kirbyedy
Jul 25 2016 07:14
btw you can make a screenshot, and upload that image somewhere
Martialis39
@Martialis39
Jul 25 2016 07:15
I did the Twitch Viewer and I could use their API to get the preview image quick and easy
is there something similar for accessing other pens? Or should I just forget about it and do it the way I know
Lee
@leebut
Jul 25 2016 07:17
@Martialis39 Mentioning APIs means you know more than I do as I've only just arrived at the API tasks. Other than linking to images you have stored online, or signing up to their pro accounts to save resources on CodePen, I don't know.
Martialis39
@Martialis39
Jul 25 2016 07:22
@leebut Thanks man ;) No worries
CamperBot
@camperbot
Jul 25 2016 07:22
martialis39 sends brownie points to @leebut :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @leebut |http://www.freecodecamp.com/leebut
Lee
@leebut
Jul 25 2016 07:36
This message was deleted
buiphuking
@buiphuking
Jul 25 2016 07:38
how can we use linearramptovalueattime to play a sound 2 seconds and turn it off ??????
anurag
@anuragparmar
Jul 25 2016 08:31
i dont even kno frm where to start in this challenge this one is too hard for a beginner lyk me challenge name is portfolio
Lee
@leebut
Jul 25 2016 08:40
@anuragparmar It's like the tribute page but with more things on it.
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 08:41

I'm having troubles setting my Twitter function currect. It will tweet a quote but not the current/active one. Anyone who knows what the issue might be?

`
var quoteRandomize = Math.floor((Math.random() * quoteList.length));
var quoteMain = quoteList[quoteRandomize].quote;
var quoteAuthor = quoteList[quoteRandomize].author;
var quoteSource = quoteList[quoteRandomize].source;

$("#quote").text(quoteMain);
$("#author").text(quoteAuthor);
$("#source").text(quoteSource);

$("#tweet").on("click", function() {
  window.open("http://twitter.com/intent/tweet?url=" + "&text=" + "\"" + quoteMain + "\"" + " - " + quoteAuthor);
});

$("#new-quote").on("click", function() {
  quoteGenerate();
});

};
```

var quoteRandomize = Math.floor((Math.random() * quoteList.length));
    var quoteMain = quoteList[quoteRandomize].quote;
    var quoteAuthor = quoteList[quoteRandomize].author;
    var quoteSource = quoteList[quoteRandomize].source;

    $("#quote").text(quoteMain);
    $("#author").text(quoteAuthor);
    $("#source").text(quoteSource);

    $("#tweet").on("click", function() {
      window.open("http://twitter.com/intent/tweet?url=" + "&text=" + "\"" + quoteMain + "\"" + " - " + quoteAuthor);
    });

    $("#new-quote").on("click", function() {
      quoteGenerate();
    });
  };
kirbyedy
@kirbyedy
Jul 25 2016 08:43
@Digital-Banana instead of calling quotemain on click, maybe you can just populate the tweet with your already populated div
I think once you click on tweet button with that code, you call for a new quote
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 08:47
@kirbyedy How would I call that div?
kirbyedy
@kirbyedy
Jul 25 2016 08:48
with jquery
example: $("#quote").text()
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 08:48
@kirbyedy I'll try that next, ty
CamperBot
@camperbot
Jul 25 2016 08:48
digital-banana sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1279 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Darnell Gillead
@dgillead
Jul 25 2016 08:50
Need help on the markdown previewer if anyone can. It shows the output text with the html tags it would have rather than just displaying it properly. https://codepen.io/dgillead/pen/qNYxvG?editors=1111
Using reactjs
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 09:45
Still stuck on my Tweet function. The send Tweet does not update to the correct quote after clicking next quote.
function quoteGenerate() {
    var quoteRandomize = Math.floor(Math.random() * quoteList.length);
    var quoteMain = quoteList[quoteRandomize].quote;
    var quoteAuthor = quoteList[quoteRandomize].author;
    var quoteSource = quoteList[quoteRandomize].source;

    $("#quote").text(quoteMain);
    $("#author").text(quoteAuthor);
    $("#source").text(quoteSource);

    $("#tweet").on("click", function() {
      window.open("http://twitter.com/intent/tweet?text=" + quoteMain);
    });

    $("#new-quote").on("click", function() {
      quoteGenerate();
    });
  };
John Alcher
@alchermd
Jul 25 2016 09:51
Hello mates. Can you refresh me on how this basic jQuery function works? Basically, I want to append to #screen whatever the value of the clicked clickMe div is.
http://codepen.io/chermandu/pen/dXZZGz
Where am I wrong?
Martialis39
@Martialis39
Jul 25 2016 09:54
@alchermd let me take a look
gitgenie
@gitgenie
Jul 25 2016 09:56
hi guys , can someone help me out with the sort union challenge?
Martialis39
@Martialis39
Jul 25 2016 09:57
@gitgenie yes, shoot
gitgenie
@gitgenie
Jul 25 2016 09:57

@Martialis39 function uniteUnique(arr) {
var newarr;
for(var i in arr){
for(var j in arr[i]){
if(newarr.indexOf(arr[i][j]) === -1){
newarr[i][j] = arr[i][j];
}
}
}
return newarr;
}

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

newarr is blank
dono where i am goin wrong
Martialis39
@Martialis39
Jul 25 2016 09:58
@alchermd ok it looks like you got it?
@gitgenie can you do the ```
just to make the code a bit easier to read
gitgenie
@gitgenie
Jul 25 2016 09:58
function uniteUnique(arr) {
  var newarr;
  for(var i in arr){
    for(var j in arr[i]){
      if(newarr.indexOf(arr[i][j]) === -1){
      newarr[i][j] = arr[i][j];
      }
    }
  }
  return newarr;
}

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);
Martialis39
@Martialis39
Jul 25 2016 09:58
perfect
John Alcher
@alchermd
Jul 25 2016 09:59
@Martialis39 Somebody helped me on the other room. It should be this.text() instead of this.val() . Thanks for checking it out.
CamperBot
@camperbot
Jul 25 2016 09:59
alchermd sends brownie points to @martialis39 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @martialis39 |http://www.freecodecamp.com/martialis39
Martialis39
@Martialis39
Jul 25 2016 09:59
@alchermd sure :)
@gitgenie ok sir, first I think you should declare newarr as an array, so add = [];
gitgenie
@gitgenie
Jul 25 2016 10:00
@Martialis39 still r @Martialis39 returns []
Martialis39
@Martialis39
Jul 25 2016 10:00
also, you can\t just assign a non-existent spot in an array to a variable,
you have to be using something like .push()
gitgenie
@gitgenie
Jul 25 2016 10:00
oops, should push it
@Martialis39 thanks :+1:
CamperBot
@camperbot
Jul 25 2016 10:01
gitgenie sends brownie points to @martialis39 :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @martialis39 |http://www.freecodecamp.com/martialis39
Martialis39
@Martialis39
Jul 25 2016 10:02
@gitgenie sure! Also, and Im not expert on for .... in loops, but I think a simple combination of two for loops would suit you better here ;)
Martialis39
@Martialis39
Jul 25 2016 10:08
Also - feedback please
gitgenie
@gitgenie
Jul 25 2016 10:14
@Martialis39 dono if i am the only one, but cant see anything in the portfolio. its dark
Martialis39
@Martialis39
Jul 25 2016 10:25
@gitgenie hmm should be black text white background
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 10:41
Anybody knows why my Tweet function isn't printing out the active/current quote?
function quoteGenerate() {
    var quoteRandomize = Math.floor(Math.random() * quoteList.length);
    var quoteMain = quoteList[quoteRandomize].quote;
    var quoteAuthor = quoteList[quoteRandomize].author;
    var quoteSource = quoteList[quoteRandomize].source;

    $("#quote").text(quoteMain);
    $("#author").text(quoteAuthor);
    $("#source").text(quoteSource);

    $("#tweet").on("click", function() {
      var quoteURL = "http://twitter.com/intent/tweet?text=" + quoteMain;
      window.open(quoteURL, 'twitter');
    });

    $("#new-quote").on("click", function() {
      quoteGenerate();
    });
  };
kirbyedy
@kirbyedy
Jul 25 2016 10:51
@Digital-Banana I think I gave you the working solution already, but you did not want to use it
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 10:55
@kirbyedy I don't understand it
kirbyedy
@kirbyedy
Jul 25 2016 10:56
$("#tweet").on("click", function() {
    window.open("http://twitter.com/home/?status=" + $("#quote").text());
  });
so clicking on your tweet button(you have to change it to points to your button in html)
you open the window with link to twitter, and you are adding the text to it, by calling your quote div, or paragraph or wherever your quote already is with jquery
and its done
that quote in brackets you have to change to point to your div where your quote is
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 10:59
@kirbyedy Wow that worked
@kirbyedy Thanks man!
CamperBot
@camperbot
Jul 25 2016 10:59
digital-banana sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1281 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 11:00
One more question though, is there a reason you're using "?status" instead of "?text"?
kirbyedy
@kirbyedy
Jul 25 2016 11:01
no idea, I think I got that from the twitter documentation some time ago
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 11:03
@kirbyedy Ahh okay. How for along are you with the rest of the projects?
kirbyedy
@kirbyedy
Jul 25 2016 11:04
I am stuck on the tic tac toe for months now
actually I havent been working much on it
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 11:04
Damn
kirbyedy
@kirbyedy
Jul 25 2016 11:04
doing other stuff
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 11:04
Keep at it man
I'm sure you'll get it right
kirbyedy
@kirbyedy
Jul 25 2016 11:05
yea will try, but its summer and I like to spend time on the beach
recovering actually from the foot injury :(
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 11:06
ohh what happened?
kirbyedy
@kirbyedy
Jul 25 2016 11:08
broke me foot while kitesurfing
bad landing
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 11:08
ohh tough luck man, hope you recover well
at least you'll have plenty of time free for FCC lol
kirbyedy
@kirbyedy
Jul 25 2016 11:09
lol yeah :thumbsup:
Kenny Jeurissen
@Digital-Banana
Jul 25 2016 11:09
there's an upside to everything haha
kirbyedy
@kirbyedy
Jul 25 2016 11:09
:)
checkmate-bitch
@checkmate-bitch
Jul 25 2016 11:42
Hey! I was wondering how can I set up a "sign in with google" or "sign in with github" buttons that we see in sign in/up forms?
i cannot find much info on stack overflow about it.
some links would be great too
Joel Abees
@JoelAbees
Jul 25 2016 12:03
Guys, I'm having difficulty making the portfolio.
can someone tell me the way to go about it?
sites I should refer, or any other advise
I've been trying to do this for past 2 days, getting no where. Absolutely stranded.
Manikanth
@manikanth1024
Jul 25 2016 12:06
Hello guys...
gitgenie
@gitgenie
Jul 25 2016 12:06
@JoelAbees check out some portfolios(Google It) to get a basic idea. Decide on the design. Decide the content. Start coding. When struck ask ppl for help.
stuck*
Joel Abees
@JoelAbees
Jul 25 2016 12:07
@gitgenie thanks, I'm stuck with the navigation bar. Should I write code for it first, or come back to nav after I'm done?
CamperBot
@camperbot
Jul 25 2016 12:07
joelabees sends brownie points to @gitgenie :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @gitgenie |http://www.freecodecamp.com/gitgenie
gitgenie
@gitgenie
Jul 25 2016 12:07
@JoelAbees your choice
Joel Abees
@JoelAbees
Jul 25 2016 12:08
ok fine.
gitgenie
@gitgenie
Jul 25 2016 12:08
hey guys.. trying this challenge https://www.freecodecamp.com/challenges/convert-html-entities .
Is it possible to solve this without using a entityTable that maps symbols to entities?
Temi
@temiadesina
Jul 25 2016 12:23
Hi guys I am taking the profile site challenge and I am running into a few problems 1. when i reduce my screen size i don't see the toggle button 2. I am trying to make my image circular. https://codepen.io/temiadesina/pen/qNoOJm
gitgenie
@gitgenie
Jul 25 2016 12:25
@temiadesina 2. use a square image
Temi
@temiadesina
Jul 25 2016 12:26
hey @gitgenie okay thanks but just in case i don't have a square image what do i do ? and how do i solve the toggle problem
CamperBot
@camperbot
Jul 25 2016 12:26
temiadesina sends brownie points to @gitgenie :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @gitgenie |http://www.freecodecamp.com/gitgenie
gitgenie
@gitgenie
Jul 25 2016 12:27
@temiadesina crop it
Temi
@temiadesina
Jul 25 2016 12:27
okay @gitgenie how about the toggle problem ?
gitgenie
@gitgenie
Jul 25 2016 12:37
@temiadesina make sure data-target value is set right at both ends
Adithya Reddy
@tallpants
Jul 25 2016 12:37
hey guys
can someone
help me figure out how to change the background color of a thumbail in bootstrap
CamperBot
@camperbot
Jul 25 2016 12:37
no wiki entry for: me figure out how to change the background color of a thumbail in bootstrap
Adithya Reddy
@tallpants
Jul 25 2016 12:37
>
?
Ben Line
@Benwebdev
Jul 25 2016 12:39
@adithyakreddy Can you link to the codepen and I'll take a look ?.
Or put your source here.
Adithya Reddy
@tallpants
Jul 25 2016 12:39
It'd just mess up the chat, hold on I'll put it on codepen
Ben Line
@Benwebdev
Jul 25 2016 12:40
okay
Manikanth
@manikanth1024
Jul 25 2016 12:40
does anybody know Jcrop plugin here?
Ben Line
@Benwebdev
Jul 25 2016 12:41
@manikanth1024 used it a few times, what you need? :).
Manikanth
@manikanth1024
Jul 25 2016 12:41
do u know bout jcrop plugin ?
Priscilla
@priscillamosby
Jul 25 2016 12:42
Question. Okay so I did finished my Tribute page but now I'm on my portfolio page project and I am wondering how in the world am I suppose to make a navigation bar, thumbnails of my projects, and add the ability of jumping from one part of the page to another when weren't taught that? Unless this is the "read search ask" solution?
Manikanth
@manikanth1024
Jul 25 2016 12:43
i've just used it in my code but its not working on that image...
It didn't show up exactly right
but the thumbnails are there
I want to change the part containing the "Some application" and the paragraph and the demo and view source buttons
Ben Line
@Benwebdev
Jul 25 2016 12:44
you want to change the background image?.
of the thumbnail ?.
Adithya Reddy
@tallpants
Jul 25 2016 12:44
The color yea
Ben Line
@Benwebdev
Jul 25 2016 12:45
@adithyakreddy Checking for you now. Give me a moment.
@adithyakreddy So you want to change the background colour of the bottom.
some application, and the text and the buttons?.
Adithya Reddy
@tallpants
Jul 25 2016 12:47
@Benwebdev not just the bottom, the whole thumbnail
checkmate-bitch
@checkmate-bitch
Jul 25 2016 12:48
@checkmate-bitch
Hey! I was wondering how can I set up a "sign in with google" or "sign in with github" buttons that we see in sign in/up forms?
i cannot find much info on stack overflow about it.
some links would be great too
Adithya Reddy
@tallpants
Jul 25 2016 12:48
@Benwebdev nevermind, i figured it out. I tried this before but it wasn't working. I guess I must have been overriding it somehow
Here's the solution for anybody wondering: https://codepen.io/InvisibleGhostt/pen/RRyJdP
Ben Line
@Benwebdev
Jul 25 2016 12:49
@adithyakreddy I was just about to tell you to add the style to the thumbnail class and if you just want it on the bottom you would style the caption bit.
Muhammad Hasham
@MohammadHasham
Jul 25 2016 12:50
do i need to carry on the same practice of getJSON in twitch tv as well?
Manikanth
@manikanth1024
Jul 25 2016 12:50
Hey Ben do u know bout jcrop?
Adithya Reddy
@tallpants
Jul 25 2016 12:50
Thanks anyway @Benwebdev :confetti_ball:
CamperBot
@camperbot
Jul 25 2016 12:50
adithyakreddy sends brownie points to @benwebdev :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @benwebdev |http://www.freecodecamp.com/benwebdev
Adithya Reddy
@tallpants
Jul 25 2016 12:52
Wow this actually looks really shit why did I want to do this :laughing:
Ben Line
@Benwebdev
Jul 25 2016 12:52
@adithyakreddy You win some you lose some ;) ;)
@manikanth1024 making coffee, let me know the issue i'll take a look.
Adithya Reddy
@tallpants
Jul 25 2016 12:53
hey @Benwebdev sorry if I'm bothering you, I came across this: http://www.w3schools.com/css/css3_gradients.asp
How would I integrate that into an element?
Manikanth
@manikanth1024
Jul 25 2016 12:53
I tried to implement a jcrop api in my project for cropping an img but nothing seems to work...
Adithya Reddy
@tallpants
Jul 25 2016 12:54
oh nevermind I got it. I'm feeling really stupid today
thanks again @Benwebdev
CamperBot
@camperbot
Jul 25 2016 12:54
adithyakreddy sends brownie points to @benwebdev :sparkles: :thumbsup: :sparkles:
:warning: adithyakreddy already gave benwebdev points
Temi
@temiadesina
Jul 25 2016 12:54
thanks @gitgenie
CamperBot
@camperbot
Jul 25 2016 12:54
temiadesina sends brownie points to @gitgenie :sparkles: :thumbsup: :sparkles:
:warning: temiadesina already gave gitgenie points
Ben Line
@Benwebdev
Jul 25 2016 13:12
@adithyakreddy sorry was making coffee, you could integrate that yes.
Stephen James
@sjames1958gm
Jul 25 2016 13:14
@checkmate-bitch Maybe investigate passport.js I have seen / done a tutorial for facebook using that.
Jan
@F3neden
Jul 25 2016 13:21

http://codepen.io/F3neden/full/oLdrjN/

Can anyone tell me, why there is a white line around the header?

Kevin
@KevinBruland
Jul 25 2016 13:26
@F3neden thats default, add body{margin:0} to CSS
Sorin Ruse
@sorinr
Jul 25 2016 13:26
@F3neden html, body{margin:0; padding:0;} to reset the defaults
Adithya Reddy
@tallpants
Jul 25 2016 13:27
Hey is it possible to get custom colored buttons in bootstrap?
Sorin Ruse
@sorinr
Jul 25 2016 13:28
@adithyakreddy yep. just use background-color: #your hex color here
Adithya Reddy
@tallpants
Jul 25 2016 13:28
Thanks @sorinr
CamperBot
@camperbot
Jul 25 2016 13:28
adithyakreddy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 540 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 25 2016 13:30
@adithyakreddy welcome. you can also use: background-color: rgba(r,g,b,alpha) like rgba(0,0,0, 0.6) to make it black transparent opacity at 60%
Adithya Reddy
@tallpants
Jul 25 2016 13:31
hey @sorinr is there some way I can change the hover and active colors on the button as well?
Sorin Ruse
@sorinr
Jul 25 2016 13:32
@adithyakreddy button:hover{}, button:active{}, buton:focus{} ecc
Adithya Reddy
@tallpants
Jul 25 2016 13:34
thanks again!
Koderkid1936
@Koderkid1936
Jul 25 2016 13:50
what are the necessary CDN links for bootstraps toggle menu to work, I cant seem to get it working has anyone got the links ?
Adithya Reddy
@tallpants
Jul 25 2016 13:54
hey guys, I have a button but the text is off for some reason, how do I center it? screenshot here: https://i.imgur.com/dNZmd4K.png
Sorin Ruse
@sorinr
Jul 25 2016 13:56
@adithyakreddy what are you using for the github icon? a font icon or an img ?
Adithya Reddy
@tallpants
Jul 25 2016 13:57
yup @sorinr <a href="#"><i class="fa fa-2x fa-github"></i>GitHub</a>
Caitlin Sophia
@ocarno5
Jul 25 2016 13:57
Does anyone know of any resources that hjelp you learn how to design a site? I want to look more into making sites look nice not just be functional
Kevin
@KevinBruland
Jul 25 2016 13:57
@ocarno5 are you brand new to design, and do you feel like youre a technical person?
Caitlin Sophia
@ocarno5
Jul 25 2016 13:58
@Benalron Not new but wouldn't say experienced and yeah I'm technical I guess
Sorin Ruse
@sorinr
Jul 25 2016 13:58
@adithyakreddy try add vertical-align:middle to your a container
Ademola Adegbuyi
@ooade
Jul 25 2016 13:58
@ocarno5 if you have some cash http://codeschool.com is a great place
Adithya Reddy
@tallpants
Jul 25 2016 13:59
@sorinr no luck :c
Caitlin Sophia
@ocarno5
Jul 25 2016 13:59
Thanks guys @Benalron @marhyorh
CamperBot
@camperbot
Jul 25 2016 13:59
ocarno5 sends brownie points to @benalron and @marhyorh :sparkles: :thumbsup: :sparkles:
:cookie: 414 | @benalron |http://www.freecodecamp.com/benalron
:cookie: 682 | @marhyorh |http://www.freecodecamp.com/marhyorh
Kevin
@KevinBruland
Jul 25 2016 13:59
for colors, http://www.design-seeds.com/ really helps you get moving with finding colors that work well together
@ocarno5 and http://fontpair.co/ helps early on to get font's that work well together... which is also really important
Sorin Ruse
@sorinr
Jul 25 2016 14:00
@adithyakreddy can you post the pen link?
Caitlin Sophia
@ocarno5
Jul 25 2016 14:01
@Benalron I would send even more brownies if I could, thank youuu
CamperBot
@camperbot
Jul 25 2016 14:01
ocarno5 sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:warning: ocarno5 already gave benalron points
Kevin
@KevinBruland
Jul 25 2016 14:01
@ocarno5 NP, those helped me get moving with design... I am fortunate enough to be married to a graphic designer :)
Beth Qiang
@bethqiang
Jul 25 2016 14:02
hey, can someone help me figure out why 1. the line containing my input form and submit button is off center and 2. why there's horizontal scroll when the screen is vertical on my phone? i've always wrapped everything in 1 div container but it doesn't seem like it's working :( http://codepen.io/bethqiang/pen/OXkOwQ
Kevin
@KevinBruland
Jul 25 2016 14:04
@bethqiang click the gear icon for HTML and the button at the bottom that says, insert the most common viewport meta tag
Beth Qiang
@bethqiang
Jul 25 2016 14:05
@Benalron - it didn't work; there's still a horiztonal scroll :(
Kevin
@KevinBruland
Jul 25 2016 14:06
odd, and you refreshed the page? I am not seeing a horizontal scroll after that
Sorin Ruse
@sorinr
Jul 25 2016 14:07
@bethqiang i also have no horiz scroll when on mobile
Beth Qiang
@bethqiang
Jul 25 2016 14:09
@Benalron @sorinr - weird, it still exists on my phone. it seems like it's not necessarily horizontal scroll, it just loads slightly zoomed in--if i zoom out all the way, it's fine. any ideas on how to fix this on my phone? (since that's where the problem seems to be now, hah.)
@Benalron @sorinr - just kidding, it seems to have magically fixed itself. technology is weird...
@Benalron @sorinr thanks! :)
CamperBot
@camperbot
Jul 25 2016 14:11
bethqiang sends brownie points to @benalron and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @benalron |http://www.freecodecamp.com/benalron
:cookie: 542 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 25 2016 14:12
@bethqiang welcome but we did nothing :)
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:14

Hey guys, does anyone have some time to have a look at my code? I'm currently on the Portfolio website and have some issues:

  • An embedded youtube video seems to span outside of my <section>
  • My <hr> 'line' doesn't have the </> in the center, but goes through it.

http://codepen.io/Todai/pen/RRPGwZ

Craig Nash
@builtbynasher
Jul 25 2016 14:15
Hi all, can anybody recommend where the best place is for an absolute beginner learn html and css. I've completed the html and css section here but felt that it wasn't for the absolute beginner. I managed to complete it but i struggled as i feel it requires some basic knowledge first.
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:16
Check codeacademy.
Kevin
@KevinBruland
Jul 25 2016 14:16
@builtbynasher you can try codecademy
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:16
Just google it and you should find it
Craig Nash
@builtbynasher
Jul 25 2016 14:16
@Todai88 do you think that the free version of CA would suffice?
sorry @Benalron
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:17
@builtbynasher Didn't realize that they had a paid version. I'm sure the unpaid would suffice
Kevin
@KevinBruland
Jul 25 2016 14:18
@builtbynasher yeah, paid version is just feedback on projects, extra projects, and support I think
Craig Nash
@builtbynasher
Jul 25 2016 14:18
yeah you can only access basic content, anything else requires a pro membership
Kevin
@KevinBruland
Jul 25 2016 14:18
@builtbynasher fine with the free version
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:18
@builtbynasher Just get cracking at it. Also don't get too hung up on learning everything you can of HTML and CSS, you will definately pick stuff up as you go through FCC
Kevin
@KevinBruland
Jul 25 2016 14:18
@Todai88 agreed
I was worried I wasnt retaining anything throughout the process, but youl slowly start to get it.... you just have to look up stuff a LOT while youre working initially
Craig Nash
@builtbynasher
Jul 25 2016 14:19
thanks guys, ive no experiance whatsoever and the course here has thrown me a little
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:19
@Benalron I mean I've got a Software Engineering degree and ucrrently work with Software Development and I'm STILL learning the most basic CSS stuff. :D
@Benalron Anyone who says they don't look anything up is either crazy or lying. Trust me.
@builtbynasher No worries. Just back here if u need more help :)
Lee
@leebut
Jul 25 2016 14:20
@builtbynasher I had a quick look at CA and now I get nagging e-mails to upgrade. Maybe I haven't turned off a notification setting.
Craig Nash
@builtbynasher
Jul 25 2016 14:21
what would you guys advise a newb to educate his/herself on before they came to FCC?
i was under the impression that it was literally for the beginner, but im determined to not give up
Kevin
@KevinBruland
Jul 25 2016 14:22
I think it's different person to person, so its hard to say... I started with FCC only, and that worked out well to me until I got to some of the Javascript
just mess around with the stuff you learn making your own projects
do a lot of personal experimentation on codepen and such
Craig Nash
@builtbynasher
Jul 25 2016 14:23
never heard of codepen, just looking at it now is this for beginners?
Lee
@leebut
Jul 25 2016 14:23
@builtbynasher It does seem to be more elementary than beginner. I sometimes use W3schools as a fallback. They have examples and a sandbox you can play around with.
Ben Line
@Benwebdev
Jul 25 2016 14:23
@builtbynasher Codepen is awesome :D.
Kevin
@KevinBruland
Jul 25 2016 14:23
ah, if you havent gotten to codepen yet, I would just keep pushing through the basic HTML and CSS exercised on FCC
@Benwebdev I have a love hate relationship with codepen
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:23
@builtbynasher Well, it's all VERY individual. Some people just understand how coding works, some need more time.
Ben Line
@Benwebdev
Jul 25 2016 14:24
@Benalron Why ?.
Kevin
@KevinBruland
Jul 25 2016 14:24
@Benwebdev because now I have ATOM with plugins that make it much easier to code... but im "familiar" with codepen, so I don't use it as much
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:24
@builtbynasher Just give it time and practice. It's like studying math, if you don't practice it you won't understand it. But eventually you will just hit a point where you UNDERSTAND it. :)
Lee
@leebut
Jul 25 2016 14:24
@Benwebdev I used an editor (Eclipse) on my machine and test locally before uploading stuff.
Craig Nash
@builtbynasher
Jul 25 2016 14:24
thanks, i finished the html and css sections here, i struggled but completed them, i almost feel like ive cheated as ive not retained the information very well as i dont understand why or how ive solved a problem
Ben Line
@Benwebdev
Jul 25 2016 14:24
@Benalron I use a twin turbo version of sublime text ;).
Kevin
@KevinBruland
Jul 25 2016 14:25
I think I just got to comfortable using codepen exclusively, and hung on to it too long
Lee
@leebut
Jul 25 2016 14:25
@builtbynasher Why not have a go at designing a website for a hobby or interest? Set yourself the challenge, and review FCC if you get stuck.
Ben Line
@Benwebdev
Jul 25 2016 14:26
@builtbynasher then create a blank .html file and try and recreate everything you have made. once you can do it without checking solutions on the internet. you can move on ;). look cover right check!!.
Lee
@leebut
Jul 25 2016 14:26
@Benwebdev Good advice.
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:26
My overall advice if you guys want real-world experience and have only worked with FCC is that you check out UN's online volunteering projects. That way you get some certificate, experience and you do some good
Ben Line
@Benwebdev
Jul 25 2016 14:27
@builtbynasher No one can remember the full stack, no way. you just have to keep the documentation on hand.
Craig Nash
@builtbynasher
Jul 25 2016 14:27
thanks guys, i think this would be 1000 times more difficult if this community wasnt here, i guess ive chosen a lonley subject to get into
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:31

Hey guys, does anyone have some time to have a look at my code? I'm currently on the Portfolio website and have some issues:

An embedded youtube video seems to span outside of my <section> My <hr> 'line' doesn't have the </> in the center, but goes through it.

http://codepen.io/Todai/pen/RRPGwZ

checkmate-bitch
@checkmate-bitch
Jul 25 2016 14:35
@sjames1958gm could you maybe send me link regarding that
I checked out oAuth
and google intergrate and stuff. Couldn't make the head from the toe.
Stephen James
@sjames1958gm
Jul 25 2016 14:41
@checkmate-bitch https://github.com/jaredhanson/passport
As I recall it was a Udemy course where I got the actual code.
Dylan
@dhcodes
Jul 25 2016 14:53
@Todai88 I believe to get that hr effect, you would need to make two hr and customize their width with a class or id. As for the youtube, the iframe will not be seen by the section as "content" since it loads after the page so you will need to set a height for your section with the id of portfolio
melisa pettaway
@mpettaw2
Jul 25 2016 14:55
good morning everyone.
with the wiki project has anyone encounter the block json when calling the api
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 14:57
@dhcodes So basically add a seperate class? I thought specifying the trailing elements would be enough. (The one above "skills") having header hr.xxxxx
it sends me the f* you object and then it says it was blocked because the ip was used by <name>
though the name changes every time. I'm guessing that when the call is made it uses the ip address from codepen and not my computer since i do not have a server. plus i am filtering it through the prefix "https://crossorigin.me/"
Sorin Ruse
@sorinr
Jul 25 2016 15:01
@Todai88 your hr have </> in the middle because you have hr:after defined the same way as the first one
Dylan
@dhcodes
Jul 25 2016 15:01
@Todai88 i see what you mean. but then you need to give a custom bg color to star-dark like you've done for star-light
Sorin Ruse
@sorinr
Jul 25 2016 15:02
@Todai88 but for .star-dark you have text-align: center
Dylan
@dhcodes
Jul 25 2016 15:03
@mpettaw2 i'm not sure what you are asking but it seems to work on my end
are you using the dev tools console?
you can "unpack" the object there to use it to manipulate your html/css
Adithya Reddy
@tallpants
Jul 25 2016 15:04
How do you do the thing where you click on a link and it scrolls to place on the same page? could someone point me in the right direction?
Toni Shortsleeve
@KoniKodes
Jul 25 2016 15:04
@mpettaw2 @dhcodes I see that in the console. Looks like wiki needs to know about the hack.
Dylan
@dhcodes
Jul 25 2016 15:04
@adithyakreddy it's called "scroll-spy"
if you're using bootstrap...http://v4-alpha.getbootstrap.com/components/scrollspy/ @adithyakreddy
@adithyakreddy unless you just want it to jump (and not smooth scroll) in which case you can use anchor links
Adithya Reddy
@tallpants
Jul 25 2016 15:05
thanks @dhcodes !
CamperBot
@camperbot
Jul 25 2016 15:05
adithyakreddy sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1249 | @dhcodes |http://www.freecodecamp.com/dhcodes
Muhammad Hasham
@MohammadHasham
Jul 25 2016 15:06

Twitch TV:

In this link what does "kraken" mean is it some channel or what??

https://api.twitch.tv/kraken/streams/summary
Dylan
@dhcodes
Jul 25 2016 15:06
@KoniKodes lol wow, I see it now. That's interesting
Tim Handy
@TimHandy
Jul 25 2016 15:07
Hi, here's a stupid noob question... is there a term for using your JS output and displaying it on a web page? I'm attempting to smash together what I have learnt about html and JS in isolation, and now put them into a web page. Trying to google it, but don't have the terminology of what to search for. Thanks.
Toni Shortsleeve
@KoniKodes
Jul 25 2016 15:07
@dhcodes Yes, it's a little scary. The button works but it looks like the response has been hit. I'm on my way out the door, but what can we do to help her/
Dylan
@dhcodes
Jul 25 2016 15:08
@KoniKodes idk, submit it to wikipedia or see if there's anything about it on Twitter?
@TimHandy dynamic webpage?
@TimHandy DOM manipulation with JS
Toni Shortsleeve
@KoniKodes
Jul 25 2016 15:09
Ok, thanks @dhcodes . @mpettaw2 Are you following this discussion?
CamperBot
@camperbot
Jul 25 2016 15:09
konikodes sends brownie points to @dhcodes and @mpettaw2 :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @mpettaw2 |http://www.freecodecamp.com/mpettaw2
:star2: 1250 | @dhcodes |http://www.freecodecamp.com/dhcodes
Tim Handy
@TimHandy
Jul 25 2016 15:10
@dhcodes aha! Thanks. They've both returned good search results. Thank you... that will get me started. Appreciate your help.
CamperBot
@camperbot
Jul 25 2016 15:10
timhandy sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1251 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Jul 25 2016 15:10
np @TimHandy
Dylan
@dhcodes
Jul 25 2016 15:16
@mpettaw2 I'm not sure what is going on with the wikimedia api, but this link still seems to work to get results: http://en.wikipedia.org//w/api.php?action=opensearch&format=json&search='+searchQuery+'&limit=12&callback=?
where searchQuery is your input
Sorin Ruse
@sorinr
Jul 25 2016 15:17
@KoniKodes @dhcodes i am trying to do it by $.ajax and setting headers like: header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: *"); this is what i have in an php file i used before my ssl certificate expired :)
Dylan
@dhcodes
Jul 25 2016 15:20
@sorinr you mean you're working on the wikipedia project?
in my experience, if you are connecting to wikipedia's api via http and not https, you don't need crossorigin.me or other means of overriding CORS
Sorin Ruse
@sorinr
Jul 25 2016 15:21
@dhcodes i already did it some time ago: http://codepen.io/sorinr/pen/LZVqmJ
Dylan
@dhcodes
Jul 25 2016 15:23
I'm trying to decide if Wikipedia was hacked in some way or if @mpettaw2 's project is getting the edit message/blocked user message for each pager
page
I think the latter
Sorin Ruse
@sorinr
Jul 25 2016 15:23
@dhcodes yes you can call wiki api by http but i think you may also load the pen by http also not bu https :)
Dylan
@dhcodes
Jul 25 2016 15:24
@sorinr go check out her codepen and go through the object returned
lots of vulgarity, but idk what's causing it
my project still works so I'm wondering if it's the url she's calling
Sorin Ruse
@sorinr
Jul 25 2016 15:25
@dhcodes i've seen that. this is why i want to change the call using ajax and setting headers
Dylan
@dhcodes
Jul 25 2016 15:26
@sorinr but do you know what causes it?
Sorin Ruse
@sorinr
Jul 25 2016 15:26
@dhcodes i have no idea
Dylan
@dhcodes
Jul 25 2016 15:26
it seems like comments from owners to people trying to edit the pages?
idk
weird though
Sorin Ruse
@sorinr
Jul 25 2016 15:28
@dhcodes please try my pen above and you will see there are no more obscenities in the response
@dhcodes i don't think so. have you took a look at the objects returned from my pen?
Muhammad Hasham
@MohammadHasham
Jul 25 2016 15:31
how many accounts should i display in twitch tv are 10 enough?
Dylan
@dhcodes
Jul 25 2016 15:32
@MohammadHasham they give you a list.
but you can add more
melisa pettaway
@mpettaw2
Jul 25 2016 15:32
hey sorry everyone i got called away. what happened?
Joel Abees
@JoelAbees
Jul 25 2016 15:33
Hi, I need help from one of you guys.
So I've made a skelton portfolio, it needs improvement. I admit that.
http://codepen.io/JoelAbees/pen/dXmbvb
Dylan
@dhcodes
Jul 25 2016 15:33
@mpettaw2 we're talking about what is causing your issue. In the meantime, I gave a url you can use to get good results but you'll need to remove the s from your codepen url at the top
Joel Abees
@JoelAbees
Jul 25 2016 15:33
Can you help me with the navigation bar.
?
melisa pettaway
@mpettaw2
Jul 25 2016 15:33
ok thank you so much
Sorin Ruse
@sorinr
Jul 25 2016 15:33
@dhcodes and here is my entire php file code: php <?php header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: *"); $str = $_GET['searchstr']; $words = explode(' ', $str); $str = implode('%', $words); $url="https://en.wikipedia.org/w/api.php?gsrsearch=".$str."&generator=search&action=query&gsrnamespace=0&prop=extracts|pageimages&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&format=json"; $json=file_get_contents($url); echo ($json);
@dhcodes sorry wrong formatting but you will get the idea
Dylan
@dhcodes
Jul 25 2016 15:35
@sorinr yeah, it's not for me as I just used http:// but @mpettaw2 may be interested. That's a weird issue though
unsure what to think
brb
Sorin Ruse
@sorinr
Jul 25 2016 15:36
@dhcodes let me change in the php file the https to http to see whats going on. just a sec
melisa pettaway
@mpettaw2
Jul 25 2016 15:38
thanks you guys just got finish reading everything.
i will try both urls
Dylan
@dhcodes
Jul 25 2016 15:39
@JoelAbees sure thing what's your question?
Sorin Ruse
@sorinr
Jul 25 2016 15:39
@dhcodes done. its working same way. no obscenities in the response: http://codepen.io/sorinr/pen/LZVqmJ
melisa pettaway
@mpettaw2
Jul 25 2016 15:46
both are coming up great! thanks you guys
Sorin Ruse
@sorinr
Jul 25 2016 15:46
@mpettaw2 i've seen you changed the api call using my wikisearch.php file. :) its ok
melisa pettaway
@mpettaw2
Jul 25 2016 15:46
yeah i was testing both
it came up perfect.
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 15:48

Any clue why my img isn't showing up next to the iframe (bottom-half of the html):

http://codepen.io/Todai/pen/RRPGwZ

Sorin Ruse
@sorinr
Jul 25 2016 15:48
@mpettaw2 i think the problem was in setting the right headers i as did it in my php file. i will work on achieving same thing only by ajax
melisa pettaway
@mpettaw2
Jul 25 2016 15:50
ok. i was looking at your wiki app what frameworks were you using i never seen that before
?
Sorin Ruse
@sorinr
Jul 25 2016 15:50
@Todai88 where do you close your <iframe> ?
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 15:51
@sorinr Do I explicitly have to close it with an </iframe>? Thougth the finishing / would do it.
Sorin Ruse
@sorinr
Jul 25 2016 15:51
@mpettaw2 its vue.js. something like angular, react
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 15:52
f**k that... :/
@sorinr thanks!
CamperBot
@camperbot
Jul 25 2016 15:52
:cookie: 543 | @sorinr |http://www.freecodecamp.com/sorinr
todai88 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
melisa pettaway
@mpettaw2
Jul 25 2016 15:54
oh. well i will wait until i get to the react section then lol
Sorin Ruse
@sorinr
Jul 25 2016 15:55
@Todai88 welcome. there are just a few tags in html that are autoclosing like <img />, <input />, ecc. here is a list: http://xahlee.info/js/html5_non-closing_tag.html
Muhammad Hasham
@MohammadHasham
Jul 25 2016 16:00
can anyone tell me why is this not working i want to link a hyperlink to each name so that when it is clicked the user is redirectd to the page?
@sorinr
Sorin Ruse
@sorinr
Jul 25 2016 16:01
@MohammadHasham please repost your pen link. i can't remember all of them
Sorin Ruse
@sorinr
Jul 25 2016 16:06
@MohammadHasham here it is: $("#channel").append(html[i] + "<a href="+site+">" + "</a>" + "<br>");
Muhammad Hasham
@MohammadHasham
Jul 25 2016 16:11
@sorinr Thanks
CamperBot
@camperbot
Jul 25 2016 16:11
:cookie: 544 | @sorinr |http://www.freecodecamp.com/sorinr
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jul 25 2016 16:14
@MohammadHasham welcome. i would suggest you try using all the time devtools to see whats going on under the hood. just press F12 in chrome, reload the page' and you will see a lot of information about your page
MikeBeers
@MikeBeers
Jul 25 2016 16:25
Can I get a look at twitch project?
abtak mustapha
@mustapha88
Jul 25 2016 16:33
hello for all campers
Muhammad Hasham
@MohammadHasham
Jul 25 2016 16:34
@sorinr that is not working still
abtak mustapha
@mustapha88
Jul 25 2016 16:34
i'm working on simon game and i have some issue to fix can any one help on this?
Sorin Ruse
@sorinr
Jul 25 2016 16:37
@MohammadHasham sorry it is: $("#channel").append("<a href="+site+" target='_blank'>" + html[i] + "</a>" + "<br>");
i will be appreciate if some one take a look and tell me what wrong with button,,?
Muhammad Hasham
@MohammadHasham
Jul 25 2016 16:43
Thanks @sorinr but can you tell me that how did u made that working
CamperBot
@camperbot
Jul 25 2016 16:43
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave sorinr points
Sorin Ruse
@sorinr
Jul 25 2016 16:44
@MohammadHasham you had the html[i] outside the <a>
Muhammad Hasham
@MohammadHasham
Jul 25 2016 16:45
I see @sorinr
sethun60
@sethun60
Jul 25 2016 16:56
can u guys share your personal portfolio website link.. I wanna take a look at them and get inspired.
Joel Abees
@JoelAbees
Jul 25 2016 16:57
@sethun60 I'm making my portfolio right now. Almost done, struggling with the nav bar.
Joakim Bajoul Kakaei
@Todai88
Jul 25 2016 17:04

Yo guys.

Question regarding image sizes; I've got a custom slideshow that I want to use in my portfolio, but since I'm using different sizes of images it doesn't really do well. Could someone give me some help?

This is my codepen: http://codepen.io/Todai/pen/RRPGwZ

Muhammad Hasham
@MohammadHasham
Jul 25 2016 17:17

var html = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var image = "https://api.twitch.tv/kraken/streams/featured?limit=25&offset=0";

$.getJSON("image",function(b){
var url = b.featured[0].image;
console.log(url);
$(".igloo").attr("src",url);

});

Ken Haduch
@khaduch
Jul 25 2016 17:30
@JoelAbees - are you using bootstrap? Their site has an example navbar that you can use as a template? The other important thing that people frequently don't do, if using bootstrap, is to add the jQuery.js and Bootstrap.js to the JS external libraries, in that order, jquery first. That is what the collapsed menu needs to be expanded. If you have other questions, post your code URL or ask?
Toni Shortsleeve
@KoniKodes
Jul 25 2016 17:32
@sorinr looks good.
Sorin Ruse
@sorinr
Jul 25 2016 17:33
@KoniKodes what looks good? :)
Muhammad Hasham
@MohammadHasham
Jul 25 2016 17:53
can anyone help me with twitch tv
Muhammad Hasham
@MohammadHasham
Jul 25 2016 18:00
@sorinr
Matt
@brewaskew
Jul 25 2016 18:35
Is there a setting in codepen to make geolocation work? I have been able to use other peoples codepen sites successfully, that get geolocation, but when trying to do it myself it fails. I know the code is working, because I can export the file from codepen and open it as a regular page in a web browser. Thanks.
Micah Points
@msp327
Jul 25 2016 18:45
I'm doing the Random Quote Machine and I am trying to figure out which quote generator I can use. Is there a free one available? Thanks!
Darshan
@Dave1089
Jul 25 2016 18:46
@brewaskew I don't think there is any codepen setting because geolocation is fetched from the browser.. and there is issue with chrome as they have discontinued supporting non-secure pages https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only?hl=en
@msp327 https://quotesondesign.com/api-v4-0/ first result in google search :)
Micah Points
@msp327
Jul 25 2016 18:48
@Dave1089 Yeah I tried that and it only gives one. It doesn't seem to update for me.
Darshan
@Dave1089
Jul 25 2016 18:49
@msp327 well.. ur call should be consecutive so you get random new quote every time you click button or call event
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback= endpoint link
Jordan Meyer
@Jordanmeyer89
Jul 25 2016 18:51
Can anyone help me with this? Ive been stuck for weeks
```
function whatIsInAName(collection, source) {
  // What's in a name?
  var arr = [];
  // Only change code below this line

 var prop = (Object.getOwnPropertyNames(source));  // what property are you looking for the key of  
 var newProp = prop;  // this variable changes when more props are there
 var maybe =[]; //temporary array

 for (var i=0; i < collection.length; i++){
   newProp = prop;

     if ((collection[i][newProp]) == (source[newProp])){  
         for (var j=0; j < newProp.length; j++)   //console.log(collection[i][newProp]);
              //nextprop        //console.log(collection[i].hasOwnProperty(newProp));
             if (collection[i][newProp]){ //if prop j exists
                  newProp = prop[j-1];// next prop 
                   if (collection[i][newProp] == source[newProp]) {  //if prop 1 and 2 matches source 
                     arr.push(collection[i]);  
    }
    }
               else {
                 arr.push(collection[i]); //if one matched and no other prop exists
    }
    }
    }

   // Only change code above this line
  return arr;
}

whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
Darshan
@Dave1089
Jul 25 2016 18:52
wherefore art thou :)
Micah Points
@msp327
Jul 25 2016 18:52
@Dave1089 Sorry new to this, but I assume I need to add to the end of the callback after the "="?
Darshan
@Dave1089
Jul 25 2016 18:52
@msp327 yes
Micah Points
@msp327
Jul 25 2016 18:53
@Dave1089 OK thanks. I need to go look at it some more to figure out what it is I need to add. :)
CamperBot
@camperbot
Jul 25 2016 18:53
msp327 sends brownie points to @dave1089 :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @dave1089 |http://www.freecodecamp.com/dave1089
Darshan
@Dave1089
Jul 25 2016 18:53
@msp327 :+1:
Ansuke
@Ansuke
Jul 25 2016 19:06
Could someone point out where I should start to use the Wikipedia API?
Adithya Reddy
@tallpants
Jul 25 2016 19:11
Hey guys, for some reason two buttons show up in the local copy of my site, but when I move everything to codepen, they disappear
Can someone help me out?
This is what the local copy looks like on my machine
Chris Rutherford
@cjrutherford
Jul 25 2016 19:13
what's the node command to list the urls to all the installed dependencies?
Martialis39
@Martialis39
Jul 25 2016 19:14
Hey, can someone take a look and tell me what you think?
Adithya Reddy
@tallpants
Jul 25 2016 19:14
oh nevermind
sorry
it was my adblocker
remove the social buttons
Tyler Moeller
@TylerMoeller
Jul 25 2016 19:20
@Ansuke This is the main page for their API documentation: https://www.mediawiki.org/wiki/API:Main_page
@cjrutherford npm view <module name> repository.url
Ajay Tanwar
@ajayt365
Jul 25 2016 19:28
hey , i was making random quote machine and want to retrieve quotes using foresmatic api. here is the link https://codepen.io/ajayt365/pen/KrXoPp . i am not getting what the problem is . please help me out . right click > inspect element> console . get Err_insecure_response . please help
Tyler Moeller
@TylerMoeller
Jul 25 2016 19:35
@ajayt365 You are trying to access the API over HTTPS, but it only supports HTTP. Load your codepen via HTTP and change the URL to the API to use HTTP. You'll need to fix your $.getJSON after that, because once you get past the insecure response error, you will get a CORS issue.
Ajay Tanwar
@ajayt365
Jul 25 2016 19:37
@TylerMoeller why i am getting a CORS issue ? and how to solve that ?
Tyler Moeller
@TylerMoeller
Jul 25 2016 19:43

@ajayt365 I'm not familiar with this pattern you're using:

$.getJSON(url,{
  method: "getQuote",
  format:"jsonp",
  lang:"en"
},function(data){
  console.log(data);
});

I can give you the correct code if you want. If not, I recommend reading the API docs and getJSON. Happy to try and answer any questions you have as you figure these out:
http://api.jquery.com/jquery.getjson/
http://forismatic.com/en/api/

Ajay Tanwar
@ajayt365
Jul 25 2016 19:50
@TylerMoeller i am sending data ={ format:json}... as it will be converted to string and url-encoded and then appended to url . it's written in getJSON documentation. am i doing it the wrong way?
melisa pettaway
@mpettaw2
Jul 25 2016 19:53
does anyone now how to get the magnifying glass in the search box. i am trying to style my wiki app
Tyler Moeller
@TylerMoeller
Jul 25 2016 19:54
@ajayt365 What I mean about the pattern is that it looks like a $.ajax request, but $.getJSON is a short-hand ajax request. I don't typically see the curly braces used unless you're adding more json to get returned with the request. Typically it's just $.getJSON(url).done(function(data) { // do something with your data }); This is a standard $.ajax example:
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});
Ajay Tanwar
@ajayt365
Jul 25 2016 19:57
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: "mount rainier",
tagmode: "any",
format: "json"
}) it' s in getJSON documentation . @TylerMoeller
Ajay Tanwar
@ajayt365
Jul 25 2016 20:02
@TylerMoeller should i do this way ? and what about CORS issue on http . how to solve that ?
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:04
@ajayt365 Thanks, I learned something new. :) That ends up building out a url like this: http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&tags=%22mount%20rainier%22&tagmode=%22any%22&format=%22json%22
CamperBot
@camperbot
Jul 25 2016 20:04
tylermoeller sends brownie points to @ajayt365 :sparkles: :thumbsup: :sparkles:
:cookie: 253 | @ajayt365 |http://www.freecodecamp.com/ajayt365
Ajay Tanwar
@ajayt365
Jul 25 2016 20:06
yeah i was trying to do that. but now it gives CORS issue . what about that? @TylerMoeller
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:07
In your code, you are building out this URL: http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. All you need to do is add a callback to the url to get around the CORS issue.
Ajay Tanwar
@ajayt365
Jul 25 2016 20:07
then it will be jsonp request
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:09
@ajayt365 Yes, you need to use the jsonp parameter in your URL
Ajay Tanwar
@ajayt365
Jul 25 2016 20:10
Access-Control-Allow-Origin header . have u ever done with this ? @TylerMoeller
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:11
@ajayt365 That's what a CORS issue is. Yes, if you want the code, I can give it to you. :) You are very close, just need to add that jsonp parameter to the URL
The API Docs mention it here: "jsonp=<string> — callback function name, used for jsonp format only" http://forismatic.com/en/api/
Ajay Tanwar
@ajayt365
Jul 25 2016 20:14
"new error " XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&callback=%3F. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:14
That is a CORS error ^^
Ajay Tanwar
@ajayt365
Jul 25 2016 20:16
i did format=jsonp . why am i still getting that error? i also introduced callback parameter in data{}. what else i need to make this work ?
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:16
@ajayt365 The documentation says to use "jsonp=<string>" for your callback. You have used "callback=?"
Ajay Tanwar
@ajayt365
Jul 25 2016 20:18
XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=%3Cstring%3E. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
still error
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:21
@ajayt365 <string> is not literally what you are supposed to enter. It represents a string, like ? or the name of your function that requests the quote. To simplify things, I recommend getting rid of everything in your brackets and just using the full URL you need. http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:27
@ajayt365 Nice work, looks like you got it.
Ajay Tanwar
@ajayt365
Jul 25 2016 20:27
@TylerMoeller thanks. i read that CORS and jsonp are different. do u know how to use CROS ?
CamperBot
@camperbot
Jul 25 2016 20:27
ajayt365 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 689 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:28
@ajayt365 I don't know how to configure a server for CORS, no.
Aside from simple .htaccess tweaks
Ajay Tanwar
@ajayt365
Jul 25 2016 20:28
so jsonp is the best option on both 'https' and 'http'?
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:29
Always use HTTPS if you can. Especially with jsonp as there are security concerns. With this project, it's fairly simple and low risk if it gets hacked, so just do it for the learning purposes.
Ajay Tanwar
@ajayt365
Jul 25 2016 20:30
should i use jsonp with https ?
if https causes CROS error ?
Tyler Moeller
@TylerMoeller
Jul 25 2016 20:30
HTTP/HTTPS aren't going to cause CORS issues.
What you hit earlier was an insecure response - you can't request things over HTTP when you're on a secure HTTPS website
And, as you can see, Forismatic does not support HTTPS. Browse to this URL and you'll get an error:
https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
but browse to the HTTP equivalent, and it works fine:
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
Stephen
@stephepush
Jul 25 2016 20:38
@coolsday , @kirbyedy, @leebut; thank you for testing my project. I fell asleep about 20 minutes after posting my question
CamperBot
@camperbot
Jul 25 2016 20:38
stephepush sends brownie points to @coolsday and @kirbyedy and @leebut :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @leebut |http://www.freecodecamp.com/leebut
:star2: 1282 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
:cookie: 273 | @coolsday |http://www.freecodecamp.com/coolsday
Ben Line
@Benwebdev
Jul 25 2016 20:58
Here for a while if anyone needs a hand on frontend stuff :D.
odekyc
@odekyc
Jul 25 2016 21:05
hi, I need some help for the Simon Project (Front End)
Fitsum Hiruy
@Henokeg
Jul 25 2016 21:08
hi everyone i am a little bit bummed out on the portfolio project i just dont know how to start any idea?
odekyc
@odekyc
Jul 25 2016 21:08
for some reason, my code works for the first run, but if I turn off the power switch and then turn it back on again, the color button start to light up all over the places and is messed up
below is my js code

$(document).ready(function() {

var audio = $("audio")[0];
var audio2=$("audio")1;
var orig_colors=["#004d99", "#004d1a" ,"#b30000", "#b3b300"];
var color_arr=["blue","#00cc00","red","yellow"];
var color_id=["blue","green","red","yellow"];
var result_arr=[];
var result_arrCounter=0;
var user_clicked=[];
var user_clickedCounter=0;
var stricton=false;
var running=false;
var round_level=1;
var random_num=null;
var poweron=false;
var b4runblink;
var playResultInt;
var playIntTime=14700;
var clicked_num=null;
var arrsMatch=true;
var presetlv1;
var setTimeout1;
var setTimeout2;
var presetlv2;

function win(){

}

$('#inner_strict').on('click',function(){


      if(stricton){
        stricton=false;

        $('#strict_alert').css('background-color', 'grey');

      }
      else if(!stricton){
        stricton=true;

        $('#strict_alert').css('background-color', 'red');
      }


    });

 $('#inner_start').on('click', function(){


            running=true;
            // clearInterval(b4runblink);
            clearInterval(playResultInt);

            $('#inner_strict').css("pointer-events", "none");
            $('#inner_start').css("background-color", "green");

            random_num=Math.floor((Math.random() * 4));
            result_arr.push(random_num);
            result_arrCounter++;

               // b4runblink=setInterval(function(){
               //     $('#display').text('');
               //     setTimeout(function(){
                      $('#display').text('--');
               //     }, 700);
               // }, 1400);


                setTimeout(function(){

                // clearInterval(b4runblink);   
                $('#display').text('1');
                $('#'+color_id[random_num]).css("background-color",color_arr[random_num]);
                $("#audio"+random_num).get(0).cloneNode().play();


                }, 5100);

                setTimeout(function(){

                      $('#'+color_id[random_num]).css("background-color",orig_colors[random_num]);
                }, 5900);



               $('.fourcolors').css("pointer-events", "auto");
               $(".fourcolors").click(function(e){

                if(e.which==1){

                   result_arrCounter=0;

                   var clickColor=e.target.id;
                   switch(clickColor){
                    case "blue":
                        clicked_num=0;

                        break;
                    case "green":
                        clicked_num=1;

                        break;
                    case "red":
                        clicked_num=2;

                        break;

                    case "yellow":
                        clicked_num=3;

                        break;
                   }

                 $("#audio"+clicked_num).get(0).cloneNode().play();

                 user_clicked.push(clicked_num);

                 user_clickedCounter++;

                 if(result_arr[user_clickedCounter-1]!==user_clicked[user_clickedCounter-1]){

                        arrsMatch=false;
                 }

            if(user_clickedCounter==result_arr.length){
              $('.fourcolors').css("pointer-events", "none");


                 result_arrCounter=0;
I don't understand, it should cause any problem on the second or subsequent runs(the 4 color div buttons should light up in order instead of being messed up)
I've made sure I don't nest setTimeout in another setTimeout
and I nest only one single layer of setTimeout in my setInterval
instead of nesting multiple layers of setTimeout inside one another
I also made sure I clearInterval my setInterval everytime the power switch is turned off
also, here is my simon.html

<!DOCTYPE html>

<html>
<head>
<title>Simon</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="simon.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="simon.js"></script>
<audio id="audio0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
<audio id="audio1" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
<audio id="audio2" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
<audio id="audio3" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
<audio id="audioerr" src="http://www.freesound.org/data/previews/331/331912_3248244-lq.mp3"></audio>

</head>
<body>



<div id="outer_circle">
<div id="inner_gray">
<div id="control_circle">
<h1 id="simon">Simon<h2 id="trademark">&reg</h2></h1>

<div id="outer_screen">
<div id="inner_screen">

<p id="display">--</p>

</div>

</div>

<div id="outer_start">
<div id="inner_start">
</div>
</div>

<div id="outer_strict">
<div id="inner_strict">
</div>
</div>
<div id="strict_alert">
</div>

<p id="count">COUNT</p>
<p id="start">START</p>
<p id="strict">STRICT</p>
<div>

<p id="off">OFF</p>
<p id="on">ON</p>
<div id="switchbackground">
<div id="switchoff"></div>
<div id="switchon"></div>
</div>



</div>
</div>
</div>
<div id="green" class="fourcolors">
</div>
<div id="red" class="fourcolors">
</div>
<div id="yellow" class="fourcolors">
</div>
<div id="blue" class="fourcolors">
</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>
<head>
<title>Simon</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="simon.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="simon.js"></script>
<audio id="audio0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
<audio id="audio1" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
<audio id="audio2" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
<audio id="audio3" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
<audio id="audioerr" src="http://www.freesound.org/data/previews/331/331912_3248244-lq.mp3"></audio>

</head>
<body>



<div id="outer_circle">
<div id="inner_gray">
<div id="control_circle">
<h1 id="simon">Simon<h2 id="trademark">&reg</h2></h1>

<div id="outer_screen">
<div id="inner_screen">

<p id="display">--</p>

</div>

</div>

<div id="outer_start">
<div id="inner_start">
</div>
</div>

<div id="outer_strict">
<div id="inner_strict">
</div>
</div>
<div id="strict_alert">
</div>

<p id="count">COUNT</p>
<p id="start">START</p>
<p id="strict">STRICT</p>
<div>

<p id="off">OFF</p>
<p id="on">ON</p>
<div id="switchbackground">
<div id="switchoff"></div>
<div id="switchon"></div>
</div>



</div>
</div>
</div>
<div id="green" class="fourcolors">
</div>
<div id="red" class="fourcolors">
</div>
<div id="yellow" class="fourcolors">
</div>
<div id="blue" class="fourcolors">
</div>
</div>

</body>
</html>

this is my simon.css

body{
background: url(grass.jpg);
background-size: 100%;
z-index: -1;
}

outer_circle{

position: absolute;
left: 26.5%;
top: 10%;
height: 700px;
width: 700px;
background: grey;
border-radius: 100%;

}

.backgroundred{
background-color: red;
}

.backgroundblue{
background-color: blue;
}

.backgroundyellow{
background-color: yellow;
}

.backgroundgreen{
background-color: green;
}

switchbackground{

position:absolute;
background-color: grey;
width: 130px ;
height: 40px;
top: 330px;
left: 140px;

}

.active{
opacity: 0.5;
}

switchoff{

position: absolute;
padding-top: 8%;
width: 65px;
height:40px;
background-color: #66b3ff;
visibility: visible;

}

switchon{

position: absolute;
padding-top: 8%;
width: 65px;
height:40px;
left: 65px;
background-color: #99ff33;
visibility: hidden;

}

outer_screen{

position:absolute;
background-color: grey;
height: 100px;
width: 150px;
border-radius: 10% 10%;
top: 190px;
left: 40px;

}

strict_alert{

position: absolute;
background-color: grey;
height: 15px;
width: 15px;
border-radius: 100%;
top: 177px;
left: 320px;

}

inner_screen{

position: absolute;
background-color: #660000;
height: 80px;
width: 130px;
border-radius: 10% 10%;
top:10px;
left: 10px;
font-size: 500%;

}

display{

color:  #330000;
text-align: center;
position:relative;
top: -10px;

}

outer_start{

background-color: grey;
height: 80px;
width: 80px;
top: 200px;
left: 200px;
position:absolute;
border-radius: 100%;

}

inner_start{

background-color: red;
width:60px;
height: 60px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
pointer-events: none;

}

outer_strict{

background-color: grey;
height: 80px;
width: 80px;
top: 200px;
left: 288px;
position:absolute;
border-radius: 100%;

}

inner_strict{

background-color: yellow;
width:60px;
height: 60px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
pointer-events: none;

}

simon{

position:absolute;
top: 46px;
left: 30px;
font-weight: bold;
font-size: 700%;
font-family: Arial Black;

}

trademark{

position: absolute;
top: 69px;
left: 354px;

}

green{

background-color: #004d1a;
position: absolute;
height: 325px;
width: 325px;
border-radius: 100% 5% 5% 5%;
top: 20px;
left: 20px;
z-index: 1;

}

start{

position:absolute;
top: 290px;
left: 206px;
font-size: 160%;
font-weight: bolder;

}

strict{

position:absolute;
top: 290px;
left: 289px;
font-size: 160%;
font-weight: bolder;

}

off{

position:absolute;
top: 340px;
left: 100px;
font-size: 120%;
font-weight: bolder;

}

on{

position:absolute;
top: 340px;
left: 275px;
font-size: 120%;
font-weight: bolder;

}

red{

background-color: #b30000;
position:absolute;
height: 325px;
width: 325px;
border-radius: 5% 100% 5% 5%;
top: 20px;
left: 355px;
z-index: 1;

}

yellow{

background-color: #b3b300;
position:absolute;
height: 325px;
width: 325px;
border-radius: 5% 5% 5% 100%;
top: 355px;
left: 20px;
z-index: 1;

}

blue{

background-color: #004d99;
position:absolute;
height: 325px;
width: 325px;
border-radius: 5% 5% 100% 5%;
top: 355px;
left: 355px;
z-index: 1;

}

count{

position:absolute;
top: 290px;
left: 76px;
font-size: 160%;
font-weight: bolder;

}

inner_gray{

background-color: grey;
position:absolute;
left: 18%;
top: 18%;
height:450px;
width: 450px;
border-radius: 100%;
z-index: 2;

}

.fourcolors{
pointer-events: none;
}

control_circle{

background-color: white;
position:absolute;
height: 410px;
width: 410px;
border-radius: 100%;
z-index: 3;
left: 20px;
top: 20px;

}

odekyc
@odekyc
Jul 25 2016 21:14
you can copy it and try to run on your browser, I tried both safari and chrome and both have the same problems
Harry Adel
@harryadel
Jul 25 2016 21:14
would someone please help me with my pomodoro clock challenge
my buttons don't seem to be working properly http://codepen.io/Hadouken/pen/bEmymd
odekyc
@odekyc
Jul 25 2016 21:15
I am setting up a codepen account
I will show you my pomodoro pen in 10 minutes
I did everything except I don't know how to back the background fill up gradually
Arsia Ardalan
@ArsiaArdalan
Jul 25 2016 21:24
Hey guys
So challenge 1 is almost done (tribute page) but Im getting a strange margin or something to the right of the page and I need to eliminate it:
I don't want to use CONTAINER, i wanna keep using the CONTAINER-FLUID
I only have this issue on full screen mode on desktop
https://codepen.io/ArsiaArdalan/full/pbaaOO/
odekyc
@odekyc
Jul 25 2016 21:27
this is the my Simon project
melisa pettaway
@mpettaw2
Jul 25 2016 21:30
@ArsiaArdalan try overriding the containter-fluid css to reflect width:100% and set jumbotron's padding to 0;
Arsia Ardalan
@ArsiaArdalan
Jul 25 2016 21:32
@mpettaw2 Nope, tried it. didn't work
melisa pettaway
@mpettaw2
Jul 25 2016 21:32
dang
did anything change with the jumbotron when you set padding to 0
sorry it was container-fluid where padding:0;
but if you are trying to have the pic touch the edge of the window then you will have to eliminate the left and right margins for the container-fluid class as well
Arsia Ardalan
@ArsiaArdalan
Jul 25 2016 21:37
thank you @mpettaw2 .. figured it out.. I had a col-xs-offset-1 for a header somewhere but it's weird why it would offset it on large screen rather than XS devices.. anyways, it's fixed... much appreciated :+1:
CamperBot
@camperbot
Jul 25 2016 21:37
arsiaardalan sends brownie points to @mpettaw2 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @mpettaw2 |http://www.freecodecamp.com/mpettaw2
melisa pettaway
@mpettaw2
Jul 25 2016 21:38
not a problem and that is weird
Fitsum Hiruy
@Henokeg
Jul 25 2016 21:39
hi everyone i cant get start on the portfolio any suggestion?
Reggie
@Reggie01
Jul 25 2016 21:53
@Henokeg You can start by creating a navbar or bootstrap navbar
Revaz Nakhutsrishvili
@hirevaz
Jul 25 2016 22:07
Hello guys :grinning: I just finished my first project in Basic Front-End and please rate it.. every feedback will be welcome :grinning: Thank you so much :stuck_out_tongue: http://codepen.io/hiRevaz/pen/PzZLkW
Harry Adel
@harryadel
Jul 25 2016 22:07
Does anybody know why my code can't increment the time span for both sessions? http://codepen.io/Hadouken/pen/bEmymd
It can only decrease them for some reason
and it doesn't matter where I click the addition or subtraction button either
Juan Moraza
@Morazajuan
Jul 25 2016 22:11
Hello campers! can anybody tell me why in JS it wont alert the new value after the function where the object is stringnified ? http://codepen.io/morazajuan/pen/GqdjvY
Rada
@Radascript
Jul 25 2016 22:15
@Morazajuan where are you calling that function?
@Morazajuan also you have an error in console because you haven't defined html and trying to pass it to the elements with weather ID

@Morazajuan but yeah you just need to have:

city(); somewhere on the page

Although, you should put the alert INSIDE the function scope
otherwise, it will alert you with the function instead of with the city name
This message was deleted
function city (){
$.getJSON('http://ipinfo.io', function(data){
console.log(data);
city = JSON.stringify(data.city);
alert(city);
});
};
Juan Moraza
@Morazajuan
Jul 25 2016 22:19
@Radascript OMG you are helping me a lot! Thanks
CamperBot
@camperbot
Jul 25 2016 22:19
morazajuan sends brownie points to @radascript :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @radascript |http://www.freecodecamp.com/radascript
Rada
@Radascript
Jul 25 2016 22:20
@Morazajuan yw! good luck
Juan Moraza
@Morazajuan
Jul 25 2016 22:22
@Radascript sorry for the ignorance but how do you defined the html in JS?
Darshan
@Dave1089
Jul 25 2016 22:23
@Harry97 using wrong jquery method .text() instead of .text
Rada
@Radascript
Jul 25 2016 22:23
@Morazajuan it's okay! So see how on line 30 and 36 you have " $("#weather").html(html);"?
winstonlan
@winstonlan
Jul 25 2016 22:23
hi guys
i need some help with my simon game code.
Darshan
@Dave1089
Jul 25 2016 22:23
@Harry97 in ur first if condition
Rada
@Radascript
Jul 25 2016 22:24
@Morazajuan so your Javascript treats the (html) that's inside the brackets as a variable
and since you haven't defined it anywhere, it doesn't know what you want
so somewhere you need something along the lines
var html = someWeatherObject[sectionOfIt][iWantToShowThisOne];
and it's probably more intuitive if it isn't called html but that's up to you
I'm running out to walk my dog but if you are still having issues you can send me a direct message, or someone else can help you. Good luck!
Juan Moraza
@Morazajuan
Jul 25 2016 22:27
Thanks alot @Radascript !
CamperBot
@camperbot
Jul 25 2016 22:27
morazajuan sends brownie points to @radascript :sparkles: :thumbsup: :sparkles:
:warning: morazajuan already gave radascript points
Juan Moraza
@Morazajuan
Jul 25 2016 22:28
enjoy walking your dog!
Tomás G. Martínez
@TomGM
Jul 25 2016 22:47
guys, I'm doing the wikipedia viewer and I'm not sure if I should make it so that the random button leads to a random article with a javascript function or within the html tag? is there a convention about this?
Arthur
@arthurmiko
Jul 25 2016 22:58
Hi, everdybody! Does anyone can help my with issue about google share button?
Im figure out now with random quotes challenge. Just set up twitter and tumblr buttons and now interesting in facebook. But after some googling I am begin to think that google share button allow to share link to page and there is no way to share with quote.
Here is example https://artquotes.herokuapp.com/
Tyler Moeller
@TylerMoeller
Jul 25 2016 23:08
@TomGM Use html/css instead of JavaScript when you can - to a point. If you're going to save time writing it in JS, go for it. In this case, a simple <a href=""> will suffice.
Pedro Relvas
@pmrelvas
Jul 25 2016 23:15
hi everyone... I'm trying to change some div text by clicking in a button... I'm using the following code but it is not working :s
'''
$(".btn-new-quote").on("click", function() {
//generateQuote();
$(".quote-text").html("ola");
});
'''
$(".btn-new-quote").on("click", function() {
    //generateQuote();
    $(".quote-text").html("ola");
  });
Xihai Luo
@coolsday
Jul 25 2016 23:18
can anyone help me with my random quote generator?
I keep getting <p> tags when trying to tweet a quote
mingmingrr
@mingmingrr
Jul 25 2016 23:24
@coolsday The website you're getting quotes from sends back the quotes surrounded by <p>. In order to remove the tags you could do $('<div>').html(content).text()
Pedro Relvas
@pmrelvas
Jul 25 2016 23:26
can someone help me please? :(
Tomás G. Martínez
@TomGM
Jul 25 2016 23:27
@pmrelvas can you link the codepen?
I'm having trouble in changing the text of the div element
Amit
@amit-s
Jul 25 2016 23:31
@pmrelvas quick-add jQuery under your javascript settings
Tomás G. Martínez
@TomGM
Jul 25 2016 23:32
what he said
I was missing it too
Pedro Relvas
@pmrelvas
Jul 25 2016 23:33
thanks @amit-s and @TomGM !!!
CamperBot
@camperbot
Jul 25 2016 23:33
pmrelvas sends brownie points to @amit-s and @tomgm :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @tomgm |http://www.freecodecamp.com/tomgm
:cookie: 322 | @amit-s |http://www.freecodecamp.com/amit-s
Tomás G. Martínez
@TomGM
Jul 25 2016 23:33
also remember you're populating the div with html code, so you could add tags and styles to the generated quote
Xihai Luo
@coolsday
Jul 25 2016 23:35
@mingmingrr i'll try that
Tomás G. Martínez
@TomGM
Jul 25 2016 23:41
I just noticed my random quote machine is broken, could anyone tell me why? it was working a couple days ago https://codepen.io/GMATom/pen/QNwVWM
haven't really changed the code, api seems to be working
Stephen James
@sjames1958gm
Jul 25 2016 23:41
@TomGM You are connecting to codepen over https which doesn't allow sending http: queries
Tomás G. Martínez
@TomGM
Jul 25 2016 23:42
oh
good to know thanks @sjames1958gm
CamperBot
@camperbot
Jul 25 2016 23:42
tomgm sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2149 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Tiffany White
@twhite96
Jul 25 2016 23:42
@mingmingrr I am having the same p tag problem with my Random Quote Generator. Where would I put the piece of code you're suggesting? My codepen is here:
Stephen James
@sjames1958gm
Jul 25 2016 23:42
@TomGM :+1:
Greg Duncan
@GregatGit
Jul 25 2016 23:42
This message was deleted
@pmrelvas var temp = $('p').html();
Pedro Relvas
@pmrelvas
Jul 25 2016 23:45
what is it for?
mingmingrr
@mingmingrr
Jul 25 2016 23:46
@twhite96 if you want to keep the <p> when you load a new quote, do it inside $('#tweet-quote').on('click', else you can do var content = $('div').html(post.content).text() inside success: function(data) {
Stephen James
@sjames1958gm
Jul 25 2016 23:48
@twhite96 $(post.content)[0].innerText here is one way to get the text
Tiffany White
@twhite96
Jul 25 2016 23:50
Thanks @sjames1958gm! Bug is now fixed
CamperBot
@camperbot
Jul 25 2016 23:50
twhite96 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2150 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Greg Duncan
@GregatGit
Jul 25 2016 23:51
@twhite96 @pmrelvas if you run this it could be a possilbe fix
var str = '"When the light turns green, you go.<br>When the light turns red, you stop.<br>But what do you do when the light turns blue with orange and lavender spots?  " John Gruber #quotes';

var newStr = str.replace(/<[^>]*>?/g, '');
console.log(newStr);
Stephen James
@sjames1958gm
Jul 25 2016 23:51
@twhite96 :+1: