These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Mar 2018
LKian
@LKian
Mar 28 2018 01:07
@ezioda004 @JoEeeezy_twitter thanks for checking. I guess I did something wrong. I'm just going to reset and start again.
CamperBot
@camperbot
Mar 28 2018 01:07
lkian sends brownie points to @ezioda004 and @joeeeezy_twitter :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @ezioda004 |http://www.freecodecamp.org/ezioda004
api offline
Dhaval Vira
@dhavalveera
Mar 28 2018 02:03
how to make load sign on website before loading the actual page
like loading or some logo on starting & then it will load the entire page
DarkxPunk
@DarkxPunk
Mar 28 2018 02:33
Hey everyone, how yall doing?
Dhaval Vira
@dhavalveera
Mar 28 2018 02:34
Fine, what about darkx
DarkxPunk
@DarkxPunk
Mar 28 2018 02:35
I am doing okay. Been toying around with some of my old pens.
Dhaval Vira
@dhavalveera
Mar 28 2018 02:35
ok
markclynch
@markclynch
Mar 28 2018 04:01
Can anyone take a look at my code here and tell me an honest opinion of how normal/efficient it is? I feel like at the end I was just moving things around into different brackets and going with a trial and error approach. I'm sure there's several things that could be optimized and would love the feedback. This project took me way longer than I'd hoped it would lol. https://codepen.io/markclynch/pen/QmKNVN?editors=1111
Ken Haduch
@khaduch
Mar 28 2018 04:24

@markclynch - it's hard to make a quick evaluation of your code, one thing that you can do with the CodePen tools is to use the dropdown on the right side of the various boxes (like the JS box, in this case) and to "Tidy JS", which will reformat the code with indentations, and then "Analyze JS", which is highlighting one problem in the way a function is defined.

Something that just jumps out at me is the places where you are doing the calculation for the minutes or seconds and repeating the calculation essentially to generate an output that has the extra "0" padding in there for the single digit counts. You could make one function that just does that output of the display digits and call that after you do the calculation, it would minimize some of the duplicated code. Those are the kinds of things you can look for - places where you repeat code and calculations might be able to be encapsulated in a function that can be reused.

I just modified the code to set the default to 1 minute for each timer, and when it got to the end, where both timers were displaying 0, it didn't give me the option to reset or start over, I would have to reload the page to do that. (You weren't necessarily asking about functional or usability concerns, I guess, but it's an observation.) For that matter, there isn't a way to pause, stop, or reset while the clock is being used.

Those are a couple quick comments - I hope it gives you something along the lines of what you were looking for feedback on.

Danny Chan
@chandanny
Mar 28 2018 04:28
hello
finished crawler game
markclynch
@markclynch
Mar 28 2018 04:28
@khaduch Definately does. Last I was testing it the reset button came back after the test finished. I may have broken something :) I didn't want the stop/reset to be available as I thought that would be a "feature" to keep you going since you couldn't simply restart it if you got distracted, forced focus if you will.
@khaduch I'll have a look to see where I can trim the code down. I'm trying to use vs code now and trying to set up one of their beautify extensions, doesn't seem to be working perfectly.
Dhaval Vira
@dhavalveera
Mar 28 2018 04:30
anyone can help me ?
Dhaval Vira
@dhavalveera
Mar 28 2018 04:41
please
Dhaval Vira
@dhavalveera
Mar 28 2018 04:58
it seems like that no-one is ready to help me here
markclynch
@markclynch
Mar 28 2018 04:58
@dhavalveera Sorry, I'm a newbie, can't help myself much lol :)
Dhaval Vira
@dhavalveera
Mar 28 2018 04:58
how to make load sign on website before loading the actual page
like loading or some logo on starting & then it will load the entire page
@markclynch Sir I don't mean that Newbie should help, whoever can help then tell me
but it seems like that no one Happy to help others
then what is the meaning of HELPFRONTEND
markclynch
@markclynch
Mar 28 2018 04:59
I've had good responses.
Don't think that attitude is going to get you them however. Also did you try google first? Seems like I could google and find that answer. @dhavalveera
Dhaval Vira
@dhavalveera
Mar 28 2018 05:00
still date I didn't have any response for my help
Vladislav Ivanov
@developer4eto
Mar 28 2018 05:01
@dhavalveera what's your problem? You want to make a pre-loader?
Dhaval Vira
@dhavalveera
Mar 28 2018 05:01
Yes
Vladislav Ivanov
@developer4eto
Mar 28 2018 05:01
Dhaval Vira
@dhavalveera
Mar 28 2018 05:01
whenever Page is Loaded then first it should show a Logo then it should the website's page
markclynch
@markclynch
Mar 28 2018 05:10
Can anyone tell me how I'm misplacing my call for main.js here (It's in VS code, trying to transcribe from Codepen.io and it's not working out):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pomodoro Clock</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css" />

