These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Sep 2017
Ismail Hozain
@ismailhozain
Sep 26 2017 02:03
hey guys im working on the twitch.tv thing and i got the apis running but i dont know which bit of information to target from my console here it is
iso
@iso1048
Sep 26 2017 02:08
@ismailhozain not answering your question, but you could put the usernames in an array and loop through the array, making an ajax call with each iteration of the loop. This avoids repeating the same code multiple times.
Ismail Hozain
@ismailhozain
Sep 26 2017 02:09
ok
i have a faint idea of how to do it and it involves setting up a for loop then setting each username to a numerical value then iterating through them in the loop but i wil have to do that twice to get all my info
Gersho
@Gersho
Sep 26 2017 02:11
try http://jsonprettyprint.com @ismailhozain
copy the object you get in there and it'll show you "pretty"
Ismail Hozain
@ismailhozain
Sep 26 2017 02:12
@Gersho do i paste whats in my console or my code
?
oh ok
Gersho
@Gersho
Sep 26 2017 02:12
the object you can as answer from your call
Ismail Hozain
@ismailhozain
Sep 26 2017 02:13
it gives me null
Gersho
@Gersho
Sep 26 2017 02:14
you can get it by using the call url directly in your browser
https://wind-bow.glitch.me/twitch-api/channels/ogamingsc2
Ismail Hozain
@ismailhozain
Sep 26 2017 02:15
thats nice but how do i target each of those elements
Gersho
@Gersho
Sep 26 2017 02:16
copy the object you obtained in the prettyfier i linked earlier
Ismail Hozain
@ismailhozain
Sep 26 2017 02:16
ok
Gersho
@Gersho
Sep 26 2017 02:16
you should get a more readable version of that object
Ismail Hozain
@ismailhozain
Sep 26 2017 02:17
that is not what i am talking about i got that object already but how do i target those welements so i can output them in my code
elements
Ismail Hozain
@ismailhozain
Sep 26 2017 02:20
ok thanks
mambasnoww
@mambasnoww
Sep 26 2017 05:24
Hello can someone help me
Markus Kiili
@Masd925
Sep 26 2017 06:02
@mambasnoww You can just ask the question and perhaps post the relevant code here.
BuntyBru
@BuntyBru
Sep 26 2017 06:35
Can anyone tell me the difference between "inline" and "inline-block"
iso
@iso1048
Sep 26 2017 06:38
@BuntyBru inline-block keeps the element inline but allows you to style it as if it were a block element
BuntyBru
@BuntyBru
Sep 26 2017 07:11
@gothamknight
thanks
CamperBot
@camperbot
Sep 26 2017 07:11
buntybru sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 435 | @gothamknight |http://www.freecodecamp.com/gothamknight
Jonathan Albert Cunanan
@jcunanan05
Sep 26 2017 08:18
@jcunanan05
hello to those who use font-awesome, <span> or <i> ?
they both work, which do you use?
Thompson Ike
@hubhubace
Sep 26 2017 08:36
hey guys having problem with code
anyone pls help
Markus Kiili
@Masd925
Sep 26 2017 08:38
@hubhubace You can just ask the question and perhaps post the relevant code here.
Thompson Ike
@hubhubace
Sep 26 2017 08:38
k
I appended ato a div the return data from php
its a post data
it returns and fill the div but disappears after page refresh
i dont know what to do
here is the php

