These are chat archives for FreeCodeCamp/Help

2nd
Feb 2019
Liam Docherty
@liamdocherty
Feb 02 03:32

How can I vertically and horizontally centre the output of the following within my code? Just to make it more clear, currently the browser name and version is displayed in the top left when my code is run. However, I want it to be displayed vertically and horizontally in the middle.

echo $yourbrowser;
echo $version;

When my PHP is run:
When my PHP is run.

FULL PHP CODE

    <?php
function getBrowser()
{
    $u_agent = $_SERVER['HTTP_USER_AGENT'];
    $bname = 'Unknown';
    $platform = 'Unknown';
    $version= "";

    //First get the platform?
    if (preg_match('/linux/i', $u_agent)) {
        $platform = 'linux';
    }
    elseif (preg_match('/macintosh|mac os x/i', $u_agent)) {
        $platform = 'mac';
    }
    elseif (preg_match('/windows|win32/i', $u_agent)) {
        $platform = 'windows';
    }

    // Next get the name of the useragent yes seperately and for good reason
    if(preg_match('/MSIE/i',$u_agent) && !preg_match('/Opera/i',$u_agent))
    {
        $bname = 'Internet Explorer';
        $ub = "MSIE";
    }
    elseif(preg_match('/Firefox/i',$u_agent))
    {
        $bname = 'Mozilla Firefox';
        $ub = "Firefox";
    }
    elseif(preg_match('/Chrome/i',$u_agent))
    {
        $bname = 'Google Chrome';
        $ub = "Chrome";
    }
    elseif(preg_match('/Safari/i',$u_agent))
    {
        $bname = 'Apple Safari';
        $ub = "Safari";
    }
    elseif(preg_match('/Opera/i',$u_agent))
    {
        $bname = 'Opera';
        $ub = "Opera";
    }
    elseif(preg_match('/Netscape/i',$u_agent))
    {
        $bname = 'Netscape';
        $ub = "Netscape";
    }

    // finally get the correct version number
    $known = array('Version', $ub, 'other');
    $pattern = '#(?<browser>' . join('|', $known) .
    ')[/ ]+(?<version>[0-9.|a-zA-Z.]*)#';
    if (!preg_match_all($pattern, $u_agent, $matches)) {
        // we have no matching number just continue
    }

    // see how many we have
    $i = count($matches['browser']);
    if ($i != 1) {
        //we will have two since we are not using 'other' argument yet
        //see if version is before or after the name
        if (strripos($u_agent,"Version") < strripos($u_agent,$ub)){
            $version= $matches['version'][0];
        }
        else {
            $version= $matches['version'][1];
        }
    }
    else {
        $version= $matches['version'][0];
    }

    // check if we have a number
    if ($version==null || $version=="") {$version="?";}

    return array(
        'userAgent' => $u_agent,
        'name'      => $bname,
        'version'   => $version,
        'platform'  => $platform,
        'pattern'    => $pattern
    );
}

$ua=getBrowser();
$yourbrowser= "Your browser: " . $ua['name'];
$version= "Version of the Browser is : " . $ua['version'];
echo $yourbrowser;
echo $version;

?>
Harindu Dilshan ( Kavinda Pitiduwa Gamage)
@harindu95
Feb 02 03:44
Use CSS
no_one
@Nevermind1
Feb 02 06:10
<a href="http://freecatphotoapp.com"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg"></a>
something wrong?
thk god, i find where is wrong
no_one
@Nevermind1
Feb 02 06:16
well, it seems like not work
zootechdrum
@zootechdrum
Feb 02 06:49
Hello again
I am trying to implement some form of recursion on my pomo clock
Basically I want the function to keep repeating itself and decrease session by one on each iteration
theres the full project
but here is the snippet of code I am talking about
  strtTimer(duration = this.state.setTime) {
    let dur = duration
    let self = this;

    this.formatTimer(duration);
    let timer = duration;
    window.saveInt = timer;

    if (--timer < 0) {
      clearInterval(self.beginInterval);
    }
    this.setState({ setTime: timer }); 
  }