</head>
<body>
    <audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>
  <h1>Pomodoro Timer</h1>
  <div class="timerContainer">
    <button id="minusCounter">-</button>
    <button id="timerDisplay">1</button>
    <button id="plusCounter">+</button>
  </div>
  <div class="startReset">
  <button id="butStart">Start</button>
  <button id="butReset">Reset</button>
  </div>
    <div>
  <img src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/4b11ad8f-3e48-4112-83df-336065c49829/icon/d31ca7be-0497-4370-801f-97a29dc3b584">
  </div>

  <div class="breakContainer">
  <button id="minusBreakTimer">-</button>
  <button id="breakDisplay">1</button>
  <button id="plusBreakTimer">+</button>
  </div>
  <br>
  <p>break timer</p>
</body>
<footer><script src="main.js" type="text/javascript"></script></footer>

</html>
oh I think I'm missing jquery
abraham anak agung
@padunk
Mar 28 2018 05:13
@markclynch in codepen you can copy only the body part. and codepen can't link to http now, so you have to change your audio source. You can get all other library in the setting.
markclynch
@markclynch
Mar 28 2018 05:13
@padunk The audio works perfectly
abraham anak agung
@padunk
Mar 28 2018 05:14
@markclynch :+1:
markclynch
@markclynch
Mar 28 2018 05:15
I'm asking mostly so I know cause I'm almost done with the advanced algo's and ready to move on to my own projects for a nice portfolio of projects. But I'm terrible at setting up the HTML imports for jquery, javascript and anything else.
Could you tell me where I need to put the jquery in there?
and where script for main.js should be called? Is it all in the header, and I had thought if I call one before the other it can break everything, which I think is happening. I have a 100% working codepen, but can't get everything working (js and jquery) in vc Code editor
@padunk
Trying to move stuff from codepen to vs script now. That way I can host things on my own portfolio page.
vs code sorry
abraham anak agung
@padunk
Mar 28 2018 05:17
@markclynch you want to import your code from codepen to your local comp?
for jQuery, you can put the link in the html head, and for script usually at the end of the body.
markclynch
@markclynch
Mar 28 2018 05:21
after or before body closes?
abraham anak agung
@padunk
Mar 28 2018 05:22
@markclynch before body
markclynch
@markclynch
Mar 28 2018 05:24
@padunk Thanks lol! Working great now I think. Just running the test now, will know in 2 minutes :) I was calling jQuerry like this also <script src="jquery-3.3.1.min.js"></script> and I needed to do it as <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> instead also haha, so silly the little mistakes I make
CamperBot
@camperbot
Mar 28 2018 05:24
markclynch sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @padunk |http://www.freecodecamp.org/padunk
abraham anak agung
@padunk
Mar 28 2018 05:26
@markclynch :thumbsup:
coderNewby
@coderNewby
Mar 28 2018 06:07
Q for you in PM @DarrenfJ thanks
CamperBot
@camperbot
Mar 28 2018 06:07
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2440 | @darrenfj |http://www.freecodecamp.org/darrenfj
sopoour
@sopoour
Mar 28 2018 09:42
Hi there, did anyone ever had the problem that your <main> overlaps with <header>? I'm sure the reason is that I have the background image in <header> with position: absolute; I already tried to change it to relative but then my background image disappears. I need to make it absolute so that it is independent from the text I wrote over the image which needs to be on the bottom. I tried now so much but my text from <main> still goes over my whole <header>
Dhaval Vira
@dhavalveera
Mar 28 2018 10:06
@sopoour why you have put Position: Absolute ?
for what reason
Heathercoraje
@Heathercoraje
Mar 28 2018 10:10
Working on React.js if anyone can give me a hand
    onFormSubmit = event => {
        const fields = this.state.fields;
        this.props.onFieldsSubmit(fields);
        this.setState({
            fields: {
                type: '',
                title: ''
            }
        });
        event.preventDefault();
    };
This message was deleted
    onFormSubmit = event => {
        event.preventDefault(); // this would not work
        const fields = this.state.fields;
        this.props.onFieldsSubmit(fields);
        this.setState({
            fields: {
                type: '',
                title: ''
            }
        });
    };
My guess is that preventDefault() cancels the rest of the code?
Heathercoraje
@Heathercoraje
Mar 28 2018 10:19
If I move the line up, then this.setState does not set value to ' '
Stephen James
@sjames1958gm
Mar 28 2018 10:23
@Heathercoraje Check your console. If there is an error with the preventDefault then it would skip the code following it.
Heathercoraje
@Heathercoraje
Mar 28 2018 10:24
nope.. no error.
the thing is on dev too, I see the state of fields becoming emtpy
then inside form (input) it has previous value
Stephen James
@sjames1958gm
Mar 28 2018 10:25
@Heathercoraje Then what is not happening
@Heathercoraje Ah
You are rendering the value of the inputs from the state?
Heathercoraje
@Heathercoraje
Mar 28 2018 10:25
<form onSubmit={this.onFormSubmit}>
                <input
                    autoFocus
                    placeholder=" Type "
                    name="type"
                    value={this.state.type}
                    onChange={this.onInputChange}
                />
                <input
                    autoFocus
                    name="title"
                    placeholder=" Task name"
                    value={this.state.title}
                    onChange={this.onInputChange}
                />
                <input type="submit" />
            </form>
