These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Sep 2017
Alexx Martínez
@AlexxMart
Sep 15 2017 00:16
I am in the "Local Weather" challenge and I have NO CLUE how to process? a JSON request
where can I learn how to use JSON in a way that is useful for this challenge, I'm totally lost
Paige T
@pmtaylor832
Sep 15 2017 00:27
what does this mean in javascript "str.replace(/[\W_]/g,'').toLowerCase(); "?
korzo
@korzo
Sep 15 2017 00:29
@pmtaylor832 Replace all non-alphanumeric characters and lowercase the result
Paige T
@pmtaylor832
Sep 15 2017 00:30
@korzo What about this part of the code "(/[\W_]/g,'')"?
korzo
@korzo
Sep 15 2017 00:31
@pmtaylor832 Replace all non-alphanumeric characters with empty character (remove it)
Alexx Martínez
@AlexxMart
Sep 15 2017 00:31
@korzo Thanks for the inormation, I will check it right now
CamperBot
@camperbot
Sep 15 2017 00:31
alexxmart sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @korzo |http://www.freecodecamp.com/korzo
Paige T
@pmtaylor832
Sep 15 2017 00:33
@korzo Doesn't this "\W" means "Find a non-word character"? I am sorry for so many questions.
korzo
@korzo
Sep 15 2017 00:36
@pmtaylor832 Yes
brackets are set of characters to search for, so it search for non-characters (\W) and _
@pmtaylor832 Try your regex here: https://regexr.com/
At the bottom is "Explanaition"
Amit Patel
@AmitP88
Sep 15 2017 00:39
hey guys, is it possible to store x and y in canvas in variables? (not a specific x and y coordinate, but just in general) I'm trying to get my grid to where each cell has only 1 random image inside (my for loop is generating 64 random images in each cell). I've written a for loop to solve this, but in order for it to work, I need to store x and y canvas coordinates in their own variables. https://github.com/AmitP88/Knights-of-Camelot/tree/master/Knights%20of%20Camelot/js
Paige T
@pmtaylor832
Sep 15 2017 00:47
@korzo Thanks I appreciate it
CamperBot
@camperbot
Sep 15 2017 00:47
pmtaylor832 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 489 | @korzo |http://www.freecodecamp.com/korzo
Zebralight
@zebralight
Sep 15 2017 01:44
I'm not the biggest fan of using a package manager to retrieve a bunch of modules just to get a bare working version of a react app going. Is there a way to have a react app going with just a couple files and references to the cdn? I tried to no avail.
Peter Steele
@PeterHSteele
Sep 15 2017 01:52
@zebralight idk, im just working on the react challenges now and ive only ever used it on codepen. From my extremely limited experience it seems like if you got babel + react cdn + reactdom cdn you would be able to get something started
Zebralight
@zebralight
Sep 15 2017 01:58
gotcha
I'll try that @PeterHSteele. This was mainly for the context of codepen
Alex
@cyberpunk1971
Sep 15 2017 02:46
hello eveyone
When building the personal portfolio, where do I get all the social media icons?
Ruchika Sharma
@ruchika90
Sep 15 2017 02:50
@Manish-Giri worked, thanks
CamperBot
@camperbot
Sep 15 2017 02:50
ruchika90 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6537 | @manish-giri |http://www.freecodecamp.com/manish-giri
Alexx Martínez
@AlexxMart
Sep 15 2017 02:52
Alex, you can check "Font Awesome" for the social icons, you can also read in the docs how to use them
Alex
@cyberpunk1971
Sep 15 2017 02:54
@AlexxMart Thx dude
CamperBot
@camperbot
Sep 15 2017 02:54
cyberpunk1971 sends brownie points to @alexxmart :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @alexxmart |http://www.freecodecamp.com/alexxmart
Kent Saeteurn
@sansae
Sep 15 2017 03:31

hi all,
i'm working on the twitch app and am having trouble with properly expanding my buttons on hover. (note: my "buttons" are actually brown squares)

