These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Jan 2018
cguidog
@cguidog
Jan 27 2018 00:26
Hello everybody, I am working on my weather app but I don't understand how to call my API using Javascript (not jquery) I have looked everywhere but I can not find a way to do it. Can anybody give me a hand?
Jareth MacArthur
@Jtmaca9
Jan 27 2018 00:27
Hey having a small issue with the weather app project on codepen,
fetch('http://ip-api.com/json', { method: 'GET' }).then((res) => { console.log(res); }).catch((err) => { console.log('err'+ err); });
i am getting TypeError: Failed to fetch returned
Lee
@LeeConnelly12
Jan 27 2018 00:31
@Jtmaca9 Try https instead of http?
Jareth MacArthur
@Jtmaca9
Jan 27 2018 00:33
@LeeConnelly12 hmm still having the same issue, the documentation for that api does say to use http as well
Im wondering whether its a CORS issue, but im not certain how to fix it
Stephen James
@sjames1958gm
Jan 27 2018 00:39
@cguidog I would use the fetch API in the browser.
@Jtmaca9 Can you link your pen?
Jareth MacArthur
@Jtmaca9
Jan 27 2018 00:41
I was testing the api calls in a seperate pen https://codepen.io/Jtmaca9/pen/bZmQOZ?editors=1111 @sjames1958gm
Stephen James
@sjames1958gm
Jan 27 2018 00:44
@Jtmaca9 ip-api.com doesn't support https - there is an error in the devtools console (not the codepen one)
Failed to load resource: net::ERR_CONNECTION_REFUSED
This usually means the site doesn't support https
Jareth MacArthur
@Jtmaca9
Jan 27 2018 00:45
@sjames1958gm Whoops i put that in there to test if that was the issue, but i am still getting that same error with just http
Lee
@LeeConnelly12
Jan 27 2018 00:45
@sjames1958gm Yeah you're right the site have https. That's usually the issue though.
Stephen James
@sjames1958gm
Jan 27 2018 00:45
@Jtmaca9 Well, you are getting a different error with http, if you look in the devtools console (F12 on chrome)
pen.js:1 Mixed Content: The page at 'https://codepen.io/Jtmaca9/pen/bZmQOZ?editors=1111' was loaded over HTTPS, but requested an insecure resource 'http://ip-api.com/json'. This request has been blocked; the content must be served over HTTPS.
This says you cannot go to http from a https site
Lee
@LeeConnelly12
Jan 27 2018 00:46
@sjames1958gm does not have https*
Jareth MacArthur
@Jtmaca9
Jan 27 2018 00:46
Oh i see, so codepen does not support fetching from an http?
Stephen James
@sjames1958gm
Jan 27 2018 00:47
@Jtmaca9 Well, it is the browser, because codepen is served over https it won't let you go to an insecure (http) site
Jareth MacArthur
@Jtmaca9
Jan 27 2018 00:47
Ah I see, Thats very helpful, I can work on that from here. Thank you very much @LeeConnelly12 and @sjames1958gm !! Appreciate it :)
CamperBot
@camperbot
Jan 27 2018 00:47
jtmaca9 sends brownie points to @leeconnelly12 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 180 | @leeconnelly12 |http://www.freecodecamp.org/leeconnelly12
:star2: 8903 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 27 2018 00:48
@Jtmaca9 :+1:
@Jtmaca9 TypeError: Failed to fetch this seems to be a very generic error from fetch
cguidog
@cguidog
Jan 27 2018 00:56
@sjames1958gm Thank you, I will take a look. I am so lost.
CamperBot
@camperbot
Jan 27 2018 00:56
cguidog sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8904 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 27 2018 00:57
@cguidog MDN has some good examples of using fetch -
Emmanuel Tuffet
@donteck
Jan 27 2018 02:09
can you guys explain me that ?
Room outside, theater, pub, lab, office;
    // create the rooms
    outside = new Room("outside the main entrance of the university");
    theater = new Room("in a lecture theater");
    pub = new Room("in the campus pub");
    lab = new Room("in a computing lab");
    office = new Room("in the computing admin office");

    // initialise room exits
    outside.setExits(null, theater, lab, pub);
    theater.setExits(null, null, null, outside);
    pub.setExits(null, outside, null, null);
    lab.setExits(outside, office, null, null);
    office.setExits(null, null, null, lab);

    currentRoom = outside;  // start game outside