Stephen James
@sjames1958gm
Mar 28 2018 10:26
@Heathercoraje Isn't it this.state.fields.type?
Heathercoraje
@Heathercoraje
Mar 28 2018 10:26
f...
Thanks @sjames1958gm
CamperBot
@camperbot
Mar 28 2018 10:27
heathercoraje sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9142 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Heathercoraje
@Heathercoraje
Mar 28 2018 10:27
god. now I can go gym.
Stephen James
@sjames1958gm
Mar 28 2018 10:27
@Heathercoraje Have fun :)
Heathercoraje
@Heathercoraje
Mar 28 2018 10:27
hehe you too!
Creative Shin
@CreativeShin
Mar 28 2018 11:49
hello
I am doing the fcc again, how do i use es6?
Saeed Jassani
@saeedjassani
Mar 28 2018 11:51
Hello all!
I need some help with angular 1.7
Currently my project is in angular 1.7 and uses typescript. How do I use https://github.com/marceljuenemann/angular-drag-and-drop-lists this library in it?
Any help will be greatly appreciated!
Claudio Restifo
@Marmiz
Mar 28 2018 11:54

@CreativeShin

how do i use es6

I think that the solution should works regardless. Isn't it the case?

Creative Shin
@CreativeShin
Mar 28 2018 11:58
it does with warnings
Claudio Restifo
@Marmiz
Mar 28 2018 12:01

I think those are the linters thrown by the on line editor.
Try adding this at the top of file and see if you still have warnings

/*jshint esversion: 6 */

@CreativeShin

Michael Grienauer
@mgrienauer
Mar 28 2018 12:52
im working on the twitch stream project and im wondering how do i fetch a streamers logo data? the api doesnt return any info if the streamer isnt live
alpox
@alpox
Mar 28 2018 12:53
@mgrienauer You need two endpoints. The channel endpoint and the stream endpoint. You get the streamers information through the channel endpoint, and information about the current stream (offline/online) from the stream endpoint.
Michael Grienauer
@mgrienauer
Mar 28 2018 12:55
@alpox endpoints are preceeded with a "?" right?
alpox
@alpox
Mar 28 2018 12:56
No, what you are talking about is the query string and that one only passes additional information about what should be queried to the endpoint
An endpoint is a specific route (Without the ?... part)
Michael Grienauer
@mgrienauer
Mar 28 2018 12:57
@alpox ahh i see...is there a way to include both endpoints in one jquery ajax call? so that it returns two objects, or atleast the info from both calls?
or do i need to make two seperate calls
alpox
@alpox
Mar 28 2018 12:58
You have to make seperate calls
Michael Grienauer
@mgrienauer
Mar 28 2018 12:58
or i guess i could make a function that checks if a user is online, update their info, then if the user is offline i can use another function?
@alpox thanks for the info btw that saves me a headache
CamperBot
@camperbot
Mar 28 2018 12:58
mgrienauer sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1593 | @alpox |http://www.freecodecamp.org/alpox
alpox
@alpox
Mar 28 2018 12:58
You could try that, but i would rather rely on the other way round because you can then be sure to always get the channel data and get it always in the same form
Michael Grienauer
@mgrienauer
Mar 28 2018 13:02
@alpox that makes sense
Joshua Frias
@Juke-Magic
Mar 28 2018 13:23
hey guys how do i align the data with the logos in my pen??
Michael Grienauer
@mgrienauer
Mar 28 2018 13:49
@Juke-Magic do you mean the online/ offline/ all buttons?
@Juke-Magic you can use jquery to make a div for each streamer in your array, and then make that div a flexbox
Nate Mallison
@NJM8
Mar 28 2018 13:50
@Juke-Magic I would just nest your results in a row, and make each row a flex container, then use some align properties
this is a nice concise flexbox helper https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Donnie
@Donnie-D
Mar 28 2018 14:13
Hi fellas! If you look at the pen below. Its all over the place lol. I have created an array of a few links and assigned those links to some variables i.e. rain, cloud, sun etc. Now i want to change the background of my page according to the data pulled from the api. THE PROBLEM is that when i try to compare the words using regexp, i think the comparison is being done against the links the array elements point towards and not the elements themsleves. How could I avoid this situation?
https://codepen.io/Donnie-D/pen/YaydRM?editors=0010
h1tag
@h1tag
Mar 28 2018 14:25
@Donnie-D so you want to compare it against the name of the variable?
Donnie
@Donnie-D
Mar 28 2018 14:26
@h1tag yes
h1tag
@h1tag
Mar 28 2018 14:26
@Donnie-D then just store them as strings in the array
Michael Grienauer
@mgrienauer
Mar 28 2018 14:27
//create function that take a streamer username as input and returns json data from twitch api
  function ajaxStreamCall(streamer){
    //make ajax call with streamer name to check stream status
    $.ajax({
     type: 'GET',
     url: 'https://api.twitch.tv/kraken/streams/' + streamer,
     headers: {
       'Client-ID': 'ieym1jzi0ljgp9ntvvw0dcuxaw4hzf'
     },
     // log data to console if success
     success: function(data) {
       console.log(data);
       //create function that takes twitch api data and updates html on page
       function updateStreamData(){
         //update html on streamer div to display current stream info
         if (data.stream !== null){
          $('#' + streamer).append('<p>online</p>');
         }
       }
     }
    });
  }