WHAT I HAVE WORKING SO FAR:
when i hover over a button, it expands the way i want it to (from 20px to 60px)
THE PROBLEM:
when i hover over a button, the other elements that's on the same row magically moves along with the button that i am currently hovering
(you'll notice two things: 1. the text and the button in the center moves, and 2. the other button elements move as well)
WHAT I WANT:
the only thing i want to move is the element that is being hovered

here's my pen: https://codepen.io/anon/pen/BwNQaE
Can anyone help? Thanks in advance

I've tried several different approaches, but to no avail. One that I thought would work was using bootstrap's columns. I came close, but there were two glaring problems: 1. this wasn't responsive (surprisingly); on screen resize, the buttons slid out of the div container, and 2) the hovered button would expand from left to right (i want it to go from right to left, since I have my buttons pushed up on the right wall of my container)

Muhammad Ruhul Amin
@gskls
Sep 15 2017 03:50
@sansae you have to make the buttons position:absolute
Simply think about it -
The buttons are relative to other elements on the parent container.If u increase the width of the buttons it will affect other element in that parent container
Muhammad Ruhul Amin
@gskls
Sep 15 2017 04:08
@sansae here's an working version of your pen https://codepen.io/ruhulamin3482/pen/XebNZz?editors=1100
Liam Docherty
@ldocherty1
Sep 15 2017 05:30
What does h-100 do in the following code <div class="row h-100"> ?
Markus Kiili
@Masd925
Sep 15 2017 05:33
@ldocherty1 That is just a class name that can be used on CSS for example.
Liam Docherty
@ldocherty1
Sep 15 2017 05:33
thanks
Liam Docherty
@ldocherty1
Sep 15 2017 06:03
When a user clicks on my button I want them to be able to download a docx file. However, when I click on the button something happens. What is wrong with my code? <a class="btn btn-default btn-xl js-scroll-trigger" href="../cv/cv.docx">Click To Download My CV</a>
Rafael Monroy
@rafaelmonroy
Sep 15 2017 06:31
hey guys, having some trouble with my roman numeral challenge, to me(lol) the logic in my code makes sense but obviously im wrong lol can someone help me out?

function convertToRoman(num) {
  var obj = {1000:'M', 900:'CM', 500:'M', 100:'C', 90:'XC', 50:'L', 40:'XL', 10:'X', 9:'IX', 5:'V', 4:'IV', 1:'I'},
      roman = [];

  for (var i in obj){
    if (num >= i){
      roman.push(obj[i]);
      num = num - i;
    } else {
      break;
    }
  }
  return roman.join('');
}

convertToRoman(5);
Markus Kiili
@Masd925
Sep 15 2017 06:33
@rafaelmonroy The language standard doesn't guarantee that the for...in loop iterates those object keys in insertion order. Therefore it is better to use two arrays holding the letters and numbers.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 06:33
@Masd925 ohhh kool thanks man
CamperBot
@camperbot
Sep 15 2017 06:33
rafaelmonroy sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4485 | @masd925 |http://www.freecodecamp.com/masd925
Markus Kiili
@Masd925
Sep 15 2017 06:34
You can use a nested while loop to generate sufficient amount of letters.
@rafaelmonroy
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Sep 15 2017 06:39

@ldocherty1

when I click on the button something happens.
Did you mean something or nothing?

And can you give us a link to the website so we can take a look ourselves?
Rafael Monroy
@rafaelmonroy
Sep 15 2017 06:52
@Masd925 after creating the two arrays how can I assign the values to each other, I was thinking having two seperate for loops, but then I got stuck when trying to assing the values to each other
Markus Kiili
@Masd925
Sep 15 2017 06:53
@rafaelmonroy You can just loop the array of numbers. Then use the array index to get the letter from the other array.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 06:53
ohh ok with the same variable…
Markus Kiili
@Masd925
Sep 15 2017 06:55
@rafaelmonroy One loop through the array of numbers and nested loop that checks how many times the number fits into the number.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 07:01
@Masd925 cool man! got it to work! woooooo
function convertToRoman(num) {

  var roman = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'],
      number = [1000,900,500,400,100,90,50,40,10,9,5,4,1],
      answer = [];

  for (i=0;i<number.length;i++){
    while(num>=number[i]){
      answer.push(roman[i]);
      num = num - number[i];
    }
  }

  return answer.join('');
}

convertToRoman(9);
Markus Kiili
@Masd925
Sep 15 2017 07:02
@rafaelmonroy You could avoid the array manipulation by just appending to a result string, but that is fine too.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 07:03
@Masd925 ohh ok, let me try that
ohhhhhhhHHHHH I see, the “helpful links" made me think I had to use at least one of them lol

function convertToRoman(num) {

  var roman = ['M','CM','D','CD','C','XC','L','XL','X','IX','V','IV','I'],
      number = [1000,900,500,400,100,90,50,40,10,9,5,4,1],
      answer = '';

  for (i=0;i<number.length;i++){
    while(num>=number[i]){
      answer = answer + roman[i];
      num = num - number[i];
    }
  }

  return answer;
}

convertToRoman(9);
Markus Kiili
@Masd925
Sep 15 2017 07:07
@rafaelmonroy Helpful links are just suggestions. When the long winter nights come, you can think how to solve it with just one array var ROM = [ 'I', 'V', 'X', 'L', 'C', 'D', 'M' ];
Rafael Monroy
@rafaelmonroy
Sep 15 2017 07:08
@Masd925 lol ill keep that in mind, right now just happy I got through it lol
and am able to understand the logic behind the code
whew
Markus Kiili
@Masd925
Sep 15 2017 07:09
@rafaelmonroy Good job. That is very elegant solution.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 07:09
@Masd925 thanks! alright off to the next one!
CamperBot
@camperbot
Sep 15 2017 07:09
rafaelmonroy sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Henry
@GitHub-Henry
Sep 15 2017 07:09
@Masd925 Are you saying, "Winter is coming"?
Rafael Monroy
@rafaelmonroy
Sep 15 2017 07:10
@GitHub-Henry lol
Markus Kiili
@Masd925
Sep 15 2017 07:13
@GitHub-Henry Hopefully in late 2018.
Henry
@GitHub-Henry
Sep 15 2017 07:15
@Masd925 @rafaelmonroy Should be awesome.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 07:44

ok so I see the problem with my code, I just dont know the syntax to fix it lol

function whatIsInAName(collection, source) {
  // What's in a name?
  var arr = [];
  // Only change code below this line

  for (var i in collection){
    if (collection[i].hasOwnProperty(Object.keys(source))){
      arr.push(collection[i]);
    }
  }

  // Only change code above this line
  return arr;
}

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

it is returning all of collection[i] because they all contain the key “last” BUT i want to return collection[i] if the VALUE of the key is there. the thing is I dont know to how make the code look for the value instead of the property… am I close or am I just so far off I should just call it a night lol

Markus Kiili
@Masd925
Sep 15 2017 07:45
@rafaelmonroy You need another nested loop or iteration through source's keys.
You need to keep those objects that have matching property values with source, for all the source's keys.
A simple for loop is better for looping array indices.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 07:48
@Masd925 so nest a simple loop inside my for in loop?
or scratch the for in loop ?
Markus Kiili
@Masd925
Sep 15 2017 07:49
@rafaelmonroy You can use nested for loops and some loop logic there. There are also handy array methods that could be used instead.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 07:50
smh, second time for in loops fail me lol alright, BACK TO THE DRAWING BOARD! lol @Masd925
Rafael Monroy
@rafaelmonroy
Sep 15 2017 08:23
@Masd925 whats the syntax to see if two objects had matching property values?
Markus Kiili
@Masd925
Sep 15 2017 08:35
@rafaelmonroy If obj is the looped object, you can test obj[key]=source[key]. If that holds for all the looped source keys, you keep the object.
Rafael Monroy
@rafaelmonroy
Sep 15 2017 09:01
damn, couldnt figure it out. going to sleep a defeated man :( BUT ILL BE BACK !
Yvonne
@yvonne6344
Sep 15 2017 09:21
can I ask some question about angularJS ?
function sumFibs(num) {

  var check = [0,1];
  var arr1 = [1];
  var arr2 =[];
  var sum ;
  var oddFsum = 0;
  var evencheck;

  for(var i = 2 ; i <= num;i++)
    {
      sum = check[i-1] + check[i-2];
      evencheck = sum %2 ;

      if(sum< num){
        check.push(sum);
      }


      if(evencheck == 0){

        arr2.push(sum);
      }else if ((evencheck !=0) && sum <num){

          arr1.push(sum) ;

      }
    }



  for (var k = 0 ; k < arr1.length;k++){

   oddFsum += arr1[k]; 

  }

  return oddFsum ;

}

sumFibs(75025);
its last part is not working please anyone help me
heroiczero
@heroiczero
Sep 15 2017 10:33
@usmanakram1996 you want to sum all odd number so check if num is a odd or even if odd add to the total i think
Usman Akram
@usmanakram1996
Sep 15 2017 10:34
actually all the test cases are working perfect except this 75025
please help @heroiczero
heroiczero
@heroiczero
Sep 15 2017 10:37
@usmanakram1996 ok im taking a look at it
Usman Akram
@usmanakram1996
Sep 15 2017 10:37
sure :)
heroiczero
@heroiczero
Sep 15 2017 10:38
@usmanakram1996 dont you want sum less than and equal to else if ((evencheck !=0) && sum <num) for this
Usman Akram
@usmanakram1996
Sep 15 2017 10:39
dude brilliant thank you soo much @heroiczero
CamperBot
@camperbot
Sep 15 2017 10:39
usmanakram1996 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1733 | @heroiczero |http://www.freecodecamp.com/heroiczero
Usman Akram
@usmanakram1996
Sep 15 2017 10:39
man respect for you :) @heroiczero
Thanks a lot :+1: @heroiczero
CamperBot
@camperbot
Sep 15 2017 10:40
usmanakram1996 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
api offline
heroiczero
@heroiczero
Sep 15 2017 10:40
@usmanakram1996 np :) happy to help
Usman Akram
@usmanakram1996
Sep 15 2017 10:40
:D really u saved my day ;)
Apprryx
@Apprryx
Sep 15 2017 11:14
Hi guys, how would you write this?
Write a function for adding 2 numbers that are passed in one by one.
function sum(a) {
  // ... ?
}
sum(10)(20) // returns 30
just1witness
@just1witness
Sep 15 2017 11:27
recursion, use a function that stores the first arg, and call that function inside it, to add the second arg with the first. Argument is a key word also, btw, look it up :)
korzo
@korzo
Sep 15 2017 11:31
@just1witness You meant closure, right?
just1witness
@just1witness
Sep 15 2017 11:35
ha! sure. Do I? Probably maybe? I am still wet behind the ears and throw around wrong names for things on a regular basis. I need to seriously become more familiar with closure and recursion though. I've been working on projects for so long now, I feel like I'm drifting away from what I do know abut them even.
@korzo
korzo
@korzo
Sep 15 2017 11:37
61Qi9hCxdsL._UL1236_.jpg
@just1witness Recursion is when you call function from itself

