These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Aug 2017
Janelle deMent
@janelledement
Aug 07 2017 00:07
@taiomori thanks max! sorry I!
CamperBot
@camperbot
Aug 07 2017 00:07
janelledement sends brownie points to @taiomori :sparkles: :thumbsup: :sparkles:
:cookie: 17 | @taiomori |http://www.freecodecamp.com/taiomori
Janelle deMent
@janelledement
Aug 07 2017 00:08
@taiomori little distracted and forgetful at the moment
Max
@taiomori
Aug 07 2017 00:09
😷
aRtoo
@artoodeeto
Aug 07 2017 00:24
@gothamknight bro you didnt create a 2 forloop?
iso
@iso1048
Aug 07 2017 00:27
@artoodeeto yeah i used 2 for-loops...
aRtoo
@artoodeeto
Aug 07 2017 00:32
@gothamknight bro you mean like this in the Object.keys? console.log(Object.keys(collection[0]));
iso
@iso1048
Aug 07 2017 00:33
@artoodeeto nah bro. first i created the array of object keys (var x = Object.keys(source)), then use 2 for loops...
aRtoo
@artoodeeto
Aug 07 2017 00:35
@gothamknight then you compare the keys to the 1st parameter
??
Codifurus
@Codifurus
Aug 07 2017 00:48
does anyone have any tips on getting an element centered? ive been trying for about 3 days and everything I have going just centers the div horizontally on the page. ive tried a few things but it never centers vertically on the page
Gulsvi
@gulsvi
Aug 07 2017 00:51
@Codifurus vertical centering can be hard - sometimes depends on the rest of your HTML and CSS. can you share your code?
korzo
@korzo
Aug 07 2017 00:51
@Codifurus Vertical centering is complicated topic and depends on situation. Post link to your pen
@SkyC0der lol, could you stop copying my messages and posting them before me? :)
Gulsvi
@gulsvi
Aug 07 2017 00:53
haha :)
Codifurus
@Codifurus
Aug 07 2017 00:54
Thanks for taking a look! https://codepen.io/brewercodym/pen/dzNmJE
in codepen i guess it looks centered vertically. when i load the html in my browser it just shows up at the top of the page
korzo
@korzo
Aug 07 2017 00:57

@Codifurus In this situation you can use

.jumbotron.centered {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

and assign some width to it;

Marin
@MarinBegovic
Aug 07 2017 01:00
hi,is anyone willing to try to help me 1 on 1
i have a strange bug of momentarily appering border when scrolling
cant find the issue,willing to share files in private message
Codifurus
@Codifurus
Aug 07 2017 01:00
that doesn’t seem to change its vertical position its like a cursed project for me lol
Gulsvi
@gulsvi
Aug 07 2017 01:00
@Codifurus And for another option :)
.container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
^^ Ideally, use a class instead of applying that to all containers on your page, and adding more HTML or CSS down the road may require an alternate approach
Codifurus
@Codifurus
Aug 07 2017 01:01
that worked in the codepen but not when i put it in sublime and load into chrome which is a bit odd ha. ill have disect that a little but more. that should put me on the right path though. Thanks!
iso
@iso1048
Aug 07 2017 01:03
@artoodeeto yeah, loop through the keys and collections to compare each key to the collections...
aRtoo
@artoodeeto
Aug 07 2017 01:04
@gothamknight bro it doesnt work. i swear

@gothamknight bro you cant loop on the inside the Object

whatIsInAName([{ first: "Romeo", last: "Montague" }, 
              { first: "Mercutio", last: null }, 
              { first: "Tybalt", last: "Capulet" }], 
              { last: "Capulet" });

you cant loop on the { first: "Tybalt", last: "Capulet" } becaue its an Object bro

Gulsvi
@gulsvi
Aug 07 2017 01:10
@artoodeeto a for...in loop is one of many ways to loop through an object:
var myObj = { 
  first: "Romeo",
  second: "artoo",
  third: "deetoo",
  fourth: "bro",
  fifth: "sir",
  sixth: "ma'am",
  seventh: "cuz",
  last: "Montague" 
}
for(var property in myObj) {
  console.log(property); // lists each property
  console.log(myObj[property]) // lists each property value
}
aRtoo
@artoodeeto
Aug 07 2017 01:11
var in??
@SkyC0der this is new
Gulsvi
@gulsvi
Aug 07 2017 01:12
for...in loops are from JavaScript 1.0
old school :) I think for...of loops are the new ones
aRtoo
@artoodeeto
Aug 07 2017 01:13
@SkyC0der damn aight im gonna try this bro
iso
@iso1048
Aug 07 2017 01:15
@artoodeeto if (collection[i][keys[j]] == source[keys[j]])
collection is an array of objects, so collection[i] loops through each object. collection[i][keys[j]] is looking at a given object in collections to see if it contains a key which is also in the array assigned to the keys variable (in my code, var keys = Object.keys(source);).
i guess i cannot explain it very well
@SkyC0der you and your tricks
Gulsvi
@gulsvi
Aug 07 2017 01:16
I haven't thought about how to solve that with two loops @gothamknight
I guess I used two loops on mine, but it was a .filter() and .every()
And I used object.keys
var myObj = { 
  first: "Romeo",
  second: "artoo",
  third: "deetoo",
  fourth: "bro",
  fifth: "sir",
  sixth: "ma'am",
  seventh: "cuz",
  last: "Montague" 
}

Object.keys(myObj).forEach(function(property) {
  console.log(property) // first, second, third, fourth, etc...., last
})
aRtoo
@artoodeeto
Aug 07 2017 01:27
@gothamknight bro why is it when i console.log(collection[0][keys[1]]); it says keys undifined
iso
@iso1048
Aug 07 2017 01:35
@artoodeeto can you paste all your code?
aRtoo
@artoodeeto
Aug 07 2017 01:36
@gothamknight bro i deleted it. it was all console.log im trying to figure out how to get the keys
iso
@iso1048
Aug 07 2017 01:37
@artoodeeto perhaps for that test, there was only 1 key...? Cant say without seeing the whole code bro
aRtoo
@artoodeeto
Aug 07 2017 01:38
@gothamknight wait bro im gonna paste it. thanks bro
CamperBot
@camperbot
Aug 07 2017 01:38
artoodeeto sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @gothamknight |http://www.freecodecamp.com/gothamknight
iso
@iso1048
Aug 07 2017 01:38
sure bro
aRtoo
@artoodeeto
Aug 07 2017 01:42

@gothamknight


function whatIsInAName(collection, source) {
  var arr = [];
   var arrObj = Object.keys(source);

    for(var i=0; i<collection.length; i++){
      //for(var c=0; c<collection[i].length; c++){
      console.log(source.last);
        //}
    }

    /*
      get the source property source.last...... but how to change the last or key????
    */



  return arr;
}

this my shit bro

iso
@iso1048
Aug 07 2017 01:46
for the second loop, you want to be looping though arrObj so that each key (element) in arrObj is being tested to see if the key-value pair is in collection[i]... @artoodeeto
Adam Bohannon
@abohannon
Aug 07 2017 02:00
Can anyone help me figure out how to make the click events on my simon game work on touch screens/mobile? I've tried changing all my click events to 'touchstart' to test if it works and it doesn't. I then added this function to detect if it's a touch device and to execute a touchstart function if it === 1, else do the regular click event - nothing.
function is_touch_device() {
  return 'ontouchstart' in window  ||      // works on most browsers
          navigator.maxTouchPoints;       // works on IE10/11 and Surface
}
Gulsvi
@gulsvi
Aug 07 2017 02:02
@abohannon What isn't working on mobile?
I know that those .mp3 files do not cache well and often fail on mobile, so you get no sound
Gulsvi
@gulsvi
Aug 07 2017 02:03
But your click events should work fine, colors should light up, etc
Adam Bohannon
@abohannon
Aug 07 2017 02:03
there's 0 functionality on my iphone 6, safari
Gulsvi
@gulsvi
Aug 07 2017 02:03
I'm not on mobile at the moment
Adam Bohannon
@abohannon
Aug 07 2017 02:03
cant turn the game on
Gulsvi
@gulsvi
Aug 07 2017 02:04
That's tough....you could create a "console" in your HTML and log errors there since debugging on an iPhone is pretty hard
Adam Bohannon
@abohannon
Aug 07 2017 02:06
yea its weird
aRtoo
@artoodeeto
Aug 07 2017 02:22
@gothamknight m gonna try bro
Andrew Horn
@sophyphreak
Aug 07 2017 02:33
Hey so I'm having trouble getting stuff out of a calls to the json in the Twitch JSON challenge. Can someone help out? Thanks! https://codepen.io/sophyphreak/pen/dzNoxw?editors=0011
also, fyi, using react
Sorin Ruse
@sorinr
Aug 07 2017 02:38

@sophyphreak you need to have something like:

     axios.get(axiosUrl)
      .then(res => {
        obj = "true";
        return (res)
        // if(res.data.stream) {
        //   obj = 'true';
        // } else {
        //   obj = 'false';
        // };
      }).then(res => {
        console.log(res.data);
      })
      .catch(error => {
        console.log(error);
      });
      console.log(obj);
    });

when using promises