Donnie
@Donnie-D
Mar 28 2018 14:27
but @h1tag how do i assign those strings to those links?
wait i think i see what you mean lol
h1tag
@h1tag
Mar 28 2018 14:28
@Donnie-D you don't have to do that. You'll have the variables separate from the strings, they don't have to be connected
Michael Grienauer
@mgrienauer
Mar 28 2018 14:28
i have a question, im trying to append something to the div with an id, which will be equal to the variable streamer
how can i do this in jquery
Donnie
@Donnie-D
Mar 28 2018 14:29
let me try that lol and see where we are
thanks by the way
h1tag
@h1tag
Mar 28 2018 14:30
var Rain =
        "https://assets-auto.rbl.ms/4388606144d2f05020da2d1eb705336e37c521d5e3bad105e4b964fa13794b49";
    var Sunny = "http://www.kinyu-z.net/data/wallpapers/78/975159.jpg";
    var Cloudy =
        "https://pics.freeartbackgrounds.com/midle/Blue_Cloudy_Sky_Background-1074.jpg";
        var backgroundArr = ["Rain", "Sunny", "Cloudy"];
This is if I understood what you want correctly @Donnie-D
Donnie
@Donnie-D
Mar 28 2018 14:32
yup thats what i have just done as well :+1: i just had an incomplete thought process towards whether if i add those words as strings in the array then ??????
lol
h1tag
@h1tag
Mar 28 2018 14:36
yea, maybe
DerMann97
@DerMann97
Mar 28 2018 15:11
[JAVA] hello everyone can someone tell me when the casting is java is implicit and when it should be explicit ? Im confused with that
Webwang
@wym21212
Mar 28 2018 15:12
i just leave here for about 1 year,and now ,where my pro ?
i m back!
Donnie
@Donnie-D
Mar 28 2018 15:18
@h1tag you there ? lol
h1tag
@h1tag
Mar 28 2018 15:19
@Donnie-D yes?
Donnie
@Donnie-D
Mar 28 2018 15:21
hey lol sorry not much. Just that I have tried your suggestion. Now albeit the code looks straight forward but for some reason it doesnt execute the if part. Do you think my format is wrong or something?
https://codepen.io/Donnie-D/pen/YaydRM?editors=0010
@h1tag
var backgroundArr = ['Rain', 'Sunny', 'Cloudy'];
    var k= $('#detail').text();
    //console.log(k);
    for(var i=0; i<backgroundArr.length; i++){ 
  if(k.match(/backgroundArr[i]/gi)){
    console.log(backgroundArr[i]);
    //console.log('true');
  }else{console.log('false');}
}
this part
Darren
@DarrenfJ
Mar 28 2018 15:28
@coderNewby thanks for the brownies, will check it out
CamperBot
@camperbot
Mar 28 2018 15:28
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 104 | @codernewby |http://www.freecodecamp.org/codernewby
h1tag
@h1tag
Mar 28 2018 15:28
@Donnie-D I think that you can't add a variable like this (/backgroundArr[i]/gi) in a regular expression, you might want to do it like this
using the new RegExp()
Donnie
@Donnie-D
Mar 28 2018 15:31
@h1tag this feels like going down the rabbit hole lol. trickier than i thought
h1tag
@h1tag
Mar 28 2018 15:32
:smile:
Donnie
@Donnie-D
Mar 28 2018 15:32
do you think theres an easier way of doing what i intend with it? i.e. change the background depending on the output?
coderNewby
@coderNewby
Mar 28 2018 15:32
@DarrenfJ no worries, I'm sure I will have many more, thanks for your help
CamperBot
@camperbot
Mar 28 2018 15:32
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2441 | @darrenfj |http://www.freecodecamp.org/darrenfj
h1tag
@h1tag
Mar 28 2018 15:33
you can do it using a switch statement instead or if else
they're not that many cases you have
Donnie
@Donnie-D
Mar 28 2018 15:34
wouldnt that include comparing my output against the array elements?
h1tag
@h1tag
Mar 28 2018 15:34
yes
Donnie
@Donnie-D
Mar 28 2018 15:34
and that brings us back to regexp i believe :smile:
h1tag
@h1tag
Mar 28 2018 15:35
no, why?
if(output === "Rain") do something;
else if (...) ...
Donnie
@Donnie-D
Mar 28 2018 15:37
@h1tag YOU DA MAN
lol
let us try that
h1tag
@h1tag
Mar 28 2018 15:38
:smile:
Donnie
@Donnie-D
Mar 28 2018 15:38
wait.. i hope you are a man lol
dont wanna put a lady off by saying that
h1tag
@h1tag
Mar 28 2018 15:38
not a problem :p
Donnie
@Donnie-D
Mar 28 2018 15:38
:clap:
German Gamboa Gonzalez
@germangamboa95
Mar 28 2018 16:46
Hey guys, can I have some feedback for my hangman style app? Be as harsh as you need to https://germangamboa95.github.io/hangman.io/
rk
@rajkumart08_twitter
Mar 28 2018 17:20