@just1witness Closure is when parameter is enclosed in function. For example

function sum(a) {
    return function(b) {
        return a + b;
    }
}

console.log(sum(10)(20));

@Apprryx

just1witness
@just1witness
Sep 15 2017 11:41
lol
nice meme :)
I actually get it, lol
cool. I feel like closure, recursion and api use were not well covered and all of them have confused me even after successfully using them. I finally get api's so there's hope after all! :) @korzo
korzo
@korzo
Sep 15 2017 11:49
@just1witness That's true. some most important topics are not covered or only very sketchily on fcc.
But after all, there is a lot of free resources to learn about it
just1witness
@just1witness
Sep 15 2017 11:55
Yeah, and I still feel like I'm doing ok considering I didn't even know what code was three months ago, lol. Almost done with every front end challenge just two projects left. I have a lot to learn still
@korzo
korzo
@korzo
Sep 15 2017 12:11
@just1witness that's good progress
just1witness
@just1witness
Sep 15 2017 12:14
@korzo Thank you :)
CamperBot
@camperbot
Sep 15 2017 12:14
just1witness sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @korzo |http://www.freecodecamp.com/korzo
Sergii Gatezh
@gatezh
Sep 15 2017 12:20
Hi guys! Is there anybody good with flexbox?
I have a form that I want to make responsive: two columns with two inputs in desktop mode. It works fine.
The problem is that one of those inputs is credit card number that I have to split into 4 separate input fields in a row. When I split that credit card input into 4 inputs columns become unequal.
Any ideas?
Jake
@JakeDVirus
Sep 15 2017 12:35
i have added a class via jquery $img.attr({src: logo, "class": "logo-offline"}); in line-20.
and the classlogo-offline has the rule { border-radius: none; border: none !important; padding: 10px;}in line-124. But this style rule of logo-offline is not being executed.
Also by doing inspect elementin the debug mode i also cross verified the insertion/addition of logo-offline class in the target element and the mentioned class do exist in the element so i presume the issue is not with the jquery statement but with css .
i thought first that there might be a specificity issue but then i used the keyword !important but still the rule is not being executed
https://codepen.io/neel111/pen/rGVaNX?editors=0110
can anyone help me figure this out?
Jake
@JakeDVirus
Sep 15 2017 12:42
Got it solved :)
Fredrik Strand Oseberg
@FredrikOseberg
Sep 15 2017 12:59
@gatezh did you try to set flex: 1 property on each of the input elements ?
Sergii Gatezh
@gatezh
Sep 15 2017 13:00
@FredrikOseberg let me try...
is this what you want?
Sergii Gatezh
@gatezh
Sep 15 2017 13:18
@longnt80 Basically yes, thank you. But It should be stacked in mobile, and being two columns on desktop + with labels.
CamperBot
@camperbot
Sep 15 2017 13:18
gatezh sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 553 | @longnt80 |http://www.freecodecamp.com/longnt80
try resize the screen/window
@gatezh https://codepen.io/longnt80/pen/veOjKm?editors=1100
this is similar without media query
Sergii Gatezh
@gatezh
Sep 15 2017 13:28
@longnt80 thank you! One more question: how to make test input to take a whole width when it is in mobile?
CamperBot
@camperbot
Sep 15 2017 13:28
gatezh sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
api offline
Long Nguyen
@longnt80
Sep 15 2017 13:28
@gatezh again, use media query
Sergii Gatezh
@gatezh
Sep 15 2017 13:31
@longnt80 I mean the actual input field https://i.imgur.com/gjVjXFM.png
Long Nguyen
@longnt80
Sep 15 2017 13:41
Gil Alexandel
@gilalexandel
Sep 15 2017 13:43