~~~php
public function post_status($u,$post) {
global $conn;
include_once("check_login_status.php");
if($user_ok != true || $log_username == "") {
exit();
}else{
if(isset($_POST)){
$_SESSION['post-data'] = $_POST;
$u = $_SESSION["username"];
$post = trim($_SESSION['post-data']['post']);
$table = "posts";
$time = time();

     $sql = "insert into $table (username,status,posted_at) values('$u','$post','$time')";
     mysqli_query($conn, $sql);

     $sql = "SELECT * FROM $table WHERE username='$u' LIMIT 100";
     $userpost_query = mysqli_query($conn, $sql);
     //build html format as you need it..
    while($row = mysqli_fetch_array($userpost_query, MYSQLI_ASSOC)){
        $avatar = $row["profile_picture_path"];
        $profile_pic = '<img class="img-responsive img-circle" src="uploads/'.$u.'/'.$avatar.'" alt="'.$u.'">';
        $coment_pic = '<img class="img-responsive img-circle img-sm" src="uploads/'.$u.'/'.$avatar.'" alt="'.$u.'">';
     echo                     
                 '<div class="box-header with-border"> 
                 <div class="user-block">
                    '. $profile_pic.'
                    <span class="username"><a href="#">'. $row ['username'] .'</a></span>
                    <span class="description">Shared publicly at '. $row ['posted_at'] .' Today</span>
                  </div>
                </div>

                <div id="box_body" class="box-body" style="display: block;">
                  <img class="img-responsive show-in-modal" src="img/Post/young-couple-in-love.jpg" alt="Photo">
                  <p>'. $row ['status'] .'</p>
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
                  <span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <img class="img-circle img-sm" src="img/Friends/guy-2.jpg" alt="User Image">
                    <div class="comment-text">
                      <span class="username">
                      Maria Gonzales
                      <span class="text-muted pull-right">8:03 PM Today</span>
                      </span>
                      It is a long established fact that a reader will be distracted
                      by the readable content of a page when looking at its layout.
                    </div>
                  </div>
                </div>
                <div class="box-footer" style="display: block;">
                  <form action="#" method="post">
                    '. $coment_pic.'
                    <div class="img-push">
                      <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
                    </div>
                  </form>
                </div></br></br><br><hr style="margin:25px;">';
    }
     }

}
}

php
public function post_status($u,$post) {
global $conn;
include_once("check_login_status.php");
if($user_ok != true || $log_username == "") {
exit();
}else{
if(isset($_POST)){
$_SESSION['post-data'] = $_POST;
$u = $_SESSION["username"];
$post = trim($_SESSION['post-data']['post']);
$table = "posts";
$time = time();

     $sql = "insert into $table (username,status,posted_at) values('$u','$post','$time')";
     mysqli_query($conn, $sql);

     $sql = "SELECT * FROM $table WHERE username='$u' LIMIT 100";
     $userpost_query = mysqli_query($conn, $sql);
     //build html format as you need it..
    while($row = mysqli_fetch_array($userpost_query, MYSQLI_ASSOC)){
        $avatar = $row["profile_picture_path"];
        $profile_pic = '<img class="img-responsive img-circle" src="uploads/'.$u.'/'.$avatar.'" alt="'.$u.'">';
        $coment_pic = '<img class="img-responsive img-circle img-sm" src="uploads/'.$u.'/'.$avatar.'" alt="'.$u.'">';
     echo                     
                 '<div class="box-header with-border"> 
                 <div class="user-block">
                    '. $profile_pic.'
                    <span class="username"><a href="#">'. $row ['username'] .'</a></span>
                    <span class="description">Shared publicly at '. $row ['posted_at'] .' Today</span>
                  </div>
                </div>

                <div id="box_body" class="box-body" style="display: block;">
                  <img class="img-responsive show-in-modal" src="img/Post/young-couple-in-love.jpg" alt="Photo">
                  <p>'. $row ['status'] .'</p>
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
                  <span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <img class="img-circle img-sm" src="img/Friends/guy-2.jpg" alt="User Image">
                    <div class="comment-text">
                      <span class="username">
                      Maria Gonzales
                      <span class="text-muted pull-right">8:03 PM Today</span>
                      </span>
                      It is a long established fact that a reader will be distracted
                      by the readable content of a page when looking at its layout.
                    </div>
                  </div>
                </div>
                <div class="box-footer" style="display: block;">
                  <form action="#" method="post">
                    '. $coment_pic.'
                    <div class="img-push">
                      <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
                    </div>
                  </form>
                </div></br></br><br><hr style="margin:25px;">';
    }
     }

}
}

~~~
php

