These are chat archives for FreeCodeCamp/HelpFrontEnd

16th
Feb 2018
MuhammadYasser1
@MuhammadYasser1
Feb 16 2018 00:32
@Garabed96 I recently finished bootstrap but they mentioned that single quotes are not prefered (or acceptable i don't rememmber :D) so try to put "overview" instead of 'overview'...worth a shot
Gulsvi
@gulsvi
Feb 16 2018 00:38

@Garabed96

  Promise.all([
    fetch(url1).then(res => res.json()),
    fetch(url2).then(res => res.json())
  ]).then(data => data.forEach(someFunctionToProcessData)).catch(console.error);

You'll need to call json() to get the data you need, similar to the above ^

Manan Shah
@mananshah51
Feb 16 2018 00:45

When I execute this piece of code, I get some white space between the Top Navigation tab and my div tag, how should I get rid of the white space?

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

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<!DOCTYPE html>

<html>
<head>
<title>Meet the Pirate</title>
<style>
.hero{
background-image: url("Moutains.jpg");
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
h1{
text-align: center;
top: 50%;
color: white;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Meet the Pirate</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Why Hire me ?</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Contact Me </a></li>
</ul>
</div>
</nav>
<div class="hero">
<h1>I am John Doe</h1>
</div>
</body>
</html>

<!-- Using the Bootstrap Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">

<!-- Using of Font Awesome in CSS -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<!DOCTYPE html>
<html>
<head>
    <title>Meet the Pirate</title>
    <style>
.hero{
    background-image: url("Moutains.jpg");
      height: 70%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
}
h1{
  text-align: center;
  top: 50%;
  color: white;
}
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                  <a class="navbar-brand">Meet the Pirate</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Why Hire me ?</a></li>
                <li><a href="#">Resume</a></li>
                <li><a href="#">Contact Me </a></li>
            </ul>
        </div>
    </nav>    
        <div class="hero">
        <h1>I am John Doe</h1>
        </div>
</body>
</html>
Gulsvi
@gulsvi
Feb 16 2018 00:57

@mananshah51 h1 tags have a default margin top value that varies depending on the browser. Set the top margin to 0 for your h1 element:

.hero h1 {
  margin-top: 0;
}

Here are the default values: https://www.w3schools.com/cssref/css_default_values.asp
Also, make sure your <link> elements are in your <head>

Looks like Bootstrap also adds a 20px margin to a non-fixed navbar like you have:
nav.navbar {
  margin-bottom: 0;
}
Manan Shah
@mananshah51
Feb 16 2018 01:01
@gulsvi what are the <link> elements you are talking about ?
<link>
Gulsvi
@gulsvi
Feb 16 2018 01:01
<!-- Using the Bootstrap Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Using of Font Awesome in CSS -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
those ones ^
you have them outside of your <html>
Manan Shah
@mananshah51
Feb 16 2018 01:02
Ohh I get it, so everytime the link elements should be in the <head>
Gulsvi
@gulsvi
Feb 16 2018 01:02
Yes, that's correct
Manan Shah
@mananshah51
Feb 16 2018 01:02
Is it necessary to keep it in that way ?
Gulsvi
@gulsvi
Feb 16 2018 01:03
Yes, it's necessary to keep those links in the <head>
Manan Shah
@mananshah51
Feb 16 2018 01:03
Ohh okay I get it.
@gulsvi thank you so much, appreciate it
Gulsvi
@gulsvi
Feb 16 2018 01:04
I mean, most browsers will understand what you're trying to do - and probably figure it out, but it's syntactically correct to put them in the <head> or the <body> elements
CamperBot
@camperbot
Feb 16 2018 01:04
mananshah51 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2612 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 16 2018 01:04

A <link> tag can occur either in the head element or in the body element (or both), depending on whether it has a link type that is body-ok. For example, the stylesheet link type is body-ok, and therefore a <link rel="stylesheet"> is permitted in the body.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Manan Shah
@mananshah51
Feb 16 2018 01:05
Ohhhh awesome I get it.
Thank you so much
Gulsvi
@gulsvi
Feb 16 2018 01:05
Sure, good luck with the rest of the code
Manan Shah
@mananshah51
Feb 16 2018 01:06
@gulsvi Thank you tons.
CamperBot
@camperbot
Feb 16 2018 01:06
mananshah51 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Manan Shah
@mananshah51
Feb 16 2018 01:08
@gulsvi As you suggested to put the <link> tag either in <head> or in <body> as soon as I do that, the code does not render the image.
Gulsvi
@gulsvi
Feb 16 2018 01:35
@mananshah51 That change shouldn't have any effect on your image.
Manan Shah
@mananshah51
Feb 16 2018 01:36
@gulsvi It did, it did not render my image.
Gulsvi
@gulsvi
Feb 16 2018 01:37
Here's your code in a codepen: https://s.codepen.io/anon/pen/gvXWVZ?editors=1010
It's using a different image because I don't have your mountains.jpg - but it works fine.
If you press ctrl+shift+j to get the debug console, do you get any errors @mananshah51 ?
Cmd + Opt + J if you're on a mac
Manan Shah
@mananshah51
Feb 16 2018 01:40
@gulsvi I am using sublime text, I will run my code on codepen
@gulsvi Yeah I get errors when I run the console on Code Pen
Tai Jones
@taiJones00
Feb 16 2018 02:55
Hiya. A little help here. How can I have each of the buttons take up the same and as much space as possible width wise
Tai Jones
@taiJones00
Feb 16 2018 03:02
It looks like flexbox might be the answer here
Oh actually turns out bootstrap and flexbox aren't mixing too easily
Claudio Restifo
@Marmiz
Feb 16 2018 03:14

turns out bootstrap and flexbox aren't mixing too easily

Bootstrap 4 is based upon flexbox :)

devlyn
@devlohnes13
Feb 16 2018 03:16
so i have my three images at the bottom of this pen all wrapped in there own column with bootstrap. I want the three images to be centered within their columns though. And I cant seem to figure out how to work that.
Tai Jones
@taiJones00
Feb 16 2018 03:19
So I should use bootstrap 4 instead of 3? @Marmiz
Luis Jaquez
@LuisJaquez
Feb 16 2018 03:22
Can someone tell me how I can use betafreeCodeCamp to complete the exercises? I get an error when trying to access any challenge.
Claudio Restifo
@Marmiz
Feb 16 2018 03:23

@taiJones00 depends, bootstrap 4 has some core differences from v3, the version taught in FCC is the 3... so depends if you want to do it "alone".

Anyway I'm sure you can achieve the same goals with v3 as well :)

Tai Jones
@taiJones00
Feb 16 2018 03:23
hmm
Okay thank you @Marmiz
CamperBot
@camperbot
Feb 16 2018 03:23
taijones00 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1166 | @marmiz |http://www.freecodecamp.org/marmiz
Claudio Restifo
@Marmiz
Feb 16 2018 03:24
@taiJones00 like for example if you want your button to take all the available space all you need is to give them a
width: 100%
Manish Chandra
@chandrajob365
Feb 16 2018 03:25
Hi Guys . Need one suggestion
I have to generate PDF for my reports (reports contain graphs generated in SVG and some HTML tables ) for 30 days which may be approx. 1.2MB. What is the best approach to generate PDF out of HTML , to do it in front-end or do the conversion in backend HTML to PDF and send generated PDF back to frontend to render
Tai Jones
@taiJones00
Feb 16 2018 03:27
Yeah I feel like bootstrap 4 is less professional looking. I'll stick with 3 for now @Marmiz
Man I can't believe I didn't think about that solution. Thank you again @Marmiz
CamperBot
@camperbot
Feb 16 2018 03:29
taijones00 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
api offline
Manan Shah
@mananshah51
Feb 16 2018 04:20
@chandrajob365 You must have gone through the internet, this are the best ways I found on Quora: <link> https://www.quora.com/What-is-the-best-way-to-generate-a-PDF-file-from-HTML-and-CSS
G-4-R-Y
@G-4-R-Y
Feb 16 2018 04:31
hey guys, can anyone find out why the little js in this page isn't working?
https://codepen.io/G4RY/pen/VQrMzW
Aditya
@ezioda004
Feb 16 2018 04:36
@G-4-R-Y You need to add event.preventDefault() in your click event, its causing it to act like submit button so the page refreshes
G-4-R-Y
@G-4-R-Y
Feb 16 2018 04:37
ooooh, i see
thanks!!
Aditya
@ezioda004
Feb 16 2018 04:37
So like
$('#submit').on("click", function(event) {
    event.preventDefault();
//your code
});
G-4-R-Y
@G-4-R-Y
Feb 16 2018 04:38
thanks @ezioda004 !!
CamperBot
@camperbot
Feb 16 2018 04:38
g-4-r-y sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 458 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Feb 16 2018 04:39
:thumbsup:
G-4-R-Y
@G-4-R-Y
Feb 16 2018 04:42
now it works on codepen, but on brackets it just keeps saying that $ is not defined
and it doesn't work on the preview
Aditya
@ezioda004
Feb 16 2018 04:52
@G-4-R-Y Hmm, do you have jquery added to it? Cause thats the error you get when you dont have jquery added.
G-4-R-Y
@G-4-R-Y
Feb 16 2018 04:54
<head>
<meta charset = "utf-8">
<title>My Character</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href = "style.css" rel = "stylesheet">
<script src = "jquery-3.3.1.min.js"></script>
<script src = "script.js"></script>
</head>
i do and it stiill shows that error :(
Aditya
@ezioda004
Feb 16 2018 04:56
You can try opening console and type jQuery and see if you get a function or error to see if its linked.
G-4-R-Y
@G-4-R-Y
Feb 16 2018 04:58
thats what i got: "ƒ (e,t){return new w.fn.init(e,t)}"
without "
Aditya
@ezioda004
Feb 16 2018 04:59
So it is linked
G-4-R-Y
@G-4-R-Y
Feb 16 2018 05:00
but it still wont work
im starting to hate brackets here lol
or perhaps myself
Claudio Restifo
@Marmiz
Feb 16 2018 05:03
Do you have linting as well?
G-4-R-Y
@G-4-R-Y
Feb 16 2018 05:03
don't quite know
how do i see that?
oh, here
i had disabled it earlier, but it did'nt solve the problem so i activated it back
Claudio Restifo
@Marmiz
Feb 16 2018 05:04
linting and JQuery never plays well.
I suggest you to google [editor] [linter] [Jquery]
They'll have a documentation on that
G-4-R-Y
@G-4-R-Y
Feb 16 2018 05:05
okay, any tips on what to look for in the docs?
Claudio Restifo
@Marmiz
Feb 16 2018 05:06
But is it warning you see or your page don't work at all?
cos linting throws warning but they shouldn't block you from coding :)
JinYanhs
@JinYanhs
Feb 16 2018 05:08
hi
G-4-R-Y
@G-4-R-Y
Feb 16 2018 05:10
@Marmiz it works in codepen but it doesn't in brackets :(
i also added this comment because there was a bug with "document.getElement..."
/eslint-env browser/
/*eslint-env browser*/
Claudio Restifo
@Marmiz
Feb 16 2018 05:13
@G-4-R-Y have you tried open your file with a browser instead of bracket preview?
so you can narrow if it's your html or just a bracket thing
G-4-R-Y
@G-4-R-Y
Feb 16 2018 05:14
good idea, ill try it out, gimme a sec
yeah, didnt work
Claudio Restifo
@Marmiz
Feb 16 2018 05:18
@G-4-R-Y what's the browser telling you as errors? (dev console).
Are you sure about the path of your files?
G-4-R-Y
@G-4-R-Y
Feb 16 2018 05:21
i think that is the problem, curretnly
IT WORKED
the message wasn't sent, just ignore the "i think that is the problem, curretnly" haha
Thanks @Marmiz !!!
CamperBot
@camperbot
Feb 16 2018 05:23
g-4-r-y sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1167 | @marmiz |http://www.freecodecamp.org/marmiz
G-4-R-Y
@G-4-R-Y
Feb 16 2018 05:23
i had to put the script tag at the end of the body tag
it was loaded after the jquery, but i don't know, maybe i shouldve added an onload event
Tai Jones
@taiJones00
Feb 16 2018 05:39
So I tried giving this a professional feel. What do you guys think? https://codepen.io/taiJones00/full/xYPROV/
Tai Jones
@taiJones00
Feb 16 2018 05:45
It may need some UX direction. Something to guide the user's eyes down the page
Tai Jones
@taiJones00
Feb 16 2018 06:07
Also there's another problem. The links in the Contact section aren't working on mobile
Jacob Fines
@jfines
Feb 16 2018 06:57

I'm seeing something in a video about css that I don't understand. The person has a space between stuff he's declaring in a css file and a comma but what do each of them mean? The example I'm looking at is:

.card img,
.caption {
/ properties /
}

I know that the dot before a word indicates a class name but what is img ? And what does the space do? And what is the comma doing?

I spent a few minutes trying to google for an answer but was only getting a css property for word spacing (not related to my question).

Thanks cause it would help me understand what I'm watching - right now I don't get what he's doing.
Jacob Fines
@jfines
Feb 16 2018 07:01
@Masd925 Thank you Markus . I couldn't think of the right thing to search for
CamperBot
@camperbot
Feb 16 2018 07:01
jfines sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4694 | @masd925 |http://www.freecodecamp.org/masd925
Jacob Fines
@jfines
Feb 16 2018 07:04
@Masd925 So then .card img is the same as .card > img ?
two ways of doing the same thing?
oh wait, maybe not exactly
Markus Kiili
@Masd925
Feb 16 2018 07:06
Jacob Fines
@jfines
Feb 16 2018 07:06
The problem is in what's meant by "parent" Does that mean the very next / immediate higher element or any number of levels higher?
ok
I guess I have to play with it a little
Markus Kiili
@Masd925
Feb 16 2018 07:07
One means direct children and the other any descendant.
Jacob Fines
@jfines
Feb 16 2018 07:08
I get it now. thx
Cato Myhre
@Zalmez
Feb 16 2018 08:50
when it comes to the weather api, where the "documentation" I mean how am I supposed to call for data from it?
don't really know what the variables from it is :P it's most likely some obvious thing, but yeah
Randy
@RandyGoldsmith
Feb 16 2018 09:15
@Zalmez which api are you using?
Aditya
@ezioda004
Feb 16 2018 09:25
@Zalmez If you're using the API provided by FCC ie https://fcc-weather-api.glitch.me then I believe the documentation is same as of openweather api
Max
@maxiwer
Feb 16 2018 09:43
Hello coders. Can you help me with my code:
https://codepen.io/maxiwer/full/KQXrya/
I couldn't align the image to the center.
I tried .media-midle class, but this confused up h4 and h2
Aditya
@ezioda004
Feb 16 2018 09:51
@maxiwer Have your img wrap around a div and give it class = "text-center"
It could be done without div with position: relative too.
Cato Myhre
@Zalmez
Feb 16 2018 09:52
thx @ezioda004
devpaaji
@devpaaji
Feb 16 2018 10:35
whee is the JS room
Jake
@NeelDVirus
Feb 16 2018 10:40
anyone using css-grid in production?
Garo
@Garabed96
Feb 16 2018 11:00
addAlltime() {
    function handleClick(e) {
      e.preventDefault();
    }
    {this.state.alltimeList.map(lists => 
      <tr>
        <td> {lists.username}: {lists.alltime}  </td>
      </tr>
    )};
  }
trying to read array of obj that was assigned in my componentDidMount() and then passing it this button func which is then called in render() I'm getting a state not defined error?
Tiago Correia
@tiagocorreiaalmeida
Feb 16 2018 11:06
@Garabed96 can I see the rest of the code?
oh wait
you mean the preventdefault?
Stephen James
@sjames1958gm
Feb 16 2018 11:10
@Garabed96 Where are you calling this function?
@Garabed96 That syntax looks invalid as well - you should return that jsx from the addAllTime
David Morais
@psybork
Feb 16 2018 12:35
@Garabed96 , that casing....
Arun Shah
@ameeno
Feb 16 2018 14:17
Hi All, I'm strugling with my Mess of code to see if it can be improved!
Tom
@moT01
Feb 16 2018 14:23
@ameeno is there something you need help with?
Arun Shah
@ameeno
Feb 16 2018 14:23
Hiya yep
seeing if my code can be improved
its working but its a mess
?can you give me some advice
Tom
@moT01
Feb 16 2018 14:26
i dunno - there's hundreds of lines of code there
is there something in particular you want to improve?
remove the commented out stuff to clean it up a bit?
Arun Shah
@ameeno
Feb 16 2018 14:27
yes i would like to try and generalise the code
and avoid repetition
Tom
@moT01
Feb 16 2018 14:31

you could probly combine these...

var moodArrAgitated = [];
var moodArrCalm = [];
var moodArrHappy = [];
var moodArrSad = [];
var moodArrTired = [];
var moodArrAwake = [];
var moodArrScared = [];
var moodArrFearless = [];

into a single object or something

your moodOne() moodTwo()... functions could be made into a single function with another parameter probly
Arun Shah
@ameeno
Feb 16 2018 14:33
Tom , i am stashing these arrays with moods from the XML
Tom
@moT01
Feb 16 2018 14:33
you basically made the same function 4 times there - when you find youself doing that - you can usually simplify somehow into a single function
Arun Shah
@ameeno
Feb 16 2018 14:33
but i wanted to initially do a two dimensional array
buyt i found that hard to do in Javascript + the length function does not work on 2d arrays
and i was getting object un defined error
I would have prefered to do myMood = [[],[]]
and stack the mood slider return value in the myMood[] position (0-7)
and then use the sub arrays to stash to combined arrays
It just was not working and giving me so many errors!
yes tom, i was wondering how i could combine that into a single function
Tom
@moT01
Feb 16 2018 14:36
i dont see them being called anywhere - do you even use them?
Arun Shah
@ameeno
Feb 16 2018 14:36
read xml function submit
i stash the ID of the programme into a related mood category
so these arrays hold the movies for each particular mood.
(id's)
the myMood values, they are used by the get favorites function.
but yes, my code is a total mess
Tom
@moT01
Feb 16 2018 14:41
well, i dont know... i still dont see that - you could make that function like this maybe though...
function mood(val, indexA, indexB) {
  if (val < 0) {
    myMood[indexA] = Math.abs(val);
    myMood[indexB] = 0;
    showFiveProg();
  } else {
    myMood[indexB] = Math.abs(val);
    myMood[indexA] = 0;
    showFiveProg();
  }
}
Arun Shah
@ameeno
Feb 16 2018 14:45
ok
i see.
Garo
@Garabed96
Feb 16 2018 14:45
@tiagocorreiaalmeida @sjames1958gm @cyborkonline
import React from 'react';
import logo from './logo.svg';
import './index.scss'
import axios from 'axios';
import ReactDOM from 'react-dom';

/*User Story 1: I can see a table of the freeCodeCamp campers who've earned the most brownie points in the past 30 days.

User Story 2: I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.

User Story 3: I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total.

Top 100 campers for the last 30 days: https://fcctop100.herokuapp.com/api/fccusers/top/recent.

Top 100 campers of all time: https://fcctop100.herokuapp.com/api/fccusers/top/alltime.
*/

class Board extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isToggleOn: true,
      recentList: [],
      alltimeList: []
    };
  }

  // So we may use setState to update component when data retrieved 
  componentDidMount() {
    var urlRecent = "https://fcctop100.herokuapp.com/api/fccusers/top/recent/";
    var urlAlltime = "https://fcctop100.herokuapp.com/api/fccusers/top/alltime/";
    console.log("mounted");

    Promise.all([
    fetch(urlRecent)
    .then((res) => res.json())
    .then((data) =>{
      this.setState({
        recentList: data
      });
    }),
    fetch(urlAlltime)
    .then((res) => res.json())
    .then((data) =>{
      this.setState({
        alltimeList: data
      });
    })
  ]).then(alert);

  }
  addAlltime() {
    function handleClick(e) {
      e.preventDefault();
    }
    {this.state.alltimeList.map(lists => 
      <tr>
        <td> {lists.username}: {lists.alltime}  </td>
      </tr>
    )};
  }



  render() {
      return(
        <div className="all">
        <button onClick={this.addAlltime}>Alltime</button>   
        <div className="container-fluid">
        {/* <h1>Top 30 alltime</h1>
        {this.state.alltimeList.map(lists => 
          <tr>
            <td> {lists.username}: {lists.alltime} {lists.recent} </td>
          </tr>
        )};       */}
        <h1>Top 30 Recent</h1>
        {this.state.recentList.map(lists => 
          <tr>
            <td> {lists.username}: {lists.alltime} {lists.recent} </td>
          </tr>
        )};

        </div>
        </div>
      ); 
  }



} 


export default Board;
Arun Shah
@ameeno
Feb 16 2018 14:45
cool doing it now
Garo
@Garabed96
Feb 16 2018 14:45
that's the whole app.js file
Arun Shah
@ameeno
Feb 16 2018 14:51
that was a good tip thanks
i simplified 1 function from 4
Tom
@moT01
Feb 16 2018 14:55
click name and say thanks to give brownie points
@moT01 thanks
Roman Struna
@RomchyFCC
Feb 16 2018 15:03
@moT01 i'll give you points :) thanks for helping in the community
CamperBot
@camperbot
Feb 16 2018 15:03
romchyfcc sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 996 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Feb 16 2018 15:03
996
Arun Shah
@ameeno
Feb 16 2018 15:03
@moT01 thanks
CamperBot
@camperbot
Feb 16 2018 15:03
ameeno sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 997 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Feb 16 2018 15:04
those point are tough to come by these days - not many people looking for help as often as they used to
Arun Shah
@ameeno
Feb 16 2018 15:04
Thanks @moT01 very much
CamperBot
@camperbot
Feb 16 2018 15:04
ameeno sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Tom
@moT01
Feb 16 2018 15:04
997
Arun Shah
@ameeno
Feb 16 2018 15:04
sorry tom i didnt know
about the browny point things
Tom
@moT01
Feb 16 2018 15:04
yea, thats fine - i didnt know at one point either
Roman Struna
@RomchyFCC
Feb 16 2018 15:05
well if your hungry for more helping tasks
have a look at my pomodoro and tell me whats up
https://codepen.io/Romchy/pen/eVexxp :)
Arun Shah
@ameeno
Feb 16 2018 15:05
ok well, i have made two improvements, 1 i have combined the moods into a single function instead of 4
and i have also used switch& case statements
on my jsfiddle
what else could i improve?
Tom
@moT01
Feb 16 2018 15:09
@RomchyFCC i dunno - i already got my points from you for today
Arun Shah
@ameeno
Feb 16 2018 15:09
          if (moods.indexOf('Agitated') > -1) {
            moodArrAgitated[moodArrAgitated.length] = id;
          }
          if (moods.indexOf('Calm') > -1) {
            moodArrCalm[moodArrCalm.length] = id;
          }
          if (moods.indexOf('Happy') > -1) {
            moodArrHappy[moodArrHappy.length] = id;
          }
          if (moods.indexOf('Sad') > -1) {
            moodArrSad[moodArrSad.length] = id;
          }
          if (moods.indexOf('Tired') > -1) {
            moodArrTired[moodArrTired.length] = id;
          }
          if (moods.indexOf('Wide Awake') > -1) {
            moodArrAwake[moodArrAwake.length] = id;
          }
          if (moods.indexOf('Scared') > -1) {
            moodArrScared[moodArrScared.length] = id;
          }
          if (moods.indexOf('Fearless') > -1) {
            moodArrFearless[moodArrFearless.length] = id
          }
Roman Struna
@RomchyFCC
Feb 16 2018 15:09
woooow, rude xD
Arun Shah
@ameeno
Feb 16 2018 15:09
how could i improve this one?
Tom
@moT01
Feb 16 2018 15:09
ha, yea im messin around - whats the problem @RomchyFCC
Roman Struna
@RomchyFCC
Feb 16 2018 15:10
do you want to target more moods at one time or just one?
no problem for me, you can just try and break my pomodoro :)
and if you do so, you let me know and i'll try to fix it
@ameeno if you want to target one mood you can use a for loop for the if statements and if you won't use a for loop you should at least put in "else" words, so it only targets 1 mood at a time
Marianissimus
@Marianissimus
Feb 16 2018 15:12
Hi, guyes. a bit of help with my jquery here? why don't the right divs slide in?
https://codepen.io/marianissimus/pen/Nywewv
Roman Struna
@RomchyFCC
Feb 16 2018 15:14
@Marianissimus
your problem lies in the if else statement
if ( $( this ).position().left + $(this).width() < midpoint ){
        $( this ).addClass("slidefromleft");
      } //else add class slide from right
        else if ( $( this ).position().right + $(this).width() < midpoint ){
        $( this ).addClass("slidefromright");
      }
