These are chat archives for FreeCodeCamp/HelpFrontEnd

31st
Oct 2016
Welp
@WelpUrStud
Oct 31 2016 00:27
Anyone know how the heck I can remove a background from a logo?
Walid Ashri
@walidashri
Oct 31 2016 00:37
@WelpUrStud use gimp
Welp
@WelpUrStud
Oct 31 2016 00:39
I'm trying. It's a little confusing
Walid Ashri
@walidashri
Oct 31 2016 00:39
@WelpUrStud
lacey irvin
@laceyIrvin
Oct 31 2016 00:57
great article if your struggling with bootstrap
Walid Ashri
@walidashri
Oct 31 2016 01:15
@laceyIrvin thanks
CamperBot
@camperbot
Oct 31 2016 01:15
walidashri sends brownie points to @laceyirvin :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @laceyirvin |http://www.freecodecamp.com/laceyirvin
Safia Nuzhath
@SafiaNuzhath
Oct 31 2016 02:41
Hi guys news here
Can someone help me write this -
Create an object that stores individual letters in an array
new*
tbc13315
@tbc13315
Oct 31 2016 03:23
Hi everyone, I'm working on the twitch app and am a little lost. I am getting confused as to where to put click functions for clicking between "all users", "active users", "offline users". If someone could possibly look at my code and point me in the right direction that would be really helpful. At this point I just seem to be confusing myself and getting nowhere. Here is the link to my codepen and thanks in advance! http://codepen.io/tbc13315/pen/VjQQaw
Sophanarith Sok
@sok213
Oct 31 2016 03:30
@tbc13315 Everytime you click a button, empty out the #resultHere DIV element and append a new list corresponding to the tab that was clicked.
so for example, if I click active button, make a function that will clear #resultHere and only append the channels that are currently online by checking the JSON object attributes.
then, you would assign that function as an onClick attribute to the button elements
tbc13315
@tbc13315
Oct 31 2016 03:34
Hi @sok213, the part I am confused is where I would put that function? Would that go within the getData function or within the ajax success?
Sophanarith Sok
@sok213
Oct 31 2016 03:34
That will go outside
The onClick function will not be part of the ajax call
it will be totally separate. You need to store the JSON data into a global variable to access it from the rest of your javascript file
@tbc13315
var storedData = [];

 $.ajax({
 type: 'GET',
async: 'false',
 url: 'https://api.twitch.tv/kraken/streams/'+channel+"?callback=?",
 headers: {
   'Client-ID': 'f35fq6r0eefce2wm6s5afgrbq6hi8a3'
 },
 success: function(d)
    storedData.push(d);
});
tbc13315
@tbc13315
Oct 31 2016 03:37
@sok213 So I create function (whatever.click) outside of the getData function, but where would I call it?
Sophanarith Sok
@sok213
Oct 31 2016 03:38
@tbc13315 You call with by placing into the onClick attribute within your button elements.
<div onClick="myFunction()">Offline</div>
tbc13315
@tbc13315
Oct 31 2016 03:44
@sok213 Thank you for helping with this! But why would the data need to be stored? Isn't the whole point of an api that there is all this data already stored and we're just creating apps to extract the info? I was hoping I could somehow just use a click function to get the data instead of pushing it to another variable if that makes sense. I've probably been looking at this too long so I think I'm just confusing myself no matter how I look at it.
CamperBot
@camperbot
Oct 31 2016 03:44
tbc13315 sends brownie points to @sok213 :sparkles: :thumbsup: :sparkles:
:cookie: 683 | @sok213 |http://www.freecodecamp.com/sok213
Sophanarith Sok
@sok213
Oct 31 2016 03:47
@tbc13315 You need to store the data in order to extract the information and play with it. It is possible to have functionality where you make a new ajax call every time you press a button, but you would still need to store the data in a variable, in this case.
tbc13315
@tbc13315
Oct 31 2016 03:49
@sok213 So if you have multiple click options, as in this twitch project, is it better to just use getJSON instead of ajax?
Sophanarith Sok
@sok213
Oct 31 2016 03:50
No, that won't make a difference.
You can achieve the same thing with ajax calls, so I guess it's personal preference at that point
tbc13315
@tbc13315
Oct 31 2016 03:52
@sok213 Ok. Thanks again for all your help! I'm going to try to work on this later with some fresh eyes and a clear head.
CamperBot
@camperbot
Oct 31 2016 03:52
tbc13315 sends brownie points to @sok213 :sparkles: :thumbsup: :sparkles:
:warning: tbc13315 already gave sok213 points
Sophanarith Sok
@sok213
Oct 31 2016 03:54
@tbc13315 of course. It's a very challenging project, so don't beat yourself up too much.
Suomiprogramming
@Suomiprogramming
Oct 31 2016 04:19
hello! Can anybody hrlp me?
help*

Assign the value 7 to variable a.

Assign the contents of a to variable b.

so I just wrote this var a=7;
var b=7; then I put a=b; but it doesn't work

raphey
@raphey
Oct 31 2016 04:44
@Suomiprogramming, I think you're looking for "var b = a" for your second line, instead of "var b=7".
@Suomiprogramming That way, you are assigning whatever value variable a has to variable b. You don't need a 3rd line.
Eric Pacheco
@ZucchiniC0d3er
Oct 31 2016 05:09
I need help on Jquery nth:child() function. Here is my code: $("#left-well:nth-child(2)").addClass("animated bounce");
$("#right-well:nth-child(2)").addClass("animated bounce");
I Keep getting an error
raphey
@raphey
Oct 31 2016 05:42
@zucchiniC0d3er I think you need to end the quotes after the ID name, meaning, before :nth-child(2)
Luis Meza
@luismezmons73r
Oct 31 2016 06:11
Damn, I feel like I forgot everything I acquired from FCC
Annu Nirmal
@annunirmal
Oct 31 2016 06:24
topic: portfolio's hamburger icon
can anyone help me out why my hamburger icon is not working
http://codepen.io/nirmalannu/pen/amgaqE
Leow Chee Siang
@luvwinnie
Oct 31 2016 06:32
hi everyone
does anyone can help me about bootstrap? my mobile menu not working for this code
    <div class="logo-nav">
        <nav class="navbar navbar-default" style="height:100px;">
            <div class="container" style="height:100px;">
                <div class="navbar-header" style="height:100px;">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="/" class="navbar-brand" style="position:relative;bottom:-10px;">
                     <img src="img/logo.png" alt="">
                      <h6 id="logo-btm">completely unique wordpress theme</h6>
                    </a>
                </div>
                <div id="navbar3" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right" style="color:#517796;margin-top:10px;">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Portfolio</a></li>
                      <li><a href="#">Blog</a></li>
                      <li><a href="#">Contact</a></li>
                      </li>
                    </ul>
                  </div>
            </div>
        </nav>
    </div>
