These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Apr 2018
Stephen James
@sjames1958gm
Apr 19 2018 00:02
@newtothat I find CSS to be difficult. I ended up buying a course on Udemy that is only CSS
include*engine
@newtothat
Apr 19 2018 00:04
if i practice more and move to server side
it is not hard actually
i just dont know if i have to finish everything about it or should i move cause ialready know basics?
and the other thing is I dont know when it is enough to start something new .But also do you have to start php for example or build projects in order to practivce with what you have learned so far?
include*engine
@newtothat
Apr 19 2018 00:10
@sjames1958gm and now? you dont find it hard anymore?
Stephen James
@sjames1958gm
Apr 19 2018 00:11
@newtothat It is still challenging, but I have a better feeling for how certain things work.
This is one element that requires more trial and error than js or html.
I think for js and html the logic syncs in, but for CSS it seems like so many individual pieces
include*engine
@newtothat
Apr 19 2018 00:15
do people use flexbox or grids in nowodays websites
i think these are latest hot topic for laying out
Daniel Feldman
@Feldbot
Apr 19 2018 00:18
@newtothat I think everything to do with web development and programming is hard! I think it helps to get the basics of HTML and CSS down before moving on to more complicated languages. As Stephen said, CSS takes a lot of practice to get the hang of since layouts need a lot of TLC since they are usually somewhat uniquely built. Grid seems like the next wave, and flexbox is good for one-dimensional layouts. Both are standards so they are good to know.
include*engine
@newtothat
Apr 19 2018 00:34
@Feldbot is it your thing ? https://www.behance.net
hensn5250
@hensn5250
Apr 19 2018 00:52
@Feldbot I definitely agree. One thing that may throw people of when learning CSS is that it appears to be pretty easy at first but once you move away from simply changing the color of the text to positioning items or selecting an item within a group then it can become frustrating.
hensn5250
@hensn5250
Apr 19 2018 00:57
Once you get a grasp of how the box model works , CSS specificity and positioning you can improve your designs by 10x
Keegan
@Keggatron
Apr 19 2018 01:02
Has anyone ever encountered an issue while trying to install packages from within their create-react-app
I'm getting an issue where Iwasn't able to start my app because there error said it could not find module 'node_modules'
so I removed the folder and tried npm install again
which didn't work
then I started a new create-react-app from the directory and tried again in there to no avail
Paul Borawski
@iAmNawa
Apr 19 2018 01:09
send the repo and I can look @Keggatron
What package are you trying to install?
are you starting with npm start or your own server?
anthonygallina1
@anthonygallina1
Apr 19 2018 01:15
does node -v return any thing and wich OS please.
also are you in the correct directory. if it isnt a global install?
Keegan
@Keggatron
Apr 19 2018 01:47
@iAmNawa Hey thanks Paul, I reinstalled a new create-react-app in my directory with the new node_modules folder and it worked
CamperBot
@camperbot
Apr 19 2018 01:47
keggatron sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 598 | @iamnawa |http://www.freecodecamp.org/iamnawa
Keegan
@Keggatron
Apr 19 2018 01:48
not sure what was wrong with the other CRA directory but my application is working now
AbrisM
@AbrisM
Apr 19 2018 02:09
If you want to build check out the O'Reily Books
Chris Cullen
@123xylem
Apr 19 2018 02:19

Hi guys.. Could someone help me with my IPAD RESPONSIVENESS for the slider TEXT.
I am trying to overide the style for div#laye_front which is in the themes CSS

I am using

@media only screen and (max-width: 1050px) and (min-width: 768px){
div#laye_front {
   margin-left: 6px !important;
}}

But it wont override it
Here is the site
http://brismax.surgery/
You can inspect with Ipad view on chrome