in the if you check for left but never for the right side
i just added the if statement for the right and it worked
Tom
@moT01
Feb 16 2018 15:15
@RomchyFCC i got nothin - looks good
Roman Struna
@RomchyFCC
Feb 16 2018 15:15
@moT01 nice, thanks :D
CamperBot
@camperbot
Feb 16 2018 15:15
romchyfcc sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Marianissimus
@Marianissimus
Feb 16 2018 15:15
I thought the else statement would just suffice?
Roman Struna
@RomchyFCC
Feb 16 2018 15:16
it doesn't because of this $( this ).position().left
Marianissimus
@Marianissimus
Feb 16 2018 15:17
yes, thanks, but they initially move to the left or right just fine. i mean, they change position and opacity as they should.
it's the final "get back to your position function" that doesnt work on the right elements
Roman Struna
@RomchyFCC
Feb 16 2018 15:18
here is an idea, try to make 1 switch for everything
they are out of position before you scroll down, then you add a class that resets their position, and you don't need the if else at all?
i dunno just my two cents, don't exactly know what you are going for
Marianissimus
@Marianissimus
Feb 16 2018 15:19
thank you, Roman, I will try
Roman Struna
@RomchyFCC
Feb 16 2018 15:20
np :thumbsup:
Marianissimus
@Marianissimus
Feb 16 2018 15:20
I want it like this: 1. on load, change positions and opacity according to middle point. 2. when in view, get back to initial positions and opacity 1
it kind of works - but not for the divs on the right.
Roman Struna
@RomchyFCC
Feb 16 2018 15:21
i might have a sollution for that, let me test this out
alexg1990
@alexg1990
Feb 16 2018 15:22
hey, can someone please take a look at my little codepen? Somehow "#index" shrinks to the size of "<nav>" when viewing inside of my browser, although in atom-preview it's shown correctly.
Furthermore, there seems to be some kind of invisible margin at the bottom part of my page because ".skillsets" are being moved out of the window
Roman Struna
@RomchyFCC
Feb 16 2018 15:32
@Marianissimus nope can't help you further, I almost rebuild the project, code looks nothing like it did when i looked at it
the only thing i have left to say is that, you might want to remove classes in the move in the view function
the else function above is enough and i was wrong earlier, you don't need to add a second if statement
@alexg1990 post your codepen :o
alexg1990
@alexg1990
Feb 16 2018 15:33