lfvpCO
@lfvpCO
Aug 07 2017 02:39
hello guys
I have to center a img inside a jumbotron.. how can I do it?
Sorin Ruse
@sorinr
Aug 07 2017 02:39
@sophyphreak then you should place the if in the second .then clause
Andrew Horn
@sophyphreak
Aug 07 2017 02:42
So I can't nest if/then statements inside is what you're saying?
Actually, I don't think I understand. Sorry
My chief problem is that I can tell that the right data is coming in because the console.log within the axios.get works, but I can't seem to get the jsons out of it
They often come back as "undefined" or just nothing
@sorinr
iso
@iso1048
Aug 07 2017 02:50
@lfvpCO you could: set the text-align property of jumbotron container as center; give the img a width and then margin: auto;; put the img within a div, then add text-align: center; for that div...
hopefully they work.
lfvpCO
@lfvpCO
Aug 07 2017 02:51
cool
Sorin Ruse
@sorinr
Aug 07 2017 03:14
@sophyphreak this is what you want to achive?
Andrew Horn
@sophyphreak
Aug 07 2017 03:27
I mean, that's awesome, but no. I can console.log from inside axios.get until the dogs come home, but I can't seem to send a variable out of axios to be used by the rest of the program @sorinr
Basically, i need to have on the other side an array of outputs, which I can't seem to get
Sorin Ruse
@sorinr
Aug 07 2017 03:31
@sophyphreak i do not do much of react but it seems that you need to populate the jsons array you declare under the state
Andrew Horn
@sophyphreak
Aug 07 2017 03:43
That was what I tried originally. I can recreate it if you want to see. I just doesn't seem to stick
Azam Abidjanov
@Azamabidjanov
Aug 07 2017 03:48
Hi All. I am working on the quote machine project now and I have one question.
How do you find a JSON file URL for any website address?
Any help is appreciated. Thank you.
Andrew Horn
@sophyphreak
Aug 07 2017 03:50
@sorinr Ah, I remember why I didn't do this. It was because for some reason it make the program stop working https://codepen.io/sophyphreak/pen/dzNoxw?editors=0011
heroiczero
@heroiczero
Aug 07 2017 04:01
@Azamabidjanov you can use https://quotesondesign.com/the-api/ to get random quotes. or you could use any quote getting api, but remember codepen only accepts https:// not http:// links.
Azam Abidjanov
@Azamabidjanov
Aug 07 2017 04:06
@heroiczero
Thank you for the response. I actually thought we were supposed to find a website with quotes, retrieve a JSON file from that website and then work with that. Am I doing something wrong?
CamperBot
@camperbot
Aug 07 2017 04:06
azamabidjanov sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1582 | @heroiczero |http://www.freecodecamp.com/heroiczero
heroiczero
@heroiczero
Aug 07 2017 04:10
@Azamabidjanov you can also make your own list of quotes in an array and use random numbers to retrieve the quote
Azam Abidjanov
@Azamabidjanov
Aug 07 2017 04:15
@heroiczero
What my original idea was that I get a JSON file with an array of objects and get a quote at a random index of that array.
heroiczero
@heroiczero
Aug 07 2017 04:16
@Azamabidjanov you could do that, or you could just retrieve another quote directly from the site by just calling it again when you press a button
Azam Abidjanov
@Azamabidjanov
Aug 07 2017 04:17
So that was my original question. How do I get a JSON file from any URL. Lets say I want to get a JSON file from this: https://litemind.com/best-famous-quotes/
heroiczero
@heroiczero
Aug 07 2017 04:19
@Azamabidjanov you can't get a JSON from all url. you can only get JSON from APIs that allow JSON format
Azam Abidjanov
@Azamabidjanov
Aug 07 2017 04:21
@heroiczero
Alright. I guess my understanding of the subject is very limited right now. I better go research API then. Thanks a lot!
CamperBot
@camperbot
Aug 07 2017 04:21
azamabidjanov sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:warning: azamabidjanov already gave heroiczero points
Lallo Vigil
@lalov1
Aug 07 2017 04:49
What's the best way to lighten the colors for the Simon game? I was using the style.opacity, but it lightens everything including the border? https://codepen.io/lalov1/pen/MvgvxY?editors=0010
heroiczero
@heroiczero
Aug 07 2017 04:50
@lalov1 you can use a color pallet to change color something like https://www.w3schools.com/colors/colors_picker.asp
Ken Haduch
@khaduch
Aug 07 2017 05:23

@sophyphreak - I'm not a react expert (still struggling to get the hang of how it works), so I cannot really get this all working the way that it should be working. But I think that I came up with a way to save the list of user data in your state value such that you have an object that is keyed by username and has a value that is the "streams" for each user. I don't know if it will help you - I'd be curious to see how this progresses. But I made two basic changes - the state for the TwitchList I've modified thusly:

    this.state = {
      jsons: {}
    };

And in the populateJsons method, I changed the code in the .then() function to extract some data and store it in the state - with a lot of console output to show the state as it develops.

     axios.get(axiosUrl)
      .then(res => {
        let val = res.data.stream;
        let user = res.data["_links"].self.split('/').pop();
        let jsonstate = this.state.jsons;
        jsonstate[user] = val;
        this.setState({jsons: jsonstate});
        console.log(`here is the state: ${JSON.stringify(this.state.jsons)}`)
      })

Not sure if that will help you make progress. I don't know how to render that output that is being built up from asynchronous AJAX requests out to the DOM? Maybe it's a start?

DavidLan777
@DavidLan777
Aug 07 2017 07:28
Hello to all
how could I move on with Basic Front End Development projects
I am so confused on the step of Build a Tribute Page
Anyone could give some hint? Thanks
iso
@iso1048
Aug 07 2017 07:37
@DavidLan777 just try and make a start. Maybe start with a div element and put a heading in it. try and break down the project into small steps e.g. make a centered heading. insert an image. put text underneath the image... You will make mistakes but that is great because it will help you learn. When you get stuck, go back to the challenges to see if you forgot something, otherwise ask on here. Have you chosen a person to make the tribute page about?
Roberto Di Lillo
@koop4
Aug 07 2017 08:33
Hi, I'm having an hard time to risolve a issue
i made a weather app: https://koop4.github.io/meteo/
i realized that sometimes the body doesn't extend is height enough
to reproduce the problem, simply add text to any paragraph untill they overlay
is anyone able to understand how to fix that?
actually, i made a codepen to show the issue
https://codepen.io/Koop4/pen/jLqJBe
Andrew Horn
@sophyphreak
Aug 07 2017 08:44
Hey, I'm doing the Twitch JSON project. Codepen keeps giving me an error regarding the return just below render(). There must be some syntax problem in the previous method to cause this, but I don't see it. Can you take a look? Thanks.
 renderTwitches() {
    return this.state.jsons.slice(1).map((json, index) => {
      return <Twitch json={json} name={this.twitches[index]}>;
    });
  };

  render() {
    return (
      <div>
        {this.renderTwitches()}
      </div>
    );
  }