Hi,

  • I am new to jquery.
  • when I click the checkbox I need to show an image in the first column for a particular row.
  • I wrote the click functionality but its not going inside the click.
  • can you tell me how to fix it.
  • providing my code below

http://jsfiddle.net/5parbfeu/

    $("#checkIDGrid").click(function() {
      alert("I am here");

      var img = $('<img />', {
        id: 'Myid',
        src: 'https://thumbs.dreamstime.com/z/pixel-perfect-web-development-flat-icons-set-website-programming-process-webpage-coding-user-interface-creating-45297890.jpg',
        alt: 'MyAlt'
      });
      img.appendTo($('<tr>'));
    });
Ken Haduch
@khaduch
Mar 28 2018 17:33

@germangamboa95 - I don't know if you intentionally didn't reveal the answer for the disease in question if I didn't guess it, but if it did show then I missed it.
If I can copy / paste your intro card, there are a couple typos that you could fix.
All we have to go is synonyms of condition. We can only afford to make 6 errors per patient. - the original text
All we have to go on is symptoms of their condition. We can only afford to make 6 errors per patient. - my suggested correction

And another thing I noticed, when I finally got one right, is that it doesn't offer any "congratulations" when you get one right. It did tally the points in the proper locations as far as Patients saved and lost.

One thing that I do find, looking at this on my laptop, is that I have to do a lot of scrolling up and down to see the full height of the playing board. Also on the input you could use the placeholder attribute on your input element to prompt the users where to enter the letters, and perhaps make the display of the letters used easier to read?

Neat idea - looks like "fun" learning about different maladies... :worried:

@rajkumart08_twitter - one problem that you have is that you are using the same ID value multiple times in your table. Not sure if that is causing the exact problem but it will cause problems if you try to access things by ID. I'm looking at your page now to see if I can help in any other way.
German Gamboa Gonzalez
@germangamboa95
Mar 28 2018 18:04
@khaduch Thanks! I am working on implementing those changes. I
CamperBot
@camperbot
Mar 28 2018 18:04
germangamboa95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3830 | @khaduch |http://www.freecodecamp.org/khaduch
Nate Mallison
@NJM8
Mar 28 2018 18:15
Does anyone here use cloudflare? Or can point me to a decent explanation of A records and CNAME's and ip addresses. I have a general understanding but don't really get how things are hooked up in my particular situation. The problem is my website only loads if you include the www
Ken Haduch
@khaduch
Mar 28 2018 18:17
@rajkumart08_twitter - I haven't been able to fully investigate this but since your checkboxes are not created immediately on page load, but appear after dismissing the initial alert box, is the code that is setting up the click handler running after the elements are created? If it isn't, then the click handler will not be added to the elements, so you'll never get it to be triggered.
Aditya
@ezioda004
Mar 28 2018 18:53
@rajkumart08_twitter Seems like delegation issue here, since you create #checkIDGrid dynamically .click() doesnt work.
You can however use .on() and the function works.
Heres the working fiddle http://jsfiddle.net/d0e00sbb/
Shariq Shahbaz
@sh4r10
Mar 28 2018 18:55
guys
one quick question
chuksono
@chuksono
Mar 28 2018 18:56

<div class="tab">
<button class="tablinks margin" onclick="dropdown(event,'x')">HOME</button>
<button class="tablinks" onclick="dropdown(event,'y')">COMPANY</button>
<button class="tablinks" onclick="dropdown(event,'z')">JOBS</button>
</div>

<div id="x" class="tabcontent">
<h3>rice thing</h3>
<h3>rice thing</h3>
<h3>rice thing</h3>
<h3>rice thing</h3>
</div>

<div id="y" class="tabcontent">
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
</div>

<div id="z" class="tabcontent">
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
</div>

<script>
function dropdown(event,food){
var i, tabcontent, tablinks;

tabcontent=document.getElementByclassName("tabcontent");
for(i=0;i<tabcontent.length; i++){ tabcontent[i].style.display="none"} tablinks=document.getElementByclassName("tablinks"); for (i=0;i<tablinks.length;i++){ tablinks[i].className=tablinks[i].className.replace("active",''); document.getElementByid(x).style.display="block"; event.currentTarget.className +="active"; } } </script>