Stephen James
@sjames1958gm
Jan 27 2018 02:29
@donteck Looks like you can go from outside to theater lab pub
Looks like the office doesn't have an outside door, only to the lab
the other two only have one door to the outside
theater <> outside <> lab <> office
               ^
               v
             pub
Dan Lafferty
@DanLaff
Jan 27 2018 04:01
@artoodeeto it's still broken bro
different colors on every turn
Emmanuel Tuffet
@donteck
Jan 27 2018 04:37
ok , I just get back in here , sorry guys I step out for a moment
Wolfion
@DEEPANSHU-BHASKER
Jan 27 2018 05:01
what is repo ?
Eric Weiss
@eweiss17
Jan 27 2018 05:03
Projects
Wolfion
@DEEPANSHU-BHASKER
Jan 27 2018 05:04
@eweiss17 i am working on a project
its my portfolio site
how can i make a repo and what r uses of it ?
Eric Weiss
@eweiss17
Jan 27 2018 05:04
a repo is short for repository which is where you put projects on github
it says you already have 2
Wolfion
@DEEPANSHU-BHASKER
Jan 27 2018 05:05
WEIRD
Will White
@willnwhite
Jan 27 2018 08:55
Is there a way to open a URL from JS in CodePen?
The only way I've seen to open a URL involves HTML.
Marianissimus
@Marianissimus
Jan 27 2018 08:59
you could setAttribute("href", "newurl.com") in your javascript, but why would you want to avoid html?
Will White
@willnwhite
Jan 27 2018 09:05
@user-ap Didn't think you could use Window.open with CodePen (X-Frame-Option error).
@Marianissimus I guess setAttribute has to operate on HTML though. I've got Random Quote Machine down to a single JS expression, but only outside of CodePen (because CodePen has blocked my JS attempts to open a URL).
Will White
@willnwhite
Jan 27 2018 09:13
I will ask CodePen. It's a CodePen-specific issue anyway. Will report back if you're interested.
Will White
@willnwhite
Jan 27 2018 09:32
@user-ap Okay, Window.open doesn't cause X-Frame error!
Will White
@willnwhite
Jan 27 2018 09:40
Got it working, thanks @user-ap. Just need to enable pop-ups from CodePen (Chrome).
CamperBot
@camperbot
Jan 27 2018 09:40
willnwhite sends brownie points to @user-ap :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @user-ap |http://www.freecodecamp.org/user-ap
Rami
@RNwebdk
Jan 27 2018 12:08
Anyone here can tell me why my gulp is not auto refreshing on scss but only on PHP files ? here is my gulp.js
const gulp        = require('gulp');
const browserSync = require('browser-sync').create();
const sass        = require('gulp-sass');

// Compile Sass & Inject Into Browser
gulp.task('sass', function() {
    return gulp.src(['scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("scss/"))
        .pipe(browserSync.stream());
});


// Watch Sass & Serve
gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./scss/"


    });

    gulp.watch(['scss/*.scss'], ['sass']);
    gulp.watch("./*.php").on('change', browserSync.reload);
});

