These are chat archives for FreeCodeCamp/HelpFrontEnd

29th
Nov 2017
Gaurav
@gauravmagan
Nov 29 2017 01:13
hi
hi
<div class="section section-features" id="about">
      <div class="container">
        <div class="row">
          <div class="col-md-12 ">



          <div class="col-md-6 " >

            <img src="assets/gifs/gif_2.gif" class="gif-tech" alt="brand logo">

          </div>

          <div class="col-md-6 " >

            <p >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


            </p>



          </div>









  </div>
  </div>
  </div>
  </div>

      <!-- space 2-->



<div class="section section-features">
      <div class="container">
        <div class="row">
          <div class="col-md-12 ">


               <div class="col-md-6" id = "space2div">

                  <img src="assets/gifs/gif_2.gif" class="gif-voi"alt=""  >

               </div>

           <div class="col-md-6">
            <p >
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
           </div>








  </div>
  </div>
  </div>
  </div>
couldnt bring the two divs side by side with property Float:right
Screen Shot 2017-11-28 at 8.15.14 PM.png
i have used the property float: right for <div class = col-6 > both are moving at the same time i just want the second div to move left
i tried both float:right and float:left
Gaurav
@gauravmagan
Nov 29 2017 01:19
@sorinr
Gaurav
@gauravmagan
Nov 29 2017 01:37
@hibaakel
@RazvanJackson
@thmsdnnr
@camperbot
can anyone ?
Daria Doronina
@Skidle
Nov 29 2017 01:56
@gauravmagan do you have this code live somewhere?
you can also try those bootstrap classes https://getbootstrap.com/docs/3.3/css/#grid-offsetting
Benjmhart
@Benjmhart
Nov 29 2017 01:59
hey folks, I have an intentionally malformed JSON i need to deal with, how can I wrap it up so I can fix it and parse it? right now it's throwing all kinds of errors
Stephen James
@sjames1958gm
Nov 29 2017 02:14
@Benjmhart How malformed, json is only a string, you could write code to fix the errors?
Benjmhart
@Benjmhart
Nov 29 2017 02:39
I'm trying to write a regex to clear it up
Sorin Ruse
@sorinr
Nov 29 2017 02:47
@gauravmagan you are nesting wrong column divs within the row ones
Benjmhart
@Benjmhart
Nov 29 2017 02:52
@sjames1958gm fixed one of the issues, still seem to be having trouble parsing -any idea what the issue might be?
Sorin Ruse
@sorinr
Nov 29 2017 02:55
@gauravmagan from the picture above i can see that you need something like for each row:
<div class="row">
      <div class="col-xs-12 col-md-8">Lorem ipsum text</div>
     <div class="col-xs-12 col-md-4"><img class="img-responsive" src="your url" alt="alt text"></div>
</div>
Ryan Williams
@Ryanwfile
Nov 29 2017 04:21
Can someone help get the carousel images in this pen to not abruptly adjust when they first show, thank you for any help. https://codepen.io/Ryanwfile/pen/MOOMpO
dinesh
@1532j0004kg
Nov 29 2017 04:25
@Ryanwfile look at this
  <div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="carousel slide multi-item-carousel" id="theCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-4"><a href="#1"><img src="http://www.conservapedia.com/images/thumb/c/ca/Ture.jpg/300px-Ture.jpg" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://www.cbronline.com/wp-content/uploads/2016/11/alan-turing2-300x300.jpg" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://images.encyclopediadramatica.rs/thumb/d/d6/TuringFlag.JPG/300px-TuringFlag.JPG" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="https://www.cbronline.com/wp-content/uploads/2016/11/alan-turing2-300x300.jpg" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-4"><a href="#1"><img src="http://s3.india.com/wp-content/uploads/2014/10/apple-logo.jpg" class="img-responsive"></a></div>
          </div>

          <!--  Example item end -->
        </div>
        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>