~~~
and here is the jquery
Thompson Ike
@hubhubace
Sep 26 2017 08:43
~~~
javascripy
$(document).ready(function(){
        $('span#welcome_message').html('Welcome friends to a place of satisfaction.').fadeIn(3000).delay(9000).fadeOut(9000);
});
    </script>
         <script type="text/javascript">

 $(document).ready(function() {

  $('#post_btn').click(function(){


    var post = $('#post_text').val();

    if(post == "" ){
       alert("fill in some text!");
    }
    else {
      $.ajax ({
        url:"php/poststatus.php",
        method:"POST",
        data:{post:post},
        success:function(data){
          $("#post_form").trigger("reset");
          $("#box_widget").append(data);


        }

     });

   }
  });
});
iso
@iso1048
Sep 26 2017 08:49
@jcunanan05 i use <i>, but I am no expert so that is nothing to go by.
Jonathan Albert Cunanan
@jcunanan05
Sep 26 2017 08:59
thanks mr batman @gothamknight :))
CamperBot
@camperbot
Sep 26 2017 08:59
jcunanan05 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @gothamknight |http://www.freecodecamp.com/gothamknight
iso
@iso1048
Sep 26 2017 09:01
@jcunanan05 sure thing peter parker.
Shubham Singh
@imshubhamsingh
Sep 26 2017 14:24
Hey guys open https://codepen.io my pen is selected as one of the picked pens
Jorge
@OrangeKulture
Sep 26 2017 14:26
@imshubhamsingh looks really nice! congratz
Shubham Singh
@imshubhamsingh
Sep 26 2017 14:27
@OrangeKulture thanks bro
CamperBot
@camperbot
Sep 26 2017 14:27
imshubhamsingh sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 467 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Sep 26 2017 14:27
sure thing!
I really need to get into canvas .. havent done anything tbh and I do like animations and graphics
where did u learn? @imshubhamsingh
Shubham Singh
@imshubhamsingh
Sep 26 2017 14:28
@OrangeKulture Youtube tutorials and few blog posts
and an inspiration too..
Graham Snowdon
@grahamsnowdon
Sep 26 2017 14:29
@imshubhamsingh that’s very good. Inspired me a bit.
Jorge
@OrangeKulture
Sep 26 2017 14:29
haha yeah i bet! looks nice .. i reaaally need to get into canvas for sure
great work dude @imshubhamsingh , keep it going!
Shubham Singh
@imshubhamsingh
Sep 26 2017 14:31
for canvas I learnt basic from here https://www.youtube.com/watch?v=EO6OkltgudE&list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL ... btw im still noob in canvas but scss ... Im good at it
George Kemp
@gkemp94
Sep 26 2017 14:44
@imshubhamsingh For good reason, that's an awesome effect! :)
George Kemp
@gkemp94
Sep 26 2017 15:05
Anybody here an expert on regex?
I'm getting some bizarre results that I don't understand.
Henry
@GitHub-Henry
Sep 26 2017 15:10
@imshubhamsingh nice pen
buiphuking
@buiphuking
Sep 26 2017 15:23
help me guy, i learn discrete mathematics, plz introduce me a forum like this, plz, guy......
Shubham Singh
@imshubhamsingh
Sep 26 2017 15:41
@gkemp94 @GitHub-Henry I know...
Jorge
@OrangeKulture
Sep 26 2017 15:43
@buiphuking what do u mean?
@gkemp94 there's several small sites that you can actually test your expressions
buiphuking
@buiphuking
Sep 26 2017 15:45
@OrangeKulture i need a place like this to ask any thing about discrete mathematic
piteto
@piteto
Sep 26 2017 15:55
@buiphuking Try asking on reddit? https://www.reddit.com/r/learnprogramming
This place is for asking about the Front End Projects at Free Code Camp - building a quote machine, weather app, etc.
Moisés Man
@moigithub
Sep 26 2017 16:00
googling "math forums" shows a lot of results
Sajid Unar
@sajidunnar
Sep 26 2017 16:00
@buiphuking try irc or you canc reate your channel ;) maybe u can get people here
buiphuking
@buiphuking
Sep 26 2017 16:02
@piteto @sajidunnar thank
CamperBot
@camperbot
Sep 26 2017 16:02
buiphuking sends brownie points to @piteto and @sajidunnar :sparkles: :thumbsup: :sparkles:
:cookie: 150 | @piteto |http://www.freecodecamp.com/piteto
:cookie: 27 | @sajidunnar |http://www.freecodecamp.com/sajidunnar
ADIL KARMOUZI
@mradil16
Sep 26 2017 16:20
Guys . why my text editor show this message : " 'document' is not defined " . my javascript code doesn't work
Moisés Man
@moigithub
Sep 26 2017 16:22
...probably u should show ur javascript code
piteto
@piteto
Sep 26 2017 17:07
@mradil16 It might be because your code is running before the DOM is ready
use window.onload or $(handler)
PattyCreates
@PattyCreates
Sep 26 2017 18:45
Hi, guys. I'm trying to get an animation going with waypoints and JS. Unfortunately, i can't figure out the best way for the JS to stop after appearance of said waypoint. The waypoint is a general class (animated.css classes added). And I'm trying to get a nested element within it to run once
There are three instances of it.
aRtoo
@artoodeeto
Sep 26 2017 20:07
guy i have a question. did you notice that theres a diff between fccs formula for orbital period from google. or is it the website??
   this fcc formula to get the orbital period
   //T = (2 * PI * SQRT[earthRadius + avgAlt] / GM);
   this on google. link :http://www.physicsclassroom.com/class/circles/Lesson-4/Mathematics-of-Satellite-Motion
   //T = SQRT [(4 • pi2 • R3) / (G*Mcentral)]