@khaduch, just saw your reply. Thanks so much for the help! I got it working another way, but you definitely help me to better understand the problem, so thanks!
CamperBot
@camperbot
Aug 07 2017 08:46
sophyphreak sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3183 | @khaduch |http://www.freecodecamp.com/khaduch
Andrew Horn
@sophyphreak
Aug 07 2017 08:47
@Masd925 , it's creating a Twitch React Component
Markus Kiili
@Masd925
Aug 07 2017 08:47
@sophyphreak Yeah, just figured that it was React.
Andrew Horn
@sophyphreak
Aug 07 2017 08:47
The class for that is below this code. I doesn't seem to be part of the direct problem though
@Masd925 , gotcha
Oh, and the specific error I'm getting is Unexpected token return. The render()method is not colored correctly in CodePen (and neither is the following component). As well, when I empty out the contents of renderTwitches() and replace it with return 1; it responds as expected. So the problem must be in renderTwitches()
Andrew Horn
@sophyphreak
Aug 07 2017 08:55
hah, I think I found the problem. <Twitch json={json} name={this.twitches[index]}> is lacking its /, so it should be <Twitch json={json} name={this.twitches[index]}/>. The colors are now correct. I don't have enough code to do a proper test, but I no longer have the weird error coming up, so I think it's solved.
Bartosz
@CataciD
Aug 07 2017 09:39
@sophyphreak well yeah, treat components like any html element. They either need to be selfclosed or closed <element></element> (access to children)
Fernando
@lestairon
Aug 07 2017 09:58
Hi guys, i need some help with my banner buttons, i want then to be clickable but i don't know how to do that
https://codepen.io/Lestairon/pen/JJVRVx
Amit Patel
@AmitP88
Aug 07 2017 09:59
hey guys, this might be a dumb question, but, is it bad if I can't solve algorithms on my own without looking up hints? I'll often be thinking of a possible solution and get stuck in terms of what the next step should be (kinda like writers' block).
Oleh
@Lufter
Aug 07 2017 10:00
@AmitP88 try to visualize it on paper, it might help you (it does for me)
Amit Patel
@AmitP88
Aug 07 2017 10:01
@Lufter ah ok, you might like try pseudocoding it first?
Oleh
@Lufter
Aug 07 2017 10:02
@AmitP88 yes
Amit Patel
@AmitP88
Aug 07 2017 10:02
@Lufter ok, i'll give it a shot. thank you :)
CamperBot
@camperbot
Aug 07 2017 10:02
amitp88 sends brownie points to @lufter :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @lufter |http://www.freecodecamp.com/lufter
vardhamanvb
@vardhamanvb
Aug 07 2017 10:02
@vardhamanvb
I am applying class using jquery to a div. class which I want to add is usrAvailable. It is getting added but style is not applied. And if I change the class to usravailable while inspecting element style is getting applied. both in there is class name as usrAvailable. please help
@vardhamanvb
https://codepen.io/anon/pen/WERLmY
Its working on codepen and firefox but not on chrome
Darth Skywalker
@AdiSkywalker
Aug 07 2017 10:04
@vardhamanvb To ensure you don't run into such issues, make it a habit to put all your application logic inside .ready function like
$(document).ready(function(){
  $("#link").click(function(){
    $("#div").removeClass("usrUnreachable").addClass("usrAvailable");  
  });
});
can someone help
Oleh
@Lufter
Aug 07 2017 10:06
@AmitP88 goodluck ;)
Henry Cavendish
@HenryCavendish
Aug 07 2017 10:06
i don't understand the objective here
I have followed with ease up to now
but this seems rather confusing
Bartosz
@CataciD
Aug 07 2017 10:07
wait why wouldn't it work on chrome?
vardhamanvb
@vardhamanvb
Aug 07 2017 10:07
@AdiSkywalker
In my application I used this code inside $(document).ready(function(){})
Bartosz
@CataciD
Aug 07 2017 10:08
then do the same in codepen
vardhamanvb
@vardhamanvb
Aug 07 2017 10:08
hahaha
Henry Cavendish
@HenryCavendish
Aug 07 2017 10:08
can anyone provide me the right code?
please
Bartosz
@CataciD
Aug 07 2017 10:09
so on click the background turns a red gradient
anything else supposed to happen?
vardhamanvb
@vardhamanvb
Aug 07 2017 10:09
no
only on click the background turns a red gradient
Oleh
@Lufter
Aug 07 2017 10:10
@HenryCavendish write me in private
Bartosz
@CataciD
Aug 07 2017 10:10
yes, on click it turns into a gradient
anything else then? whats the problem?
vardhamanvb
@vardhamanvb
Aug 07 2017 10:11
it works proper on codepen, but not in my application
I can't share my application It is commercial property of my company not mine
Bartosz
@CataciD
Aug 07 2017 10:12
ok lets do the "call support line"
did you inport the script files into the html?
and the css?
vardhamanvb
@vardhamanvb
Aug 07 2017 10:12
yes, all script files imported , and there is no deppendency left
I just wanted to know , Is Google chrome treats class names as case sensitive?
Bartosz
@CataciD
Aug 07 2017 10:15
javascript treats class names case sensitive
also classes in html by default should not be Cased
theres a reason they're name-name
not nameName
im not sure but in some environments html classes written in like-this mean likeThis in js
by definition i don't capitilize html classes
vardhamanvb
@vardhamanvb
Aug 07 2017 10:18
image.png
I am suppese to apply "usrAvalilable" class
Bartosz
@CataciD
Aug 07 2017 10:19
in that case always capitalize the same way
is there a reason not to?
afaik js differentiates
vardhamanvb
@vardhamanvb
Aug 07 2017 10:19
image.png
Bartosz
@CataciD
Aug 07 2017 10:19
see
two different classes
usravailable and usrAvailable
vardhamanvb
@vardhamanvb
Aug 07 2017 10:20
image.png
@CataciD Now I have applied usravailble but the actual class which is applied is usrAvailable
Bartosz
@CataciD
Aug 07 2017 10:21
also are you using typescript?
or something?
vardhamanvb
@vardhamanvb
Aug 07 2017 10:22
no, only jqury
Bartosz
@CataciD
Aug 07 2017 10:22
then why the :void() ?
javascript doesn't need to specify what it returns
as in no one does that i think
vardhamanvb
@vardhamanvb
Aug 07 2017 10:22
image.png
Bartosz
@CataciD
Aug 07 2017 10:23
so what's the problem here exactly?
Markus Kiili
@Masd925
Aug 07 2017 10:53
@CataciD void there is just for getting value undefined.
Bartosz
@CataciD
Aug 07 2017 10:54
js returns undefined always
if its not specified to return something specific
Markus Kiili
@Masd925
Aug 07 2017 11:02
@CataciD That is correct, but there is no function here. void is an operator that evaluates an expression and always returns undefined. void(0) is sometimes used for getting value undefined, because the global window.undefined could be overwritten by some code. Here href="javascript:void(0)" means to stay on the same page.
It is also used with IIFEs so you can force JS to treat a line as a function expression and not as a declaration void function iife {...}();. Same could be done with some parentheses.
Bartosz
@CataciD
Aug 07 2017 11:07
so it's basically used here to make a link stay where it is?
couldn't you just leave it empty? or set it to #?
wouldn't empty return undefined by default
if so then why define href at all?
im not a pro so don't understand this tbh and it feels redundant
Markus Kiili
@Masd925
Aug 07 2017 11:08
@CataciD That is an old way. It prevents the page from refreshing on click. I think # does the same.
Bartosz
@CataciD
Aug 07 2017 11:09
yes but a <a> with no href would do the same?
and again why use <a> at all?
you can use css / js to make it "linklike"
or buttonlike without the actuall link lul
also the void way is the old way?
just making sure
and yeah i know that () in the same line executes on read as in assignes value of hte function not the function itsself
Markus Kiili
@Masd925
Aug 07 2017 11:13
@CataciD It seems that with # the page does refresh. Instead of href="javascript:void(0)" one can use onclick="event.preventDefault();" or onclick="return false;". Not sure if missing href works too.
Bartosz
@CataciD
Aug 07 2017 11:13
yeah i know both the prevent default would work
but as I said, why use a link if it's not linking anywhere ;D
Markus Kiili
@Masd925
Aug 07 2017 11:14
@CataciD Hard to say where you need such links, yes.
Bartosz
@CataciD
Aug 07 2017 11:14
seems really confusing
i myself dont like links, unless im just redirecting
most cases i just make divs with onclick and css that makes cursor a pointer etc
maybe someone wanted to use <a> as a button since it's predefined in a style or smth
Long Nguyen
@longnt80
Aug 07 2017 11:16
there's the button tag for... buttons
Bartosz
@CataciD
Aug 07 2017 11:18
i hate button tags :^)
they force behavior
i like to have things my own way as im a graphic designer also ;)
but true, you can use button tags and remake shit
but imagine im trying to make tiles like in a touchscreen app
if i use buttons then i have to remove all the shading onclicks etc
and i dont think it matters much in SEO
might be mistaken tho
Long Nguyen
@longnt80
Aug 07 2017 11:21
@CataciD when I made my SImon Game, I had trouble using div as buttons
and button tag helped to eliminate the issue
Bartosz
@CataciD
Aug 07 2017 11:24
then you need to brush up on css
here ya go, no buttons :^)
only "button" class
tho i made this a loooooong time ago
Long Nguyen
@longnt80
Aug 07 2017 11:26
@CataciD I used Web Audio API, and mouseenter, mouseout event so div gave weird behavior with click and drag
Bartosz
@CataciD
Aug 07 2017 11:27
why the hell would you mouseneter
;D
why not onclicks?
or smth
Long Nguyen
@longnt80
Aug 07 2017 11:27
I used Web Audio API,
Bartosz
@CataciD
Aug 07 2017 11:27
yeah, it needs mouse enter?
makes no sence
mouse enter means "hover mouse over something"
Long Nguyen
@longnt80
Aug 07 2017 11:28
yeah, you can make the sound goes as long as you hold the mouse
Bartosz
@CataciD
Aug 07 2017 11:28
you dont want that LUL
then you want mousedown
Long Nguyen
@longnt80
Aug 07 2017 11:28
yes mousedown, my bad
Bartosz
@CataciD
Aug 07 2017 11:28
so you check if mousedown & !mouseleave
or something like that
play sound as long as you have the mouse pressed down and its not outside
Long Nguyen
@longnt80
Aug 07 2017 11:29
yeah, div would give problem with click and drag
messed up my audio
Bartosz
@CataciD
Aug 07 2017 11:29
well with a proper div border
and at least two conditions should've worked
but i havent used the api so i cant say
Bartosz
@CataciD
Aug 07 2017 11:30
well it still plays if you go out
as in click anddrag
should stop afaik
Long Nguyen
@longnt80
Aug 07 2017 11:30
@CataciD actually, it happened to all the example using div as button for Web Audio API
Bartosz
@CataciD
Aug 07 2017 11:31
hummm]
Long Nguyen
@longnt80
Aug 07 2017 11:31
but the button tag fixed it
I just wanted to say that the button tag can help sometimes
Bartosz
@CataciD
Aug 07 2017 11:35
of course it will :D
never said it wont
right tools for the right tasks
Long Nguyen
@longnt80
Aug 07 2017 11:36
are you full stack?
Martialis39
@Martialis39
Aug 07 2017 11:43
this is somewhat related
but can anyone recommend a good hosting provider for a beginner looking to try it out? maybe make a blog or something
Bartosz
@CataciD
Aug 07 2017 11:44
nope
not yet at least
im more front end because of my design education really
but i love all things code
id say ovh
dont go for free shit
Long Nguyen
@longnt80
Aug 07 2017 11:44
@CataciD so you're a designer first then learning coding
Bartosz
@CataciD
Aug 07 2017 11:44
get eitehr a cheep vpn server or smth
aye
learning for a while
i mean i gota grip on it
im going to start looking for related full time work end of this year
Long Nguyen
@longnt80
Aug 07 2017 11:45
@Martialis39 if you're making static website only, you can try github, it's free and it's great
Bartosz
@CataciD
Aug 07 2017 11:45
aye
you got any advice long?
:D
Long Nguyen
@longnt80
Aug 07 2017 11:46
@CataciD cool man, good luck with your job search
I have nothing much to give you man
Martialis39
@Martialis39
Aug 07 2017 11:46
@longnt80 Im actually looking to maybe
Long Nguyen
@longnt80
Aug 07 2017 11:46
just keep going I guess
Martialis39
@Martialis39
Aug 07 2017 11:46
try out stuff like Webpack etc
can I / Do I need to use tech like that with github?
granted I dont even really know what i would need webpack for :D
Long Nguyen
@longnt80
Aug 07 2017 11:47
what is webpack, I heard but never take a look ?
:D
Bartosz
@CataciD
Aug 07 2017 11:47
you dont really need webpack
unless you're doing shit that requires it afaik
Long Nguyen
@longnt80
Aug 07 2017 11:49
I guess webpack is for development only?
@Martialis39
Martialis39
@Martialis39
Aug 07 2017 11:50
yeah I just want to know what it is
so im looking at it a bit
Long Nguyen
@longnt80
Aug 07 2017 11:51
@Martialis39 yeah, I just googled it
so it sounds like Gulp
just development task runner, got nothing to do with hosting I guess
so for now just use Github to host your websites
Martialis39
@Martialis39
Aug 07 2017 11:53
Thing is I would like to experience how
task runners work with hosting
Long Nguyen
@longnt80
Aug 07 2017 11:53
it does?
Martialis39
@Martialis39
Aug 07 2017 11:53
well that the thing I want to learn :D
if it does or not
Long Nguyen
@longnt80
Aug 07 2017 11:53
I thought they were just working your files and you uploaded your files to your host
there's no database involved
ok, if you don't know what task runners do, just use github
don't worry
if you just want to practice, you don't even need a host, only your computer
Martialis39
@Martialis39
Aug 07 2017 11:56
ok, perfect : )
Bartosz
@CataciD
Aug 07 2017 11:59
aye
and if you're gonna start ract or something involving webpack
you can run a local server with it
and its fabulous because it selfrefreshes on change :D
Martialis39
@Martialis39
Aug 07 2017 12:09
one more question,
do you have any recommendations for an intermediate level front end dev?
something beyond a simple landing site?
Bartosz
@CataciD
Aug 07 2017 12:11
full on fcc
making this a bit more complex than landing sites
Martialis39
@Martialis39
Aug 07 2017 12:17
full on fcc?
Ive done the front end part
the other projects are a bit
aimless
Bartosz
@CataciD
Aug 07 2017 12:19
did you make all the projects?
all the games etc?
Martialis39
@Martialis39
Aug 07 2017 12:32
yup!
I am only missing some advanced algorithms
but i need a goal to practice my html and CSS
this is something i made recently https://martialis39.github.io/lander-v2/
Zerka1982
@Zerka1982
Aug 07 2017 12:41
sorry didn\t mean the image ...
my question is how can I display those images and texts as they are but without having a margin from both sides Right and Left _
Can you please check my code and tell me , what I\m doing wrong !!!!
Bartosz
@CataciD
Aug 07 2017 12:44
are you familiar with flex?
Zerka1982
@Zerka1982
Aug 07 2017 12:44
not that much ...
Bartosz
@CataciD
Aug 07 2017 12:45
you would reeaaaaly like it
in simple terms
you have a container with a display of flex
pictures inside of it
give the container css of display:flex;
then justify-content:space-around:
Amit Patel
@AmitP88
Aug 07 2017 12:45