Shariq Shahbaz
@sh4r10
Mar 28 2018 18:56
lets say I have an input box and I want to make to so that when you type something in it and click enter it replaces the current tab with the google.com /search?q=yourinputhere
how can I achieve this
chuksono
@chuksono
Mar 28 2018 18:58
i need help with the above code as am new in javascript i tried to create dropdown menu on each button but it was nt working i need help
Shariq Shahbaz
@sh4r10
Mar 28 2018 18:59
why does the code look so complicated for such a simple task
Aditya
@ezioda004
Mar 28 2018 19:01
@sh4r10 So grab the value from input via .val (vanilla JS) or .va() method (jQuery) and in the "enter" eventListener use window.open() with modified url?
Shariq Shahbaz
@sh4r10
Mar 28 2018 19:01
but window.open opens it in a new window
I want to replace the current tab
window.location.href worked for a while and then it stopped, but when i cleared the cookies from google it started working again and then stopped again after a while
@ezioda004
Ivan Ngundela
@ingundela
Mar 28 2018 19:02
Hi everyone, may you please help with my project https://ingundela.github.io/morep/ … how can I have on a mobile view when I click the humburger menu displays white background (current it is transparent on a click), on a scroll it is white.. Thank you
Shariq Shahbaz
@sh4r10
Mar 28 2018 19:03
just make the background of your ul white
in your media query
@ingundela
Aditya
@ezioda004
Mar 28 2018 19:05
@sh4r10 Try this? window.open("https://www.youraddress.com","_self")
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 28 2018 19:06
@ingundela the styling for your a needs to be altered
Ivan Ngundela
@ingundela
Mar 28 2018 19:06
@sh4r10 Thanks, but I want it to be while on a click of the menu and not permanent when it is on mobile view
CamperBot
@camperbot
Mar 28 2018 19:06
ingundela sends brownie points to @sh4r10 :sparkles: :thumbsup: :sparkles:
:cookie: 113 | @sh4r10 |http://www.freecodecamp.org/sh4r10
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 28 2018 19:08
@ingundela add the pseudo class :active
Shariq Shahbaz
@sh4r10
Mar 28 2018 19:09
ahhh I guess you can add pseudo class :hover to your a links and then they will change color when you mouse over them @ingundela
Ivan Ngundela
@ingundela
Mar 28 2018 19:09
@sh4r10 @MuhammedKarim I want to anchive the same style of when you scroll on mobile view
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 28 2018 19:11
@ingundela It would still be applied
Shariq Shahbaz
@sh4r10
Mar 28 2018 19:11
AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHhh it works
thanks a lot man @ezioda004
CamperBot
@camperbot
Mar 28 2018 19:11
sh4r10 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Mar 28 2018 19:12
:thumbsup:
Ivan Ngundela
@ingundela
Mar 28 2018 19:21
@MuhammedKarim @ezioda004 when I add .navbar:active{
background: #fff;
}
to media query, the white background only appears for a second…basecally I want on a click of the menu to have white background and menu items same color I have when scrolling
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 28 2018 19:21
@ingundela
a:active {
  background-color: white;
}
Ivan Ngundela
@ingundela
Mar 28 2018 19:25
@MuhammedKarim done it, but still nothing happens
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 28 2018 19:27
@ingundela
a:active {
  background-color: white !important;
}
Aditya
@ezioda004
Mar 28 2018 19:29
@ingundela So create a click event listener on that hamburger and addclass to that element with white background and on scroll remove that class from that element?
Ivan Ngundela
@ingundela
Mar 28 2018 19:31
@ezioda004 @MuhammedKarim it kinder worked if I do this:
.nav-item {
  background: white !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #808080!important;
}
Ivan Ngundela
@ingundela
Mar 28 2018 19:36
@ezioda004 I wanted to be able to do it with js
for now this is a solution I got...
Gulsvi
@gulsvi
Mar 28 2018 19:42
@ingundela Add the compressed class to your nav element and your toggler button
<nav class="navbar fixed-top navbar-expand-lg navbar-light compressed" id="navScrollspy">
        <div class="container">
          <a class="navbar-brand h1 mb-0" href="index.html"><img src="img/morep-logo.png"></a>
          <button class="navbar-toggler compressed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
...
If you right-click your nav menu, select "inspect" and then scroll down the page, you'll see those two classes get added to create the white background.
This is in your main.css:
.navbar.compressed {
    padding: 5px 0 !important;
    border-bottom: 1px solid #e6e6e6 !important;
    background-color: #fff !important;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
Ivan Ngundela
@ingundela
Mar 28 2018 19:48
@gulsvi shouln’t the compressed class be add from js?
or can I add it directly to the navbar?
Gulsvi
@gulsvi
Mar 28 2018 19:49
You can add it directly to the navbar if you want the menu background to be white all the time
Is this your code, or is it a template you are using?
I haven't studied your JS to see what you're doing - but the compressed class is what you are using to modify the background color of the navbar on scroll
Ivan Ngundela
@ingundela
Mar 28 2018 19:51
@gulsvi this is my code… I don’t want it to be white at all time..
@gulsvi yes it is mate…I added it from my js file
@gulsvi and I’m still learning js
@gulsvi
// to add compressed class to the menu on scroll
$(document).ready(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() >= 20) {
$(".navbar, .navbar-toggler").addClass("compressed");
} else {
$(".navbar, .navbar-toggler").removeClass("compressed");
}
});
Ivan Ngundela
@ingundela
Mar 28 2018 19:56
@gulsvi just by adding this .nav-item {
background: white !important;
}
.navbar-light .navbar-nav .nav-link {
    color: #808080!important;
    font-size: 0.8rem;
    text-align: center;
}
does the job, but I wanted to be able to say on a click of menu the background: white and color #000 with js
Gulsvi
@gulsvi
Mar 28 2018 19:59
@ingundela The styling of that menu is in the .collapse class - you can modify Bootstrap's collapse class by adding your own styling to it in your css. That's how to do it without JavaScript.
It will be tedious going through all the CSS modifications to make and properly overriding them - would take us 15-20 minutes of tinkering around with it unless someone has done this recently and knows exactly what classes to override - there are likely nav links and their :focus, :active states to consider as well
Dimitris Nik.
@dimitrissnk
Mar 28 2018 20:08
Can somebody tell me why the freecodecamp logo is a bit higher than the others and how to lower it? https://codepen.io/dimitris51/full/GxOVbX/
Hemang Kumar
@hemangsk
Mar 28 2018 20:13
@Dimitrios51 The image you are using for freecodecamp logo doesn't match with the dimensions of other images, hence its a bit higher after the 'width:25vw; height:25vw' on that image. your fcc logo image is 800x800 and others are 64x64
Ivan Ngundela
@ingundela
Mar 28 2018 20:13