Ryan Williams
@Ryanwfile
Nov 29 2017 04:32
@1532j0004kg I will, thank you
CamperBot
@camperbot
Nov 29 2017 04:32
ryanwfile sends brownie points to @1532j0004kg :sparkles: :thumbsup: :sparkles:
:cookie: 261 | @1532j0004kg |http://www.freecodecamp.org/1532j0004kg
Benjmhart
@Benjmhart
Nov 29 2017 04:34
anyone on tonight really good with react? trying to get a canvas rendering...
Ryan Williams
@Ryanwfile
Nov 29 2017 04:40
@1532j0004kg I used the code you pasted but the images seemed to act similarly to the way my code is now, they adjust abruptly
Den McHenry
@denmch
Nov 29 2017 05:00
@Ryanwfile Is the main issue for you the fact that the images resize and move to the top of the parent before snapping to the normal position and width?
Ryan Williams
@Ryanwfile
Nov 29 2017 05:00
@denmch Yes, that exactly
@denmch it's just resizing, I'd rather the image be set before it appears in the carousel
@denmch I've tried many things, including setting the images like this
.carousel-inner > .item > img {
  width:250px;
  height:250px;
}
Den McHenry
@denmch
Nov 29 2017 05:02
The .next class that's assigned by JS as the carousel rotates is setting images at 100% and top: 0, overriding your style definition for .item
Ryan Williams
@Ryanwfile
Nov 29 2017 05:02
@denmch Ahh, that makes sense, thank you so much
CamperBot
@camperbot
Nov 29 2017 05:02
ryanwfile sends brownie points to @denmch :sparkles: :thumbsup: :sparkles:
:cookie: 575 | @denmch |http://www.freecodecamp.org/denmch
Den McHenry
@denmch
Nov 29 2017 05:02
You can enforce it by using the !important annotation.
I've always tried to fight against using !important, but it's often necessary when working with frameworks.
Ryan Williams
@Ryanwfile
Nov 29 2017 05:03
@denmch The image seems to be the correct size now, but it still is moving from the top center to the mid center
Den McHenry
@denmch
Nov 29 2017 05:04
Line 28 in your CSS has top: 60px.
The framework is overruling that to top: 0, so you need to mark that !important to override the specificity of the .next definition in Bootstrap.
Ryan Williams
@Ryanwfile
Nov 29 2017 05:06
@denmch I see, thank you so much for the help
CamperBot
@camperbot
Nov 29 2017 05:06
ryanwfile sends brownie points to @denmch :sparkles: :thumbsup: :sparkles:
api offline
Ryan Williams
@Ryanwfile
Nov 29 2017 05:07
@denmch That fixed it, thank you again for all of the help
CamperBot
@camperbot
Nov 29 2017 05:07
ryanwfile sends brownie points to @denmch :sparkles: :thumbsup: :sparkles:
api offline
Den McHenry
@denmch
Nov 29 2017 05:07
@Ryanwfile No problem. It's tough to catch even if you're using devtools, because the JS changes the classes so quickly, so it's hard to see what rules are affected.
Ryan Williams
@Ryanwfile
Nov 29 2017 05:09
@denmch Yes, that was one of the issues I was having, that's why the first carousel data-interval is set to false. Now the one issue seems to be that the images aren't leaving the carousel as smoothly as before
Den McHenry
@denmch
Nov 29 2017 05:28
@Ryanwfile I don't know if this helps, but this looks better to my eye. It removes the bounce and seems smoother.
.carousel-inner>.item.active.right, .carousel-inner>.item.next { right: 0; }
It's set to left: 0, but right:0 makes more sense to me. I'm not a Bootstrap person, though. I use Foundation.
Heading off to watch a show with the wife. Good luck!
Ryan Williams
@Ryanwfile
Nov 29 2017 06:46
@denmch Thank you so much again for the help, I will try this out then head to bed
CamperBot
@camperbot
Nov 29 2017 06:46
ryanwfile sends brownie points to @denmch :sparkles: :thumbsup: :sparkles:
:cookie: 576 | @denmch |http://www.freecodecamp.org/denmch
Benjmhart
@Benjmhart
Nov 29 2017 07:19
anyone up who knows react?
Rishabh Gupta
@RishabhGupta22
Nov 29 2017 07:25
i am having a little trouble with my recipe box project from freecodecamp. Can someone pls help
Markus Kiili
@Masd925
Nov 29 2017 07:37
@RishabhGupta22 You can just post the question here.
Rishabh Gupta
@RishabhGupta22
Nov 29 2017 07:39
this is the link ....and thanks in advance!!
https://codepen.io/rishabhgupta/full/VrGQWN
I was building the Recipe Box project from freecodecamp and i was done with the code but suddenly the output stopped showing.
Markus Kiili
@Masd925
Nov 29 2017 07:46
@RishabhGupta22 Check the errors on browser developer tools console (F12 on some browsers).
Rishabh Gupta
@RishabhGupta22
Nov 29 2017 07:50
@Masd925 can u provide me with the solution
Markus Kiili
@Masd925
Nov 29 2017 07:51
@RishabhGupta22 First error might mean that jquery is not imported properly.
Rishabh Gupta
@RishabhGupta22
Nov 29 2017 08:18
@Masd925 i have used the library on codepen. what else do i need to do
Markus Kiili
@Masd925
Nov 29 2017 08:23
@RishabhGupta22 Try putting jquery js before bootstrap js. Maybe it matters.
Rishabh Gupta
@RishabhGupta22
Nov 29 2017 08:25
@Masd925 i am having another error
A-J Roos
@Asjas
Nov 29 2017 08:26
Jquery needs to be before bootstrap js. Bootstrap js depends on it
Markus Kiili
@Masd925
Nov 29 2017 08:27
@Asjas Yes.
@Asjas I was just not sure if Codepen is smart enough to order such quick imports but most likely not.
A-J Roos
@Asjas
Nov 29 2017 08:31
In the past I needed to correctly declare in it codepen before it worked. It seemed like it needed to be ordered
@RishabhGupta22 You need to check your errors in the Chrome Developer Tools like @Masd925 said. There is an error causing your site to not load.
Dhananjay Sood
@DhananjaySood
Nov 29 2017 08:49
hi
i have a problem while learning html iframes
when i write <iframe src="https://www.google.co.in" width="150" height="150"> this is some text </iframe> nothing shows
always gets some sort of error.
Can anyone help me?
A-J Roos
@Asjas
Nov 29 2017 08:53
@DhananjaySood Yes. In the chrome developer tools you'll get an error message explaining why you can't set google in a iframe
They have security headers disabling the website from loading in a iframe
Dhananjay Sood
@DhananjaySood
Nov 29 2017 08:53
@Asjas okay
yeah
A-J Roos
@Asjas
Nov 29 2017 08:54
So yes. That is why it isn't working
Dhananjay Sood
@DhananjaySood
Nov 29 2017 08:56
Do i have to enable it??
Its showing these two problems Refused to display 'https://in.yahoo.com/?p=us' in a frame because it set 'X-Frame-Options' to 'sameorigin' and GET https://in.yahoo.com/?p=us net::ERR_BLOCKED_BY_RESPONSE i took yahoo for this example
qiangli
@QAsuna
Nov 29 2017 09:05
大家好
A-J Roos
@Asjas
Nov 29 2017 09:13
@DhananjaySood No Google is specifically blocking it by setting their security headers. You cannot disable or by-pass it at all
Use this website https://securityheaders.io to check if a website you are trying to use has X-Frame-Options set to sameorigin or allowall
Dhananjay Sood
@DhananjaySood
Nov 29 2017 09:16
@Asjas ok, thanks
CamperBot
@camperbot
Nov 29 2017 09:16
dhananjaysood sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @asjas |http://www.freecodecamp.org/asjas
A-J Roos
@Asjas
Nov 29 2017 09:17
sameorigin does not allow you set a website as a iframe on another domain name. Websites like https://jsfiddle.io and https://codepen.io allow you to use them in an iframe
Dhananjay Sood
@DhananjaySood
Nov 29 2017 09:18
@Asjas Okay
Ghost
@ghost~59cdefc7d73408ce4f77dab0
Nov 29 2017 09:32
Guys how do I stick my text to two end of the div
like
li*
image.png
Cristi Ciobanu
@c-ciobanu
Nov 29 2017 09:57
Rishabh Gupta
@RishabhGupta22
Nov 29 2017 10:29
when u click the edit button of recipe it is not showing the name of the original recipe but is saving it when u write anything in that text box . can u help me with showing the original name of the recipe too.
https://codepen.io/rishabhgupta/full/VrGQWN
Cristi Ciobanu
@c-ciobanu
Nov 29 2017 10:32
@RishabhGupta22 adding a placeholder to the text input should do it
@RishabhGupta22 value=is better
Rishabh Gupta
@RishabhGupta22
Nov 29 2017 10:43
@c-ciobanu i don't want to add it as a placeholder but as a value only. But it is not getting edit now
Cristi Ciobanu
@c-ciobanu
Nov 29 2017 10:44
give it the attribute value
Rishabh Gupta
@RishabhGupta22
Nov 29 2017 10:48
@c-ciobanu i have already given it the attribute of value but no edit can be performed on it
Ghost
@ghost~59cdefc7d73408ce4f77dab0
Nov 29 2017 11:03
@c-ciobanu Thx
CamperBot
@camperbot
Nov 29 2017 11:03
parthprakash1 sends brownie points to @c-ciobanu :sparkles: :thumbsup: :sparkles:
api offline
primuscovenant
@primuscovenant
Nov 29 2017 11:35
@heroiczero thx
CamperBot
@camperbot
Nov 29 2017 11:35
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2078 | @heroiczero |http://www.freecodecamp.org/heroiczero
Alvaro
@minutazos
Nov 29 2017 11:43
hi people
dinesh
@1532j0004kg
Nov 29 2017 11:44
iframe is for video !
tundeiness
@tundeiness
Nov 29 2017 11:46
can someone help me with this wikipedia code?