hey guys, I'm trying to solve the Find the Longest Word in a String challenge. here's my solution so far:


function findLongestWord(str) {

  str = str.split(' ');

  for (i = 0; i < str.length; i++) {
    return str[i].length;
  }

//   return str[0].length;
}

findLongestWord("The quick brown fox jumped over the lazy dog");

I can't think of what's wrong with my code. What am I missing?

Bartosz
@CataciD
Aug 07 2017 12:45
and it will be evenly spaced in the whole container
and adjust distances to the changes of the container
you can also add "flex-wrap:wrap" which will make your objects wrap into rows if they're too big to fit in one
and with justify-content:space-around it will be always in the center spaced evenly
korzo
@korzo
Aug 07 2017 12:46
@AmitP88 you return length of first word, because return at first iteration
Bartosz
@CataciD
Aug 07 2017 12:46
or you can do space-between and center
Zerka1982
@Zerka1982
Aug 07 2017 12:47
Oh Bartosz , what you say is good
Bartosz
@CataciD
Aug 07 2017 12:47
yep,
i ditched bootstrap for flexbox
there's even a free online course for it from wesbos
korzo
@korzo
Aug 07 2017 12:47
@AmitP88 You have to store longest word in some variable and in the loop compare it with current item
here ya go
Zerka1982
@Zerka1982
Aug 07 2017 12:47
I understand what you mean, I will give it a try with flexbox
thank you !
Amit Patel
@AmitP88
Aug 07 2017 12:47
@korzo ah I see. ok, let me hack at it some more. thanks for the direction :)
CamperBot
@camperbot
Aug 07 2017 12:47
amitp88 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
korzo
@korzo
Aug 07 2017 12:47
@AmitP88 after the loop, return value from variable
CamperBot
@camperbot
Aug 07 2017 12:47
:cookie: 350 | @korzo |http://www.freecodecamp.com/korzo
Bartosz
@CataciD
Aug 07 2017 12:48
@AmitP88 you're literally returning every string
as in "return first string at i=0"
which ends the function
what you want to do is check all the words
make longest the first word
then on every other compare it to the currently iterated one
if the one is longer, replace it
etc
or you can use array.reduce
which would also work incely
Amit Patel
@AmitP88
Aug 07 2017 12:49
@CataciD I see. yeah, that makes sense. let me see if I can code it
korzo
@korzo
Aug 07 2017 12:49
@AmitP88 And if you want to do it smart way, use Array.prototype.reduce
Bartosz
@CataciD
Aug 07 2017 12:50
as in thearray.reduce
lol
dont overcomplicate
Amit Patel
@AmitP88
Aug 07 2017 12:50
@korzo I'll look into that. I remember reading reading about the reduce method
Bartosz
@CataciD
Aug 07 2017 12:50
next thing you know youll have to explain what a prototype is xD
korzo
@korzo
Aug 07 2017 12:57
@CataciD It was reference to method's official name, not suggestion to use prototype.
The same way is method mentioned in challenge description
Zerka1982
@Zerka1982
Aug 07 2017 13:32
@CataciD dude are you there ?
it seems like a challenge to make the 1st photo 50% of the page
Chris Anthony
@CTAnthny
Aug 07 2017 13:47
Hello all = ) Can anyone help me with a jquery problem?
Gulsvi
@gulsvi
Aug 07 2017 13:49
@CTAnthny Sure, what's your question?
Chris Anthony
@CTAnthny
Aug 07 2017 13:49
so I have a class applied to three elements and I want to have an event click handler trigger when any one of them is clicked, but it's not firing for some reason - something to do with it being a collection?
line 113 you can see the code
Gulsvi
@gulsvi
Aug 07 2017 13:52
@CTAnthny Your .on('click' for the .swap class is running before the elements are created
To see, change it to $('.swap').on("click", function() {
And move that function block to your setTempUnit function
(where you create the .swap elements)
Chris Anthony
@CTAnthny
Aug 07 2017 13:57
I'm not sure I follow. setTempUnit should run when the data is pulled and then the elements will already be generated? Are you saying to wrap that function in the click handler?
I moved it out of the json function because I thought it might have been a scope issue
Gulsvi
@gulsvi
Aug 07 2017 13:58
You have it set up now to run when the document is ready
So, your getJSON goes and calls the API, gets the data, and then you create the those elements. By that time, your $(.swap).on('click' code has already run and silently did nothing in the background because there were no .swap elements to attach a click handler to
Chris Anthony
@CTAnthny
Aug 07 2017 13:59
ohh
but you're saying to put the click handler in setTempUnit or wrap that?
Gulsvi
@gulsvi
Aug 07 2017 14:00
Yes
Chris Anthony
@CTAnthny
Aug 07 2017 14:01
which one?
Zerka1982
@Zerka1982
Aug 07 2017 14:01
guys I need your help please
Gulsvi
@gulsvi
Aug 07 2017 14:01
put it in setTempUnit @CTAnthny
Chris Anthony
@CTAnthny
Aug 07 2017 14:01
ok, but then won't it only run unless it's clicked?
Gulsvi
@gulsvi
Aug 07 2017 14:02
  $('.swap').on('click', function() {
    // this code only runs when clicked
  });
So, when you do this, it's the same:
      (function setTempUnit(param) {
        if (param > -1) {
          tempMarker = 1;
          $('#currentTemp').text(`${currentTempF}`);
          $('.temp').after('<a href="javascript:void(0)" class="swap"><i class="wi wi-fahrenheit"></i></a>');
        } else {
          tempMarker = -1;
          $('#currentTemp').text(`${currentTempC}`);
          $('.temp').after('<a href="javascript:void(0)" class="swap"><i class="wi wi-celsius"></i></a>');
        };
        $('.swap').on('click', function() {
          // this code only runs when clicked
        });
      }(fCountryCodeIndex));
Chris Anthony
@CTAnthny
Aug 07 2017 14:03
hmm ok
Zerka1982
@Zerka1982
Aug 07 2017 14:09
guys
check this please
I don't know why there is a space between the first image and the text
Gulsvi
@gulsvi
Aug 07 2017 14:12

@CTAnthny The other way to approach this is with event delegation:

$('body').on("click", '.swap', function() {
  // code to run when .swap is clicked
});

But I think this is a little clunky...as you have the click attached to the body, looking for .swap every time you click
And, to answer your question about the HTML Collection earlier, $('.swap') gets all the .swap elements - no need to loop through the collection. A very nice feature of jQuery :)

Chris Anthony
@CTAnthny
Aug 07 2017 14:13
ah ok, ya clearly I was off about the collection, I was messing with wrapping that in an .each and scratching my head haha
Gulsvi
@gulsvi
Aug 07 2017 14:13
@Zerka1982 Are you trying to create three columns?
Zerka1982
@Zerka1982
Aug 07 2017 14:14
yes
@SkyC0der I'm trying to create 3 columns with different Width size
column 1 should contain only photo
Gulsvi
@gulsvi
Aug 07 2017 14:15
Center column has a static size, images resize?
Zerka1982
@Zerka1982
Aug 07 2017 14:15
Column 2 is divided into 2 parts for h2 , then column 3 for another photo
this is how it looks now
https://codepen.io/Zerka1982/pen/MoMdmo
Gulsvi
@gulsvi
Aug 07 2017 14:17
Any reason you don't want to use the bootstrap we are taught here at Free Code Camp? I could show you how to do that now. Flexbox is not one of my strengths unfortunately
Bootstrap 4 uses flexbox under the hood
Zerka1982
@Zerka1982
Aug 07 2017 14:19
I can use Bootstrap, however I'm trying to learn myself and discover new things in CSS, but it seems this one is hard to implement
I try to make something
A photo in the left side which will cover 50% of the page horizontally , then the other 50% is divided into 2 parts for Text and a photo on the right side.
Gulsvi
@gulsvi
Aug 07 2017 14:21
With bootstrap, that's very simple. With flexbox, I'd have to play around with it for a while
The bootstrap grid system uses 12 columns per row, so something like col-md-6 would be 50% wide on md sized screens and larger
Zerka1982
@Zerka1982
Aug 07 2017 14:23
that's true
I agree with you
Chris Anthony
@CTAnthny
Aug 07 2017 14:29
ok @SkyC0der, I got it to work once, but it won't swap back lol. I put it under the setTempUnit method b/c I wanted to be able to call that method with less code, but is that the problem?
Zerka1982
@Zerka1982
Aug 07 2017 14:30
Thank you SkyC0der
Chris Anthony
@CTAnthny
Aug 07 2017 14:31
interesting
it swaps if it's inside the method, but it doesn't outside?
Gulsvi
@gulsvi
Aug 07 2017 14:31
@CTAnthny I haven't looked too closely at all of your code, but you are removing the .swap elements on click
That also removes their click handlers
So, every time you create a new .swap element, you need to re-register that click handler
Seems you fixed it
Chris Anthony
@CTAnthny
Aug 07 2017 14:36
well it was your original suggestion
Gulsvi
@gulsvi
Aug 07 2017 14:36
That's how event delegation works in jQuery
Chris Anthony
@CTAnthny
Aug 07 2017 14:36
just didn't realize it needed to be recursive to re-register the handler
thanks a lot for your help!!
Gulsvi
@gulsvi
Aug 07 2017 14:37
Yeah, .on functions will only work against elements that exist when the .on runs unless you do something like this to handle the event delegation
$('body').on("click", '.swap', function() {
  // code to run when .swap is clicked
});
Glad you got it working
Chris Anthony
@CTAnthny
Aug 07 2017 14:38
cool, yeah I'll read up on it more
dyon3334
@dyon3334
Aug 07 2017 14:47
what am i doing wrong i get comma's inside my string after joining them function reverseString(str) { var string = str; var array = string.split(""); var reversed = array.reverse(); return reversed.join(); } reverseString("hello");
@dyon3334 When you .join() you need to join it back using the same characters you used in your .split()
function reverseString(str) {
  var string = str;
  var array = string.split("");
  var reversed = array.reverse();
  return reversed.join(""); // add the same quotes here that you used in your split()
}
reverseString("hello");
dyon3334
@dyon3334
Aug 07 2017 14:52
@SkyC0der thanks a lot !!
CamperBot
@camperbot
Aug 07 2017 14:52
dyon3334 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2333 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 07 2017 14:53
@dyon3334 No problem. You can simplify by chaining those methods together, in case you didn't know: str.split("").reverse().join("");
dyon3334
@dyon3334
Aug 07 2017 14:54
@SkyC0der thanks a lot again i will train myself more in chaining
CamperBot
@camperbot
Aug 07 2017 14:54
dyon3334 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: dyon3334 already gave skyc0der points
Joel Santos
@St3ps
Aug 07 2017 15:22
Hey guys, I'm developing a site that is running problems EXCLUSIVELY for mac, and perhaps I thought that instead of bothering my colleagues i could somehow have some sort of enviromnent (a virtual machine?) that would emulate a mac. Does this exist? Or like something online that you can use as if it was a browser on a mac
Gulsvi
@gulsvi
Aug 07 2017 15:23
@St3ps This room is for help with the Free Code Camp Front-end Development Projects listed here: https://www.freecodecamp.org/map.
Joel Santos
@St3ps
Aug 07 2017 15:26
@SkyC0der While this may not be on the map, this is a future concern for any web dev.
@SkyC0der Didn't find one though, but that's cool i'll just use a vm
Joel Santos
@St3ps
Aug 07 2017 15:34
lol why'd you delete your message?
Andre
@nismocoder
Aug 07 2017 16:22
brownie points to whoever can answer my super newb question,lol.. where or what can I use to preview code without actually updating the changes on the web site I want to make changes to
Im sure on github I could maybe but I jst dnt know how, if someone could drop a link on how to do this I would be very thankful
Zerka1982
@Zerka1982
Aug 07 2017 16:23
right click then inspect the page
Andre
@nismocoder
Aug 07 2017 16:23
yep,
I see the code but where can I preview the site
like if I copy the code and paste it somewhere else with the changes I want to make
I dont want to update anything yet , I want to see the results of the changes before I actually make the changes
Zerka1982
@Zerka1982
Aug 07 2017 16:25
Thats exactly how it works
Right click and choose to inspect the page
make changes in the CSS , HTML or JavaScript
and without reloading you ll see the changes
Andre
@nismocoder
Aug 07 2017 16:26
awsome Thank you Zerka1982
Zerka1982
@Zerka1982
Aug 07 2017 16:27
you are welcome,!
Andre
@nismocoder
Aug 07 2017 16:28
I did it wrong I dnt think it gave you the points lol
Gulsvi
@gulsvi
Aug 07 2017 16:29
thanks @username
:)
Zerka1982
@Zerka1982
Aug 07 2017 16:29
ahaha , that's ok I don't need points lool
Andre
@nismocoder
Aug 07 2017 16:29
gotcha thanks a ton again
thanks @Zerka1982
CamperBot
@camperbot
Aug 07 2017 16:29
nismocoder sends brownie points to @zerka1982 :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @zerka1982 |http://www.freecodecamp.com/zerka1982
Zerka1982
@Zerka1982
Aug 07 2017 16:29
Does it work if you thank yourself lool
click on your name and type Thank you :D
Gulsvi
@gulsvi
Aug 07 2017 16:30
camperbot doesn't let you do it :)
Zerka1982
@Zerka1982
Aug 07 2017 16:30
oh bad news :(
@SkyC0der I wanna know your point of view please
Gulsvi
@gulsvi
Aug 07 2017 16:33
My point of view? We shouldn't be able to thank ourselves
? :p
Zerka1982
@Zerka1982
Aug 07 2017 16:33
haha lool
I'm not talking about that
I wanna to know ... What will you recommend me to use to build this section ?
image.png
I mean based on your experience :smile:
Gulsvi
@gulsvi
Aug 07 2017 16:35
I'm a fan of bootstrap because it is what we learn here, it's easy to use, and most importantly, it's tested on all the browsers.
Zerka1982
@Zerka1982
Aug 07 2017 16:36
Good point !
Gulsvi
@gulsvi
Aug 07 2017 16:36
Lots of people dislike bootstrap though... :) and will tell you to use flexbox or CSS Grid to do it.
Zerka1982
@Zerka1982
Aug 07 2017 16:36
That's true
in fact, If i use Bootstrap. I'll be facing other problems ... some contents maye change
however, when we use our own css, then we just build the page the way we want !
Gulsvi
@gulsvi
Aug 07 2017 16:38
Yeah, with our own CSS, we don't have to worry about Bootstrap defaults like padding and margins
Zerka1982
@Zerka1982
Aug 07 2017 16:38
exactly
Gulsvi
@gulsvi
Aug 07 2017 16:38
We just have to make sure it works on all the browsers that are important to us
Zerka1982
@Zerka1982
Aug 07 2017 16:38
That's the point
Martialis39
@Martialis39
Aug 07 2017 17:17
@Zerka1982 One point actually!
When I was first starting out, I wouldve said "use bootstrap"
but consider the importance of trying different CSS layout
techniques
Eric Weiss
@eweiss17
Aug 07 2017 17:44
@Zerka1982 i'v seen somebody ask the same question. is that from some website?
Zerka1982
@Zerka1982
Aug 07 2017 17:45
no no
@eweiss17 it s not from a website. I m practicing CSS tutorials
@eweiss17 I try to learn new things such as FlexBox
Eric Weiss
@eweiss17
Aug 07 2017 17:45
that is what i meant by from website
Zerka1982
@Zerka1982
Aug 07 2017 17:46
The thing is that I see it as a challenge
Eric Weiss
@eweiss17
Aug 07 2017 17:46
yeah okay that is what i was asking
Zerka1982
@Zerka1982
Aug 07 2017 17:46
and I m struggling to make it real :D lol
Eric Weiss
@eweiss17
Aug 07 2017 17:46
Lots of people dislike bootstrap though... :grinning: and will tell you to use flexbox or CSS Grid to do it.
do that
Flexbox
Zerka1982
@Zerka1982
Aug 07 2017 17:48
yes
The thing is that I tried using div s
Martialis39
@Martialis39
Aug 07 2017 17:49
@Zerka1982 im actually trying to use inline blocks to do it myself and its surprisingly hard :D
Zerka1982
@Zerka1982
Aug 07 2017 17:49
each div with percentage
@Martialis39 yeah , I agree with you
@Martialis39 I tried Div's each one with percentage, and I faced a problem with the page margin from the right
Eric Weiss
@eweiss17
Aug 07 2017 17:51
I'm guessing right now...
but parent div, display: flex
3x div inside with % width's, fixed heights
the second div has it's own set of divs
my bad 7x div inside
flex-wrap: wrap; for parent div
Zerka1982
@Zerka1982
Aug 07 2017 17:54
@eweiss17 Please Eric, could you try to make an example, because I was struggling almost 4 hours and still can't make it :D
haha
this is how it looks in my laptop
image.png
Eric Weiss
@eweiss17
Aug 07 2017 17:55
that is pretty close
what problems do you have?
Zerka1982
@Zerka1982
Aug 07 2017 17:57
the problem is in the right side of the page
I don't understand why I do have a margin
Eric Weiss
@eweiss17
Aug 07 2017 17:57
oh
Zerka1982
@Zerka1982
Aug 07 2017 17:57
There is a margin from the right side of the page ...it makes me crazy dude !
Eric Weiss
@eweiss17
Aug 07 2017 17:57
best way imo if yo udon't know is to inspect the page
Zerka1982
@Zerka1982
Aug 07 2017 17:58
I did already :dancer: :dancer:
Eric Weiss
@eweiss17
Aug 07 2017 17:58
  • {
    margin: 0;
    }
Zerka1982
@Zerka1982
Aug 07 2017 17:58
:D
Eric Weiss
@eweiss17
Aug 07 2017 17:58
did you do the wildcard margin 0
Zerka1982
@Zerka1982
Aug 07 2017 17:58
I will check it again
Martialis39
@Martialis39
Aug 07 2017 17:58
@Zerka1982 So I finally managed it with inline blocks
I would need to plug in the images and text but I think the layout is there
Zerka1982
@Zerka1982
Aug 07 2017 17:59
@Martialis39 i ll check it as soon as possible
@Martialis39 thank you
CamperBot
@camperbot
Aug 07 2017 17:59
zerka1982 sends brownie points to @martialis39 :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @martialis39 |http://www.freecodecamp.com/martialis39
Martialis39
@Martialis39
Aug 07 2017 18:00
ofcourse, it was interesting
I am acutally thinking about doing mine CV site in this way
Eric Weiss
@eweiss17
Aug 07 2017 18:00
CV?
Martialis39
@Martialis39
Aug 07 2017 18:00
where each div would expand to cover the whole wrapper when clicked
my CV site*
sorry, european for Resume : D
Eric Weiss
@eweiss17
Aug 07 2017 18:00
o
portfolio
Martialis39
@Martialis39
Aug 07 2017 18:01
yeah, basically
I have already done the FCC challenge for that
Eric Weiss
@eweiss17
Aug 07 2017 18:01
mm i gonna re-do mine on github pages
Martialis39
@Martialis39
Aug 07 2017 18:01
so I was thinking of making one that includes my formal education and other resume-ish things as well
Eric Weiss
@eweiss17
Aug 07 2017 18:01
and transfer my code pen's on it as well
Martialis39
@Martialis39
Aug 07 2017 18:01
yeah mine is terribad, I should re-do it ...
Eric Weiss
@eweiss17
Aug 07 2017 18:02
shows progress lol
Martialis39
@Martialis39
Aug 07 2017 18:02
Thats true! But my codepen is filled with junk that I just NEED to get rid of : D
Eric Weiss
@eweiss17
Aug 07 2017 18:04
i'v been revising my old pens
cleaning up the site as well as cleaning the code
Zerka1982
@Zerka1982
Aug 07 2017 18:12
@Martialis39 Could you please add to the example you've made some photos , so I can see how it is ;)
Sorry guys, I had a friend to whom I was talking to ...that's why didn't respond to your conversation
Martialis39
@Martialis39
Aug 07 2017 18:14
@Zerka1982 Sure gimme a few minutes
Zerka1982
@Zerka1982
Aug 07 2017 18:14
@Martialis39 Thank you very much. I appreciate your help
CamperBot
@camperbot
Aug 07 2017 18:14
zerka1982 sends brownie points to @martialis39 :sparkles: :thumbsup: :sparkles:
:warning: zerka1982 already gave martialis39 points
Martialis39
@Martialis39
Aug 07 2017 18:20
@Zerka1982 ok I just grabbed some images and add them fill their respective containers
this should be an issue for you if you have the correctly sized images
still, if this project/exercise has an "official" solution, id very much like to see it
Eric Weiss
@eweiss17
Aug 07 2017 18:27
i'm currently at that part of any project where i am breaking things, but my intention is to make them better
Zerka1982
@Zerka1982
Aug 07 2017 18:30
gracias amigo :)
@eweiss17 good strategy
Eric Weiss
@eweiss17
Aug 07 2017 18:33
no lol i'm accidently making my page not work
Mercy Manrique
@mers89
Aug 07 2017 18:33
Is anyone willing to help on the weather project. I was following a tutorial online, but for some reason its not pulling my IP address
Eric Weiss
@eweiss17
Aug 07 2017 18:33
but i am trying to make it work better
Zerka1982
@Zerka1982
Aug 07 2017 18:33
@Martialis39 i ll read carefully your code and go trough it line by line to understand how it works. I ll also try to make it better.
Eric Weiss
@eweiss17
Aug 07 2017 18:33
@Zerka1982 i made a solution via flexbox....
Zerka1982
@Zerka1982
Aug 07 2017 18:34
@eweiss17 ohhhh dude show me :)
Eric Weiss
@eweiss17
Aug 07 2017 18:34
i didn't add pictures though
Zerka1982
@Zerka1982
Aug 07 2017 18:35
sure
Gulsvi
@gulsvi
Aug 07 2017 18:35
@mers89 If this is on Codepen, you'll need to make sure you use a service that works over HTTPS. Happy to help you sort it out
Mercy Manrique
@mers89
Aug 07 2017 18:36
originally it had worked with the IP address when I just added HTTPS, but then it broke as soon as I linked the lat + long coordinates
Gulsvi
@gulsvi
Aug 07 2017 18:38
@mers89 Yeah, mixed-content is the problem. That's when you try to access something over HTTP:// when your browser's address bar starts with HTTPS://
This api only works over HTTP: http://ip-api.com/json
you could try using navigator.geolocation instead?
Or, something similar to ip-api that works over https is: https://ipinfo.io/json
Mercy Manrique
@mers89
Aug 07 2017 18:40
@SkyC0der I figured that was the issue, so I had tried using http://ipinfo.io/ but did not know how to connect the latitude + longitude since the tutorial I was following did not mention that site
Gulsvi
@gulsvi
Aug 07 2017 18:41
@mers89 careful, it's https:// not http://
Mercy Manrique
@mers89
Aug 07 2017 18:41
oh yes, right!
Gulsvi
@gulsvi
Aug 07 2017 18:41