@gulsvi thanks you mate… but it works just fine by adding:
.nav-item {
background: white !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #808080!important;
    font-size: 0.8rem;
    text-align: center;
}

to the media queries

CamperBot
@camperbot
Mar 28 2018 20:13
ingundela sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2691 | @gulsvi |http://www.freecodecamp.org/gulsvi
Ivan Ngundela
@ingundela
Mar 28 2018 20:15
@gulsvi I still have to learn better how to target expecific element/ class from Bootstrap to make the changes I want
Dimitris Nik.
@dimitrissnk
Mar 28 2018 20:36
@hemangsk but since I am using the width-height command to specify the element, shouldn't it be the same?
Gulsvi
@gulsvi
Mar 28 2018 20:48
@ingundela That change you made comes with some sacrifices - but if you're happy with it, that's good :) it's best to work with existing classes in Bootstrap rather than relying on !important to override. It can cause unintended side effects
Ivan Ngundela
@ingundela
Mar 28 2018 20:50
@gulsvi ohhh I see
@gulsvi so, that means that everytime I want to style something I should first look for the bootstrap class?
in that case I’ll not have to use important?
Gulsvi
@gulsvi
Mar 28 2018 20:51
@ingundela Yes, that's the best way to override bootstrap. Use the same classes that they use for their styling, then you won't have to use !important
Ivan Ngundela
@ingundela
Mar 28 2018 20:52
I feel like even using the existing bootstrap classes I’ve to use important;
Gulsvi
@gulsvi
Mar 28 2018 20:53
It can feel that way, but as long as your custom CSS comes after bootstrap, there's no need to use !important to override. If you work with other developers, it will make it easier to share code as well - since they'll know exactly what you're trying to do.
Ivan Ngundela
@ingundela
Mar 28 2018 20:53
@gulsvi well, if I’m using my own style file some time the style does not take effect when I don’t use important
Gulsvi
@gulsvi
Mar 28 2018 20:53
That should not be the case if you use the same classes that bootstrap is using for your styling
Ivan Ngundela
@ingundela
Mar 28 2018 20:55
@gulsvi Thanks you… that why I love and enjoy learning code… I’M LEARNING SOMETHING NEW EVERYDAY!
CamperBot
@camperbot
Mar 28 2018 20:55
ingundela sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
chuksono
@chuksono
Mar 28 2018 22:18
opps nobody want to help me out
Dardan Demiri
@dardandmr
Mar 28 2018 22:25
@chuksono What's your issue ?

btw

Does anyone have any idea what I should do right now:

I have just 3 more Advanced algorithms to finish and I am done with Front End

Should I apply for the old fcc certificate or should I resubmit my projects and all in the beta fcc to claim the new certificate

What's your opinions ?

Gulsvi
@gulsvi
Mar 28 2018 22:28
@dardandmr I don't think they are issuing certificates with the beta program yet. Go for it with the older one (and congrats!) :)
Dardan Demiri
@dardandmr
Mar 28 2018 22:29
@gulsvi so no one can claim a beta certificate now ?
Gulsvi
@gulsvi
Mar 28 2018 22:29
@chuksono There are some bugs in your JS. getElementsByClassName not getElementByclassName (it's case sensitive). Also, getElementById(food) not getElementByid('x') ("Id" should be capitalized, and you want to refer back to the food variable).
Working example:
<div class="tab">
  <button class="tablinks margin" onclick="dropdown(event,'x')">HOME</button>
  <button class="tablinks" onclick="dropdown(event,'y')">COMPANY</button>
  <button class="tablinks" onclick="dropdown(event,'z')">JOBS</button>
</div>

<div id="x" class="tabcontent">
  <h3>rice thing</h3>
  <h3>rice thing</h3>
  <h3>rice thing</h3>
  <h3>rice thing</h3>
</div>

<div id="y" class="tabcontent">
  <h3>beans stuff</h3>
  <h3>beans stuff</h3>
  <h3>beans stuff</h3>
  <h3>beans stuff</h3>
</div>

<div id="z" class="tabcontent">
  <h3>veggies</h3>
  <h3>veggies</h3>
  <h3>veggies</h3>
  <h3>veggies</h3>
</div>

<script>
  function dropdown(event, food) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none"
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].classList.remove("active");
      document.getElementById(food).style.display = "block";
      event.currentTarget.classList.add("active");
    }
  }