$(document).ready(function(){

  let searchString = document.getElementById('#searchString');

  $(".sbutton").on('click', function(){

    let baseUrl= " https://en.wikipedia.org/w/api.php?action "; 
    let tailUrl ="=query&format=json&prop=links&list=search&titles=searchString+&plnamespace=&srsearch=searchString";
    let wikiLink=baseUrl+tailUrl;

    $.ajax ({
          url:wikiLink,
          type:'GET',
          dataType:'json',
          success : function getWikiData(data){

          var wikiArray = [ ];
          for (var i = 0;  i < len(data.target);  i++){
          wikiArray.push(i);

            //create new paragraph 
          newParagraph = document.createElement("p");

          //create child nodes
          let paraText = document.createTextNode('wikiArray[i]'); 

          //add them as child nodes
          newParagraph.appendChild ("paraText"); 

          document.getElementById("container_div_name").appendChild(newParagraph);  
          }
        },

            error:function(error){
            console.log(error);
          }


    });


  });

});
abraham anak agung
@padunk
Nov 29 2017 12:37
@tundeiness your query string is searchString. while yoo need too combined it both base n tail url into one let and searchString value. something like let wikiLink = url + searchString
and u also need too get the value of searchString Id
tundeiness
@tundeiness
Nov 29 2017 12:39
@padunk thanks bud.
CamperBot
@camperbot
Nov 29 2017 12:39
tundeiness sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @padunk |http://www.freecodecamp.org/padunk
Brandon Blackwell
@Radlerz1
Nov 29 2017 13:54
Hey, for the fcc weather api is the temp in k temp?
A-J Roos
@Asjas
Nov 29 2017 13:55
@Radlerz1 You'll have to specify which api are you using? Glitch, openweathermap or something else?
yeah
A-J Roos
@Asjas
Nov 29 2017 13:56
That is celsius
temp can't be 16 kelvin
Brandon Blackwell
@Radlerz1
Nov 29 2017 13:58
true thanks. I'm not very knowledgeable when it comes to that. I just went back to fix up my old projects and realized the old weather api doesn't work. So I'm trying to convert over to glitch api.
Benjmhart
@Benjmhart
Nov 29 2017 13:58
is anyone here good with react? trying to get a drag-and-drop event started and I'm having some trouble... https://codepen.io/Benjmhart/pen/OOoNpy
Michiel
@MichielHuijse
Nov 29 2017 14:05
Hi I am debugging with console.log in javascript and printing an array . However the console in chrome does not show me which array it is. Is there a way to define that? I want to know this because of ease of use. Because I am logging multiple arrays. Now it only says Array()
Benjmhart
@Benjmhart
Nov 29 2017 14:08
@MichielHuijse you could console.log('arrayname'+array)
Michiel
@MichielHuijse
Nov 29 2017 14:13
@Benjmhart ok thank you
CamperBot
@camperbot
Nov 29 2017 14:13
michielhuijse sends brownie points to @benjmhart :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @benjmhart |http://www.freecodecamp.org/benjmhart
Michiel
@MichielHuijse
Nov 29 2017 14:15
@Benjmhart In the case how you write it I get a different outcome for the same array.
In the following code. arr1 gives different values when logging.