If you do this:

 $.getJSON("https://ipinfo.io/json",function(data2){
  console.log(data2);
 });

^^ You'll be able to study the JSON that comes back

you can then access the data in that JSON the same as we were taught in the free code camp challenges
Mercy Manrique
@mers89
Aug 07 2017 18:42
So is the https always required. I thought it was just a codepen issue. I tried to host on github and same issue
Gulsvi
@gulsvi
Aug 07 2017 18:42
HTTPS is required when your browser's address bar starts with HTTPS
codepen and github do not allow you to access their websites over HTTP, so this basically makes HTTPS a requirement everywhere on those two sites
Mercy Manrique
@mers89
Aug 07 2017 18:43
oh ok. thanks so much @SkyC0der ! I did not know if it was my code or just the api
CamperBot
@camperbot
Aug 07 2017 18:43
mers89 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2334 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 07 2017 18:44
@mers89 You'll run into another problem with the weather API. The same http/https issue will happen with Open Weather Map. Try using free code camp's mirror of open weather map by replacing your api variable with this: https://fcc-weather-api.glitch.me/api/current?lat='+lat+'&lon='+long
Void Demon
@voiddemon
Aug 07 2017 18:46

Mercy Manrique
@mers89
Aug 07 2017 18:47
@SkyC0der Great, Ill use the glitch.me api. I noticed on the $.getJson you posted it did have http and not https. Is it ok to do so then, or small typo?
Zerka1982
@Zerka1982
Aug 07 2017 18:48
@eweiss17 Thank you !
CamperBot
@camperbot
Aug 07 2017 18:48
zerka1982 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 588 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Gulsvi
@gulsvi
Aug 07 2017 18:49
@mers89 oops! Yes, that was a typo - edited above
Mercy Manrique
@mers89
Aug 07 2017 18:50
@SkyC0der no worries. Apreciate the help, you've helped me in a couple projects :)
Gulsvi
@gulsvi
Aug 07 2017 18:51
No problem! Always happy to help out when I can
Jorge
@OrangeKulture
Aug 07 2017 18:51
hey whats up guys
Martialis39
@Martialis39
Aug 07 2017 18:52
@Zerka1982 please do and let me know what you come up with : )
Gulsvi
@gulsvi
Aug 07 2017 18:53
Hello @OrangeKulture :)
Jorge
@OrangeKulture
Aug 07 2017 18:54
hey whats cracking Sky
maan i really need to finish tic tac toe and simon .. its been bugging me for a while
Zerka1982
@Zerka1982
Aug 07 2017 19:00
@Martialis39 How can I add you as a friend :)
SO i can send you later when I'm done ;)
Martialis39
@Martialis39
Aug 07 2017 19:01
if you click on my icon
you can chat privately and I guess thats how close as gitter gets to friends :D
Jack Lyons
@JackEdwardLyons
Aug 07 2017 19:34
hey guys, could someone help me implement a loading spinner on my API project... I'm just learning how to use the YouTube API and my video iframes take a little while to load.... a loading spinner would be perfect I reckon :)
Mikhail Panichev
@denisinvader
Aug 07 2017 19:42
@JackEdwardLyons Hi. You should create any preloader (text or spinner) element, that's shown before api requests starts. Then on response you should hide it
Gulsvi
@gulsvi
Aug 07 2017 20:20
@JackEdwardLyons With iframes like you're using, it's a matter of using the onload event.
    video.src =`https://www.youtube.com/embed/${currentID}?modestbranding=1&rel=0&autoplay=0`;
    video.onload = function() {
      console.log('loaded!'); 
      // hide the spinner, show the video
    }