Greetings!

I'm trying to implement an autocomplete on my Wikipedia Viewer. I've successfully connected the WikiAPI with an input element and when i start to type the options from the api start to appear as options of a datalist htlm element... My issue here is that now i want to link those options with the url so, i'll be able to redirect to the Wikipedia article.

Sergii Gatezh
@gatezh
Sep 15 2017 13:56
@longnt80 thanks a lot!
CamperBot
@camperbot
Sep 15 2017 13:56
gatezh sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
api offline
Fredrik Strand Oseberg
@FredrikOseberg
Sep 15 2017 14:15
@gilalexandel You can hook up an event on form submit and capture the input elements value, you can then make a call to the api with that value attached to get the right object from the API, which would have all the information you need. Is that what you meant?
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:10
hello ... quiet room..
is it cus its friday ? :)
Pagnito
@Pagnito
Sep 15 2017 15:32
anyone can help me with game of life?
@Kowalatam its been really quiet in all the rooms lately i think
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:39
yeah.. winter has is coming :) @Pagnito
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:42
what do u mean game of life ?
making a game of how boring life can be ? :)
Pagnito
@Pagnito
Sep 15 2017 15:43
its a challenge
part of FCC carriculum
ull be doing it soon too
after leaderboard and recipebox
oh wait this is front end chatroom
oh so u proly havent gotten that far
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:44
that sounds far away from where i am
Pagnito
@Pagnito
Sep 15 2017 15:44
yea i feel u
eventually tho
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:44
since u far ahead
i need something... instead of googling random things
Pagnito
@Pagnito
Sep 15 2017 15:45
k
sup
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:45
till i see what i want
i am on pomodoro
Pagnito
@Pagnito
Sep 15 2017 15:45
k how can i help
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:46
im kinda done.. just trying to put some effort in how it looks
Pagnito
@Pagnito
Sep 15 2017 15:46
well a different font would def do alot
i would wrap the whole thing in a upside down triangle
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:47
at the last 3 seconds when its displaying colors.. i want like a circular around the values
Pagnito
@Pagnito
Sep 15 2017 15:47
i dunno why but i think it would look cool on urs
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:47
upside down triangle ? lol.. sounds weird :)
Pagnito
@Pagnito
Sep 15 2017 15:47
yea i know lol
hold on its stil counting down tho havent seen the colors yet
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:48
okay..
Pagnito
@Pagnito
Sep 15 2017 15:48
u want circle around the numbers at the end?
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:48
yeah but it has to kind of display like an almost filled up circle
i dunno how to describe it lol
Pagnito
@Pagnito
Sep 15 2017 15:49
yea i dunno what u mean lol
like a gradient?
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:49
like two circles, one bid on small and color inbetween them
that moves according to the value
like that?
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:50
nope
Pagnito
@Pagnito
Sep 15 2017 15:50
so two circles? one big and one smaller?
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:50
yes
hold on i have an image
image.png
i feel like there a name lol ...
Pagnito
@Pagnito
Sep 15 2017 15:51
so an animation?
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:52
yes...
i haven't done any animation before on an of my projects
i kinda just make it work and move on
:)
Pagnito
@Pagnito
Sep 15 2017 15:53
well u can just wrap ur ending number div and another a div
create a class circle
in the circle class
in css
create a border with a radius that makes it a cricle
then addClass when those numbers show up
as far as animation
im tryin to remember hold on
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:54
yeah.. i figured it would be like that for the circle..
filling it up was the part i was wondering about
Pagnito
@Pagnito
Sep 15 2017 15:56
like a loading animation right?
Michael Norris
@Norrismi
Sep 15 2017 15:56
I have an imbedded JS in a HTML file. Inside the <script> tags I have both JS and Jquery. Should the Jquery portion be isolated inside its own <script> tag?
Pagnito
@Pagnito
Sep 15 2017 15:57
yea i belive jquery is in its own script tag
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:58
i dunno how its supposed to work yet.. thought something in the line of .... i don't remember now lol... :)
yeah... animation in css
Pagnito
@Pagnito
Sep 15 2017 15:59
i know how to do it with svg, tho now that i think about it i cant figure out a way to do it with css
Elizabeth Paul
@Kowalatam
Sep 15 2017 15:59
eish.. i feel stupid
Pagnito
@Pagnito
Sep 15 2017 15:59
u def shouldnt lol
Michael Norris
@Norrismi
Sep 15 2017 15:59
@Pagnito ok, This would explain why the JS wouldn't run thanks
CamperBot
@camperbot
Sep 15 2017 15:59
norrismi sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @pagnito |http://www.freecodecamp.com/pagnito
Pagnito
@Pagnito
Sep 15 2017 15:59
@Norrismi np
Elizabeth Paul
@Kowalatam
Sep 15 2017 16:00
i will check it out on stackoverflow
hopefully is not too confusing
Pagnito
@Pagnito
Sep 15 2017 16:01
yea i feel u
Elizabeth Paul
@Kowalatam
Sep 15 2017 16:03
i kinda realize making this look good is not my style... :)
i might enjoy backend more
:(
u were saying something about font.. cus i mostly always just use this one... @Pagnito
Pagnito
@Pagnito
Sep 15 2017 16:05
lol
go to google fonts
they are free to use
just put the cd into ur html file and ur set
Elizabeth Paul
@Kowalatam
Sep 15 2017 16:06
yeah i use google fonts
Pagnito
@Pagnito
Sep 15 2017 16:06
oh ok, so yea its a good idea to play around with fonts
they make a big diffirence
i found this, now im tryin to to understand the code
Elizabeth Paul
@Kowalatam
Sep 15 2017 16:07
yeah.. exactly what i want
just for the last three seconds.. to show like a quater filled at 3 seconds,.. 50% at 2 seconds and so on
Pagnito
@Pagnito
Sep 15 2017 16:09
i feel u, i think this guy is using svg too tho, i havent seen this type of code before tho
Elizabeth Paul
@Kowalatam
Sep 15 2017 16:10
yeah.. saw svg
i think i need to take some time to learn animation lol
piteto
@piteto
Sep 15 2017 16:11
@Kowalatam If you only want 25% increments, use borders on a div
.circle {
  background-color: red;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-width: 5px;
  border-color: black transparent transparent transparent; /* 25% */
  /*border-color: black black transparent transparent;*/ /* 50% */
  /*border-color: black black black transparent;*/ /* 75% */
  /*border-color: black;*/ /* 100% */
  border-style: solid;
  transform: rotate(45deg);
}
Michael Norris
@Norrismi
Sep 15 2017 16:12
haha really cool pen!
Elizabeth Paul
@Kowalatam
Sep 15 2017 16:13
@piteto okay.. will check it out.. but how can i increase it ?
piteto
@piteto
Sep 15 2017 16:13
With javascript, you can replace the border-color options
or use classes instead
Pagnito
@Pagnito
Sep 15 2017 16:14
would that animate it tho?
piteto
@piteto
Sep 15 2017 16:15
you could animate the rotation and then add the extra border color
Elizabeth Paul
@Kowalatam
Sep 15 2017 16:15
i will try working with this and see...
piteto
@piteto
Sep 15 2017 16:15
It's a very basic way to do a progress circle, but definitely other ways to go about it that are much nicer
Elizabeth Paul
@Kowalatam
Sep 15 2017 16:17
okay.. will start from nice and progress to nicer on a later date :)
Simon
@Si7summers
Sep 15 2017 16:46
Hi everyone, looking for help with the roman numerals problem, please
Fabien SHAN
@X140hu4
Sep 15 2017 16:48
Hi Simon, what's your problem
Simon
@Si7summers
Sep 15 2017 16:49
@X140hu4 just trying to understand what is the best way to approach the problem. How should one think through solving it? Maybe more specifically, how should the problem be broken down into smaller more manageable problems
Ayush Bahuguna
@relentless-coder
Sep 15 2017 17:01