function updateInventory(arr1, arr2) {
  // All inventory must be accounted for or you're fired!

  // Check if arr1 one has value of arr2.

  console.log('arr1' + arr1);
  console.log(arr1);

  console.log('curInv'+ curInv);
  console.log('arr2'+ arr2);

  var updatedArr = arr1.slice(); //@todo adjust to new code.
  var flatArr1 = [];

  // Makes a flat array of the current inventory.
  for (var h = 0; h < arr1.length; h++) {
    flatArr1.push(arr1[h][1]);
  }

  console.log(updatedArr);
  console.log(flatArr1);

  // Compares every newInventory article with every one in the current Inventory array.
  for (var j = 0; j < arr2.length; j++) {
    var newItem = arr2[j][1];
    //console.log(newItem);
    for (var i = 0; i < arr1.length; i++) {
      if (flatArr1.indexOf(newItem)=== -1 && updatedArr.indexOf(newItem)===-1){
        updatedArr.push(arr2[j]);
        //console.log('if');
      }
      else if (arr1[i][1] === newItem) {
        updatedArr[i][0] = arr1[i][0] + arr2[j][0];
        //console.log(arr2);
      //console.log('if else');
      }

      else {
        console.log('do nothing');
      }
    }
  }

  //console.log(updatedArr);
}

// Example inventory lists
  var curInv = [
    [21, "Bowling Ball"],
    [2, "Dirty Sock"],
    [1, "Hair Pin"],
    [5, "Microphone"]
  ];

  var newInv = [
    [2, "Hair Pin"],
    [3, "Half-Eaten Apple"],
    [67, "Bowling Ball"],
    [7, "Toothpaste"]
  ];

  updateInventory(curInv, newInv);
Benjmhart
@Benjmhart
Nov 29 2017 14:22
thats...weird.
doing FCC exercises i prefer to use the return statement as if it were the console, if that makes sense
Alvaro
@minutazos
Nov 29 2017 14:36
Hi, I have this problem: I do an ajax get and I append the content to a div and i give to it some classes, but the css is not applied, how can I fix it?
A-J Roos
@Asjas
Nov 29 2017 14:37
@minutazos Can't say. You need to post a codepen link for someone to check what you are trying to do and what is wrong
Have you checked in the chrome dev tools if there is anything being logged in the console?
Benjmhart
@Benjmhart
Nov 29 2017 14:38
@MichielHuijse there's no need to flatten btw. just iterate each array with a forloop and look at arr1[i][1]
Alvaro
@minutazos
Nov 29 2017 14:40
@Asjas the web is hosted on www.josepcano.com
and the js code is the next one:
// Arreglo para altura de parent divs mas pequeños que imagenes
var altura = function(portfolio) {
  $(portfolio).find('.item').each(function() {
    $(this).css('height', $(this).find('img').css('height'));
  });
};

//Efecto hover
var hover = function(portfolio) {
  $(portfolio).find(".item").hover(function() {
    $(this).find(".masonry-bg").css({
      "opacity": "0.08",
      "transition": "opacity 0.5s"
    });
    $(this).find(".details").css({
      "opacity": "1",
      "transition": "opacity 0.5s"
    });
  }, function() {
    $(this).find(".masonry-bg").css({
      "opacity": "1",
      "transition": "opacity 0.5s"
    });
    $(this).find(".details").css({
      "opacity": "0",
      "transition": "opacity 0.5s"
    });

  });
};

//Cargar y arreglar elementos

var carga = function(categ) {
  $("#more").click(function() {
    switch (categ) {
      case 'projects':
        var content = $.get("/assets/include/load-second-projects.php", function(htmlexterno) {
          $("#more").remove();
          $("#portfolio2").addClass("portfolio masonry");
          $("#portfolio2").append(htmlexterno);
          //Aplicamos arreglos
          altura("#portfolio2");
          hover("#portfolio2");
        });
        break;

        case 'diseno':
          var content = $.get("/assets/include/load-second-diseno.php", function(htmlexterno) {
            $("#more").remove();
            $("#portfolio2").addClass("portfolio masonry");
            $("#portfolio2").append(htmlexterno);
            //Aplicamos arreglos
            altura("#portfolio2");
            hover("#portfolio2");
          });
          break;

        default:
          var content = $.get("/assets/include/load-second.php", function(htmlexterno) {
            $("#more").remove();
            $("#portfolio2").addClass("portfolio masonry");
            $("#portfolio2").append(htmlexterno);
            //Aplicamos arreglos
            altura("#portfolio2");
            hover("#portfolio2");
          });
          break;

    }

  });
};

$(document).ready(
  carga()
);

$(window).load(
  altura('#portfolio')
);