If you want one spinner that hides when all the videos have finished loading, implement a counter and compare it to the number of iframes you've created
when the counter = the number of iframes, you know they've all loaded and can now hide the spinner and show all the videos
Luke Miller
@dalumiller
Aug 07 2017 20:24
Hey, I have a few styling changes to make, but wanted any feedback if you don't mind taking a second. Thanks! https://codepen.io/dalumiller/full/rzMeaw/
Jim Tryon
@jimtryon
Aug 07 2017 20:28
Is there a way to test HTML code in Chrome Dev Tools?
Ravi Kishore Thella
@ravikishorethella
Aug 07 2017 20:36
@jimtryon what do you mean? Are you expecting something similar to testing js code in console ?
Jim Tryon
@jimtryon
Aug 07 2017 20:37
Yeah, so if I have a block of HTML code I want to use and then I want to test against it with JS
Can I paste my own HTML code in Chrome Dev Tools?
Ravi Kishore Thella
@ravikishorethella
Aug 07 2017 20:37
I don't think you can do that
Gulsvi
@gulsvi
Aug 07 2017 20:44
@jimtryon Yeah, right-click the HTML in Chrome Dev Tools, select "Edit as HTML", modify as needed
Jim Tryon
@jimtryon
Aug 07 2017 20:45
@SkyC0der Thanks, I thought to myself there had to be a way
CamperBot
@camperbot
Aug 07 2017 20:45
jimtryon sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2335 | @skyc0der |http://www.freecodecamp.com/skyc0der
Jim Tryon
@jimtryon
Aug 07 2017 20:45
As a follow-up question, is there a way to preserve console log beween web page refreshes?
Gulsvi
@gulsvi
Aug 07 2017 20:46
Hmmm, it should be preserved - I know my console gets really, really long if I don't clear it out from time to time
There's a checkbox for it in settings apparently
Jim Tryon
@jimtryon
Aug 07 2017 20:46
It’s preserved automatically… I was under the impression the log was erased on a web page refresh
Gulsvi
@gulsvi
Aug 07 2017 20:47
Nope, all yours for as long as you want by default I believe :)
image.png
And it can be overridden with the "Preserve Log" checkbox
Jim Tryon
@jimtryon
Aug 07 2017 20:48
I don’t have that setting in my console
Screen Shot 2017-08-07 at 1.48.53 PM.png
Gulsvi
@gulsvi
Aug 07 2017 20:49
What do you get when you click the gear icon, top, right?
Jim Tryon
@jimtryon
Aug 07 2017 20:49
It is in there
I don’t have it checked right now
Gulsvi
@gulsvi
Aug 07 2017 20:50
Ahh, okay that explains it
Jim Tryon
@jimtryon
Aug 07 2017 20:50
Would there be any advantage to saving the log?
I know that takes up Chrome memory
Gulsvi
@gulsvi
Aug 07 2017 20:51
Biggest advantage is to compare logs before/after you make changes to a page
maybe you want to change some code, refresh the page, and see if it's finally working as intended
Jim Tryon
@jimtryon
Aug 07 2017 20:53
@SkyC0der Yeah, I could see that being useful
Gulsvi
@gulsvi
Aug 07 2017 20:54
@dalumiller You seem to be missing several of the streamers listed in the challenge. You also have your getJSON copy/pasted once for each streamer with the URL changed. Use a forEach loop to loop through an array of streamers.
Similarly, you shouldn't have copy/pasted HTML for each streamer - generate it when you get the data back from the API
Oleh
@Lufter
Aug 07 2017 21:09
top-menu.jpg
Hey guys, could you please help me to understand why menu layout breaking on small screens?
<nav class="navbar sticky-top navbar-light">
  <ul class="nav nav-pills justify-content-end text-uppercase">
    <li class="nav-item">
      <a class="nav-link active-green" href="#top">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#projects">Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#contact">Contact</a>
    </li>
  </ul>