I need some help here

#main-nav > li.menu-item > ul.sub-menu > li.menu-item > a

Now here, for the a tag, when someone hovers over it, I need to add after content to it. How do i do it?

i tried this

#main-nav > li.menu-item > ul.sub-menu > li.menu-item > a:hover#main-nav > li.menu-item > ul.sub-menu > li.menu-item > a::after

but this isn't working, which surprises me because I have done something like this before

as you can see here, this something i tried my hand at a few weeks ago, now I need to implement the same thing on a different project, but this doesn't work
Elizabeth Paul
@Kowalatam
Sep 15 2017 18:05
i think a post of the current project is needed
Gil Alexandel
@gilalexandel
Sep 15 2017 18:10
@gilalexandel You can hook up an event on form submit and capture the input elements value, you can then make a call to the api with that value attached to get the right object from the API, which would have all the information you need. Is that what you meant? YES!
@FredrikOseberg Im loading the results on the datalist while typing if a select one of those options, i want it to go to their proper url
Elizabeth Paul
@Kowalatam
Sep 15 2017 18:55
so final look.. cus i'm tired https://codepen.io/Kowalatam/full/LjqJmW/
any comments :)
tip... let it count till the end :)
Kent Saeteurn
@sansae
Sep 15 2017 19:15

@ruhulamin3482