// Default Task
gulp.task('default', ['serve']);
Grengit
@Grengit
Jan 27 2018 12:23
how to add the src?
Stephen James
@sjames1958gm
Jan 27 2018 12:32
@RNwebdk You have to combine the watch tasks for the sass change to reload. This page describes the process
https://css-tricks.com/gulp-for-beginners/#article-header-id-9
Rami
@RNwebdk
Jan 27 2018 12:33
@sjames1958gm Thanks i'll give it a try
CamperBot
@camperbot
Jan 27 2018 12:33
rnwebdk sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8906 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 27 2018 12:33
@RNwebdk :+1: It seems more complicated than it should be . . .
Rami
@RNwebdk
Jan 27 2018 12:37
@sjames1958gm yeah, well once it's up and running it makes your life much easier
Stephen James
@sjames1958gm
Jan 27 2018 12:38
@RNwebdk True
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 14:03
hi! why i should use grant or gulp what is the advatages of these?
Aruanangshu Biswas
@dotslash21
Jan 27 2018 15:22
Hi! How can I make my navbar dynamic in the portfolio website project??
alteducation
@alteducation
Jan 27 2018 15:39
hi anyone that could help me with json and jekyll
Darren
@DarrenfJ
Jan 27 2018 16:55
@artoodeeto love the layout and aesthetics of your simon game...
@kbaig I like yours too... it feels like a deliberate design choice to go functional.. Like designed who use monospace fonts to simplify their design..
@artoodeeto is it just me or does it choose a new pattern as it goes?
aRtoo
@artoodeeto
Jan 27 2018 16:59
@DarrenfJ thanks bro but i wont take the credit its not mine i just got that in google. i just copied it. haha.
CamperBot
@camperbot
Jan 27 2018 16:59
artoodeeto sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2362 | @darrenfj |http://www.freecodecamp.org/darrenfj
aRtoo
@artoodeeto
Jan 27 2018 16:59
@DarrenfJ it should choose a random pattern everytime bro. what happened
THalletProtech
@THalletProtech
Jan 27 2018 17:29
whats up everyone
anyone here?
Tom
@moT01
Jan 27 2018 17:34
@THalletProtech
THalletProtech
@THalletProtech
Jan 27 2018 17:34
hmm I just came back to this chat room rom being gone for like 7 months
this place isn't as active as it was when I was here before
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 17:38
Hope
whats up?
THalletProtech
@THalletProtech
Jan 27 2018 17:38
oh snap what up
what you got goin on @oguzhancelikarslan
Stephen James
@sjames1958gm
Jan 27 2018 17:41
@THalletProtech yeah, they removed the link from the challenges going to here
THalletProtech
@THalletProtech
Jan 27 2018 17:42
oh I see. that would have an effect on the activity
anyone here that can help with some advanced CSS
Stephen James
@sjames1958gm
Jan 27 2018 17:47
@THalletProtech probably best to just ask the question, some helpers are drive by and will see the question and answer
THalletProtech
@THalletProtech
Jan 27 2018 17:48
ok
I'm trying to turn this site https://ist238.webcreationsbytravis.com/RWD/ into a 4 column layout. I want to put each <figure> image above the associated <p> tags. is there a way to do this without changing the html?
Emil
@aguyinmontreal
Jan 27 2018 17:53
Hi guys! I have a Jquery selector question: How do I select all <a> tags, with the delete_tap class, but that don't have the disabled class ? I don't know where the :not() selector fits in $('a.delete_tap') ...
aRtoo
@artoodeeto
Jan 27 2018 17:56
@aguyinmontreal what are you doing again bro? do you have the pen?
Emil
@aguyinmontreal
Jan 27 2018 17:57
@artoodeeto what are you talking about? :D which pen?
aRtoo
@artoodeeto
Jan 27 2018 17:57
i mean codepen? can i see the code
Emil
@aguyinmontreal
Jan 27 2018 17:58

nahhh, it's not that complicated: this is my code:

```$('a.delete_tap').on('click', function (e) {
$(this).parents('.li').remove();
e.preventDefault();
});````

but I want to exclude the ones that have class disabled
Chi
@chiyc
Jan 27 2018 18:00
@THalletProtech What exactly do you mean by a 4 column layout? You want each image and description paragraphs to be in its own column?
Dan Lafferty
@DanLaff
Jan 27 2018 18:01
@aguyinmontreal $("a.delete_tap:not(.disabled)")
Emil
@aguyinmontreal
Jan 27 2018 18:01
@DanLaff Thank you so much!!!
CamperBot
@camperbot
Jan 27 2018 18:01
aguyinmontreal sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
aRtoo
@artoodeeto
Jan 27 2018 18:01

@aguyinmontreal

:not(selector)    $("input:not(:empty)")    All input elements that are not empty

https://www.w3schools.com/jquery/jquery_ref_selectors.asp
that one bro just include the :not()

Dan Lafferty
@DanLaff
Jan 27 2018 18:01
(if "disabled" is a class and not a property)
THalletProtech
@THalletProtech
Jan 27 2018 18:02
@chiyc I want the images to be above the associated paragraphs and I want 4 of those in each row
but the first image can stay one column
Emil
@aguyinmontreal
Jan 27 2018 18:03
@DanLaff disabled is a class, yes
@artoodeeto thanks!
CamperBot
@camperbot
Jan 27 2018 18:03
aguyinmontreal sends brownie points to @artoodeeto :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @artoodeeto |http://www.freecodecamp.org/artoodeeto
Dan Lafferty
@DanLaff
Jan 27 2018 18:03
Cool, that should work @aguyinmontreal :)
Chi
@chiyc
Jan 27 2018 18:03
@THalletProtech I'm not sure that it's possible without at least wrapping each figure+paragraphs into its own <div>
THalletProtech
@THalletProtech
Jan 27 2018 18:04
yea that's what I thought I would have to do too. but I'm not sure my teacher wants us to adjust the HTML
Chi
@chiyc
Jan 27 2018 18:04
Do you get to use JavaScript or only CSS?
THalletProtech
@THalletProtech
Jan 27 2018 18:04
ill just have to put the paragraphs to the side of the figures
only CSS right now. we haven't gotten to JQuery yet
this is week 3 xD
Chi
@chiyc
Jan 27 2018 18:05
Oh! You could probably do it with CSS grids
THalletProtech
@THalletProtech
Jan 27 2018 18:06
not sure I know what those are
Chi
@chiyc
Jan 27 2018 18:07
It's a CSS feature that lets you define a grid for your website, and you can assign html elements to different parts of the grid. It's pretty new and only supported in the latest browsers
THalletProtech
@THalletProtech
Jan 27 2018 18:07
hmm cool... sound like something usefull in making a html game
Chi
@chiyc
Jan 27 2018 18:07
But really, I think the best way to do this and keep your website responsive is to wrap each section in its own <div> and use CSS flexbox
THalletProtech
@THalletProtech
Jan 27 2018 18:08
I'm just going to keep the layout the same as the 2 column one just make it 50% smaller lol
that should work... I would think
Darren
@DarrenfJ
Jan 27 2018 18:11

@artoodeeto then it's working... the traditional simon game builds on a similar pattern I think.. adding one more step each time... but I don't think the use cases matter on that point. :)

it should choose a random pattern everytime bro. what happened

I love the way it play.. if that makes any sense.. the timing of it and the feel of it, if that makes any sense
aRtoo
@artoodeeto
Jan 27 2018 18:13
@DarrenfJ as long as your right and the strict is not on if you got it wrong it will just play the same sequence. if you turn strict on and if you got it wrong it will go back to level 1. haha. thats how i build it.
@DarrenfJ thanks bro! appreciate the compliment. but i have one more thing. i dont know how get it faster when u get into higher level
CamperBot
@camperbot
Jan 27 2018 18:14
artoodeeto sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2363 | @darrenfj |http://www.freecodecamp.org/darrenfj
aRtoo
@artoodeeto
Jan 27 2018 18:17
@DarrenfJ this what happens when you have spagetti code. hahaha
Darren
@DarrenfJ
Jan 27 2018 18:17
ah you know, you can always refactor it later :D
sometimes things come to people when they let things simmer for a while in the brains
THalletProtech
@THalletProtech
Jan 27 2018 18:19
yea walk away. and think to yourself what could be causing the problem without looking at the code
always helps me when I break it down in my head instead of in code
cguidog
@cguidog
Jan 27 2018 18:19
Hello, I am working on my weather app and need some help. I am able to get the location when the page loads but I don't know how to make my getweather function start with out the user interaction,
Any ideas? My pen is almost empty right now, I am just trying to figure out how to make it work, before I actually put everything together https://codepen.io/cguidog/pen/QQLyVv?editors=1111
aRtoo
@artoodeeto
Jan 27 2018 18:21
@DarrenfJ yesterday i almost deleted the whole js cuz i myself got confused. i dont know which part is which. got a lot of repetitions. thats why i spent yesterday watching module pattern
@cguidog did you put the function outside or globally?
@cguidog invoke that function ourside
Dan Lafferty
@DanLaff
Jan 27 2018 18:24
@cguidog You need to call the getWeather function when you get the location:
  function showPosition(position) {
    /*  x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;*/
    lat = "lat=" + position.coords.latitude;
    lon = "lon=" + position.coords.longitude;
    y.innerHTML = lat + lon;
    getWeather(lat, lon); // send the lat and lon to the getweather function
  }
lat and lon can't be global variables - navigator.geolocation is async
Aruanangshu Biswas
@dotslash21
Jan 27 2018 18:28
Hi! I was wondering, how to dynamically highlight the correct navigation button on the nav-bar dynamically in a one-page website like this one (https://codepen.io/freeCodeCamp/full/YqLyXB), The buttons gets highlighted depending on which section of the page I'm viewing. My pen: https://codepen.io/dotslash21/full/OQLMNJ/
Stephen James
@sjames1958gm
Jan 27 2018 18:29
@dotslash21 WHen you move to each section it assigns an active class to that button. The active class has css that does that.
Dan Lafferty
@DanLaff
Jan 27 2018 18:30
@dotslash21 That is called Scrollspy - it's a feature you can enable in bootstrap: https://getbootstrap.com/docs/3.3/javascript/#scrollspy
Stephen James
@sjames1958gm
Jan 27 2018 18:31
@dotslash21
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #555;
    background-color: #e7e7e7;
}
Aruanangshu Biswas
@dotslash21
Jan 27 2018 18:31
Thanks @DanLaff @sjames1958gm
CamperBot
@camperbot
Jan 27 2018 18:31
dotslash21 sends brownie points to @danlaff and @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
:star2: 8908 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Dan Lafferty
@DanLaff
Jan 27 2018 18:32
@dotslash21 @sjames1958gm All you need to do is add this to your JS:
$('body').scrollspy({ target: '#navbar' })
cguidog
@cguidog
Jan 27 2018 18:33
Thank you @DanLaff I will take a look.
CamperBot
@camperbot
Jan 27 2018 18:33
cguidog sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
Darren
@DarrenfJ
Jan 27 2018 18:38
@artoodeeto I feel yah... looking over some spagetti coding blog article right now due to this convo.. thanks for that :D
CamperBot
@camperbot
Jan 27 2018 18:38
darrenfj sends brownie points to @artoodeeto :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @artoodeeto |http://www.freecodecamp.org/artoodeeto
Roman Struna
@RomchyFCC
Jan 27 2018 18:46

my li item looks like this

<li><button>1</button>Text of the Li<button>2</button></li>

How would I only get the text via javascript, if I do li.value my result is "1Text of the Li2" and all I want is "Text of the Li"
anyone with any idea?

Stephen James
@sjames1958gm
Jan 27 2018 18:48
@RomchyFCC Someone had a similar question recently and it is not easy, put a span around the text then it will be easier to get
Roman Struna
@RomchyFCC
Jan 27 2018 18:48
damn it, that would put so much work on my already existing code
I'm not sure i'm ready to do it just yet, although it would make sense
aRtoo
@artoodeeto
Jan 27 2018 18:50
@DarrenfJ my code looks shit rn. im about to finish this and im gonna refactor this immediately but first i have to learn module pattern. any resources that explain good?
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 18:51

$(document).ready(function(){
var myString = $("li").text()
var result = myString.slice(1, -1);

alert(result)
})

:)
just try it
Dan Lafferty
@DanLaff
Jan 27 2018 18:52
@RomchyFCC document.getElementsByTagName('li')[0].childNodes[1].textContent
use childNodes to do it ^ that example only works if you have one li.
So, you'd need to loop through them and replace the [0] with your iterator variable
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 18:54
firstly i take all text and then i removed of first and last character.
Lots of options in that article
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 18:54
you can make work it on codepend. but solution of @DanLaff is good
Stephen James
@sjames1958gm
Jan 27 2018 18:55
@RomchyFCC If you have the option, I would restructurer the HTML to keep from making brittle code.
Roman Struna
@RomchyFCC
Jan 27 2018 18:58
@DanLaff I only select one li, but currently that code does not work, I'm using the query selector method
@sjames1958gm currently I am only working on the javascript part, my html is only built as far as i need for now and I will have the option later
cguidog
@cguidog
Jan 27 2018 18:58
Sorry but I still don't get it. How can I make my function run without an user interaction after I got the location (Weatherapp). I have three functions right now... 1. Gets the location when the page loads... 2 takes the latitude and longitude and add "lon" and "lat" and 3. fetch the url to get the weather info. My number 1 and number 2 functions are working but the number 3 does not.
I understand that I have to call the function from the previous one. I can not make it work for some reason.
Stephen James
@sjames1958gm
Jan 27 2018 19:00
@cguidog Do you have a codepen link?
Dan Lafferty
@DanLaff
Jan 27 2018 19:03
@RomchyFCC Put your code in codepen and maybe we can help more. The code I gave you works based on what is provided: https://s.codepen.io/anon/pen/vdBKRr?editors=1012
Dan Lafferty
@DanLaff
Jan 27 2018 19:06
@cguidog I showed you the code earlier. Here it is working: https://s.codepen.io/anon/pen/qxWNKV?editors=0011
Roman Struna
@RomchyFCC
Jan 27 2018 19:07

@DanLaff GOT IT hehe, this was my actual case that I tried to simplify

document.querySelector("[id='" + position + "']").childNodes[1];

Thanks for helping me realize that every object I work with is in the dom and has his nodes that i can play with! :)

CamperBot
@camperbot
Jan 27 2018 19:07
romchyfcc sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
Dan Lafferty
@DanLaff
Jan 27 2018 19:07
@RomchyFCC Glad you got it!
cguidog
@cguidog
Jan 27 2018 19:10
Man, I don't know what I'm doing. :worried: Thank you again @DanLaff I got it now.
CamperBot
@camperbot
Jan 27 2018 19:10
api offline
cguidog sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
Dan Lafferty
@DanLaff
Jan 27 2018 19:11
@cguidog Maybe the issue is that "y" is not defined in your code - you need an element with id="y" to put your latitude and longitude in
The same issue will happen when geolocation fails and you call x.innerHTML
there is no x defined anywhere in your code
cguidog
@cguidog
Jan 27 2018 19:14
Yes, I removed all that junk already, I was using that before just to test the location.
THalletProtech
@THalletProtech
Jan 27 2018 19:21
@chiyc refresh my page. any idea how to get the frog pic to stay in the flow?
Chi
@chiyc
Jan 27 2018 19:31
@THalletProtech Interesting approach! You're using the float property to get your divs to stack naturally in the main container
The reason your frog section fits like that is because the height of the frog section and the artifact section is small compared to your fish section
With your current approach, a solution could be setting a height on your artifact section to match the fish section to push the frog out
THalletProtech
@THalletProtech
Jan 27 2018 19:35
right. but isn't it bad to use the height property
Lee
@LeeConnelly12
Jan 27 2018 19:36
Jquery is amazing
THalletProtech
@THalletProtech
Jan 27 2018 19:36
we all know
lol
Lee
@LeeConnelly12
Jan 27 2018 19:38
look at this difference guys,
$('.switch').on('click', switchClick);

vs

var switchEle = document.getElementsByClassName('switch');

for (var i = 0; i < switchEle.length; i++) {
     switchEle[i].addEventListener('click', switchClick);
}
How can you not use Jquery, right?
Dan Lafferty
@DanLaff
Jan 27 2018 19:41
@LeeConnelly12 The vanilla js will run faster and doesn't require an 85kb library
For large projects though - it definitely speeds up development
There's also:
const switchEle = document.getElementsByClassName('switch');
[...switchEle].forEach(el => el.addEventListener('click', switchClick));
alpox
@alpox
Jan 27 2018 19:48
Lemme rephrase to:
document.querySelectorAll('.switch').forEach(el => el.addEventListener('click', switchClick));
Dan Lafferty
@DanLaff
Jan 27 2018 19:48
Nicer :) ^
alpox
@alpox
Jan 27 2018 19:50
@LeeConnelly12 You may now be amazed by jquery. Someday you will find no use for it anymore ;-)
Lee
@LeeConnelly12
Jan 27 2018 19:52
@DanLaff Would love to use a bit of es6 but IE11 doesn't support it so RIP
no es6 for me anymore
Sweet Coding :)
@SweetCodingInc
Jan 27 2018 19:53
polyfill?
alpox
@alpox
Jan 27 2018 19:53
@LeeConnelly12 Thats why there are precompilers
Babel ftw
Lee
@LeeConnelly12
Jan 27 2018 19:53
Babel is good yeah
Chi
@chiyc
Jan 27 2018 19:53
@THalletProtech Assigning a height to elements has its uses. Sometimes, it's absolutely necessary
Sweet Coding :)
@SweetCodingInc
Jan 27 2018 19:53
@alpox more accurate term is transpiler
alpox
@alpox
Jan 27 2018 19:54
@SweetCodingInc Yea but ends with the same :D
Dan Lafferty
@DanLaff
Jan 27 2018 19:54
Or preprocessor?
alpox
@alpox
Jan 27 2018 19:54
Thy for the remark though
Dan Lafferty
@DanLaff
Jan 27 2018 19:54
and transcompiler :)
alpox
@alpox
Jan 27 2018 19:54
Well I guess i wanted to go for preprocessor but my mind didn't preprocess that well enough :D
Dan Lafferty
@DanLaff
Jan 27 2018 19:55
I'm sure it will transpile eventually :p
Sweet Coding :)
@SweetCodingInc
Jan 27 2018 19:55
:laughing:
alpox
@alpox
Jan 27 2018 19:55
xD
Lee
@LeeConnelly12
Jan 27 2018 19:58
I've never heard of a pre compiler before
Sounds useless though
THalletProtech
@THalletProtech
Jan 27 2018 20:29
@chiyc I'm going to explore and see if there is another way to do it besides giving a height property. but if i can't do it i will use it.
thanks a lot @chiyc
CamperBot
@camperbot
Jan 27 2018 20:29
thalletprotech sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @chiyc |http://www.freecodecamp.org/chiyc
Chi
@chiyc
Jan 27 2018 20:38
You're welcome! And again, I think the easier modern approach to this would be to use flexbox
THalletProtech
@THalletProtech
Jan 27 2018 21:03
@chiyc what is a flex box?
i cant find it in my book what category would it be under?
THalletProtech
@THalletProtech
Jan 27 2018 21:07
oh nice page of description
Eric Weiss
@eweiss17
Jan 27 2018 21:08
css grid is also useful.... for when a grid is appropriate https://css-tricks.com/snippets/css/complete-guide-grid/
THalletProtech
@THalletProtech
Jan 27 2018 21:08
cool ill book mark them and read them later thanks @eweiss17
CamperBot
@camperbot
Jan 27 2018 21:08
thalletprotech sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 604 | @eweiss17 |http://www.freecodecamp.org/eweiss17
THalletProtech
@THalletProtech
Jan 27 2018 21:14
oh i just thought of something clever I'm gunna try it xD @chiyc
Chi
@chiyc
Jan 27 2018 21:17
Ooo, let me know if it works! I'd be interested to hear about it :smile: @THalletProtech
THalletProtech
@THalletProtech
Jan 27 2018 21:18
I'm a genius!!!!!!!!!!
gotta upload it
Matej Bošnjak
@mbosnjak01
Jan 27 2018 21:19
kek
THalletProtech
@THalletProtech
Jan 27 2018 21:19
lol
not really it was so obvious
don't forget about the : nth-child
aRtoo
@artoodeeto
Jan 27 2018 22:19
hey fam can i get a feedback? appreciate it. thanks.
https://codepen.io/artoo/full/opQZWy/
Onome Sotu
@onomesotu
Jan 27 2018 22:22
Hello guys
is there any difference between this two code?
using a for loop or a forEach array function
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 22:23
firstly god bless your hands
but what is the aim :/
is it a game?
Onome Sotu
@onomesotu
Jan 27 2018 22:23
vowels.forEach(function(vowel){
    if(vowel === str.charAt(0)){
      return str + way;
    }
});
vs
for(var i = 0; i < vowels.length; ++i){
    if(vowels[i] === str.charAt(0)){
      return str + way;
    }
  }
Dr-D-M
@Dr-D-M
Jan 27 2018 22:24
hello humans, could you please help me?
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 22:24
from i remember, you can use what you want. maybe there is a difference as a performance.
Eric Weiss
@eweiss17
Jan 27 2018 22:24
forEach can apply a function to every element in an array easily
Onome Sotu
@onomesotu
Jan 27 2018 22:25
i just want to apply a check
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 22:25
But in php i was using foreach for array
Eric Weiss
@eweiss17
Jan 27 2018 22:25
if you can use a forEach, do it
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 22:25
but python
i use for
Onome Sotu
@onomesotu
Jan 27 2018 22:25
@eweiss17 but it doesn't work when i use forEach
but passes when i use a loop
Eric Weiss
@eweiss17
Jan 27 2018 22:25
did you set it up right
Oğuzhan Çelikarslan
@oguzhancelikarslan
Jan 27 2018 22:26
can you show us the "vowels"?
Dr-D-M
@Dr-D-M
Jan 27 2018 22:28
how can I store values to a variable?
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:29
forEach doesn't do anything with its return as far as I'm aware.
Onome Sotu
@onomesotu
Jan 27 2018 22:30
@oguzhancelikarslan var vowels = ['a', 'e', 'i', 'o', 'u'];
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:30

@onomesotu From MDN:

forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined and is not chainable. The typical use case is to execute side effects at the end of a chain.

forEach() does not mutate the array on which it is called (although callback, if invoked, may do so).

If you want to do something cumulative with an Array function, you want Array.prototype.reduce() or Array.prototype.map().
@Dr-D-M With the assignment operator. myVariable = myValue.
Onome Sotu
@onomesotu
Jan 27 2018 22:32
@HeinousTugboat hmmm.. but i passed it an anonymous function
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:32
Doesn't matter. forEach ignores return values from its function.
[1,2,3].forEach(n => return n + 1) will return [1,2,3].
Onome Sotu
@onomesotu
Jan 27 2018 22:33
ahhhh.. so it is call back can only have side effects
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:33
Also the fact that your return statement in your for-loop is returning out of an outside function, not a callback.
Correct. forEach is for side effects.
reduce is for cumulative changes, map is to change every element of an Array.
Onome Sotu
@onomesotu
Jan 27 2018 22:34
like pushing to another array, etc
I don't understand this statement 'Also the fact that your return statement in your for-loop is returning out of an outside function, not a callback.'
@HeinousTugboat
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:36
vowels.forEach(function(vowel){
    if(vowel === str.charAt(0)){
      return str + way;
    }
});

vs

for(var i = 0; i < vowels.length; ++i){
    if(vowels[i] === str.charAt(0)){
      return str + way;
    }
  }

So, in this code, the return statement within that for-loop will drop out of whatever function it's in.

Whereas the forEach is hitting every element in the Array.
Also, you shouldn't be iterating before your loop. ++i is going to skip the first element.
I have no idea if that's intentional or not. Just letting you know.
Onome Sotu
@onomesotu
Jan 27 2018 22:40
hmmm.. So one cannot get out of a forEach? like say with a break or return statement? Good to know
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:40
I.. actually don't think you can. I'm not 100% on that though.
Onome Sotu
@onomesotu
Jan 27 2018 22:41
'Also, you shouldn't be iterating before your loop. ++i is going to skip the first element.' No it doesn't skip the first element :smile:
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:41
There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool. Use a plain loop or for...of instead. If you are testing the array elements for a predicate and need a Boolean return value, you can use every() or some() instead. If available, the new methods find() or findIndex() can be used for early termination upon true predicates as well.
Huh, touche.
Onome Sotu
@onomesotu
Jan 27 2018 22:43
Where did you get this excerpt?
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:43
Same place I got the other excerpt. :-P
Onome Sotu
@onomesotu
Jan 27 2018 22:43
hahaha.. i will read it up
cheers
Alexander Jarman
@HeinousTugboat
Jan 27 2018 22:44
It's in the note just before the examples here. :-)
Thanks for that about the pre/post increment in the loop. That genuinely surprised me. Reading up on it now.
Onome Sotu
@onomesotu
Jan 27 2018 22:45
yeah, it was right there in bold yellow.. how i skipped it, I have no idea
This message was deleted
:smile:
You're welcome