Luis Meza
@luismezmons73r
Oct 31 2016 06:46
how do you guys put an image in the code sheet?
S7eve
@S7eve
Oct 31 2016 06:47
@luismezmons73r use this symbol ( `) , put it 3 times before entering your code then another 3 times after the code.
<p> Testing</p>
kirbyedy
@kirbyedy
Oct 31 2016 06:48
@luvwinnie did you load the jquery and bootstrap.js libraries ?
Leow Chee Siang
@luvwinnie
Oct 31 2016 06:54
yes i do
@kirbyedy yes i do
Leow Chee Siang
@luvwinnie
Oct 31 2016 07:00
pic.PNG
this is my view when i use the above code
kirbyedy
@kirbyedy
Oct 31 2016 07:10
I would have to see the whole code, this way I cant help
Leow Chee Siang
@luvwinnie
Oct 31 2016 07:11
ok wait awhile
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Navbar</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <nav class="navbar navbar-static-top bg-faded navbar-inverse">
        <section class="container">
            <div>
                <ul class="navbar top-nav">
                    <li>
                        <h5 class="subscribe-to">Subscribe to:</h5></li>
                    <li><a href="" id="post">Posts</a><span>|</span></li>
                    <li><a href="" id="comments">Comments</a><span>|</span></li>
                    <li><a href="" id="email">Email</a></li>
                    <li style="float:right;position:relative;margin:-2px;">
                        <ul class="nav-right-logo" style="">
                            <li>
                                <a href=""><img src="img/subscribeLogo.png" alt=""></a>
                            </li>
                            <li>
                                <a href=""><img src="img/facebookLogo.png" alt=""></a>
                            </li>
                            <li>
                                <a href=""><img src="img/mixiLogo.png" alt=""></a>
                            </li>
                            <li>
                                <form action="">
                                    <input type="search" placeholder="Search Keywords" id="searchbar">
                                    <button type="submit"></button>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </section>
    </nav>
    <div class="logo-nav">
        <nav class="navbar navbar-default" style="height:100px;">
            <div class="container" style="height:100px;">
                <div class="navbar-header" style="height:100px;">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                    <a href="/" class="navbar-brand" style="position:relative;bottom:-10px;"> <img src="img/logo.png" alt="">
                        <h6 id="logo-btm">completely unique wordpress theme</h6> </a>
                </div>
                <div id="navbar3" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right" style="color:#517796;margin-top:10px;">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
at the bottom i added this two line
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
kirbyedy
@kirbyedy
Oct 31 2016 07:16
css ?
davidsundstrom
@davidsundstrom
Oct 31 2016 07:18
Hi, I am new to both this page and web development. I just finished the first front-end challenge, which I managed to build. However, right after that challenge a new challenge, the "Build a personal portfolio webpage, poped up. And it has lots of things you should do that I haven't learn yet from this page. Are you suposed to like do google searches or is the challenge wrongly placed. Thx:)
kirbyedy
@kirbyedy
Oct 31 2016 07:19
@davidsundstrom yes, search, read, ask here... etc.
S7eve
@S7eve
Oct 31 2016 07:19
@davidsundstrom gluck!
Leow Chee Siang
@luvwinnie
Oct 31 2016 07:20
@kirbyedy here is it
.navbar-inverse {
     background:linear-gradient(0deg, #0f0f0f 0%, #383c40 100%);
}

.subscribe-to {
    padding-top:10px;
    padding-right: 0px;
    margin: 0;
    color: #485766;
    font-size: 16px;
}

nav {
    height: 52px;
}

nav ul li {
    padding-top:0px; 
    list-style: none;
    display: inline-block;
}

a:link,a:visited {
    color: #6a87a3;
    text-decoration: none;
}

nav ul li a {
    padding: 4px;
    text-decoration: none;
    text-align: center;
}

.top-nav a:hover {
    text-decoration: underline;
}

.top-nav {
    padding-top: 10px;
}

nav ul li span {
    color:#6a87a3;
}

.nav-right-logo {
    padding: 0px;
    margin: 0px;
}

input {
    width: 193px;
    height: 29px;
    border-radius: 10px;
}

button {
    position: relative;
    background: url(img/Layer-7.png) no-repeat;
    width: 18px;
    height: 18px;
    top: 3px;
    right: 33px;
    border: none;
}
#searchbar {
    background-color: rgba(0, 0, 0, 0.5);
    color:#38444f;
    font-size: 15px;
    font-weight: bolder;
    border: none;
    padding-left: 10px;
}

@font-face {
    font-family: nevis;
    src: url(nevis.ttf);
}


.navbar-default {
    background-color:#1F242D;
    border-color:#FFFFFF;
    color:#FFFFFF;
}


#logo-btm{
    font-family: MetaPlusNormal;
    font-size: 18px;
    color: #485766;
    height: 9px;
    width: 267px;
    position: relative;
    top: -31px;
    right: -6px;

}

.logo-nav {
    z-index: 1;
}

.active {
    background-color: #15181F;
}
davidsundstrom
@davidsundstrom
Oct 31 2016 07:21
@kirbyedy Okey, great!
kirbyedy
@kirbyedy
Oct 31 2016 07:25
@luvwinnie hmmm this is how I see your page, and the menu is working when I press the burger menu
Screen Shot 2016-10-31 at 09.25.28.png
Leow Chee Siang
@luvwinnie
Oct 31 2016 07:45
@kirbyedy hmm that's quite weird,for mine it just show nothing
this is how mine normal site looks like
pic2.PNG
im using the free template and implementing it with bootstrap
is it the menu won't show if my body background-size:cover?
Leow Chee Siang
@luvwinnie
Oct 31 2016 07:56
@kirbyedy you just copy and paste my code and just work fine?
A_A
@Otto-AA
Oct 31 2016 07:57
@luvwinnie Is this how it look for you? http://codepen.io/A_A/pen/BLgqbd?editors=1000
kirbyedy
@kirbyedy
Oct 31 2016 07:57
well I pasted it on the codepen, and added the jquery bootstrap.js and bootstrap.css libraries
Leow Chee Siang
@luvwinnie
Oct 31 2016 08:02
i tried to paste it on codepen title
and my background just and image that cover the page
erm
wrong page xD
here is it
olive98
@olive98
Oct 31 2016 08:10
i am doing my personal portfolio project and was wondering if someone can help me to find sites where i can upload my graphics online to include in the project
where do campers upload photos to include in there projects?
kat-mag
@kat-mag
Oct 31 2016 08:16
@olive98 You can create a repository on github and link from there. You need to learn to use github anyways, so that'd be a good idea. You can as well upload your whole project there and make it to be your 'website'.
Tim Handy
@TimHandy
Oct 31 2016 09:07
Anyone familiar with modules, as in using module.exports and requiring that file in another? I've implemented it, (webpack is combining the files into a bundle.js) but now my previously working functions are complaining that variables are not defined. In particular a global variable defined in my main app.js file (kinda stores the app state), but needed in a function I moved to the helpers.js module. I'm wondering if I need to move this global variable to the module, but then it won't be available to the main app.js file. #confused.
tcar
@tcar
Oct 31 2016 09:39
hi, i dont see what stupid mistake i am doing, but please help. why is this not working? http://codepen.io/Tcar/pen/XjLobN
kirbyedy
@kirbyedy
Oct 31 2016 09:43
$(".paragraf").
?
what is that ?
you can not end with a dot
Muhammad Hasham
@MohammadHasham
Oct 31 2016 11:46
am i using the correct logic for win of tic tac toe
function player_win(i){

if (arr[1]==sign_option && arr[2]==sign_option && arr[2]==sign_option)
   {
     alert('You Won!');
   }
  if (arr[0]==sign_option && arr[3]==sign_option && arr[6]==sign_option)
    {
      alert('You Won!');
    }
}
@kirbyedy
A_A
@Otto-AA
Oct 31 2016 11:47
arr[2]==sign_option && arr[2]==sign_option?
Muhammad Hasham
@MohammadHasham
Oct 31 2016 11:47
when i do that 3 nothing happens
can you check my pen
A_A
@Otto-AA
Oct 31 2016 11:47
And it will most likely be arr0 and arr1 and arr[2]
Muhammad Hasham
@MohammadHasham
Oct 31 2016 11:47
if i am doing that wrong
A_A
@Otto-AA
Oct 31 2016 11:48
link to the pen?
Muhammad Hasham
@MohammadHasham
Oct 31 2016 11:48
Please enter 1 and X in the first two alert boxes
i don't know why it is not working it appears to be fine though
A_A
@Otto-AA
Oct 31 2016 11:53
@MohammadHasham put that into line 30 and then open the console console.log(arr);
Your array gets messed up pretty hard :/
Muhammad Hasham
@MohammadHasham
Oct 31 2016 11:54
okay i'll check
@Otto-AA Thanks
CamperBot
@camperbot
Oct 31 2016 11:54
:cookie: 337 | @otto-aa |http://www.freecodecamp.com/otto-aa
mohammadhasham sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
Maksim Kulichenko
@makstheimba
Oct 31 2016 12:00
I want to rotate element by 90 degrees, but if I rotate it second time it will be rotated by a total of 180 degrees. Can I always rotate from to a certain degree?
Can I always rotate to a certain degree*
A_A
@Otto-AA
Oct 31 2016 12:06
@makstheimba Do you mean something like that https://codepen.io/A_A/pen/RGzdRV?editors=0100 ?
Muhammad Hasham
@MohammadHasham
Oct 31 2016 12:40
i need help with tic tac toe project
can anyone help me
@Otto-AA
i am stuck at a point can please anyone help me
i can't figure it out
A_A
@Otto-AA
Oct 31 2016 12:43
when you click on the first field the array is afterwards ["", "x", "", "", "", "", "", undefined, "", ""]
Muhammad Hasham
@MohammadHasham
Oct 31 2016 12:43
@Otto-AA how can i see that
A_A
@Otto-AA
Oct 31 2016 12:43
So as you can see you didn't give the first element an x, but the second. This is because arr[1] is the 2nd element and arr[0] is the first
Muhammad Hasham
@MohammadHasham
Oct 31 2016 12:44
@Otto-AA how did you saw the array
A_A
@Otto-AA
Oct 31 2016 12:44
@MohammadHasham console.log(arr); after the else statement
Muhammad Hasham
@MohammadHasham
Oct 31 2016 12:44
console.log(what is here)
before zeroException() function?
A_A
@Otto-AA
Oct 31 2016 12:44
just put arr in it to see the whole array
no: else { .... } console.log(arr);
so directly after it
Muhammad Hasham
@MohammadHasham
Oct 31 2016 12:47
That is really helpful now i'll try myself and if i get stuck i'll disturb you
@Otto-AA Thanks alot
CamperBot
@camperbot
Oct 31 2016 12:47
mohammadhasham sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave otto-aa points
A_A
@Otto-AA
Oct 31 2016 12:47
@MohammadHasham Good luck then :)
@MohammadHasham and take care about your array indexes ;)
Muhammad Hasham
@MohammadHasham
Oct 31 2016 12:48
yeah sure!
Stephen Passero
@stephenpassero
Oct 31 2016 13:24
@/all i'm on the Wikipedia viewer zipline. How do I find a list of Wikipedia articles with or similar to the word that I typed?
POPA SIMONA
@popaSimona
Oct 31 2016 13:34
hi guys.I'm new in FrontEnd and I want to use bootstrap but I don't know how and if is free to be download.Thx.
Markus Kiili
@Masd925
Oct 31 2016 13:34
@popaSimona Yes, it is free.
A_A
@Otto-AA
Oct 31 2016 13:35
@popaSimona Look there for a short intro: http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
POPA SIMONA
@popaSimona
Oct 31 2016 13:36
it is a diference between angular.js and bootstrap?
A_A
@Otto-AA
Oct 31 2016 13:37
umm, bootstrap is more of a design pattern and angular is a script for smth I don't know
Markus Kiili
@Masd925
Oct 31 2016 13:38
@popaSimona Bootstrap is a css framework for making responsive pages. Angular is a javascript library well suited for making Single page applications.
POPA SIMONA
@popaSimona
Oct 31 2016 13:39
ok.guys thx. :)
Markus Kiili
@Masd925
Oct 31 2016 13:40
@popaSimona And jQuery is a javascript library for making DOM manipulation and ajax calls easier. It also helps with browser compatibility issues.
kat-mag
@kat-mag
Oct 31 2016 13:43
(angular is not a lib & not a script, bootstrap is not a design pattern) ;d
A_A
@Otto-AA
Oct 31 2016 13:44
@kat-mag wait, they aren't?
kat-mag
@kat-mag
Oct 31 2016 13:45
If you're throwing around definitions... AngularJS is a framework. Bootstrap is a framework. Making it a design pattern is speaking way too highly about this trash ;D
Angular is not a lib because it provides a whole system & makes you write &structure your code differently. And using JS to write in Angular doesn't make Angular a script.
Markus Kiili
@Masd925
Oct 31 2016 13:50
@kat-mag Yes, framework is a better word for Angular than library. My bad.
A_A
@Otto-AA
Oct 31 2016 13:53
AngularJS is a JavaScript framework. It is a library written in JavaScript.
Call it whatever you want :)
kat-mag
@kat-mag
Oct 31 2016 13:54
calling w3schools with stuff that's from ages ago ;D
A_A
@Otto-AA
Oct 31 2016 13:57
@kat-mag :P
POPA SIMONA
@popaSimona
Oct 31 2016 13:58
:)
Jakub Konik
@jakonn
Oct 31 2016 14:10
I have problem with scaling img
can u help me with that? I created something like that
<div class="container-fluid">
  <div class="mainDiv">
    <img class="img-fluid" src="...">
  </div>
</div>
with mainDIv class CSS
.mainDiv{
  width: 1000px;
}
but my img is still larger that 1000px
why is it like that?
A_A
@Otto-AA
Oct 31 2016 14:14
@jakonn give it a img-responsive class and it will work :)
Jakub Konik
@jakonn
Oct 31 2016 14:15
i found in bootstrap documantation that ing-fluid sohuld work like that
but thanks @Otto-AA
CamperBot
@camperbot
Oct 31 2016 14:15
jakonn sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @otto-aa |http://www.freecodecamp.com/otto-aa
like here
Jakub Konik
@jakonn
Oct 31 2016 14:16
i have bs4 added
instead of bootstrap 4
marcintreder
@marcintreder
Oct 31 2016 14:17
I'm trying to change the attribute in a link to tweet. Can anyone tell me what I'm doing wrong?
window.onload = randomQuote;

function randomQuote(){
var tweetQuote;
function randomizer(array){
var i = Math.floor(Math.random() * array.length);
tweetQuote = quotes[i].quote + " - " + quotes[i].author + ", " + quotes[i].movie;
return "<p>" + quotes[i].quote + "</p>" + "<p>" + quotes[i].author + ", " + quotes[i].movie + "</p>";
}
document.getElementById("quote").innerHTML = randomizer(quotes);

document.getElementById("twitter-button").attr("href", "https://twitter.com/intent/tweet?text=" + tweetQuote);
}
A_A
@Otto-AA
Oct 31 2016 14:17
@jakonn dunno then
Jakub Konik
@jakonn
Oct 31 2016 14:18
Ou i found out that i added bootstrap js instead of bootstrap css to PenCode
thx anywy ;)
You helped my anyway :D ... that was the problem ... not applied correct css. THX @Otto-AA
CamperBot
@camperbot
Oct 31 2016 14:20
jakonn sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:warning: jakonn already gave otto-aa points
rdollent
@rdollent
Oct 31 2016 14:48
alright, time to resume portfolio website project! :)
Kelsey
@kcdilla
Oct 31 2016 15:09
hello! I have a little issue that isn't a HUGE deal but I don't understand why it's happening and would like some help!
At the bottom of the page, in the "Contact" section, I have some social media icons that change color when you hover over them
There's a transition so they quickly fade in/out instead of an abrupt change
and the transition works, except for on the Instagram button
The only difference I can find is that instead of having a background color, it has a background image.
Why is this happening?
Rex Smith Jr.
@rsmith731
Oct 31 2016 15:12
does anyone here know about grunt?
Alfarhan Zahedi
@alfarhanz
Oct 31 2016 15:22
@kcdilla you are giving the instagram button a background image instead of color on hover... thats why..
Sabrina Ferguson
@itsacoyote
Oct 31 2016 15:33
@rsmith731 I've worked a bit with grunt before, got questions about it?
Kelsey
@kcdilla
Oct 31 2016 15:40
@alfarhanz Right, but why doesn't the transition work? the hover works ok.
Sorin Ruse
@sorinr
Oct 31 2016 15:55
lettda
@lettda
Oct 31 2016 15:56
Having an issue getting my image slider to run as well as fit the images within the slide box. Can anyone help me fix these two issues?
https://lettda.github.io/rvaLanding/
Sorin Ruse
@sorinr
Oct 31 2016 15:59
@kcdilla the idea is to play with the opacity of the background from 0 (transparent) to 1 using keyframes
Kelsey
@kcdilla
Oct 31 2016 16:02
@sorinr Thanks, I'll mess with this! I didn't realize images couldn't be animated with CSS.
CamperBot
@camperbot
Oct 31 2016 16:02
kcdilla sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 804 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 31 2016 16:09
@kcdilla here a solution for using background-image fading: http://css3.bradshawenterprises.com/cfimg/
Maksim Kulichenko
@makstheimba
Oct 31 2016 16:12
https://jsfiddle.net/gjqdkoxa/ why doesnot container expand to contain float elements in this example. Even though I use clear:both in box1:after.
Sidney
@acomisp
Oct 31 2016 16:33
Hello
I am at the challenge part of build a tribute page. I would like some input about this.
I am stuck and not sure where to go from here
Is there any mentors willing to help me get started with this challenge?
Andre Alonzo
@paycoguy
Oct 31 2016 16:38
@acomisp ask your questions here. someone will most likely help.
JD Tadlock
@jdtdesigns
Oct 31 2016 16:48
@lettda You have 3 different containers, each with sliders in them. I'd go with one slider and work on that to keep the clutter down. Also, not sure what you're trying to do with the js.
Sidney
@acomisp
Oct 31 2016 16:49
Any pointers where to start or to find the correct code to use? I am new at coding and do not remember all the code just went through in the course. I am drawing a blank on how to create the tribute page,..lol
JD Tadlock
@jdtdesigns
Oct 31 2016 16:51
@acomisp Go to codecademy.com and complete the html/css course. Then you should know how to build a basic page. ;)
Sidney
@acomisp
Oct 31 2016 16:53
Rule #1: Don't look at the example project's code. Figure it out for yourself. Is it okay to look at other sites that have the html code examples?
JD Tadlock
@jdtdesigns
Oct 31 2016 16:55
@acomisp You have to learn how to code html/css to be able to make a page. Start with learning what html is and css is before trying to use them. ;)
Muhammad Hasham
@MohammadHasham
Oct 31 2016 16:55
can anyone help me my loose conditions are not working in tic tac toe game
Sidney
@acomisp
Oct 31 2016 16:56
I have in mind what my tribute page would be but how to implement it is the hard part. I would like to know how you guys whet through this challenge
j1417
@j1417
Oct 31 2016 16:58
hi!! where can i get random quotes???
JD Tadlock
@jdtdesigns
Oct 31 2016 16:59
@acomisp It's the most basic of the challenges. I made a simple page with an image, bio, and some little animation effects.
@j1417 google 'quote api'
Sidney
@acomisp
Oct 31 2016 17:00
@jdtdesigns Thank you JD
CamperBot
@camperbot
Oct 31 2016 17:00
acomisp sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 738 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Sidney
@acomisp
Oct 31 2016 17:01
once I finish my webpage, how to I have someone look at it and provide feed back?
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:02
post on the forums, share the links on social media, etc
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:03
@NitinNair89 need your help regarding loose conditions of tic tac toe
my function is not executing
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:04
@MohammadHasham I will try (although I didn't reach that challenge yet) :D
Sidney
@acomisp
Oct 31 2016 17:04
Also is I have a couple of picture I would like to use. How can I add them to the codepen with using a link?
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:04
@acomisp Yeah, use image uploading sites, dropbox, etc.
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:04
the last function for loosing is not working
@NitinNair89 can you see my pen?
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:09
Yes, i played twice, 1 draw and 1 win
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:09
Hope you get to the loose one :sparkles:
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:09
:P
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:10
Actually the control is not getting into the loose function
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:12
hmm
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:18
@NitinNair89 any idea whats wrong
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:19
player_loose is only called on click function?
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:19
yes i have used a flag as well
that is it is not one than it is called
@NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:19
i think it should be called after every computer move, isn't it?
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:19
might be i'll check that
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:20
ok
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:20
i have to copy and paste that into computer move function na?
@NitinNair89
still the same problem
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:23
that's what I think @MohammadHasham
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:30
added a console log for arr1 inside the loose function
the array is blank even after computer's move
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:31
yes that is quite strange
i don't know why
can you tell me with why is my array is not being filled
@NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:32
why are you passing parameters to the function?
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:32
i am passing j
where j=0
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:34
can you do 'analyze JS' and get rid of those errors?
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:35
where can i get the result for analuze js?
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:35
click the small arrow in the JS window
then scroll the JS window to see the errors
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:36
it says 'j' is already defined
but that has local scope not global
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:37
hmm
arrays start with 0
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 17:43
your flag is declared 0
and it it set to 1 only when player wins
just trying to get your logic
Muhammad Hasham
@MohammadHasham
Oct 31 2016 17:44
flag is just zero
when it is one only then the function will be executed
because there can be only one 'win' or 'loose'
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 18:04
ok
Ahmed Shendy
@devahmedshendy
Oct 31 2016 18:04
Hi Guys
I am solving this challenge "Personal Portfolio Webpage"
But suddenly the nav wan't fixed while scrolling anymore
I can't solve it using google search, have anyone experienced this before?
It was fixed on top previously
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 18:05
what changed did you make later?
Ahmed Shendy
@devahmedshendy
Oct 31 2016 18:05
I have this class
class="navbar navbar-default navbar-static-top"
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 18:05
@devahmedshendy
Ahmed Shendy
@devahmedshendy
Oct 31 2016 18:05
I made a lot but I didn't notice it
just now
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 18:06
tried navbar-fixed-top?
or navbar-fixed?
Ahmed Shendy
@devahmedshendy
Oct 31 2016 18:06
Ok, let me check
@NitinNair89 Yes, it worked :)
@NitinNair89 Thank You
CamperBot
@camperbot
Oct 31 2016 18:07
devahmedshendy sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 18:07
You're welcome @devahmedshendy :clap:
:)
Sanket Mishra
@sanket0896
Oct 31 2016 18:26
Here's my Random Quote Machine https://codepen.io/the_bugger/full/YGjzBa. Please guys tell me how it is.
There seems to be a bug. The twitter share site is not opening in the pen
Muhammad Hasham
@MohammadHasham
Oct 31 2016 18:39
suddenly i have pressed something and there comes a huge error can anyone help me what have i done
.https://codepen.io/Mohammad_Hasham/pen/rryQmV
kat-mag
@kat-mag
Oct 31 2016 18:41
@sanket0896 you can't use window.location.href, take look at the devtools
@MohammadHasham What error?
Muhammad Hasham
@MohammadHasham
Oct 31 2016 18:44
@kat-mag play the game and you'll know
i don't know aybe some brackets issue
Adolfo Saenz
@AdoSae1
Oct 31 2016 18:44
hey guys just finished my portfolio challenge, pretty sure i made noobish mistakes and can shorten my code. please check it out and offer any tips or criticism thanks! https://codepen.io/AdoSae/pen/ALkLYd
Muhammad Hasham
@MohammadHasham
Oct 31 2016 18:48
@kat-mag i figured that out!
marzelin
@marzelin
Oct 31 2016 18:51
@AdoSae1 there's analyze html/css option in the panel menu on the top right side of each panel.
kat-mag
@kat-mag
Oct 31 2016 18:53
@MohammadHasham good for you, I didn't notice any bugs apart from AI being bit dumb at this point ;D
@AdoSae1 my, my. You got specific px values everywhere
It could use some responsive styling & as @marzelin said, you can analyze your code and it'll scream a little at you.
You're linking bootstrap, so you can use its classes to your advantage.
Sidney
@acomisp
Oct 31 2016 19:02
I am having issue getting my text to center
<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="text-center">The Purple Heart</h1>
          <h3 class="text-center"><em>This is my tribute for my grandfather that gave the altimate sacrifice for our freedom</em></h3>
            <img src="https://dl.dropboxusercontent.com/u/78329934/wwii/WIISoldier.jpg "style="width:600px;height:400px"
</div>
kat-mag
@kat-mag
Oct 31 2016 19:06
@acomisp hope you're closing all of those divs... Your code tells me nothing. You shouldn't have inline style tags, btw.
Muhammad Hasham
@MohammadHasham
Oct 31 2016 19:06
@acomisp place closing for your image
kat-mag
@kat-mag
Oct 31 2016 19:06
yeah, and that ^
Muhammad Hasham
@MohammadHasham
Oct 31 2016 19:07
closing tags for div's as well
@acomisp
Sanket Mishra
@sanket0896
Oct 31 2016 19:29
@kat-mag Thanks. Changed it to window.open So it now opens in a new tab.
CamperBot
@camperbot
Oct 31 2016 19:29
sanket0896 sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @kat-mag |http://www.freecodecamp.com/kat-mag
Sidney
@acomisp
Oct 31 2016 19:31
@MohammadHasham @kat-mag Thank you
CamperBot
@camperbot
Oct 31 2016 19:31
acomisp sends brownie points to @mohammadhasham and @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @mohammadhasham |http://www.freecodecamp.com/mohammadhasham
:cookie: 393 | @kat-mag |http://www.freecodecamp.com/kat-mag
Sidney
@acomisp
Oct 31 2016 19:34
can someone look at my page and let me know what you think? http://codepen.io/acomisp/full/LRwYQb/
I feel that I have some syntax errors still
kat-mag
@kat-mag
Oct 31 2016 19:38
@acomisp don't close <br> tag. It's a void element
@acomisp and your <a> tag on the bottom is messed up
move your inline styles over to css tab
Sidney
@acomisp
Oct 31 2016 19:39
@kat-mag where is the inline stlye at?
David lugo
@davidlugo3
Oct 31 2016 19:39
Hola Mundo
Ellen
@sunsplat
Oct 31 2016 19:40
@acomisp if you want to use inline style, you need to end each style with semicolon for example your height: <img src="https://dl.dropboxusercontent.com/u/78329934/wwii/WIISoldier.jpg "style="width:600px;height:400px;">
your div class jumbotron is using class 'test-center' did you mean 'text-center' ?
Sidney
@acomisp
Oct 31 2016 19:42
@sunsplat I ment to type text-center
kat-mag
@kat-mag
Oct 31 2016 19:44
@acomisp so add bootstrap to your css tab. In the settings, there's quickadd on the bottom
because none of the classes you added to your html is working
Ellen
@sunsplat
Oct 31 2016 19:45
yea once you do that, it should work
Sidney
@acomisp
Oct 31 2016 19:45
@kat-mag I have went to settings and added the bootstrap. its working now :)
Ellen
@sunsplat
Oct 31 2016 19:45
it's looking good on mine
kat-mag
@kat-mag
Oct 31 2016 19:45
@acomisp and I doubt you're using 'markdown' preprocessor, delete that ;p
same for scss ;p
Sidney
@acomisp
Oct 31 2016 19:46
@sunsplat removed
A_A
@Otto-AA
Oct 31 2016 19:46
@acomisp "the altimate sacrifice" :)
Annu Nirmal
@annunirmal
Oct 31 2016 19:47
Travis Boss
@travisboss
Oct 31 2016 19:47
@acomisp you should style everything from CSS or within a style container at the top of the tests not inline.
Adolfo Saenz
@AdoSae1
Oct 31 2016 19:47
@marzelin @kat-mag thanks guys.
CamperBot
@camperbot
Oct 31 2016 19:47
adosae1 sends brownie points to @marzelin and @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 880 | @marzelin |http://www.freecodecamp.com/marzelin
:cookie: 394 | @kat-mag |http://www.freecodecamp.com/kat-mag
Sidney
@acomisp
Oct 31 2016 19:48
@Otto-AA Thanks for catching that misspelling "Ultimate"
CamperBot
@camperbot
Oct 31 2016 19:48
:cookie: 339 | @otto-aa |http://www.freecodecamp.com/otto-aa
acomisp sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 19:49
@annunirmal Good UI :+1:
Ahmed Shendy
@devahmedshendy
Oct 31 2016 19:49
@annunirmal Yes, very nice
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 19:49
On click of start, change the "let's start" text
kat-mag
@kat-mag
Oct 31 2016 19:49
@annunirmal add min session length if you're done with testing ;D because I'm gonna feel too good after doing 1minute of work :D
Annu Nirmal
@annunirmal
Oct 31 2016 19:50
@NitinNair89 ok thanks
CamperBot
@camperbot
Oct 31 2016 19:50
annunirmal sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Annu Nirmal
@annunirmal
Oct 31 2016 19:50
@kat-mag what is min session length
Sidney
@acomisp
Oct 31 2016 19:51
I have a question about gitter. Some times its hard to read the chat when there is green text box pop's out from the left column on this page. can that be turn off?
kat-mag
@kat-mag
Oct 31 2016 19:52
the minimum of time I need to work in session :P
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 19:52
@annunirmal Um, make the timer smooth - just a suggestion :)
Annu Nirmal
@annunirmal
Oct 31 2016 19:52
@kat-mag oh okay :P
kat-mag
@kat-mag
Oct 31 2016 19:52
@acomisp yep, settings are in the right top corner, I think
Annu Nirmal
@annunirmal
Oct 31 2016 19:53
@NitinNair89 i can do that
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 19:53
:)
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:01
stuck on numbers to roman..feels like forever :cry:
kat-mag
@kat-mag
Oct 31 2016 20:03
that one looks ugly, so no wonder ;p
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:04
losing my patience... but i don't wanna give up
The front-ends were so easy.. :(
marzelin
@marzelin
Oct 31 2016 20:05
@NitinNair89 really? can you pass the link to your projects?
A_A
@Otto-AA
Oct 31 2016 20:05
What I love about the front-end projects is that you always see that you did something, while in js you just get an error ^^
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:05
I mean the basic ones, not the ones after JS
@Otto-AA you're absolutely right mate
kat-mag
@kat-mag
Oct 31 2016 20:07
@Otto-AA I'm working with node & mongo right now... I like errors. They're rewarding enough, while the lack of output means you've screwed up too badly ;D
A_A
@Otto-AA
Oct 31 2016 20:08
@kat-mag I think I like a hopping button more than an error, but that's just my opinion ;P
Freddie O
@FreddieFO
Oct 31 2016 20:18
@annunirmal like the design. well done!
Ryan Williams
@Ryanwfile
Oct 31 2016 20:19

Can someone familiar with iframes please help me, in codepen I have some links to videos on youtube using

<iframe  src="//www.youtube.com/embed/" allowfullscreen></iframe>

but in browsers none of the video links work, any help is very appreciated. Thank you.

Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:20
remove the // before www
is the link correct?
A_A
@Otto-AA
Oct 31 2016 20:21
@Ryanwfile Just right-click on the video and select "Copy embed code". Then copy it to your html. Finished :)
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:22
:)
Airwaves85
@Airwaves85
Oct 31 2016 20:23
guys can anyone help me ? Image is overlapsing .imageContainer and that is my problem. Try to resize window https://codepen.io/Airwaves85/pen/amezjE?editors=1100
Ryan Williams
@Ryanwfile
Oct 31 2016 20:23
@NitinNair89 @Otto-AA all the links work in codepen, I removed the // but that didn't work. I will try the copy embed code now, thank you
CamperBot
@camperbot
Oct 31 2016 20:23
:cookie: 336 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
:cookie: 340 | @otto-aa |http://www.freecodecamp.com/otto-aa
ryanwfile sends brownie points to @nitinnair89 and @otto-aa :sparkles: :thumbsup: :sparkles:
Ryan Williams
@Ryanwfile
Oct 31 2016 20:26
@Otto-AA The embed code worked, thank you so much for the help
CamperBot
@camperbot
Oct 31 2016 20:26
ryanwfile sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave otto-aa points
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:26
@Airwaves85 Is this what you are looking for?
.imageContainer img {
  height:100%;
  width:100%;
}
Airwaves85
@Airwaves85
Oct 31 2016 20:28
@NitinNair89 brilliant, thanks a lot ! :-)
CamperBot
@camperbot
Oct 31 2016 20:28
airwaves85 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:29
Welcome mate @Airwaves85 :+1:
kat-mag
@kat-mag
Oct 31 2016 20:29
@Airwaves85 I'd recommend finding your own topic for that challenge, though ;P
Airwaves85
@Airwaves85
Oct 31 2016 20:31
oh, where can i find it ?
kat-mag
@kat-mag
Oct 31 2016 20:31
dunno, in your head? :D
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:32
What challenge @kat-mag ?
kat-mag
@kat-mag
Oct 31 2016 20:33
@NitinNair89 it's just... When I see people doing the same thing that's in the example project.. That Dr. Norman stuff... ;p
hurts
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:34
ahh ok
I did the same :P
Sidney
@acomisp
Oct 31 2016 20:35
how do you change the color for this class? <div class="jumbotron">
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:35
put it in CSS @acomisp :)
marzelin
@marzelin
Oct 31 2016 20:35
@acomisp you shouldn't modify bootstrap classes. Add your own instead.
Sidney
@acomisp
Oct 31 2016 20:36
@marzelin I do not understand your meaning
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:36
Yeah, but we can override bootstrap classes in our CSS, isn't it @marzelin ? No harm done, right?
kat-mag
@kat-mag
Oct 31 2016 20:37
We can, nobody cares. But it just gets messy ;p
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:38

@acomisp You can do something like:

<div class="jumbotron myclass_name"> ... </div>

and in CSS:

.myclass_name {
background-color:red;
not sure if this was what @marzelin meant though.. :/
Sidney
@acomisp
Oct 31 2016 20:39
is there a different way I should add color to my top of the webpage? http://codepen.io/acomisp/full/LRwYQb/
I feel like it needs some color
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:41
you mean the first jumbotron?
marzelin
@marzelin
Oct 31 2016 20:41
@NitinNair89 actually it can be really harmful for project maintenance. But for one shot project it doesn't matter, apart from growing bad habits.
Sidney
@acomisp
Oct 31 2016 20:41
yes
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:42
oh hmm.. @marzelin What do you think of my above approach? Adding our own class name?
@acomisp Yes, you can. It's your choice :)
Sidney
@acomisp
Oct 31 2016 20:45
would it be better to change the text? maybe add rgb(124, 0, 183)
marzelin
@marzelin
Oct 31 2016 20:45
@NitinNair89 that's cool, but I prefer BEM style though.
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:45
try and then you will know @acomisp
What's the BEM style @marzelin ?
marzelin
@marzelin
Oct 31 2016 20:47
@NitinNair89 bem (block element modifier) it's a naming convention in CSS.
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:48
whoa! never heard of that.. how do you do it?
marzelin
@marzelin
Oct 31 2016 20:49
actually a bit more than a naming convention. It's a style of writing CSS. It's still really popular. But new cool thing is Inverted Triangle ITCSS.
kat-mag
@kat-mag
Oct 31 2016 20:50
@NitinNair89 meaning: write your own class but name it so it's named with the BEM convention xDDD so, YES. You did right :D
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:51
ohh
kat-mag
@kat-mag
Oct 31 2016 20:52
@NitinNair89 so nothing new ;p
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:52
I just had a quick look at - http://getbem.com/introduction/
gotta learn.. this is totally new for me
:P
kat-mag
@kat-mag
Oct 31 2016 20:52
It's kinda good for bigger projects. Just keeps your code more or less readable...
but for me it generates a shhhhhhhhh-long names that are of no use most of the time ;p
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:53
:laughing:
kat-mag
@kat-mag
Oct 31 2016 20:54
couple of those sh$t long classes in the html & that file looks like it's after a car crash xD
but for bigger codebase - good nonetheless
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 20:55
:satisfied: t
Thanks @kat-mag and @marzelin (did you see my projects btw?)
CamperBot
@camperbot
Oct 31 2016 20:56
:cookie: 395 | @kat-mag |http://www.freecodecamp.com/kat-mag
nitinnair89 sends brownie points to @kat-mag and @marzelin :sparkles: :thumbsup: :sparkles:
:cookie: 883 | @marzelin |http://www.freecodecamp.com/marzelin
marzelin
@marzelin
Oct 31 2016 20:58
long names aren't problem with code completion. And proper naming convention keeps code organized which is quite important.
kat-mag
@kat-mag
Oct 31 2016 20:59
@marzelin yes, you're right. I'm just saying they look like crap :D
@NitinNair89 yea, jello buttons :D
marzelin
@marzelin
Oct 31 2016 21:02
something like ui-list__item? It looks allright to me.
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 21:03
so basically BEM tells us to use 'states' in our class names to make it more understandable?
marzelin
@marzelin
Oct 31 2016 21:04
for me it's more about modularization. Keeping different parts of the app separate.
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 21:06
does it still apply for websites?
or only apps?
marzelin
@marzelin
Oct 31 2016 21:06
there are websites and websites.
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 21:07
:confused: means?
kat-mag
@kat-mag
Oct 31 2016 21:07
@NitinNair89 both. apps are websites now.... ;p or other way around... xD
Nitin Chandran Nair
@NitinNair89
Oct 31 2016 21:07
oh ok
marzelin
@marzelin
Oct 31 2016 21:13
css was good for creating pages like in a book. One format for every page. It's not good for modern websites where there's a lot of actions going on. Modern webpages are too complicated to see them as one page. That's why atomic design was invented.
kat-mag
@kat-mag
Oct 31 2016 21:13
Hah
marzelin
@marzelin
Oct 31 2016 21:23
there's a big shift in the way of creating webpages. It's not css-garden anymore. It's now atomic design. HTML and CSS are no more treated as separate entities. Now components are used as building blocks of modern web.
kat-mag
@kat-mag
Oct 31 2016 21:27
I think you read too much
Matthew Pengelly
@mcpengelly
Oct 31 2016 21:27
marzelin
youre talking about react inline CSS im guessing?
how the standard for react is inline CSS
marzelin
@marzelin
Oct 31 2016 21:28
there's polymer, web components, react, shadow dom. Everything is now being constructed to facilitate componentization.
Matthew Pengelly
@mcpengelly
Oct 31 2016 21:28
ya ok
cool thx
good for non designer types
marzelin
@marzelin
Oct 31 2016 21:30
i'm not a big proponent of inlining css in react components. I prefer css modules.
Matthew Pengelly
@mcpengelly
Oct 31 2016 21:30
would agree
not a fan of inline myself
a buddy came to me recently complaining hes not used to react because they encourage inline css at least for beginners
marzelin
@marzelin
Oct 31 2016 21:39
there's a big value in keeping css connected with react components, but it's not required. There's nothing wrong with inline styles inside of react components. It's completely different from inline styles in HTML where this is antipattern because of code reuse. In react this is not an issue. Components can be duplicated over and over.
Matthew Pengelly
@mcpengelly
Oct 31 2016 21:39
good info thx
ive worked a bit with react
but mostly singular components
instead of full applications
karocann
@karocann
Oct 31 2016 21:41
I'm trying to show if FCC is online or not by using the alternate base URL that twitch wants me to use in their documentation from https://wind-bow.hyperdev.space/. Does this have to be used with ajax or can it be used with a JSON call? Please look at my code and give me some hints:
http://codepen.io/stmoen/pen/amedVL
marzelin
@marzelin
Oct 31 2016 21:43
AJAX uses JSON as a data format
you mean jquery methods for fetching data?
karocann
@karocann
Oct 31 2016 21:47
@marzelin I'm trying to comply with twtich's new base URL (https://wind-bow.hyperdev.space/twitch-ap) and not use a key like I would with ajax, but I can't seem to get the JSON call to work since I don't understand how to use the routes they specify like /user/:user or /channels/:channel. I think the problem is apparent if you look at my code.
marzelin
@marzelin
Oct 31 2016 21:49
the docs use express-like syntax to show how to build routes. /users/:user means that you should replace :user with username like here https://wind-bow.hyperdev.space/twitch-api/users/freecodecamp
karocann
@karocann
Oct 31 2016 21:51
Man, If they would have used an example like that it would have saved hours of time. I'll give it a try.
AndroidWargames
@AndroidWargames
Oct 31 2016 21:51
Is there some issue with using jQuery to select classes that aren't hard-coded into the HTML? I'm having my wikipedia viewer dynamically create some objects and the .click methods aren't working at all
marzelin
@marzelin
Oct 31 2016 21:52
@AndroidWargames when you add your events when the page loads it won't work.
AndroidWargames
@AndroidWargames
Oct 31 2016 21:53
@marzelin is there any way to account for this?
marzelin
@marzelin
Oct 31 2016 21:54
@AndroidWargames add click events to the element when you add classes (if you still need to add class)
Maksim Kulichenko
@makstheimba
Oct 31 2016 21:54
@AndroidWargames create them after page load
AndroidWargames
@AndroidWargames
Oct 31 2016 21:55
right now I'm just putting the jQuery statement in the $(doc).ready function, how would I assign the statement after some function? do I just nest it inside the command that creates the html?
karocann
@karocann
Oct 31 2016 21:56
@marzelin Used your example to display FCC, but it still wont't work. Any idea what I am doing wrong? https://codepen.io/stmoen/pen/amedVL
AndroidWargames
@AndroidWargames
Oct 31 2016 21:59
@makstheimba @marzelin thanks to both!
CamperBot
@camperbot
Oct 31 2016 21:59
:cookie: 355 | @makstheimba |http://www.freecodecamp.com/makstheimba
androidwargames sends brownie points to @makstheimba and @marzelin :sparkles: :thumbsup: :sparkles:
:cookie: 885 | @marzelin |http://www.freecodecamp.com/marzelin
marzelin
@marzelin
Oct 31 2016 22:03
@karocann there's same-origin policy preventing you from getting data. use jsonp
karocann
@karocann
Oct 31 2016 22:04
@marzelin What is a same origin policy? So i just use jsonp instead of json?
marzelin
@marzelin
Oct 31 2016 22:05
@karocann that's what this challenge is all about. Find out what is same origin policy, jsonp, cors. And learn to use browser console. Errors that are shown there can be very helpful when finding bugs in your app.
karocann
@karocann
Oct 31 2016 22:08
@marzelin If I understand you, the Chrome developer tools are more informative than the codepen editor?
Tony Miri
@TonyMiri
Oct 31 2016 22:08
Hey everyone. Almost done with my Wikipedia search, but I was wondering if anyone has any ideas on getting dynamically created divs to be clickable AND to open up in a new tab?
amir
@aizen3
Oct 31 2016 22:10
i need to know why codepen isnt good with weather api
marzelin
@marzelin
Oct 31 2016 22:10
@karocann you mean console panel? It's quite clunky and doesn't show all errors.
karocann
@karocann
Oct 31 2016 22:12
@marzelin yes, codepen has a built in console panel which is all I have been using so far. DO you think I will learn more if I use the Chrome dev tools, then publish it on codepen for the challenge?
marzelin
@marzelin
Oct 31 2016 22:12
@FatTone225 when you create element, add click listener to it. when you set target attribute to some value it opens link in a new tab (but it may not work in codepen)
@karocann you want to write code in dev tools?
i use vscode editor for my projects
Sam Griffen
@ssgriffen
Oct 31 2016 22:13
Okay can anyone help me with array.filter() in Search and Destroy. Here is what I have rn, I've been trying to understand how filter works. I made two arrays, one that needs to be filtered and one that contains the values to filter for. For some reason it doesn't even look like my function is getting invoked?```
Tony Miri
@TonyMiri
Oct 31 2016 22:13
@marzelin Is the default action to open in a new tab? I was using preventDefault(). Maybe that's why
Robert Richey
@0x0936
Oct 31 2016 22:13
@aizen3 codepen is fine for weather api - any hurdles will likely involve mixing http with https content, usually this breaks the page
Sam Griffen
@ssgriffen
Oct 31 2016 22:13
function destroyer(arr) {
  // Remove all the values


  var newArr = arguments[0];
  var targetsArr = [];

    for(i = 1; i < arguments.length; i++){
    targetsArr.push(arguments[i]);
  }

  function isThere(value, index, array){
   return "hello";
    for(i = 0; i < targetsArr.length; i++){
      if(value == targetsArr[i]){
      return false;
    }
  }
 }
  newArr.filter(isThere);


}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
amir
@aizen3
Oct 31 2016 22:14
@0x0936 can i send u the link for my weather project and see what wrong ?
Robert Richey
@0x0936
Oct 31 2016 22:14
@aizen3 sure
Tony Miri
@TonyMiri
Oct 31 2016 22:15
@ssgriffen It's been a while for me, but I think you need to look again at how the filter() function works.
Are you familiar with callback functions?
marzelin
@marzelin
Oct 31 2016 22:16
@FatTone225 if there's target attribute present, it opens in a new tab.
Tony Miri
@TonyMiri
Oct 31 2016 22:16
@marzelin you mean target attribute on the node?
correct?
marzelin
@marzelin
Oct 31 2016 22:17
@FatTone225 <a href="http://google.com" target="xyz">hello</a>
Tony Miri
@TonyMiri
Oct 31 2016 22:18
@marzelin Ok. So I guess I'm being dense. What you put as the value of the target attribute? Just anything? Like it just has to be there and it will open in a new window? Doesn't seem concise.
Sam Griffen
@ssgriffen
Oct 31 2016 22:18
@FatTone225 I'm trying to be...do you see what I'm trying to do? Ignore the return hello
amir
@aizen3
Oct 31 2016 22:19
@0x0936 ok when i go out of code pen and back again i see that the api isnt working until i open a new pen and add jqery to it then back to my weather pen and i see that it works so thats the link now it shouldnt work https://codepen.io/aizen3/pen/vXqyzK
marzelin
@marzelin
Oct 31 2016 22:19
@FatTone225 the value is the name of the tab/window. when you have the same target value on different anchors, it opens the link in the same tab.
Robert Richey
@0x0936
Oct 31 2016 22:21
@aizen3 it works when I load codepen with the http protocol. it breaks when I click your link with https
Tony Miri
@TonyMiri
Oct 31 2016 22:22
Ok. So. What I should do is take all of my dynamically created <div>s and wrap them in dynamically created <a>s and assign each of the <a>s a target attribute. Then just set a click handler for the <a>s. That's it, right?
amir
@aizen3
Oct 31 2016 22:22
@0x0936 so i dont understand why when i go out for a while and back it stops working
marzelin
@marzelin
Oct 31 2016 22:23
@FatTone225 looks like a plan
but anchors are clickable already
ah, you want display it in the page as well, cool
Tony Miri
@TonyMiri
Oct 31 2016 22:24
Oh right. Even better.
Robert Richey
@0x0936
Oct 31 2016 22:24
@aizen3 I don't know either.
  • this http link works
  • this https link breaks
Tyler Moeller
@TylerMoeller
Oct 31 2016 22:25
@aizen3 You're hitting a mixed-content issue. Your weather API does not support HTTPS and your location API only supports HTTPS. You'll need to use a weather API that supports HTTPS, like Weather Underground or a location API that supports HTTP, like http://ip-api.com/json.
Tim Signore
@Timsig
Oct 31 2016 22:25
Hi all. I wonder if anyone can help with this. I'm trying to complete the Simon game challenge, but can't get it to run properly. The problem is at line 60 in the javascript; the code does not wait for the sounds 'ended' event to fire, it just marches on. How can i reconfigure this, so that it only proceeds once the sound is finished playing. Thanks for any help.
http://codepen.io/timsig/pen/yaGqBg?editors=0010
Robert Richey
@0x0936
Oct 31 2016 22:26
@TylerMoeller or just load it with http. the location API (ip-info.io) does support http
Tyler Moeller
@TylerMoeller
Oct 31 2016 22:27
@0x0936 Yep, either use all HTTPS or all HTTP
can't use HTTP on a site that is loaded over HTTPS
WhiteLeaf1103
@WhiteLeaf1103
Oct 31 2016 22:27
whats diff http https?
Tyler Moeller
@TylerMoeller
Oct 31 2016 22:28
HTTPS is considered a secure origin. HTTP is not secure.
Robert Richey
@0x0936
Oct 31 2016 22:28
https encrypts communication between client and server. http sends plain text
amir
@aizen3
Oct 31 2016 22:29
@0x0936 @TylerMoeller thank u so much guys now i got it
CamperBot
@camperbot
Oct 31 2016 22:29
:star2: 1772 | @0x0936 |http://www.freecodecamp.com/0x0936
aizen3 sends brownie points to @0x0936 and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 899 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
amir
@aizen3
Oct 31 2016 22:31
@TylerMoeller yes i made the ipinfo to http like the other one
Robert Richey
@0x0936
Oct 31 2016 22:31
@aizen3 if you're at all interested in creating a weather app that works over https, look into Dark Sky formerly forecast.io. I don't know if ip-info supports https or not, but https://freegeoip.net does
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:33
Guys does anyone know why animate() jQuery function doesn't work on safari?
amir
@aizen3
Oct 31 2016 22:33
@0x0936 yes i tried it it works for now if it stops again ill use this freegeoip thanks :D
CamperBot
@camperbot
Oct 31 2016 22:33
aizen3 sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:warning: aizen3 already gave 0x0936 points
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:34
It works very well on chrome, it was working previously but suddenly it doesn't work now
Tyler Moeller
@TylerMoeller
Oct 31 2016 22:34
@aizen3 That will make it so your weather app only works over HTTP, so you may want to detect if someone has loaded your app over HTTPS and tell them to try HTTP instead. If you want a simple approach, Weather Underground has an API that gives you weather and location all in one url that works over HTTP/HTTPS:
https://api.wunderground.com/api/<<<your API Key goes here>>>>/conditions/q/autoip.json
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:35
and it doesn't work on firefox
function smoothlyScrollTo(position) {
    $("html, body").animate({scrollTop: position }, 1500);
  }
On firefox, It just go to the position very fast
Tim Signore
@Timsig
Oct 31 2016 22:36
@devahmedshendy I have heard of instances where it won't work unless you change polsition of element to relative
Tyler Moeller
@TylerMoeller
Oct 31 2016 22:36
@devahmedshendy It's just not available yet. Can't really say why, but it's "under consideration": http://caniuse.com/#feat=web-animation
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:36
@TylerMoeller is there any alternative?
Tyler Moeller
@TylerMoeller
Oct 31 2016 22:37
@devahmedshendy I believe CSS keyframes work on everything but Opera Mini
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:37
@Timsig which element to change its position to relative?
amir
@aizen3
Oct 31 2016 22:37
@TylerMoeller ok thnx for helping
CamperBot
@camperbot
Oct 31 2016 22:37
aizen3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: aizen3 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Oct 31 2016 22:37
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:38
@TylerMoeller Yes, I already opened it
Do yo know if using animate function will be Ok with "Personal Portfolio Webpage" challenge?
Tim Signore
@Timsig
Oct 31 2016 22:39
@devahmedshendy the one you are trying to animate. Like @TylerMoeller says, using css keyframes or transitions might be a solution
Tony Miri
@TonyMiri
Oct 31 2016 22:39
@marzelin Works perfect now. Thank you.
CamperBot
@camperbot
Oct 31 2016 22:39
fattone225 sends brownie points to @marzelin :sparkles: :thumbsup: :sparkles:
:cookie: 886 | @marzelin |http://www.freecodecamp.com/marzelin
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:40
@Timsig, @TylerMoeller Ok I am watching about CSS Keyframes to implement the animate() function
amir
@aizen3
Oct 31 2016 22:41
@devahmedshendy make it simple for now because when u finish the front end projects u will find some projects to add in ur portfolio and also u will have enough knowledge to make a good portfolio
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:46
Ok @amir, I am just doing the challenges right now, but may be at the end I can have a well design about my portfolio, because right now I am just imitating the example provided from FreeCodeCamp
So do you mean by simple, ignoring the animation part?
Just make the page go directly to this point?
amir
@aizen3
Oct 31 2016 22:50
@devahmedshendy yes thats what i mean because u will be able to use javascript and all what u need to make ur final perfect portfolio after u become a front-end programmer
and u must know that free code camp isnt enough find some good books and use w3school it will make every thing look easier for u
Ahmed Shendy
@devahmedshendy
Oct 31 2016 22:53
Off course, thank you @aizen3
CamperBot
@camperbot
Oct 31 2016 22:53
devahmedshendy sends brownie points to @aizen3 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @aizen3 |http://www.freecodecamp.com/aizen3
amir
@aizen3
Oct 31 2016 22:54
:D
Isaac
@killershark101
Oct 31 2016 23:15
Hello Isaac here from Minecraft HTML.
Joshua Swift
@joshuaswift
Oct 31 2016 23:17
Hey guys, I'm currently working on the Local Weather App, and trying to pass the location data from one function to another function to get the temperature for that area.
marzelin
@marzelin
Oct 31 2016 23:19
@Joshuaswift call weather function from ip callback
Cédric
@Hex0n
Oct 31 2016 23:22
Hiya can anyone lend me a hand with inputs
Joshua Swift
@joshuaswift
Oct 31 2016 23:23
@marzelin Do I replace the locationJSONP function? I would need both functions as callbacks wouldn't I?
@marzelin Or do I just call the weather function within the location function scope?
marzelin
@marzelin
Oct 31 2016 23:25
@Joshuaswift instead of calling getWeather() from the top level, call it from locationJSONP
Sam Griffen
@ssgriffen
Oct 31 2016 23:27
Can someone explain whats happeinng with the filter function here simply?```
function destroyer(arr) {
  // Remove all the values


  var newArr = arguments[0];
  var targetsArr = [];

    for(i = 1; i < arguments.length; i++){
    targetsArr.push(arguments[i]);
  }



  var filtered = newArr.filter(function(e){return this.indexOf(e)<0;},targetsArr);
  return filtered;


}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
marzelin
@marzelin
Oct 31 2016 23:30
@ssgriffen for each element in the array, it checks if it is present in targetsArr. If not, the value is retained, otherwise it is omitted.
Joshua Swift
@joshuaswift
Oct 31 2016 23:31
@marzelin I've called getWeather inside locationJSONP but still isn't working :/ please could you check I've done it correctly?
Sam Griffen
@ssgriffen
Oct 31 2016 23:31
@marzelin explain the e if possible
@marzelin thanks
CamperBot
@camperbot
Oct 31 2016 23:31
ssgriffen sends brownie points to @marzelin :sparkles: :thumbsup: :sparkles:
:cookie: 887 | @marzelin |http://www.freecodecamp.com/marzelin
marzelin
@marzelin
Oct 31 2016 23:33
@Joshuaswift have you checked the browser console? You've got error: pen.js:11 Uncaught ReferenceError: locationData is not defined(…)
@ssgriffen e stands for each element from the newArr.
Joshua Swift
@joshuaswift
Oct 31 2016 23:34
@marzelin I'm coding on a tablet unfortunately... no console access on codepen. It's a constant thorn in my side.
Sam Griffen
@ssgriffen
Oct 31 2016 23:35
@marzelin could it have been called value or element?
marzelin
@marzelin
Oct 31 2016 23:35
@Joshuaswift you have to pass locationData object as arguments to getWeather
Joshua Swift
@joshuaswift
Oct 31 2016 23:35
@marzelin ahh I see, that makes sense.
Welp
@WelpUrStud
Oct 31 2016 23:36
Hi, would anyone be willing to jump into a private chat with me and help me out with some CSS positioning and animation issues I'm running into?
This is unrelated to FCC. If there is a better chat for general front-end troubleshooting, please let me know
marzelin
@marzelin
Oct 31 2016 23:37
@ssgriffen each element/value from the array. For the [1, 2, 3, 1, 2, 3] array, it first 1 then 2, and then 3, 1, 2, 3
Sam Griffen
@ssgriffen
Oct 31 2016 23:39
@marzelin thanks
CamperBot
@camperbot
Oct 31 2016 23:39
ssgriffen sends brownie points to @marzelin :sparkles: :thumbsup: :sparkles:
:warning: ssgriffen already gave marzelin points
Joshua Swift
@joshuaswift
Oct 31 2016 23:41
@marzelin still not getting anything, thanks for your help though, your advice makes sense. I'm starting to think I need to restructure my code in a big way!
CamperBot
@camperbot
Oct 31 2016 23:41
joshuaswift sends brownie points to @marzelin :sparkles: :thumbsup: :sparkles:
:cookie: 888 | @marzelin |http://www.freecodecamp.com/marzelin