hi mramin;

thank you for the response. The buttons are aligned to the left in your version. I was able to accomplish this in my initial attempts. So that was never an issue. the original code that I shared with you has the buttons aligned to the right wall of the container, which is where I want the buttons to be. I don't want it to be on the left wall.

However, I experimented with this absolute approach to see what I could do with it. Since using position absolute for #buttons just brought the buttons to the left side wall (not what I want), I tried the following:
1) I applied "right: 0" to #buttons as well; this placed the buttons completely outside of the container to the far right end of the viewport
2) I then applied "position: relative" for the parent element, in this case #header; this effectively brought the buttons back inside the container to where it was initially when I shared my code with you

Doing steps 1 and 2 above, the content in the middle of the screen no longer moves (yay!). The only problem now is that the when I hover a button, the other brown buttons still move

Thanks for your help. I'll see what I can do to fix this last problem

CamperBot
@camperbot
Sep 15 2017 19:15
sansae sends brownie points to @ruhulamin3482 :sparkles: :thumbsup: :sparkles:
api offline
Kent Saeteurn
@sansae
Sep 15 2017 19:16
piteto
@piteto
Sep 15 2017 19:25
@sansae I think you're maybe trying to do this?
#buttons {
  float: right;
  background: orange;
  width: 60px;
}