@RomchyFCC lol xD I actually figured out the first part, but the white boxes are still changing in size and vanishing from the screen although they should be a "%" of their parent: https://codepen.io/alexg1990/pen/zRPbjP

and their parten is seemingly not changing (also a % of their parent)

Marianissimus
@Marianissimus
Feb 16 2018 15:38
@RomchyFCC Thanks a lot. i am playing with it and I think the problem might be with my use of flex; I'll work on it
CamperBot
@camperbot
Feb 16 2018 15:38
marianissimus sends brownie points to @romchyfcc :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @romchyfcc |http://www.freecodecamp.org/romchyfcc
Roman Struna
@RomchyFCC
Feb 16 2018 15:39
@Marianissimus np, sorry i couldn't do more, good luck!
@alexg1990 you set both your skills height and width to VIEWPORT WIDTH, so the larger the view port the larger the boxes, siwtch to percent and they will behave as they should :)
alexg1990
@alexg1990
Feb 16 2018 15:40
@RomchyFCC I had them before as %, but will check again
@RomchyFCC switched height to 80% and they still overflow :/
Roman Struna
@RomchyFCC
Feb 16 2018 15:43
@alexg1990 thats because of the margin top, it pushes the content down. using a fixed value for height margins should do the trick
alexg1990
@alexg1990
Feb 16 2018 15:43
@RomchyFCC why isn't margin-top responsive with %?
shouldn't 10% still equal 10% even if I shrink it
Roman Struna
@RomchyFCC
Feb 16 2018 15:44
I honestly don't know, for some reason when i resize horizontaly it beefs up the margin % on height, i skimmed through entire code but couldn't find the reason why
it makes sense for width but not for height, unless i was to resize vertically
alexg1990
@alexg1990
Feb 16 2018 15:45
"Css".... but thank you!
@RomchyFCC thank you
Roman Struna
@RomchyFCC
Feb 16 2018 15:45
:D np, :thumbsup:
Darren
@DarrenfJ
Feb 16 2018 16:09
@khaduch doing ok.. busy with non code related stuff tbh
morning fC C :D
kartikv20
@kartikv20
Feb 16 2018 16:21
can someone help me with the wikipedia viewer project?
Arun Shah
@ameeno
Feb 16 2018 16:33
hey guys could someone please help me improve this:?
function findFavorite() {
    var tempArray = myMood;
    console.log(tempArray)
    var tempMax = tempArray.indexOf(Math.max.apply(Math, tempArray));
    console.log('')
    tempArray[myFavMax] = -1; // remove max from the array
    var temp2ndMax = tempArray.indexOf(Math.max.apply(Math, tempArray));

    console.log('1st Fav:' + myFavMax + '2nd Fav: ' + myFav2nd)
    myFavMax = tempMax;
    myFav2nd = temp2ndMax;
}
Roman Struna
@RomchyFCC
Feb 16 2018 17:24
@kartikv20 what do you need help with?
kartikv20
@kartikv20
Feb 16 2018 17:44
window.onload = function() {
  var x = document.getElementById("search").value;
  //document.getElementById("getResult").addEventListener('click', findResult);
  document.getElementById("getResult").addEventListener('click',findResult(x));
};