</nav>
There are no custom css that might break bootstrap 4 css...
Gulsvi
@gulsvi
Aug 07 2017 21:14
@Lufter You're using nav-pills, but if you use the standard bootstrap navbar, it will will collapse and provide a mobile menu when the screen is small: https://v4-alpha.getbootstrap.com/components/navbar/#nav
Oleh
@Lufter
Aug 07 2017 21:15
@SkyC0der thanks
CamperBot
@camperbot
Aug 07 2017 21:15
lufter sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2336 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 07 2017 21:19
Sure, it would look more like this:
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">&nbsp;</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto text-left">
      <li class="nav-item">
        <a class="nav-link active-green" href="#carousel">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#projects">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>
Asia Antczak
@asiaantczak
Aug 07 2017 21:21
hi Campers! anyone would like to help me with wikipedia viewer? My search button has to be clicked twice to execute 2 functions on eventlistener. I have searched the whole internet and have not found the solution which works :(
Walther Cantu
@walthercantu
Aug 07 2017 21:23
Hello, would appreciate some help with my FCC Twitch.tv project. So far I've been able to set up an ajax call to https://wind-bow.gomix.me/twitch-api/streams/freecodecamp to get the JSON response to check if FCC is live. I'm a little trouble getting the json object into a string and displaying it on screen. I have added JQuery in the Javascript settings of the pen but it still doesn't work. Here's the pen: https://codepen.io/walthercantu/pen/wqJaxb
iso
@iso1048
Aug 07 2017 21:30
@walthercantu try adding dataType: "jsonp", in the ajax call
@asiaantczak could you link your pen?
Asia Antczak
@asiaantczak
Aug 07 2017 21:31
Walther Cantu
@walthercantu
Aug 07 2017 21:32
@gothamknight Oh snap, that worked! What's the difference between json and jsonp?
Thayyeb salim
@Thayyebsalim
Aug 07 2017 21:36
Mine works with both jsonp and json
https://codepen.io/Thayyeb_Itachi/pen/rzxKPg
It is the link @walthercantu
iso
@iso1048
Aug 07 2017 21:36
@walthercantu not exactly sure man. jsonp stands for json with padding and allows CORS.
Thayyeb salim
@Thayyebsalim
Aug 07 2017 21:36
I don't know how or why though
Tom
@moT01
Aug 07 2017 21:37
@asiaantczak put some console.logs in your functions see where it breaks
Gulsvi
@gulsvi
Aug 07 2017 21:37
@asiaantczak When you click the Search button, you call both the getSearchResult and displayResults functions at the same time. XMLHttp is async - it has to go out to a server, get the data, and then bring it all back, so your displayResults() function is getting called before the data comes back. To fix this, call your displayResults() function from inside your wikipediaRequest.onload function.
Jack Lyons
@JackEdwardLyons
Aug 07 2017 21:38
thats a cool idea with the counter @SkyC0der thanks and thanks you @denisinvader also
CamperBot
@camperbot
Aug 07 2017 21:38
jackedwardlyons sends brownie points to @skyc0der and @denisinvader :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @denisinvader |http://www.freecodecamp.com/denisinvader
:star2: 2337 | @skyc0der |http://www.freecodecamp.com/skyc0der
iso
@iso1048
Aug 07 2017 21:39
@asiaantczak sorry couldnt find the issue. @SkyC0der is on to it as usual.
Walther Cantu
@walthercantu
Aug 07 2017 21:40
@Thayyebsalim I see, I guess it was complaining about the hop from gomix.me to glitch.me
@gothamknight got it, thanks
CamperBot
@camperbot
Aug 07 2017 21:41
walthercantu sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @gothamknight |http://www.freecodecamp.com/gothamknight
Walther Cantu
@walthercantu
Aug 07 2017 21:41
@Thayyebsalim and thanks, I'll just point the call directly to the glitch.me url
CamperBot
@camperbot
Aug 07 2017 21:41
:cookie: 304 | @thayyebsalim |http://www.freecodecamp.com/thayyebsalim
walthercantu sends brownie points to @thayyebsalim :sparkles: :thumbsup: :sparkles:
Asia Antczak
@asiaantczak
Aug 07 2017 21:41
@gothamknight thanks for trying :)
CamperBot
@camperbot
Aug 07 2017 21:41
asiaantczak sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @gothamknight |http://www.freecodecamp.com/gothamknight
Gulsvi
@gulsvi
Aug 07 2017 21:45
@asiaantczak I've commented the code that needs to change here: https://s.codepen.io/anon/pen/xLqOGY?editors=0010
Asia Antczak
@asiaantczak
Aug 07 2017 21:45
@SkyC0der thanks, it worked as usual (as you helped me couple of times already with different projects). Is there anything you do not know? It seems you have solutions to any coding problems :)
CamperBot
@camperbot
Aug 07 2017 21:45
asiaantczak sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2338 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 07 2017 21:46
@asiaantczak I've hit all of these issues before. Glad I could help!
Asia Antczak
@asiaantczak
Aug 07 2017 21:48
@SkyC0der thanks for refactoring my code :)
CamperBot
@camperbot
Aug 07 2017 21:48
asiaantczak sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: asiaantczak already gave skyc0der points
Gulsvi
@gulsvi
Aug 07 2017 21:49
Just 3 changes and some comments :)
Asia Antczak
@asiaantczak
Aug 07 2017 21:49
always helpful to know what can be changed for better
Gulsvi
@gulsvi
Aug 07 2017 21:49
If I refactored, it would look very different - I don't use those constructor objects :p
some day I'll try them out
Asia Antczak
@asiaantczak
Aug 07 2017 21:51
Ok, thanks for the comments then :) I have to try different constructor objects for change , some day :P
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:04
@SkyC0der im trying to implement your loader idea, but am wondering why the spinner isn't disappearing??
https://codepen.io/JackEdwardLyons/pen/oeLbPy?editors=0010
Gulsvi
@gulsvi
Aug 07 2017 22:05
@JackEdwardLyons Nice work! Just one small typo - .loaded should be .loader
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:06
haha
oh
yess!!
cool thanks @SkyC0der
Gulsvi
@gulsvi
Aug 07 2017 22:06
Glad my minimal explanation above was enough :)
Good job!
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:08
yeah, i did a bit of research withthe iframe.onload function
Sydney
@SydneyWarren
Aug 07 2017 22:09
function steamrollArray(arr) {
  // I'm a steamroller, baby
   var merged = [].concat.apply([], arr);
  console.log(arr);
  console.log(merged);
  return arr;
}