#buttons div {
  position: relative; 
  font-size: 12px;
  color: black;
  background: brown;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  left: calc(100% - 20px);
  transition: left 1s, width 1s;
}

#buttons div:hover {
  background: pink;
  width: 60px;
  left: calc(100% - 60px);
}
Toni Shortsleeve
@KoniKodes
Sep 15 2017 20:11
@Kowalatam Excellent work! I heard the sound, the background is awesome and it works great.
Kent Saeteurn
@sansae
Sep 15 2017 20:34

@piteto Yes! That's exactly what I wanted! Thank you piteto.

However, I did it slightly differently by floating the divs to the right and doing two things to its parent div (with id buttons), 1) float: right and 2) width: 60px. Since I was transitioning/expanding the divs on hover to a size of 60px, I guess I needed to create a "container" with a size equal to that. I did that and it worked.

Originally, it was suggested to me by another fcc coder to use position absolute. This didn't work for me. I eventually found out that position absolute was unnecessary. Here's what I have:

#buttons {
  float: right;
  width: 60px;/*new code I added*/
}

#buttons div {
  float: right;/*new code I added*/
  margin-left: 40px;/*new code I added*/
  font-size: 12px;
  color: black;
  background: brown;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  transition: left 1s, width 1s; /*new code that you added; awesome code*/
}