$(document).ready(
  hover('#portfolio')
);
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 14:43
@minutazos was checking the divs seem to have some inline styling to height:0
is there anything taht could make it happen or its part of the mistake you are trying to spot?
btw nice design
Alvaro
@minutazos
Nov 29 2017 14:46
in which div you've seen styling to height 0?
thank you :)
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 14:46
btw
image.png
a typo if tyou want to fix it now but its not the problem eheh
here
image.png
Alvaro
@minutazos
Nov 29 2017 14:48
wth xd in my pc it appears height: 18px :')
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 14:49
and I haven't look in div into the code but why not append it to the same div?
Alvaro
@minutazos
Nov 29 2017 14:49
yeah i think this is the problem, and I don't know why it appears, because the js affects the css of the element and dont touch the inline style no?
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 14:49
deep*
Alvaro
@minutazos
Nov 29 2017 14:52
I've forgotten why I was appending to a different div, but now that I append to the same div it works so ill do like this
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 14:53
it works with appending to the same div?
it works here now with 2 sections what a strange thing hope you spoted the issue :D
Alvaro
@minutazos
Nov 29 2017 14:55
nope, there is the same problem :/ it appears on a column of the masonry div but there is the same css problem :S
yeah, i dont know why, if you refresh the page, then the problem is solved
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 14:56
imcheckign the http://josepcano.com/
and it's working
Alvaro
@minutazos
Nov 29 2017 14:56
but the first time you load the page, the problem appears
is like, if you refresh the page i dont know why (maybe cache?) it is fixed
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 14:56
yeah I used ctrl+f5 to refresh it and eveything appears in a strange way let me try to see it
var altura = function(portfolio) {
  $(portfolio).find('.item').each(function() {
    $(this).css('height', $(this).find('img').css('height'));
  });
};
you7 are setting the divs size based on this?
what would happen if you didnt set any size?
Alvaro
@minutazos
Nov 29 2017 15:22
sorry i was afk
if the size is not applied by js, the images appears like appears now :')
and this "fix" works for the first load of the page, but after the ajax call it doesn't works
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 15:34
its kind hard to help @minutazos in this situation would be great if you could upload only this part of the code and css into a codepen
and the js ofcourse
Alvaro
@minutazos
Nov 29 2017 15:36
but there is also php, thats why i cant upload to codepen :S
Tiago Correia
@tiagocorreiaalmeida
Nov 29 2017 15:36
I saw that you make a request to your php right?
wouldnt we be able to request it from the codepen?
juni
@junipberry
Nov 29 2017 19:17

hey guys, I’m working on decoding Roman Numerals atm. I have this so far:

function solution(roman){
let numKey={
1000: M,
 900:CM,
 500: D,
 400:CD,
 100: C,
  90:XC,
  50: L,
  40:XL,
  10: X,
   9:IX,
   5: V,
   4:IV,
   1: I,
}
let number=0;
for (i in numKey){
while (roman.indexOf(numKey[i]) === 0){
      number += i;
      roman = roman.replace(numKey[i],'');
    }
  }
  return number;
}

but I’m getting problems passing