steamrollArray([1, [2],[3, [[4]]]]);
can someone tell my why the array is not all the way completly flat?
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:10
hm. actually im having a hard time hiding the iframes -- they seem to appear even with a display of none @SkyC0der
Gulsvi
@gulsvi
Aug 07 2017 22:11
I was just playing around with that - trying to figure out your code.
I've grown too comfortable with jQuery :/
Luke Miller
@dalumiller
Aug 07 2017 22:11
@SkyC0der thanks
CamperBot
@camperbot
Aug 07 2017 22:11
dalumiller sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2339 | @skyc0der |http://www.freecodecamp.com/skyc0der
Timmothy McLaughlin
@timmothymcla
Aug 07 2017 22:11
Has anyone found a quote API for the random quote machine? I am wondering if anyone has found a funny one by chance?
Gulsvi
@gulsvi
Aug 07 2017 22:17

@JackEdwardLyons This works. Before your onload function, hide each iframe after it is created:

clone.style.display = 'none';

And then in your onload function, show them all when the if statement is true:

Array.from(document.getElementsByTagName('iframe')).forEach(function(iframe) {
  iframe.style.display = 'block';
});
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:19
hmm really? nothing seems to happen
@SkyC0der
Gulsvi
@gulsvi
Aug 07 2017 22:22
@JackEdwardLyons It was just working....very strange. I'll investigate further
@JackEdwardLyons What's different in your pen vs. this one? https://s.codepen.io/skycoder/pen/wqJWjG?editors=0010
Gulsvi
@gulsvi
Aug 07 2017 22:27
@JackEdwardLyons Another minor one, if (counter === videos.length - 1) {
Need the -1 because of 0 based counter and non-zero based element counts
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:28
ahhh cool thanks @SkyC0der :)
CamperBot
@camperbot
Aug 07 2017 22:28
jackedwardlyons sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: jackedwardlyons already gave skyc0der points
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:32
i changed Array.from() to the jQuery $.makeArray because it's not supported in IE 11 :) thanks for the help @SkyC0der
CamperBot
@camperbot
Aug 07 2017 22:32
jackedwardlyons sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: jackedwardlyons already gave skyc0der points
Gulsvi
@gulsvi
Aug 07 2017 22:35
@JackEdwardLyons Oh yeah, no ES6 support for IE 11 :) a for loop works too
              for(var i = 0; i < document.getElementsByTagName('iframe').length; i++) {
                document.getElementsByTagName('iframe')[i].style.display = 'block';
              };
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:36
cool, good idea also
Gulsvi
@gulsvi
Aug 07 2017 22:37
If you're okay with jQuery though, this is the simplest: $('iframe').show(); :)
Jack Lyons
@JackEdwardLyons
Aug 07 2017 22:40
ha! duh
of course :)
thanks
its a wordpress site so jquery is there to be used :)
but i have a feeling this would be better written in PHP as it will be in a template :worried: so if i can get this prototype done, as it is now, now i can start learning to translate into PHP
Jianhao Tan
@jaanhio
Aug 07 2017 22:50

potentially a stupid question here but

<form onSubmit={this.handleSubmit.bind(this)}>
            <label className="label">Recipe</label>
            <div className="control">
              <input className="input" type="text" placeholder="Recipe Name" ref="recipeName"/>
            </div>
            <div className="field">
            <label className="label">Ingredients</label>
            <div className="control has-icons-left has-icons-right">
              <input className="input" type="text" placeholder="Enter ingredients. (if more than 1 ingredient, separate them with commas)" ref="ingredients"/>
              <span className="icon is-small is-left">
                <i className="fa fa-flask"></i>
              </span>
            </div>
            </div>
            <div className="field is-grouped">
              <div className="control">
                <button className="button is-primary" onClick={this.closeModal}>Add Recipe</button>
              </div>
              <div className="control">
                <button className="button" onClick={this.closeModal}>Cancel</button>
              </div>
            </div>
            </form>

just curious, how exactly does the form “knows” that the button clicked is meant as a form submission?

i mean the buttons are not binded to it in anyway
Colin
@finkbeca
Aug 07 2017 22:58
Hi I have been playing around with the transform function. I am currently at a point where I am just confused on the best way( or anyway ) to turn the top left corner above the pink div , pink.
Long Nguyen
@longnt80
Aug 07 2017 23:02
@finkbeca what are you trying to do
Colin
@finkbeca
Aug 07 2017 23:03
Do you see the white space in the upper right corner above the pink
I am trying to get that white space pink.
Long Nguyen
@longnt80
Aug 07 2017 23:05
@finkbeca you rotate it so of course there is a white space
or are you only trying to rotate the text?
in that case, remove the pink background of the rotate div and give it to the parent element
Colin
@finkbeca
Aug 07 2017 23:09
@longnt80 Thanks but thats not exactly what I mean . I want the div to stay pink and I want it to stay at that angle. However I was wondering if there was a way to fill the white space in the upper corner, while still keeping it at such angle. Hope I am being clear. Thanks!
CamperBot
@camperbot
Aug 07 2017 23:09
finkbeca sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @longnt80 |http://www.freecodecamp.com/longnt80
Long Nguyen
@longnt80
Aug 07 2017 23:10
@finkbeca so you don't want to rotate it
try using clip path
korzo
@korzo
Aug 07 2017 23:15
@finkbeca Make pink div higher and move it upward. this way you cover the white area top left
Colin
@finkbeca
Aug 07 2017 23:19
@korzo Thank you Korzo I figured that out , I apologize for the stupid question :smile:
CamperBot
@camperbot
Aug 07 2017 23:19
finkbeca sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @korzo |http://www.freecodecamp.com/korzo