#buttons div:hover {
  background: pink;
  width: 60px;
  transition: width 1s;
}

Your added line of: "transition: left 1s, width 1s;" was very helpful. thank you. I didn't have that line in my code so when I stopped hovering, the button would just quickly go back to its original size. Adding that line created a smooth transition back to its original size. Awesome

CamperBot
@camperbot
Sep 15 2017 20:34
sansae sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 110 | @piteto |http://www.freecodecamp.com/piteto
Kent Saeteurn
@sansae
Sep 15 2017 20:34
@piteto I really appreciate you taking your time to help, piteto. Thank you
CamperBot
@camperbot
Sep 15 2017 20:34
sansae sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
Kent Saeteurn
@sansae
Sep 15 2017 20:53

@piteto I didn't realize there was a calc method in css; i'll keep this in mind for the future. I think your code is more intuitive. For instance, if I wanted to make the transition go from left to right, this would do: "right: calc(100% - 60px);"

I'm able to get my div buttons to move in either direction, but it requires that I do random looking stuff to my code that, when I read it, makes no sense

@piteto I'll go with your solution. thx
CamperBot
@camperbot
Sep 15 2017 20:54
sansae sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
piteto
@piteto
Sep 15 2017 20:57
@sansae Always lots of ways to do it :) your code works great too. In fact, with your code, you only need the width transition because you aren't using the left property
Liam Docherty
@ldocherty1
Sep 15 2017 21:10
Hi, I am building a florist company an e-commerce website. However, I have no experience with the payment aspect side of things. What I mean by the 'payment aspect' is the process involved in order for the customer to pay for the item which is being sold. Anyone have any tips on where to start?
Kent Saeteurn
@sansae
Sep 15 2017 21:10

@piteto i'm experimenting with the calc function and yielding some pretty interesting results

left: calc(100% - 40px);

that line brings the buttons to the middle of the orange container and on hover, the button expands to both the left and right side wall simultaneously. pretty neat animation. the question now is, if I wanted to do something random like, say, put the buttons in the middle of the orange container and have each button expand on hover to only the left side wall, or right, how would I do that? (sigh) there is so much about css that i don't know. i'm not even scratching the surface

@ldocherty1 hey liam, sounds like a tough challenge. it also sounds like a backend related task? in that case, you might get better responses here: https://gitter.im/FreeCodeCamp/HelpBackEnd

good luck

Jacob Colborn
@jcolborn-dropdeadgames
Sep 15 2017 21:18
@ldocherty1 Do you know what payment systems you are using? There is a lot of variablility in what is done, but the basic process is you push the payment through a payment processor and then they return some data (json or some other return) to show success/failed transactions.
Jan Shah
@JanShah
Sep 15 2017 21:25
@ldocherty1 are you building an ecommerce site from scratch or using an open source ecommerce site?
Liam Docherty
@ldocherty1
Sep 15 2017 21:58
@JanShah Sorry about the late response something came up. I was thinking of some sort of payment process like this website has https://www.interflora.co.uk/category/flower-arrangements/ where you click on the button and it allows you to pay with card or PayPal. From what I understand it's backend related.
@JanShah Thanks for your response as well
CamperBot
@camperbot
Sep 15 2017 21:58
ldocherty1 sends brownie points to @janshah :sparkles: :thumbsup: :sparkles:
:cookie: 523 | @janshah |http://www.freecodecamp.com/janshah