does anyone know what I can fix for the better?
Tom
@moT01
Nov 29 2017 19:22
i dont like that for loop @junipberry
alpox
@alpox
Nov 29 2017 19:22
@junipberry You need quotes around the roman numbers: "M", not M
And what @moT01 says. :D
Tom
@moT01
Nov 29 2017 19:24
well, i dont know - i was just going to try and point her toward the way i did it
but yea, dont like it
i would just use a while loop and count up towards the number or down from the number
alpox
@alpox
Nov 29 2017 19:32
Yea there is something wrong with the loops anyway
AbrisM
@AbrisM
Nov 29 2017 20:56
Hi, could someone explain why my code is not working? I am converting from jquery to vanilla javascript but it won't type out any letters on the page. https://jsfiddle.net/qnoshanr/1/
A-J Roos
@Asjas
Nov 29 2017 21:00
@AbrisM There are a couple of errors in Chrome Dev Tools. RansomNote.css, RansomNoteJS.jsare missing. It won't work if they aren't loaded
Id suggest using https://codepen.io instead of https://jsfiddle.net as codepen allows you to load 3rd party css and js files
AbrisM
@AbrisM
Nov 29 2017 21:03
@Asjas ransomenote.css and ransomnotejs.js are working, since they are located in the same file. The problem I have with codepen.io however is that it loads the jquery library, which I don't want hahaha
A-J Roos
@Asjas
Nov 29 2017 21:03
You can then delete the jquery library which will stop it from loading
And no they aren't working. Load your jsfiddle link and open chrome dev tools. You'll find 2 404 not found errors. jsfiddle doesn't support 3rd party files
AbrisM
@AbrisM
Nov 29 2017 21:12
Okay, I will try codepen again
https://codepen.io/anon/pen/EbONJL with codepen I see no website and it looks like i'm getting console errors from codepen itself
A-J Roos
@Asjas
Nov 29 2017 21:16
@AbrisM Just read the js error in codepen. It tells you there is a problem to fix.
@AbrisM There is also no libraries added in the codepen settings tab
Linus Phan
@linusphan
Nov 29 2017 21:22
Hey can anyone help me on a challenge?
hibaakel
@hibaakel
Nov 29 2017 21:23
How can do my page fit to mobile only by css?
Jean Marco Romero
@volkranium
Nov 29 2017 21:24
Can someone please help... Why isnt the #zodiacSign span setting its textContent not changing to the right zodiac sign? https://codepen.io/hellbentcode/pen/dZQOBr
Linus Phan
@linusphan
Nov 29 2017 21:24
@hibaakel I think maybe to make it fit, you need the meta tag with the viewport setting. I'm not too sure though
Because I think what that tag does is that it makes it so the browser knows that the width of the page should correspond to the width of the phone
and then you can set the container width to 100% maybe
and use @media queries? lol I'm still new at this. Please correct me anyone if im wrong
Matthew Hoth
@kingofthecross
Nov 29 2017 21:28
@hibaakel yeah what linus mentioned. here is the tag : <meta name="viewport" content="width=device-width, initial-scale=1.0">
if have a pen i'll take a look at it for you
hibaakel
@hibaakel
Nov 29 2017 21:29
Its work but i use some h1 and h3 they look mess
AbrisM
@AbrisM
Nov 29 2017 21:31
@Asjas Hi, we aren't allowed to use the libraries, so I had to take them out. I'm looking at the code-pen version and the page is not even loading now hahaha
A-J Roos
@Asjas
Nov 29 2017 21:31
@AbrisM Correct. You still haven't fixed the codepen errors. It will fail to load until you fix it
hibaakel
@hibaakel
Nov 29 2017 21:31
@kingofthecross take look https://codepen.io/hibaakel/pen/GOwrrp
A-J Roos
@Asjas
Nov 29 2017 21:35
@volkranium Remove the <form> html elements and your website works. You are trying to submit a form to a js file and it causes the website to reload after you click submit.
I removed the form element and tested with my date and month and it sets the textContent of the span
Jean Marco Romero
@volkranium
Nov 29 2017 21:36
@Asjas Can i solve that by preventing default behaviour?
@Asjas many thanks
CamperBot
@camperbot
Nov 29 2017 21:36
volkranium sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @asjas |http://www.freecodecamp.org/asjas
A-J Roos
@Asjas
Nov 29 2017 21:38
Why do you need a form? Will you be sending the data to a server to proccess?
Matthew Hoth
@kingofthecross
Nov 29 2017 21:38
@hibaakel you're using absolute positioning
Jean Marco Romero
@volkranium
Nov 29 2017 21:39
@Asjas maybe later on , but thanks anyways it worked
CamperBot
@camperbot
Nov 29 2017 21:39
volkranium sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
api offline
Matthew Hoth
@kingofthecross
Nov 29 2017 21:39
I suggest looking into a more responsive design by using flexbox, and css grids later on
for now,
create a couple media queries to reposition everything according to screen size
A-J Roos
@Asjas
Nov 29 2017 21:39
The same can be achieved by keeping the form to group the inputs and setting the button outside the form. That triggers javascript but not the form submit.
Linus Phan
@linusphan
Nov 29 2017 21:40
can anyone help me in a coding challenge on FCC?
Matthew Hoth
@kingofthecross
Nov 29 2017 21:40
that said, it will only look good on devices with X screen size
A-J Roos
@Asjas
Nov 29 2017 21:40
@linusphan For someone to assist you post the problem with code if you have and someone helps if they have a chance
Linus Phan
@linusphan
Nov 29 2017 21:40
@Asjas Gotcha, thanks.
CamperBot
@camperbot
Nov 29 2017 21:40
linusphan sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @asjas |http://www.freecodecamp.org/asjas
Matthew Hoth
@kingofthecross
Nov 29 2017 21:40

here is an example of a media query:

@media (min-width: 925px) {
code goes here
}

Linus Phan
@linusphan
Nov 29 2017 21:41