Thanks
Ian
@toianw
Apr 19 2018 02:38
@123xylem You're writing this rule in the enfold.css file, right? I see left: 6px rather than margin-left: 6px
Chris Cullen
@123xylem
Apr 19 2018 02:39
Yes Ian Ive tried both... the rule i overwrote was just copy pasted with left:600px
@toianw
what im saying is the rule that is making a large left margin was written like that and I just changed the margin amount
Ian
@toianw
Apr 19 2018 02:41
@123xylem Ok, the problem is that rule is being overridden by a similar rule in thecustom.css file (line 556)
Daniel Feldman
@Feldbot
Apr 19 2018 02:42
@newtothat Is programming my thing? I have an art and design background. I do have some visual stuff on behance. I'm trying to make web dev my thing, but I definitely feel like I'm swimming upstream!
Chris Cullen
@123xylem
Apr 19 2018 02:44
@toianw I thought my rule with !importat would overide that... SO anyway for me to override it or delete it?
Problem is its on a parent theme and Im using that parent theme (which basically means when the theme is eventually updated my custom parent theme changes wont be applied)
Ian
@toianw
Apr 19 2018 02:44
@123xylem That other rules also has !important
Chris Cullen
@123xylem
Apr 19 2018 02:45
@toianw Yes... I need a !superIMtportant!
Ian
@toianw
Apr 19 2018 02:47
@123xylem It's a slippery slope :smile: You could delete it (or rewrite it) in the custom.css file, or target it with a higher specificity in the enfold.css file.
@123xylem or try swapping the order of the css files.
Chris Cullen
@123xylem
Apr 19 2018 02:48
@toianw Yea its just any changes i make to the css files are going to be to the parent theme which will evenually update itself and delete my changes
Chris Cullen
@123xylem
Apr 19 2018 02:54
@toianw thanks ... Having checked the IPAD responsive tab I realised I can twist it horizontal or vertical. When horizontal it looks fine. I think I will just leave it...
CamperBot
@camperbot
Apr 19 2018 02:54
123xylem sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 517 | @toianw |http://www.freecodecamp.org/toianw
Ian
@toianw
Apr 19 2018 02:54
You could target it like this div#laye_front.ls-l but it ain't pretty
@123xylem
Claudio Restifo
@Marmiz
Apr 19 2018 02:56
!imporant !importanter !moreimporant !plswork My new proposal for CSS override
thedev-ninja
@thedev-ninja
Apr 19 2018 03:26
Hello all
Dhaval Vira
@dhavalveera
Apr 19 2018 03:27
Hello
thedev-ninja
@thedev-ninja
Apr 19 2018 03:27
Are there any experienced API developers out there? I am in desperate need of assistance in creating an API using GTFS-realtime data, have googled for months, and found zero resources on how to generate relevant data (Arrival Times for stop ID for example)
Claudio Restifo
@Marmiz
Apr 19 2018 03:31
@thedev-ninja Never used GTFS, but, isn't there an arrivalTime with an id associated?
or something along the line
thedev-ninja
@thedev-ninja
Apr 19 2018 03:35
I have no idea how to even access that data
I've only gotten to the point of creating a FeedMessage Object as shown here: https://developers.google.com/transit/gtfs-realtime/examples/php-sample
which returns an object like so:
image.png
I get the schema but no consumable data
thedev-ninja
@thedev-ninja
Apr 19 2018 03:48
GTFS has been around for years and there is no documentation whatsoever on how to use GTFS to build an API that can be used for webapps. Everything just points to setting up a OneBusAway server which is what Transit Authorities use to build an API that developers then use to create apps.
German Gamboa Gonzalez
@germangamboa95
Apr 19 2018 03:51
Created an app to help people decide what to have for lunch. It was my first time working in a team and not being the solo dev. Any feed back is appreciated https://germangamboa95.github.io/letsDoLunch.io/
thedev-ninja
@thedev-ninja
Apr 19 2018 03:51
Assuming I need to build the API myself, how do I even go about that from the point that I'm at? I feel stupid. Why would there be no documentation or tutorials or even stackoverflow posts asking these kinds of questions? I feel like I'm missing something
Brad
@bradtaniguchi
Apr 19 2018 03:57
@thedev-ninja If I know anything about google stuff, there are docs out there somewhere
thedev-ninja
@thedev-ninja
Apr 19 2018 03:58
I've been battle with GTFS and GTFS realtime for almost 2 years now and have gotten nowhere. And my Google-Fu is top notch
battling*
Brad
@bradtaniguchi
Apr 19 2018 03:59
Your looking for PHP tho right?
thedev-ninja
@thedev-ninja
Apr 19 2018 03:59
Exactly
there are examples and docs in python and node
which I can't install on my server
Ken Haduch
@khaduch
Apr 19 2018 04:00
@germangamboa95 - just gave the app a try - that's really quite a nice app! I just tried a local area and only was presented with two choices. After giving thumbs-down on both, I went to look at the current results and got a page with a broken image at the top and the word "undefined" in the body. Now I'll click "Go There!" and see what happens.
thedev-ninja
@thedev-ninja
Apr 19 2018 04:01
no php libraries available to do the work for me so I would have to write one from scratch from the protobuf data (shown in the screenshot I shared) and there's nothing out there to help lil old me
Ken Haduch
@khaduch
Apr 19 2018 04:01
just showed my current location, pretty much.
German Gamboa Gonzalez
@germangamboa95
Apr 19 2018 04:02
ah I think the fact that it is only pulling open locations might be an issue since it is late at night :/
Brad
@bradtaniguchi
Apr 19 2018 04:02
Yea, thats one of those things with PHP, its old so no one cares about it much
German Gamboa Gonzalez
@germangamboa95
Apr 19 2018 04:03
@khaduch Just checked the logs on the server there is not any places near you open according to google places :/
Ken Haduch
@khaduch
Apr 19 2018 04:04
@germangamboa95 - oh, does it have to be currently open, or just open (as in "still in business"?)
German Gamboa Gonzalez
@germangamboa95
Apr 19 2018 04:04
It has to be within the operating hours.
Ken Haduch
@khaduch
Apr 19 2018 04:04
oh, I just saw your comment... yeah, I live in the sticks, so probably nothing opened here. I'm trying a larger city nearby.
it found some places, and I selected one so it gave results.
German Gamboa Gonzalez
@germangamboa95
Apr 19 2018 04:05
Yay! Did it load the results page for you?
If only I could install python on my server
Ken Haduch
@khaduch
Apr 19 2018 04:06
It just doesn't like it when I give everything the thumbs down... And it seems that it should take me to the location that I entered instead of my home location? That would be nice, then I could look around.
Anyway, neat app!
thedev-ninja
@thedev-ninja
Apr 19 2018 04:06
I'd be sett
German Gamboa Gonzalez
@germangamboa95
Apr 19 2018 04:06
@khaduch Thanks for the feedback!:D I will work those kinks out.
CamperBot
@camperbot
Apr 19 2018 04:06
germangamboa95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3889 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Apr 19 2018 04:07
@germangamboa95 - yeah, looks like a nice app idea, and good implementation so far!
Brad
@bradtaniguchi
Apr 19 2018 04:10
I mean idk much about this stuff, but if you have an example in another language, you could use that as a template to for your own. But yea it seems like youd have to do it from the ground up. (Or get a new server)
thedev-ninja
@thedev-ninja
Apr 19 2018 04:20
I may need to talk to my host and see if he can get python set up on my server as a CGI script
otherwise that kind of endeavor would take me months
I hate GTFS
thedev-ninja
@thedev-ninja
Apr 19 2018 04:25
I think I'm gonna give up and just put http://subwaytime.mta.info/index.html#/app/home in an iframe and call it a day
I've spent dozens of hours researching and getting nowhere
I'm sure there'll be a CORS restriction but I have a hack for that ;)
thedev-ninja
@thedev-ninja
Apr 19 2018 04:54
I forgot that this is a non-interactive app so the above won't be useful :(
I will instead pull data from here: https://transitfeeds.com/p/mta/234/source
it's cheating, for sure, but I have a deadline to meet
and the work involved in setting up a server to convert and develop an API just for a dumb 3 line non-interactive widget is not in the budget - I ain't exactly gettin' paid overtime lol
I swear i saw this in JS before though some where on github
Lots of switches could be modified
UnorthodoxThing
@UnorthodoxThing
Apr 19 2018 05:43
I'm currently learning how to make a responsive web design. I was wondering if it is possible to make a desktop layout 'hover menu drop down' to a mobile layout 'select menu drop down'?
anthonygallina1
@anthonygallina1
Apr 19 2018 05:46
media querys Is one way Writing to the dom JS is another yes it is possible
shameem fairooz
@sfshameem5
Apr 19 2018 05:48
media queries would be the better way, unless you need to use JavaScript for later purposes.
UnorthodoxThing
@UnorthodoxThing
Apr 19 2018 05:49
How do you add JQuery as a breakpoint in your media query??
UnorthodoxThing
@UnorthodoxThing
Apr 19 2018 06:00
@anthonygallina1 thx that is indeed one way :)
CamperBot
@camperbot
Apr 19 2018 06:00
unorthodoxthing sends brownie points to @anthonygallina1 :sparkles: :thumbsup: :sparkles:
:star2: 5874 | @anthonygallina1 |http://www.freecodecamp.org/anthonygallina1
anthonygallina1
@anthonygallina1
Apr 19 2018 06:01
:) :thumbsup:
DMsalati
@DMsalati
Apr 19 2018 06:25
did they delete one of the freecodecamp communities?
Markus Kiili
@Masd925
Apr 19 2018 06:32
@DMsalati The main room was closed some time ago.
shameem fairooz
@sfshameem5
Apr 19 2018 07:15
Guys, I'm currently on the smallest common multiple problem in Intermediate Algorithmic Scripting Challenges.
Here's the link
Been struggling for two days. No idea on how to solve it.
Any suggestions ?
Markus Kiili
@Masd925
Apr 19 2018 07:19
@sfshameem5 First you need to get the smaller and larger of those numbers out. The smallest common multiple will necessarily be a multiple of the larger number, so you could make an infinite loop that generates candidate SCM numbers (multiples of the larger number). Then figure out how to test if the candidate number is a multiple of all the numbers in the range (a loop or iteration is needed). The first candidate number that passes is the SCM.
There are also more efficient ways, but that should be easy to implement.
Nazar
@IsaakNazar
Apr 19 2018 07:21
hey everybody, could you suggest what improvements shoud I do to this project, especially design, thx
Pomodoro Link
Marianissimus
@Marianissimus
Apr 19 2018 07:23
@IsaakNazar Soo niiiice:) Maybe a check input / confirm button on the settings? that will update the timer display on click
Nazar
@IsaakNazar
Apr 19 2018 07:25
@Marianissimus nice idea, appreciate thx
CamperBot
@camperbot
Apr 19 2018 07:25
isaaknazar sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @marianissimus |http://www.freecodecamp.org/marianissimus
Marianissimus
@Marianissimus
Apr 19 2018 07:27
You're welcome
Nazar
@IsaakNazar
Apr 19 2018 07:29
maybe I gotta move settings icon to the bottom? next to the buttons
Claudio Restifo
@Marmiz
Apr 19 2018 07:30