function findResult(x){

    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + x + "&format=json&callback=?";
    var myInit = {
        method: 'GET',
    }
    fetch(myUrl, myInit)
    .then(response=>response.json())
    .then(data=>{

    })


}
@RomchyFCC i have this now
im making a wikipedia viewer
using fetch API
how do i get the results?
i put the value of search box in x
now how do i use x to get results
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 17:45
@moT01 thanks
CamperBot
@camperbot
Feb 16 2018 17:45
muhammedkarim sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1002 | @mot01 |http://www.freecodecamp.org/mot01
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 17:45
@moT01 how did u make it over a thousand lool
kartikv20
@kartikv20
Feb 16 2018 17:47
um
where do i write that
im sorry im still kinda new
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 17:48
let me put that into my browser url bar :P @RomchyFCC
@MuhammedKarim :D
kartikv20
@kartikv20
Feb 16 2018 17:48
but then how is it going to take input
from search bar
Roman Struna
@RomchyFCC
Feb 16 2018 17:49
if you want the input you do this
variable = article.name
var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=15&generator=search&origin=*&gsrsearch="+variable
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 17:50
thats ur output :P
image.png
@RomchyFCC
Roman Struna
@RomchyFCC
Feb 16 2018 17:53
that's not even fair, Muhammed is one of the most popular names in the world :(
kartikv20
@kartikv20
Feb 16 2018 17:53
@MuhammedKarim its actually my doubt lol
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 17:53
@RomchyFCC not my fault :P
well the romans were like one of the greatest empires in history...
Roman Struna
@RomchyFCC
Feb 16 2018 17:54
well, ok thats true xD
@kartikv20 lool
@RomchyFCC ^
Roman Struna
@RomchyFCC
Feb 16 2018 17:57
hahah xD
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 17:58
btw, what exactly is all that that comes up? @RomchyFCC
Roman Struna
@RomchyFCC
Feb 16 2018 17:58
RomansWereAwesome, now it's just me xD
a bunch of wikipedia articles
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 17:58
yeah i tried that too, same amount of output
ohhh right
Roman Struna
@RomchyFCC
Feb 16 2018 17:58
the result is the same if you typed romansareawesome in the wikipedia search bar
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 17:59
ohhh ok cool, that makes sense?
*!
Would u like some brownies? :P @RomchyFCC thanks!
CamperBot
@camperbot
Feb 16 2018 17:59
muhammedkarim sends brownie points to @romchyfcc :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @romchyfcc |http://www.freecodecamp.org/romchyfcc
Roman Struna
@RomchyFCC
Feb 16 2018 17:59
@MuhammedKarim right back at ya ty :)
CamperBot
@camperbot
Feb 16 2018 17:59
romchyfcc sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:00
wait...ty even does it? i didnt know that @RomchyFCC
no...u must have done some hanky panky right there...
Roman Struna
@RomchyFCC
Feb 16 2018 18:01
:D
anything related to ty does it in my exp, thx ty thanks thank you, i dunno any others
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:02
dammit i didnt even know what hanky panky meant, sorry, i just googled it.... i thought it was something else coz of hearsay, sorry!
lool u could have tagged me in that message too ;) :P
Stephen James
@sjames1958gm
Feb 16 2018 18:03
Just put thanks in your name and every time someone references you you get brownies
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:04
ohhh thats a good idea :P
dammit my stomach is rumbling now i want brownies!!! @sjames1958gm
Joshua Dickinson
@joshuaallen36_twitter
Feb 16 2018 18:10
Can someone explain to me how to make a header with a nav bar? I'm on the portfolio project and I want to start with the nav bar but I can't figure out how to do it.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:23
Papa once provided me with this navbar for the portfolio project
<main>
  <header>
    <h1 class="title">Muhammed Karim</h1>
      <ul class="mynav">
        <li>Home</li>
        <li>About</li>
        <li>Projects</li>
        <li>Skills</li>
        <li>Education</li>
        <li>Contact</li>
        <li>CV</li>
      </ul>

  </header>