zootechdrum
@zootechdrum
Feb 02 06:54
Here is what I tried
  strtTimer(duration = this.state.setTime , session = this.state.session) {
    sess = session - 1;
    let dur = duration
    let self = this;
   if(sess !== 0){
    this.formatTimer(duration);
    let timer = duration;
    window.saveInt = timer;

    if (--timer < 0) {
      clearInterval(self.beginInterval);
    }
    this.setState({ setTime: timer }); 
    }else{
      this.strtTimer(dur)
    }
  }
kibablu
@kibablu
Feb 02 07:07
@Nevermind1 <img class="smaller-image-thicker-green-border" you forgot a "-"... its good to have smaller names when naming classes
no_one
@Nevermind1
Feb 02 07:17
@kibablu ths for u help, bt im already found out the mistake and its my network fluctuation...anyway thanks againHHHH
kibablu
@kibablu
Feb 02 07:55
@Nevermind1 I was made a mistake... it could be you are trying to have two classes.... Glad you found it
kibablu
@kibablu
Feb 02 08:29
Hey I find it hard to add a link to my logo.jpg on codepen... since I can't link codepen to myLaptop and I can't copy image url on the web that finshes with an image format (.png or .jpg) How to go about this? Please help
Kranti Nebhwani
@darkphotonKN
Feb 02 09:24
When I make requests to the backend or public apis with fetch (or axios, etc) can I store the endpoint somewhere so i don't have to type the api url with every new request? E.g. if i do fetch('exampleapi.com/api/users') can I instead do fetch(endpoint + 'users') instead, and have that endpoint stored somewhere? I know I can do it as a local variable but the point is to be able to give all files access and not just have it locally and need to retype it
I read something about putting it in an .env file but Im not sure how that works, I'm doing it in react not sure if that matters either
Ramesh
@rnallu
Feb 02 10:05
Hello
Nazar
@IsaakNazar
Feb 02 10:22
anyone good at CSS?
Kranti Nebhwani
@darkphotonKN
Feb 02 10:23
@IsaakNazar just ask the question straight away is the way to do it here man, no need to ask who's good with what
i might be able to help with css
it will also help to include your example code on a jsfiddle or codepen etc
to show your issue
@IsaakNazar
Nazar
@IsaakNazar
Feb 02 10:27
tried margin-top, but no luck
Ali Bulut
@ali27001
Feb 02 10:38
psdto.png
How do I know the responsive code by sticking to this design? Px must obey. Bootstrap is very difficult to use here
I want to encode this structure as responsive but I am having difficulty
Kranti Nebhwani
@darkphotonKN
Feb 02 11:01
@IsaakNazar ah cuz your div structure has some issues, so when you decrease the margin the whole slider_container does not move up, only the border does
Nazar
@IsaakNazar
Feb 02 11:02
@darkphotonKN yes, you're right. any suggestions&
?
Kranti Nebhwani
@darkphotonKN
Feb 02 11:02
@IsaakNazar quick fix right now would betransform: translateY(-20px); - add that to your slider_container
adjust the values to your liking of course
this solution is fine except its better to not have so much space under your logo to start with - you can try decreasing that image or whatever it is so that the height doesnt push your slider_container down. Else the transform will work
Nazar
@IsaakNazar
Feb 02 11:04
@darkphotonKN yes man, you Rock, many many thanx :)
Kranti Nebhwani
@darkphotonKN
Feb 02 11:04
@IsaakNazar you can move the rest of the stuff UNDER your slider_container back up close to it with a negative margin-bottom, e.g. margin-bottom: -20px;
so essentially just add:
slider_container {
    margin-bottom: -20px;
   transform: translateY(-20px);
}
Nazar
@IsaakNazar
Feb 02 11:05
@darkphotonKN thank you, brilliant :)
Kranti Nebhwani
@darkphotonKN
Feb 02 11:05
@IsaakNazar ok np
Ali Bulut
@ali27001
Feb 02 11:34
don't have a suggestion to me?
Niraj Nandish
@Nirajn2311
Feb 02 12:09
@ali27001 what exactly are you making?
Ali Bulut
@ali27001
Feb 02 12:29
I would like to encode the design in the image shown above as responsive. Can Pixel code it with bootstrap?
Ali Bulut
@ali27001
Feb 02 13:06
Can you make me an example with codepen.
abraham anak agung
@padunk
Feb 02 23:35
@ali27001 you can use media queries to make it responsive for every devices. Just set a correct breakpoint.