</script>
@dardandmr Yes, 99% sure that's correct. I will search and find the source where I read that.
Dardan Demiri
@dardandmr
Mar 28 2018 22:30

@gulsvi Oh that's interesting

Thanks bro

CamperBot
@camperbot
Mar 28 2018 22:30
dardandmr sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2692 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Mar 28 2018 22:33
@dardandmr Yeah, confirmed 100% now, no certificates issued for the beta yet. https://forum.freecodecamp.org/t/beta-certificates/98947/3
Dardan Demiri
@dardandmr
Mar 28 2018 22:49
Really interesting thanks bro :+1:
blob
How much can it take for this last part to get finished is there any release date ?
@gulsvi
found all my answers
Alex Porobe
@Zappy555
Mar 28 2018 23:05
Hello guys, so after much tinkering, I finally completed my random quote machine. I will appreciate your feedback and improvement suggestions. https://codepen.io/Zappy555/pen/oqpzEZ
Dardan Demiri
@dardandmr
Mar 28 2018 23:10
@Zappy555 Well done, it works perfectly

Only thing that looks odd is the tweet button

Twit This Quote

Better just

Tweet Quote

New Quote and Tweet Quote
Alex Porobe
@Zappy555
Mar 28 2018 23:13
@dardandmr, thanks. I'll get it fixed. I actually wanted a bigger button width.
CamperBot
@camperbot
Mar 28 2018 23:13
zappy555 sends brownie points to @dardandmr :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @dardandmr |http://www.freecodecamp.org/dardandmr
Dardan Demiri
@dardandmr
Mar 28 2018 23:17

@Zappy555 you can add

The class: btn-lg and it get's bigger

Godd job ;)

DarkxPunk
@DarkxPunk
Mar 28 2018 23:23
Can I get some criticism on a pure css system I created?
Dardan Demiri
@dardandmr
Mar 28 2018 23:23
yes
@DarkxPunk
Dardan Demiri
@dardandmr
Mar 28 2018 23:24
@DarkxPunk Wow !
Great Work bro
it looks impossible without JS
I struggeled doing this with JS... you have done it with CSS
DarkxPunk
@DarkxPunk
Mar 28 2018 23:25
Well just look at the CSS it practically is impossible XD
I am doing a hell of a lot of psudo class mashing together
Dardan Demiri
@dardandmr
Mar 28 2018 23:28
And your Hamburger Menu / Nav Button
is Great too
wow
DarkxPunk
@DarkxPunk
Mar 28 2018 23:28
I am addicted to CSS XD
Dardan Demiri
@dardandmr
Mar 28 2018 23:28
I can see that
Here something for you:
CSSGrid.io
Great Course to learn the new Grid system of CSS
Great course
@DarkxPunk
DarkxPunk
@DarkxPunk
Mar 28 2018 23:32
Awesome, thanks.
Dardan Demiri
@dardandmr
Mar 28 2018 23:32
@DarkxPunk Thnaks for sharing your project too :D
DarkxPunk
@DarkxPunk
Mar 28 2018 23:33
Yeah I hope it is useful to someone. It birthed from a use case I needed it for.
Doing a page with multiple forms that have different fields.
Gulsvi
@gulsvi
Mar 28 2018 23:35

@Zappy555 Nice work. Add code comments :) it will help us review the code and help you understand it better later on.
There are some things you may want modify for simplification.
Change:

        $.ajax({
            url: 'https://api.forismatic.com/api/1.0/',
            jsonp: 'jsonp',
            dataType: 'jsonp',
            data:{
                method: 'getQuote',
                lang: 'en',
                format: 'jsonp'                           
            },
            success: function(response){

to:

        $.ajax({
            url: 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?',
            dataType: 'jsonp',
            success: function(response){

Change:

    $('.getQuote').on('click', function(){
        getNewQuote();        
    });

To:

$('.getQuote').on('click', getNewQuote);
Also, in jQuery 3 document.ready is obsolete - remove your document.ready and replace it with: $(getNewQuote);
Last feedback - it's a bad practice to rely on global variables that are set asynchronously - pass the quote + author to a function when building your twitter click functionality.
Mel Macaluso
@MelMacaluso
Mar 28 2018 23:46
Hello, I have a web app based on vuejs / vuetify /webpack and I am doing some get/post from thirdparty apis with axios, that requires sending in the header the api key, which obviously is bad practice. What would be the steps to instead send the user form data to the server (ie. Express) then the server handles it and then posts back to the frontend the json? (so that the api header request is never seen by the frontend and thus exploited).