</main>
@joshuaallen36_twitter
and that's the css for it
main header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid black;
  color:lightgrey;
}
.mynav{
  display: flex;
  list-style: none;
}
.mynav li{
  padding-right: 3em; color:black;
}
damn its been a long time and im still not ready to continue with that project!
Joshua Dickinson
@joshuaallen36_twitter
Feb 16 2018 18:26
Lol, thanks. I'll give it a try in a few.
Roman Struna
@RomchyFCC
Feb 16 2018 18:27
maybe I should save that into one of my code dumps :D
nah jk, my navbar is gonna be the bomb once i do my portfolio properly :D
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:28
@RomchyFCC oh yeah? lets both make a navbar rn and we can see who does better. See im a newbie and ur a pro. Wanna go?
@joshuaallen36_twitter mention me when you say thanks so i can say you're welcome. and i think i just gave u a free brownie...
CamperBot
@camperbot
Feb 16 2018 18:29
muhammedkarim sends brownie points to @joshuaallen36_twitter :sparkles: :thumbsup: :sparkles:
api offline
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:32
<nav id="nav" class="navbar">
            <ul class="list">
                <li><a href="#about">Logo</a></li>
                <li><a class="at active" href="#about">About</a></li>
                <li><a class="pf" href="#portfolio">Portfolio</a></li>
                <li><a class="ct" href="#contact">Contact</a></li>
            </ul>
        </nav>