@IsaakNazar a couple of UX enhancement:
1: maybe a popup/over that explain what is/purpose of a pomodoro timer.
2: on the slider perhaps specify the measure unit: break lenght:1. One what?
I know what you talk about since I know how a pomodoro works, but don't give it for granted.
3: update the value as I slide.
4: update the clock as I close the setting modal, I'd either have to press start or reset to see it works. At a first use I thought the setting didn't work

:+1: nice job nonetheless!

蓝莓哒哒
@lanmeidada
Apr 19 2018 07:35
Hellow
Nazar
@IsaakNazar
Apr 19 2018 07:37
@Marmiz oh thanx man, I did'n even thought about these enhancements :+1:
CamperBot
@camperbot
Apr 19 2018 07:37
isaaknazar sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1211 | @marmiz |http://www.freecodecamp.org/marmiz
Ali Bulut
@ali27001
Apr 19 2018 07:40
    computed: {
        filteredCustomers() {
            if(!this.veriler) return [];
                          if(!this.search) return this.veriler;
            const nestedResults = this.veriler.map(data =>
                data.datalar.filter(item =>{
                    if(item.soru_alt_baslik.toLowerCase().includes(this.search.toLowerCase()) || item.soru_icerik.toLowerCase().includes(this.search.toLowerCase())){
                        return true;
                    }
                    return item.sorular.some(titleObject =>{
                        var flag = true;
                        this.search.toLowerCase().split(' ').some(function (dat) {
                            console.log(dat,titleObject.title.toLowerCase().includes(dat))
                            if(titleObject.title.toLowerCase().includes(dat) != true){
                                flag = false;
                            }
                        })
                        return flag;
                    })
                } )
                    .map(item => ({
                        title: item.soru_alt_baslik,
                        link: item.link,
                        parentLink: data.link,
                        search: true
                    }))

            /**/
            );

            return nestedResults.reduce((acc, item) => acc.concat(item), []);
        },
    }