//Setup
var contacts = [
    {
        "firstName": "Akira",
        "lastName": "Laine",
        "number": "0543236543",
        "likes": ["Pizza", "Coding", "Brownie Points"]
    },
    {
        "firstName": "Harry",
        "lastName": "Potter",
        "number": "0994372684",
        "likes": ["Hogwarts", "Magic", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName": "Holmes",
        "number": "0487345643",
        "likes": ["Intriguing Cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "unknown",
        "likes": ["Javascript", "Gaming", "Foxes"]
    }
];



function lookUpProfile(firstName, prop){
// Only change code below this line

  for (var i = 0; i < contacts.length; i++) {
    if (firstName in contacts[i] && contacts[i].prop) {
      return contacts[i].prop;
    }
    else if (firstName in contacts[i] && !contacts[i].prop) {
      return "No such property";
    } 
  }
  return "No such contact";

// Only change code above this line
}

// Change these values to test your function
lookUpProfile("Akira", "likes");
Matthew Hoth
@kingofthecross
Nov 29 2017 21:41
You can also set it to listen for mobile user agents only
Linus Phan
@linusphan
Nov 29 2017 21:41
My code isn't working
the reason I think is because i'm not looking up the values right
im not sure how to do that
Matthew Hoth
@kingofthecross
Nov 29 2017 21:42
i gotcha linus
sorry man, was checking out another dude's pin
i suggest you do a little nesting
i'll start by giving a hint rather than the answer out right
Linus Phan
@linusphan
Nov 29 2017 21:43
i super appreciate that, thanks!
Matthew Hoth
@kingofthecross
Nov 29 2017 21:44

within your for loop:

```
if( X is equal to Y ) {
if( X has a certain property ) {
return something;
} else {
return "No such property";
}
}
}
return "No such contact";
}

```

```

```

hibaakel
@hibaakel
Nov 29 2017 21:45
@kingofthecross i was try to the title and sub title in middle the back ground how i can fixed with css if you now or anyone can help?
Matthew Hoth
@kingofthecross
Nov 29 2017 21:46
fuckin formatting
lol
@hibaakel Yeah, centering with CSS is traditionally pretty tough. With flexbox centering objects vertically and horizontally is really easy!
with flexbox it's as simple as
.container {
  justify-content: center;
  align-items: center;
}
Linus Phan
@linusphan
Nov 29 2017 21:48
@kingofthecross
function lookUpProfile(firstName, prop){
// Only change code below this line

  for (var i = 0; i < contacts.length; i++) {
    if (contacts[i].firstName == firstName) {
      if (contacts[i].prop) {
        return contacts.prop;
      }
    }
    else if (contacts[i].firstName == firstName) {
      if (!contacts[i].prop) {
        return "No such property";
      }
    } 
  }
  return "No such contact";

// Only change code above this line
}
That's what I have now
Markus Kiili
@Masd925
Nov 29 2017 21:51
@linusphan .prop looks for the property key "prop" and not the key stored in parameter prop.
You should also use the .hasOwnProperty() check for property existence check.
Matthew Hoth
@kingofthecross
Nov 29 2017 21:52
^ yep
you're gnna want to use the .hasOwnProperty() method
oops
he typed it first lol
hibaakel
@hibaakel
Nov 29 2017 21:54
I have no idea how to deal with flexbox
Matthew Hoth
@kingofthecross
Nov 29 2017 21:54
and on your return function
you want to return the object you just checked for
return contacts[i][prop];
@hibaakel that's okay! i'll fix your pen real quick to demostrate. it's worth learning, it will make your life a lot easier
actually, i shouldn't do it for you. i should provide a chance to learn
check out this short article on centering things with flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Daniel
@DanJP2016
Nov 29 2017 22:00
I'm working on the build a calculator project and I'm trying to use the shunting-yard algorithm for parsing and evaluating the math input. So far the program works when inputing data like "1 + 1 = 2, + 1 = 3", and when inputing " 1+ 1+1 = 3", but when trying to input more than that " 1 + 1 + 1 + 1 = 4", the program returns 3 and NaN is stored in the stack. I built a test pen to try to isolate the problem but I still can't figure out where i went wrong. would appreciate any help.
https://codepen.io/bones211/pen/MOzbzo?editors=0011
Ivan Ngundela
@ingundela
Nov 29 2017 22:01
hello everyone... please I need some help with my project...https://ingundela.github.io/annie/ I'm not able to see content of section class="aboutus" in my website..
Linus Phan
@linusphan
Nov 29 2017 22:04
this is hard
Ivan Ngundela
@ingundela
Nov 29 2017 22:04
.aboutus{
    padding: 100px 0;
    background: yellow;
    position: absolute;

}
Matthew Hoth
@kingofthecross
Nov 29 2017 22:06
@linusphan post what you have so far
let's talk through it
Ivan Ngundela
@ingundela
Nov 29 2017 22:06
I'm on this issue for so long and I can figure it out the solution.... when I give the velue position: absolute to .aboutus I can see the yellow background but on half of the container..
Matthew Hoth
@kingofthecross
Nov 29 2017 22:08
@ingundela is aboutus suppose to also be in the header?
@ingundela nvm found what you mean
Ivan Ngundela
@ingundela
Nov 29 2017 22:09
@kingofthecross no, its a totally new section on the page..I'm done with the header
hibaakel
@hibaakel
Nov 29 2017 22:09
Dont work
Linus Phan
@linusphan
Nov 29 2017 22:09

//Setup
var contacts = [
    {
        "firstName": "Akira",
        "lastName": "Laine",
        "number": "0543236543",
        "likes": ["Pizza", "Coding", "Brownie Points"]
    },
    {
        "firstName": "Harry",
        "lastName": "Potter",
        "number": "0994372684",
        "likes": ["Hogwarts", "Magic", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName": "Holmes",
        "number": "0487345643",
        "likes": ["Intriguing Cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "unknown",
        "likes": ["Javascript", "Gaming", "Foxes"]
    }
];



function lookUpProfile(firstName, prop){
// Only change code below this line


  for (var i = 0; i < contacts.length; i++) {
    if (contacts[i].firstName == firstName) {
      if (contacts.hasOwnProperty(prop)) {
        return (contacts[prop]);
      }
    }
    if (contacts[i].firstName == firstName) {
      if (!contacts[i].hasOwnProperty(prop)) {
        return "No such property";
      }
    }
  }

  return "No such contact";


// Only change code above this line
}

// Change these values to test your function
lookUpProfile("Akira", "likes");
Ivan Ngundela
@ingundela
Nov 29 2017 22:12
@kingofthecross sorry, where have you seen nvm found on the page...?
@kingofthecross basically I'm starting a new section.. all I want is to have a full height hero image... but now it seems that the about content is behind the image
Matthew Hoth
@kingofthecross
Nov 29 2017 22:12
@ingundela ah i see
it begins servicos then has lipsum right?
Ivan Ngundela
@ingundela
Nov 29 2017 22:13
@kingofthecross check, if you add positon: absolute to the class about, you able to see the yellow background but only half of the page...
@kingofthecross yes... it was just to have some content
Matthew Hoth
@kingofthecross
Nov 29 2017 22:13
yeah
it's a problem with your html/body css
if you delete height:100% you'll notice it appears and you can scroll normally again
Linus, WHICH contacts object do you want to return?
Ivan Ngundela
@ingundela
Nov 29 2017 22:16
@kingofthecross if I delete the height:100% from the html/body and don't have the full height hero image that I want
Linus Phan
@linusphan
Nov 29 2017 22:18
OMGGGGGGGGGGG
FINALLY SOLVED IT!!!!!!!!
Matthew Hoth
@kingofthecross
Nov 29 2017 22:18
linus you got it?
nice!
Linus Phan
@linusphan
Nov 29 2017 22:18
OMG
Matthew Hoth
@kingofthecross
Nov 29 2017 22:18
fist bump
Linus Phan
@linusphan
Nov 29 2017 22:18
this is what it feels like
in coding
to solve a problem that you have been stuck on
all this time
hahaahah
@kingofthecross THANK YOU!!!!
CamperBot
@camperbot
Nov 29 2017 22:19
linusphan sends brownie points to @kingofthecross :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @kingofthecross |http://www.freecodecamp.org/kingofthecross
Matthew Hoth
@kingofthecross
Nov 29 2017 22:19
@ingundela yeah, i recommend you set the height of the hero to cover the page (in typical hero fashion)
width 100%
height auto
should do it
hibaakel
@hibaakel
Nov 29 2017 22:19
i try to fix but didn't work
Matthew Hoth
@kingofthecross
Nov 29 2017 22:20
i didn't take a look around your code too much but 100% height is a frowned upon line of css tbh
hibaakel
@hibaakel
Nov 29 2017 22:20
i used flex but seem to me not work
Matthew Hoth
@kingofthecross
Nov 29 2017 22:21
hibaakel, take a look here : https://codepen.io/brianhaferkamp/pen/OXQoxL
compare with yours
tweak , adjust, profit
be sure to click the setting in the css box to view the compiled css as you are not using sass
Ivan Ngundela
@ingundela
Nov 29 2017 22:22
@kingofthecross done it but still no luck..
Matthew Hoth
@kingofthecross
Nov 29 2017 22:24
what size do you want the hero image?
yeah
fixed
get rid of that height:100% prop attached to your html and body
then change the height:100% prop on your hero section to height:100vh
then it will look like this:
Ivan Ngundela
@ingundela
Nov 29 2017 22:27
@kingofthecross SOLVED!!!!! THANK YOU using https://codepen.io/brianhaferkamp/pen/OXQoxL
CamperBot
@camperbot
Nov 29 2017 22:27
ingundela sends brownie points to @kingofthecross :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @kingofthecross |http://www.freecodecamp.org/kingofthecross
Matthew Hoth
@kingofthecross
Nov 29 2017 22:28
fistbump
Ivan Ngundela
@ingundela
Nov 29 2017 22:30
@kingofthecross in some youtube videos in order to have the full with and height image they set html and body height: 100%; ??
Matthew Hoth
@kingofthecross
Nov 29 2017 22:36
@ingundela They suck lol
honestly, it's not the worst thing in the world but nesting 100%s is a no no
Ziratsu
@Ziratsu
Nov 29 2017 22:38
Hello guys I have some trouble, i can't make this second image working with hover, it's just don't work I have 0 ideas why, can you give me a hand?https://jsfiddle.net/ygg77rvv/
Matthew Hoth
@kingofthecross
Nov 29 2017 22:38
i was wrong that having just the html/body css set to that was the problem, it was the nesting of the 100%s
better for width to be 100% and height auto
Linus Phan
@linusphan
Nov 29 2017 22:38
Yeah I just finished basic javascript section on FCC
^_^
Matthew Hoth
@kingofthecross
Nov 29 2017 22:38
decided to redo my personal website this morning
Ziratsu
@Ziratsu
Nov 29 2017 22:38
The third images actually in the link i've dropped
Matthew Hoth
@kingofthecross
Nov 29 2017 22:38
bout 60% done
hit me with some feedback
matthewhoth.com
Ziratsu
@Ziratsu
Nov 29 2017 22:39
It's great @kingofthecross
Linus Phan
@linusphan
Nov 29 2017 22:39
@kingofthecross lol the site is blocked for me
since im at the library
Matthew Hoth
@kingofthecross
Nov 29 2017 22:39
word?
lame
ziratsu did it load well for you?
let me look at your fiddle real quick

education-bloc12:h

Ziratsu
@Ziratsu
Nov 29 2017 22:40
Yep it load well
Matthew Hoth
@kingofthecross
Nov 29 2017 22:40

bloc12:h

Ziratsu
@Ziratsu
Nov 29 2017 22:40
backet and desktop
Matthew Hoth
@kingofthecross
Nov 29 2017 22:41

bloc

Ziratsu
@Ziratsu
Nov 29 2017 22:41
I really like the way you display your site
?
Matthew Hoth
@kingofthecross
Nov 29 2017 22:41
missing a letter lol
Ziratsu
@Ziratsu
Nov 29 2017 22:42

education-bloc12:hover

Matthew Hoth
@kingofthecross
Nov 29 2017 22:42
your id is "id="education-block12"
Ziratsu
@Ziratsu
Nov 29 2017 22:42
yep
Matthew Hoth
@kingofthecross
Nov 29 2017 22:42
block vs bloc
Ziratsu
@Ziratsu
Nov 29 2017 22:43
omh
omg
omg it's been 6hours I was coding I think it's really time to go take a nap
thank you and I repeat your site design is very cool
Matthew Hoth
@kingofthecross
Nov 29 2017 22:44
appreciate it. big change from the last one, went from decked out with fancy effects to minimalistic
good luck with your coding
treat yourself to a nap!
Ziratsu
@Ziratsu
Nov 29 2017 22:45
Thank you, cheer from France