li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/* Navigation bar styles */
.navbar {
    top: 0;
    position: fixed;
    width: 100%;
    max-width: 960px;
    height: 80px;
    background: rgba(0,0,0,0.5);
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 0 0 10px 10px;

}

.navbar > ul {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-rows: 80px;
    align-items: center;
    justify-items: center;
    grid-gap: 10px;
    margin: 0 15px;
}

.navbar li:nth-child(2) {
    grid-column: 3/4;
}

.navbar a {
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 10px;
    border: 2px solid var(--color-white);
    border-radius: 5px;
}

.navbar a:hover {
    color: var(--color-sea);
    background: var(--color-white);
    text-decoration: underline;
}
For anyone who was wondering, that's romans navbar :P
Roman Struna
@RomchyFCC
Feb 16 2018 18:32
not even close hahaha
i'm not a pro and that will never be my navbar :D
thats a quick try while doing the fcc challenges :D
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:33
@RomchyFCC but it is now right?
ohhh sure lool
Roman Struna
@RomchyFCC
Feb 16 2018 18:33
cross my heart :) that portfolio is nowhere on the internet but my codepen and my github
buried deep so I can't look at it
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:33
so...where's ur real one eh?
Joshua Dickinson
@joshuaallen36_twitter
Feb 16 2018 18:33
@MuhammedKarim lol, thanks. Idk how anything in the chats here work. This is my first time in a chat on freecodecamp.
CamperBot
@camperbot
Feb 16 2018 18:33
joshuaallen36_twitter sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
Roman Struna
@RomchyFCC
Feb 16 2018 18:33
and be disgusted by the ugly colors
my real one will be made in about 1 month
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:34
@joshuaallen36_twitter im new here too lol, not as old as Rome
@RomchyFCC that's cool lol share it when ur done :)
Roman Struna
@RomchyFCC
Feb 16 2018 18:35
will do :) just gonna have to put the code under a lock and key it seems hahaha
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:36
dammit no u dont, i wont come peeking again ;) @RomchyFCC
Roman Struna
@RomchyFCC
Feb 16 2018 18:37
honestly i have no idea how that would even be possible
you can click inspect on every site
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 16 2018 18:37
exxxactly!
and viewing the source code gives everything away!
Roman Struna
@RomchyFCC
Feb 16 2018 18:38
xD
kartikv20
@kartikv20
Feb 16 2018 19:20
hello
    document.getElementById("getResult").addEventListener('click',()=>{
      var x = document.getElementById("search").value;
      findResult(x);

  });