hifede
@hifede
Sep 26 2017 21:26
still trying to figure out why my personal portfolio page wont fit a phone srceen after using containers. could someone help me ? https://codepen.io/arolf_flora/full/WEoYmd/
playingwithinfinity
@playingwithinfinity
Sep 26 2017 21:54
Can anyone help me with navbars?
Tom
@moT01
Sep 26 2017 22:43
@playingwithinfinity whats up
Alex Thompson
@amthomps11
Sep 26 2017 22:49
Can someone help me with a big on my calculator project? It has more to do with the css than the actual calculator
bug*
basically I don't know why the background is essentially two rectangles, I just want it to be one smooth gradient
Tom
@moT01
Sep 26 2017 22:56
checking the dev tools - your body and html are only as big as the top rectangle
ADIL KARMOUZI
@mradil16
Sep 26 2017 22:56
Guys . Is there an alternative for CSS filter property in IE 10+ ?
Tom
@moT01
Sep 26 2017 22:56
you can set a size of the body height: 100vh;
will make it extend down, but im checking if there's a property for it, which might be a better way to go
@amthomps11
Alex Thompson
@amthomps11
Sep 26 2017 22:57
@moT01 ah thanks so much that worked. So is the body set to a default height then unless you specify?
CamperBot
@camperbot
Sep 26 2017 22:57
amthomps11 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 863 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Sep 26 2017 22:59
pretty sure it will just expand to fit whatever is in it
unless you set a size
Ken Haduch
@khaduch
Sep 26 2017 23:16
@hifede - it doesn't look like you are using the screen-size column settings to make the portfolio page responsive? I'm not that familiar with Bootstrap 4, I have to check if the column class definitions have changed.
Ken Haduch
@khaduch
Sep 26 2017 23:23
@hifede - okay, that is one thing that hasn't changed in Bootstrap 4 - the column classes have to be set up with a screen-size designation for them to be used responsively. For example, col-lg-6 will use 6 columns on a large screen, and the full width of anything that is smaller than the bootstrap breakpoint for lg. So if you are trying to set up for that behavior, I think that you have to make that change. Also, the container-fluid class is the one that you might want to use, since it gives a full-width content area?
Also, your "Flora's portfolio" text is rather large - to me that seems a limiting factor in how narrow your page will set up on a mobile device?