How can I do. soru_alt_baslik, soru_icerik should slip ?
I have to do the similarity by looking at the sorular sample
coderNewby
@coderNewby
Apr 19 2018 08:02
@DarrenfJ thanks for the help once again...
CamperBot
@camperbot
Apr 19 2018 08:02
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2467 | @darrenfj |http://www.freecodecamp.org/darrenfj
Ali Bulut
@ali27001
Apr 19 2018 08:27
my question is difficult ?
Dhaval Vira
@dhavalveera
Apr 19 2018 08:27
ohh
Johnny
@JohnnyBizzel
Apr 19 2018 08:34
@ali27001 Your question is not clear
Ali Bulut
@ali27001
Apr 19 2018 08:39
I have a search form. I am searching here for sorular,soru_alt_baslik, soru_icerik fields.
depresyonx: [
    {
        title : '1.Giriş ',
        link: 'giris',
        datalar: [
            {
                sorular:[
                    {title:'Depresyon tedavisinin genel ilkeleri nelerdir? NICE bu konuda neler önerir?'},
                ],
                link: 'soru1',
                soru_alt_baslik:'Depresyon tedavisinin resmi rehberi ',
                soru_icerik:' depreyon vs vs ',
            },

        ]
    },
]
I would like to make search similar to split search for item.sorular
mustimuu
@mustimuu
Apr 19 2018 08:47
Hello guys
Markus Kiili
@Masd925
Apr 19 2018 08:47
@mustimuu Hi.
mustimuu
@mustimuu
Apr 19 2018 08:48
i want to learn how wordpress is build up, with PHP etc and work with PHP.
Any good tutorials out there?
Stephen James
@sjames1958gm
Apr 19 2018 09:09
@Donnie-D :+1:
kirbyedy
@kirbyedy
Apr 19 2018 09:57
@Donnie-D looks ok, but it missed my location by almost 100km :(
must be the api
Nitin
@thenm
Apr 19 2018 10:08

I am getting a response from api as following

[
  {TotalCount: 1, PickUpStatus: "Done", UserID: 100968},
  {TotalCount: 1, PickUpStatus: "Pending", UserID: 100968}
]

an array of objects is there any way this can be turned (without magic) into

{
 Done: 1,
Pending: 1
}
Stephen James
@sjames1958gm
Apr 19 2018 10:14
@thenm I would use reduce
data.reduce((a, c) => { return a[c.PickUpStatus] = c.TotalCount; }, {});
roxxlen
@roxxlen
Apr 19 2018 10:17
https://codepen.io/roxxlen/pen/pLXGgp
console says: the search parameter must be set
what's wrong with it ?
Nitin
@thenm
Apr 19 2018 10:19
@sjames1958gm thanks a lot
CamperBot
@camperbot
Apr 19 2018 10:19
thenm sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9212 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Markus Kiili
@Masd925
Apr 19 2018 10:23
@sjames1958gm I think that you need to return the accumulator for that to work.
Stephen James
@sjames1958gm
Apr 19 2018 10:25
@Masd925 yeah.
@thenm the code needs to return a after setting the value
@roxxlen you read the search value into variable q but you use keyWord in your URL
@thenm
data.reduce((a, c) => { a[c.PickUpStatus] = c.TotalCount; return a;}, {});
I think you can use the some of the newest features - spread operator and new property syntax @Masd925 ?
data.reduce((a, c) => ({ ...a, [c.PickUpStatus]: c.TotalCount}), {});
roxxlen
@roxxlen
Apr 19 2018 10:34
@sjames1958gm it's still empty
seems that q = $('#query').val()didn't work
Stephen James
@sjames1958gm
Apr 19 2018 10:35
@roxxlen Your input is inside a form so you have to stop the form from submitting
Markus Kiili
@Masd925
Apr 19 2018 10:37
@sjames1958gm Didn't know that spread on objects was included on ES2018. Cloning the object on each iteration doesn't sound so good. Looks nice.
Stephen James
@sjames1958gm
Apr 19 2018 10:39
@roxxlen For Wikipedia API you don't need jsonp - you can replace callback=? with origin=* and just use regular json
hensn5250
@hensn5250
Apr 19 2018 10:39
Would like some help making this fullscreen on mobile. It has a mixer of fixed and variable(%) CSS measurements. I am currently using media queries to try to make it fullscreen on the Nexus 6 and/or iPhone 5/6/7.
Stephen James
@sjames1958gm
Apr 19 2018 10:40
@Masd925 I have used object spread in react, so at least chrome supports it
hensn5250
@hensn5250
Apr 19 2018 10:41
Would like to know if there is a way to scale everything to fullscreen without having to change the fixed CSS measurements?
The media queries aren't in the code pen but they are being applied mainly to the 2 container classes and 2 skin classes
Spyrantis Theodoros
@thodorisanta
Apr 19 2018 10:49
Hey, just one question. Why does my two last divs have different height and how can i make them have the same?
https://codepen.io/oshikurou/pen/yjyaGL
roxxlen
@roxxlen
Apr 19 2018 10:50
@sjames1958gm it works.. but wondering how come this one runs with it ?
https://codepen.io/annamyself/pen/BKgKmV
on mine.. it throwed an error
@thodorisanta try to put these in a row div
hensn5250
@hensn5250
Apr 19 2018 10:56
@thodorisanta or you can set the parent element to display: flex
Marianissimus
@Marianissimus
Apr 19 2018 10:56
@thodorisanta a piece of advice: try to find newer resources to learn from; floats and clearfix are kind of obsolete. layouts have since been built with inline-divs, flex, or, lately css-grid
hensn5250
@hensn5250
Apr 19 2018 10:57
@Marianissimus ^ second that.
Spyrantis Theodoros
@thodorisanta
Apr 19 2018 10:57
@roxxlen flex worked thanks! but what do you mean by " try to put these in a row div" ?
CamperBot
@camperbot
Apr 19 2018 10:57
thodorisanta sends brownie points to @roxxlen :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @roxxlen |http://www.freecodecamp.org/roxxlen
Spyrantis Theodoros
@thodorisanta
Apr 19 2018 10:58
yeah im just following a tutorial about positioning and it has floats in it. Truth is i know more about flex-grid than i know about floats
by the way what do i have to know to "master" positioning in css?
hensn5250
@hensn5250
Apr 19 2018 11:00
Relative anchors the positioning of the element relative to itself
Absolute anchors the positioning of the element relative to it's closest parent
both use top and left to position the element.
Also with Absolute the element is float off the page, with relative it floats but keep its initial footprint
roxxlen
@roxxlen
Apr 19 2018 11:01
@thodorisanta just means put left half and right half in the same container ..
Spyrantis Theodoros
@thodorisanta
Apr 19 2018 11:03
@roxxlen okay im lost..what should i do again? :P
roxxlen
@roxxlen
Apr 19 2018 11:04
@thodorisanta you've already dealed with it.. no worry
Spyrantis Theodoros
@thodorisanta
Apr 19 2018 11:05
@roxxlen yeah but if there is another way to do it, it doesnt hurt to know it :)
LydaTech
@lydatech
Apr 19 2018 11:06
@thodorisanta @roxxlen was talking about bootstrap rows
@hensn5250 your explanation isnt quite right
Spyrantis Theodoros
@thodorisanta
Apr 19 2018 11:07
@lydatech oh okay. can you tell me though "what do i have to know to "master" positioning in css?"
LydaTech
@lydatech
Apr 19 2018 11:07
@thodorisanta An element with position: absolute; is positioned relative to the nearest positioned ancestor
hensn5250
@hensn5250
Apr 19 2018 11:08
@lydatech which part? wasn't aware he was using bootstrap
@lydatech Right. The ancestor also has to be positioned
@hensn5250 hes not using bootstrap. @roxxlen comment about putting the content into a "row" div was a reference to bootstrap grid type of layout
hensn5250
@hensn5250
Apr 19 2018 11:12
@lydatech ok, well don't want to add to the confusion so i'll just leave that convo
LydaTech
@lydatech
Apr 19 2018 11:13
@thodorisanta things to keep in mind when using positioning: The position is always relative to some starting point. With absolute positioning the element is removed from the normal document flow
hensn5250
@hensn5250
Apr 19 2018 11:15
@lydatech could you take a look at an app I posted up the page
I'm trying to set it to fullscreen on mobile with no luck
LydaTech
@lydatech
Apr 19 2018 11:15
@thodorisanta you can use top, right, bottom, and left to position an item
@hensn5250 yep one sec
@hensn5250 what exactly do you want to see it do?
hensn5250
@hensn5250
Apr 19 2018 11:20
basically make its height == to viewport height
so that when the keypad is open the calculator takes up the full display without having to use the scrollbar
LydaTech
@lydatech
Apr 19 2018 11:21
@hensn5250 what part. sorry. the calc_container?
hensn5250
@hensn5250
Apr 19 2018 11:23
the skin class and the key_skin class
skin contains the top portion and key_skin the keypad
I was wondering if there was a way to scale to fullscreen without having to adjust the fixed values via media queries. I'm assuming there isn't. I was thinking CSS variables maybe.
LydaTech
@lydatech
Apr 19 2018 11:28
first youre using min-width in your media query @hensn5250
should be max-width
@hensn5250 something like this https://codepen.io/lydatech/pen/XqJgNB
hensn5250
@hensn5250
Apr 19 2018 11:29
that's for something else, the gradient
@lydatech yes, like this
 @media screen and (max-width: 580px) {
   *{
  margin: 0;
  padding: 0;
}
  .skin {
    background: linear-gradient(90deg,#4f4f4f,#d2d2d2 0.2%, #555555 1.7%,#555555 98.3%, #9f9f9f,#5a5a5a 99.9%);
    min-height: 30vh;
  }
   .calc_container{
     min-height: 100vh;
   }
   .key_skin{
     min-height: 50vh;
   }
}
hensn5250
@hensn5250
Apr 19 2018 11:37
but more filled
funny thing is the similar code looks completely different in the browser's mobile layout tool on chrome
the app takes up only like 50% of the screen
LydaTech
@lydatech
Apr 19 2018 11:38
yep. Youll need to use media queries if youre resizing at different breakpoints. But "vh" is the property you want to be working with for full viewport. I use rems & vh,vw when im setting sizing
Stephen James
@sjames1958gm
Apr 19 2018 11:39
@roxxlen Hmm. Interesting
hensn5250
@hensn5250
Apr 19 2018 11:39
rems is font based ?
LydaTech
@lydatech
Apr 19 2018 11:42
yes and no lol
one sec
roxxlen
@roxxlen
Apr 19 2018 11:44
https://codepen.io/roxxlen/pen/pLXGgp
what happened with append method ? appended items not showing
LydaTech
@lydatech
Apr 19 2018 11:44
rems are based on the root font size. unlike ems
roxxlen
@roxxlen
Apr 19 2018 11:45
r refers to root
Jack Lyons
@JackEdwardLyons
Apr 19 2018 11:47
hey all hows it goin
anyone need any help?
hensn5250
@hensn5250
Apr 19 2018 11:48
@lydatech i see. will check the link out. Have you used the chrome mobile layout tool before?
thanks also.
it seems like it evaluates media queries differently. selecting a mobile device on there and then selecting the same device on firefox produces night and day results
Stephen James
@sjames1958gm
Apr 19 2018 11:49
@roxxlen You have a form, which means you have to prevent the form from submitting
Change your click event as follows
 $('#search').click(function(e){ 
     e.preventDefault();
LydaTech
@lydatech
Apr 19 2018 11:51
@hensn5250 no I havent sorry
hensn5250
@hensn5250
Apr 19 2018 11:52
@lydatech oh ok, thanks for the help.
CamperBot
@camperbot
Apr 19 2018 11:52
hensn5250 sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2777 | @lydatech |http://www.freecodecamp.org/lydatech
roxxlen
@roxxlen
Apr 19 2018 11:58
@sjames1958gm that means keep form stablized which it is the upper part of it and then update the lower part of webpage ?
Stephen James
@sjames1958gm
Apr 19 2018 12:08
@roxxlen When you have a form, if you don't block the default behavior it will refresh the page back to the original content
roxxlen
@roxxlen
Apr 19 2018 12:12
@sjames1958gm got it , thanks, added a parameter ,now it works
CamperBot
@camperbot
Apr 19 2018 12:12
roxxlen sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9213 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 19 2018 12:13
@roxxlen :+1: :checkered_flag:
Aiden
@AidenMead
Apr 19 2018 15:27
Folks, I'm working on my personal portfolio and I'm hitting a wall with something. I had a div which contains a p followed by an img. No matter how I arrange it, my image stays underneath my paragraph. I've tried floating, clearing, moving the image inside the p tag, outside the div tag. Nothing is working.
Anyone have a good resource to figure out what's going on and remedy this?
Dhaval Vira
@dhavalveera
Apr 19 2018 15:27
Wat u need exactly
Jesse
@ki4jgt
Apr 19 2018 15:29
@AidenMead I think I'd look at the dev tools of your browser (usually F12) and untick a few CSS options on the image to see how they're affecting it. If that doesn't work, refresh the page and try the p element.
Nate Mallison
@NJM8
Apr 19 2018 15:36
@AidenMead you could make the div a flexbox
Aiden
@AidenMead
Apr 19 2018 15:37
I was thinking about using CSS grid for the whole site, too.
I always forget about the option in Chrome to alter CSS in the dev tools, thank you @ki4jgt . I'll keep it in mind for the future, but for this instance, it didn't lead me too a solution, lol XD
CamperBot
@camperbot
Apr 19 2018 15:40
aidenmead sends brownie points to @ki4jgt :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @ki4jgt |http://www.freecodecamp.org/ki4jgt
Nate Mallison
@NJM8
Apr 19 2018 15:44
css grid is probably better overall, I use flexbox and always struggle, grid seems to be much easier
Aiden
@AidenMead
Apr 19 2018 15:46
I've used flexbox in the past, but normally just on a single element, like centering text on a background image or something
But I can see how that would work on this as well, it makes a lot of sense.
Nate Mallison
@NJM8
Apr 19 2018 15:47
you'll still have to add width to the div to get any space between the elements, or padding/margin on the elements
Nicolas Ramirez
@kamatheuska
Apr 19 2018 16:05
hey, has someone here worked with the twitch.tv API? I am trying to figure out where should I put my client ID on this request (I already have an ID, here are the docs): https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user
I will use axios to make the request, and I should do a GET request to this URL https://api.twitch.tv/kraken/streams/<channel ID>
Kingsley
@Kingwindie
Apr 19 2018 16:07
var img = new Image();

var images = [
  (img.src = "yoga-2.jpeg"),
  (img.src = "yoga-1.jpeg"),
  (img.src = "pic.jpeg"),
  (img.src = "mount.jpeg")
];
for (var i = 0; i < images.length; i++) {
  document.body.append("<img src =" + images[i]);
}
how can i make this code sisplay images instead of strings?
Nate Mallison
@NJM8
Apr 19 2018 16:12
@kamatheuska Usually just tack them on the end with &api_key= or something like that
I'm not sure I used the windbow api from FCC so I didn't expose any API keys
@Kingwindie Try something more like this
const images = ["yoga-2.jpeg","yoga-1.jpeg", "pic.jpeg", "mount.jpeg"];
//inside for loop
let thisImg = document.createElement('img');
thisImg.src = images[i];
document.body.appendChild(thisImg);
Nicolas Ramirez
@kamatheuska
Apr 19 2018 16:17
@NJM8 Already got some help in another chat, I am gonna try that! Thanks anyway!
Nate Mallison
@NJM8
Apr 19 2018 16:18
:+1:
Kingsley
@Kingwindie
Apr 19 2018 16:20
@NJM8 thanks,you're a life saver
CamperBot
@camperbot
Apr 19 2018 16:20
kingwindie sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 418 | @njm8 |http://www.freecodecamp.org/njm8
Kamal
@kpbro
Apr 19 2018 17:03
i am creating my portfolio page and i am stuck
a small white section appears on right side of navigation bar
what can i do for this
Jesse
@ki4jgt
Apr 19 2018 17:06
@kpbro It's not appearing in my browser but it is appearing in the small embedded window in this site. I've resized the browser and everything and can't see it.
Victor De Los Santos
@rdelosh
Apr 19 2018 17:07
.part-one{
margin:0;
}
Kamal
@kpbro
Apr 19 2018 17:07
idk why..
Victor De Los Santos
@rdelosh
Apr 19 2018 17:07
@kpbro
Kamal
@kpbro
Apr 19 2018 17:07
lemme try
yeah man. how you got this ?
thanks btw
Victor De Los Santos
@rdelosh
Apr 19 2018 17:08
easy peasy
Kamal
@kpbro
Apr 19 2018 17:08
how you got that exactly this is the problem ?
Jesse
@ki4jgt
Apr 19 2018 17:09
I think my browser is wonky. That just broke the page for me. :D.
Kamal
@kpbro
Apr 19 2018 17:09
@ki4jgt :smile:
@rdelosh thanks
CamperBot
@camperbot
Apr 19 2018 17:09
kpbro sends brownie points to @rdelosh :sparkles: :thumbsup: :sparkles:
:cookie: 99 | @rdelosh |http://www.freecodecamp.org/rdelosh
Victor De Los Santos
@rdelosh
Apr 19 2018 17:09
whenever u get a design issue, just inspect the lement
element*
in the browser
Alvin
@AlvinW89
Apr 19 2018 17:15
I see in a URL index.do, what does the .do stand for?
Gulsvi
@gulsvi
Apr 19 2018 17:26
@AlvinW89 .do stands for "doing something". Some Java Web Applications use that extension.
Alvin
@AlvinW89
Apr 19 2018 17:29
@gulsvi thanks
CamperBot
@camperbot
Apr 19 2018 17:29
alvinw89 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2705 | @gulsvi |http://www.freecodecamp.org/gulsvi
Michael Grienauer
@mgrienauer
Apr 19 2018 18:42
hey guys, when i wrap an img in anchor tags in css grid it expands to spil out of my container, any ideas why?
<div class="project">
  <img src="assets/local_weather_screenshot.png">
</div>
the css:
.portfolio{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 15vh;
  grid-auto-rows: auto;
  grid-gap: 10px;
  justify-items: center;
  align-items: center;
  padding: 20px;
  max-width: 1024px;
}

.portfolio > .project{
  grid-column: 1fr;
  box-shadow: 0 0 7px  rgba(0,0,0,.7);
  background-color: #B3E5FC;
}

.project > img{
  max-width: 100%;
  object-fit: cover;
}
when i try to wrap my img in <a> tags it spills out
Tom
@moT01
Apr 19 2018 18:45
@mgrienauer wondering if its not finding the max-width after you do that
.project > a > img
maybe something like that
Michael Grienauer
@mgrienauer
Apr 19 2018 18:47
its still spilling out
shouldnt it just be setting it to the max width of the column?
Tom
@moT01
Apr 19 2018 18:49
it should set max width of its parent
so maybe the <a> is spilling out and the img goes with it
i dont suppose you have a demo i can look at
Michael Grienauer
@mgrienauer
Apr 19 2018 18:51
even if i add a { max-width: 100% }
before, it doesnt change
1 sec
Tom
@moT01
Apr 19 2018 18:57
seems to be not targeting the img properly or something
works when I add img { max-width: 100% }
Michael Grienauer
@mgrienauer
Apr 19 2018 18:58
@moT01 thanks, i changed that and it seems to work now
CamperBot
@camperbot
Apr 19 2018 18:58
mgrienauer sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1035 | @mot01 |http://www.freecodecamp.org/mot01
Michael Grienauer
@mgrienauer
Apr 19 2018 18:59
only thing is that it isnt taking the max height, even when i set max-height to 100%
i can still see the background at the bottom
any ideas?
Tom
@moT01
Apr 19 2018 19:04
where
Michael Grienauer
@mgrienauer
Apr 19 2018 19:07
sorry, on my actual portfolio page
im using local assets for the images, is it maybe the aspect ratio?
shouldnt they just stretch accordingly?
even if i change the object-fit properties around they stay the same height
Tiago Correia
@tiagocorreiaalmeida
Apr 19 2018 19:51
you need to force a height in this case @mgrienauer
by that I mean define an height
nm remove this line
/* height: 100%; */
from the img
tag
image.png
Tom
@moT01
Apr 19 2018 20:00
img { 
display: block; }
Alexandro Pequeno
@Argestis
Apr 19 2018 20:05
hi guys nayone good with jquery? especially ajax? (:
Daniel
@DanJP2016
Apr 19 2018 20:20
i'm working on the simon game project and I noticed a delay when playing the sound for the red square with the audio files provided in the instructions. just wondering if anybody else had this problem or if its something with my code? here is a link to the project
https://codepen.io/bones211/pen/LdmyrW?editors=0010
Tom
@moT01
Apr 19 2018 20:34
@DanJP2016 i had a problem like that on a different project
i fixed it by creating the audio at the time i wanted it to play
TonyRednil
@TonyRednil
Apr 19 2018 20:55
In JavaScript is there something that will tell the computer whether a character in a string is alphanumeric or am I going to have to define that myself somehow?
DarkxPunk
@DarkxPunk
Apr 19 2018 20:59
I have a live site and have been informed of a proble that only seems to happen on an iPad. Here is the site: http://www.raznorenovation.ca
Apparently on iPads the main image is super blown up and zoomed in. However it looks normal on the computer, even in responsive mode. Thoughts?
hello look at css and tell me if it is correct way to stick your nav on top like this?
shameem fairooz
@sfshameem5
Apr 19 2018 21:10
Guys, I'm stuck in the Smallest Common Multiple Challenge.
Here's my current code.
function smallestCommons(arr) {
    // get highest, lowest and all values of array. 
    var highest, lowest; 
    if (arr[0] > arr[1]) {
        highest = arr[0];
        lowest = arr[1];
    }else {
        highest = arr[1];
        lowest = arr[0];
    }        

    arr = [];

    for (var i = lowest; i <= highest; i++) {
        arr.push(i);
    }


    // go on multiplying the largest number. 
    // iterate to see if all values of arr % the multipler equal to 0, if it is then 
    // that's the lcm . 

    var multiply = highest;
    var counter = 0;
    var lcm = 0;

    while (true) {

        multiply += highest

        for (var i = 0; i < arr.length; i++) {
            if (multiply % arr[i] === 0) {
                counter++; 
                lcm = multiply;
            }else {
                counter = 0;
                lcm = 0;
            }
        }

        if (counter === arr.length) {
            console.log(counter);
            break;
        }




        if (multiply >= 200) {
            break;
        }

    }    



}

smallestCommons([1, 5]);
Any suggesstions ?
@Masd925 I implemented you advice and came with the following solution.
function smallestCommons(arr) {
    // get highest, lowest and all values of array. 
    var highest, lowest; 
    if (arr[0] > arr[1]) {
        highest = arr[0];
        lowest = arr[1];
    }else {
        highest = arr[1];
        lowest = arr[0];
    }        

    arr = [];

    for (var i = lowest; i <= highest; i++) {
        arr.push(i);
    }


    // go on multiplying the largest number. 
    // iterate to see if all values of arr % the multipler equal to 0, if it is then 
    // that's the lcm . 

    var multiply = highest;
    var counter = 0;
    var lcm = 0;

    while (true) {

        multiply += highest

        for (var i = 0; i < arr.length; i++) {
            if (multiply % arr[i] === 0) {
                counter++; 
                lcm = multiply;
            }else {
                counter = 0;
                lcm = 0;
            }
        }

        if (counter === arr.length) {
            console.log(counter);
            break;
        }




        if (multiply >= 200) {
            break;
        }

    }    



}

smallestCommons([1, 5]);
@Masd925 I'm still stuck.
Daniel
@DanJP2016
Apr 19 2018 21:16
@moT01 thanks, i'll give that a try.
CamperBot
@camperbot
Apr 19 2018 21:16
danjp2016 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1037 | @mot01 |http://www.freecodecamp.org/mot01
shameem fairooz
@sfshameem5
Apr 19 2018 21:17
@DarkxPunk Did you try giving a maximum width to image using media queries ?
shameem fairooz
@sfshameem5
Apr 19 2018 21:22
@Masd925 I finally solved. Here's the code.
function smallestCommons(arr) {
    // get highest, lowest and all values of array. 
    var highest, lowest; 
    if (arr[0] > arr[1]) {
        highest = arr[0];
        lowest = arr[1];
    }else {
        highest = arr[1];
        lowest = arr[0];
    }        

    arr = [];

    for (var i = lowest; i <= highest; i++) {
        arr.push(i);
    }


    // go on multiplying the largest number. 
    // iterate to see if all values of arr % the multipler equal to 0, if it is then 
    // that's the lcm . 

    var multiply = highest;
    var counter = 0;
    var lcm = 0;

    while (true) {

        multiply += highest

        counter = 0;

        for (var i = 0; i < arr.length; i++) {
            if (multiply % arr[i] === 0) {
                counter++; 
                lcm = multiply;
            }
        }

        if (counter === arr.length) {
            console.log(lcm);
            return lcm;
        }
    }    
}

smallestCommons([23, 18]);
@Masd925 Thank You
CamperBot
@camperbot
Apr 19 2018 21:23
sfshameem5 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4785 | @masd925 |http://www.freecodecamp.org/masd925
DarkxPunk
@DarkxPunk
Apr 19 2018 21:23
Well it is a background image. Is the tag extending super wide and I am missing it?
shameem fairooz
@sfshameem5
Apr 19 2018 21:23
@DarkxPunk Can you share a screenshot ?
@DarkxPunk You could give a max width
so that at that specific size the image doesn't exceed.
tamn1988
@tamn1988
Apr 19 2018 21:34
Hi, I'm hoping someone can enlighten me on this subject
Say I have multiple modals. That will be hidden and displayed on clicked
Would it be more efficient to manipulate the dom and inject the modal content
or just having multiple hidden modals
and toggling classes to display them
Brad
@bradtaniguchi
Apr 19 2018 21:36
@tamn1988 Idk how many modals you will have, but it sounds like you would want to inject them dynamically, rather than having them all exist at once. Taking the dynamic approach would make it far more scalable in the future.
tamn1988
@tamn1988
Apr 19 2018 21:36
Its around 4-6
@bradtaniguchi thank you
CamperBot
@camperbot
Apr 19 2018 21:36
tamn1988 sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 466 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
tamn1988
@tamn1988
Apr 19 2018 21:37
@bradtaniguchi what about load time?
I'd imagine it would be slower if modals have to download a medium size image dynamically
shameem fairooz
@sfshameem5
Apr 19 2018 21:39
@Masd925 I"m in the next challenge Finders Keepers. https://www.freecodecamp.org/challenges/finders-keepers
@Masd925 The code works on client side, but does not pass the FCC test.
// first loop through the array and see whether the condition passes
//  if it does, then return the array item .

function findElement(arr, func) {
    for (var i = 0; i < arr.length; i++) {
        if (func(arr[i]) === true) {
            console.log(arr[i]);
            return arr[i];
        }else {
            console.log(undefined);
            return undefined;
        }
    }
}

findElement([1, 2, 3, 4], function(num) {
    return num % 2 === 0;
});
@Masd925 Any suggestions?
Brad
@bradtaniguchi
Apr 19 2018 21:40
@tamn1988 Yea, but it depends if you want to load the image initally regardless of if they want to actually see it , or later when they want to see it.
@sfshameem5 Interesting as to why it works locally, but not on FCC
tamn1988
@tamn1988
Apr 19 2018 21:43
@bradtaniguchi ah yes thats a good point!
Brad
@bradtaniguchi
Apr 19 2018 21:43
Wait, do the test for the array [1, 3, 5, 9] locally
@sfshameem5
Since your function is the second test case, but your input is different
most importantly, your if/else breaks after the first iteration, which is incorrect
Stephen James
@sjames1958gm
Apr 19 2018 22:06
@sfshameem5 if you have if return and else return inside a loop the code doesn't get past first iteration of the loop