$(document).ready(function(){

function findResult(x){

    var myUrl = "https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=10&generator=search&origin=*&gsrsearch="+x;
    $.getJSON(myUrl, data=>{
        console.log(data.query);
        //$(#search).val("");
        var results = data.query.search;
        results.forEach(function(elem){
            console.log("LOOP");
            var link = "https://en.wikipedia.org/wiki/" + elem.title;
            var text = elem.title;
            var div = document.createElement('div');
            var theLink = document.createElement('a');
            theLink.href=link;
            theLink.innerHTML=elem.title;
            div.className+="entryDiv";
            div.appendChild(theLink);
            $("searchResults").append(div);
        })

    });
}
});
its saying findResult is not defined
why so?
Tom
@moT01
Feb 16 2018 19:36
cause its within the doc.ready
i think anyway - try putting the click in the doc.ready, or removing it all together
@kartikv20
Stephen James
@sjames1958gm
Feb 16 2018 20:09
@kartikv20 You need to have the code at the top inside the document.ready - or the element might not be loaded when the code runs to add the click event listener
Markus Kiili
@Masd925
Feb 16 2018 20:20
@kartikv20 That would also solve scope problems with findResult function.
Darren
@DarrenfJ
Feb 16 2018 21:12
thanks for the links brutha! @RomchyFCC
CamperBot
@camperbot
Feb 16 2018 21:12
darrenfj sends brownie points to @romchyfcc :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @romchyfcc |http://www.freecodecamp.org/romchyfcc
Tiago Correia
@tiagocorreiaalmeida
Feb 16 2018 21:14
const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header />
            <Switch>
                <Route path="/" component={DashboardPage} exact={true} />
                <LoggedRouter
                    path="/myposts"
                    component={MyPostsPage}
                    exact={true}
                />
                <LoggedRouter
                    path="/addpost"
                    component={AddPostPage}
                    exact={true}
                />
                <LoggedRouter path="/edit/:id" component={EditPostPage} />
                <LoggedRouter
                    path="/profile"
                    component={ProfilePage}
                    exact={true}
                />
            </Switch>
        </div>
    </BrowserRouter>
);
any idea why every single route works less this one <LoggedRouter path="/edit/:id" component={EditPostPage} /> ?
Tiago Correia
@tiagocorreiaalmeida
Feb 16 2018 21:21
nm got the issue, always the same :D
Adetayo Timilehin
@Sprimage
Feb 16 2018 21:46
Hello
I need help
I know this isn't probably the right room to post but I have a Java program I'm trying to compile and run on my Linux system
Can anybody help?
Gulsvi
@gulsvi
Feb 16 2018 22:50
@KWFE Did you have a question about that challenge?