@newtothat I find CSS to be difficult. I ended up buying a course on Udemy that is only CSS
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?
@sjames1958gm and now? you dont find it hard anymore?
@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
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
do people use flexbox or grids in nowodays websites
i think these are latest hot topic for laying out
@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.
@Feldbot is it your thing ? https://www.behance.net
@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.
Once you get a grasp of how the box model works , CSS specificity and positioning you can improve your designs by 10x
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
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
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?
does
node -v return any thing and wich OS please.
also are you in the correct directory. if it isnt a global install?
@iAmNawa Hey thanks Paul, I reinstalled a new create-react-app in my directory with the new node_modules folder and it worked
keggatron sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 598 | @iamnawa |http://www.freecodecamp.org/iamnawa
not sure what was wrong with the other CRA directory but my application is working now
If you want to build check out the O'Reily Books
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
@123xylem You're writing this rule in the
enfold.css file, right? I see left: 6px rather than margin-left: 6px
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
@123xylem Ok, the problem is that rule is being overridden by a similar rule in the
custom.css file (line 556)
@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!
@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)
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)
@123xylem That other rules also has
!important
@toianw Yes... I need a !superIMtportant!
@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.
@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
@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...
123xylem sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 517 | @toianw |http://www.freecodecamp.org/toianw
You could target it like this
div#laye_front.ls-l but it ain't pretty
@123xylem
!imporant !importanter !moreimporant !plswork My new proposal for CSS override
Hello all
Hello
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)
@thedev-ninja Never used GTFS, but, isn't there an
arrivalTime with an id associated?
or something along the line
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:
I get the schema but no consumable data
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.
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/
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
@thedev-ninja If I know anything about google stuff, there are docs out there somewhere
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*
Your looking for PHP tho right?
Exactly
there are examples and docs in python and node
which I can't install on my server
@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.
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
just showed my current location, pretty much.
ah I think the fact that it is only pulling open locations might be an issue since it is late at night :/
Yea, thats one of those things with PHP, its old so no one cares about it much
@khaduch Just checked the logs on the server there is not any places near you open according to google places :/
@germangamboa95 - oh, does it have to be currently open, or just open (as in "still in business"?)
It has to be within the operating hours.
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.
Yay! Did it load the results page for you?
If only I could install python on my server
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!
Anyway, neat app!
I'd be sett
@khaduch Thanks for the feedback!:D I will work those kinks out.
germangamboa95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3889 | @khaduch |http://www.freecodecamp.org/khaduch
@germangamboa95 - yeah, looks like a nice app idea, and good implementation so far!
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)
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
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 ;)
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 tried to look Not python sry https://github.com/google/gtfs-realtime-bindings/blob/master/nodejs/gtfs-realtime.js
I swear i saw this in JS before though some where on github
Lots of switches could be modified
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'?
media querys Is one way Writing to the dom JS is another yes it is possible
media queries would be the better way, unless you need to use JavaScript for later purposes.
How do you add JQuery as a breakpoint in your media query??
@anthonygallina1 thx that is indeed one way :)
unorthodoxthing sends brownie points to @anthonygallina1 :sparkles: :thumbsup: :sparkles:
:star2: 5874 | @anthonygallina1 |http://www.freecodecamp.org/anthonygallina1
:) :thumbsup:
did they delete one of the freecodecamp communities?
@DMsalati The main room was closed some time ago.
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 ?
@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.
hey everybody, could you suggest what improvements shoud I do to this project, especially design, thx
Pomodoro Link
Pomodoro Link
@IsaakNazar Soo niiiice:) Maybe a check input / confirm button on the settings? that will update the timer display on click
@Marianissimus nice idea, appreciate thx
isaaknazar sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @marianissimus |http://www.freecodecamp.org/marianissimus
You're welcome
maybe I gotta move settings icon to the bottom? next to the buttons
@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!
Hellow
@Marmiz oh thanx man, I did'n even thought about these enhancements :+1:
isaaknazar sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1211 | @marmiz |http://www.freecodecamp.org/marmiz
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
@DarrenfJ thanks for the help once again...
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2467 | @darrenfj |http://www.freecodecamp.org/darrenfj
my question is difficult ?
ohh
@ali27001 Your question is not clear
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
Hello guys
@mustimuu Hi.
i want to learn how wordpress is build up, with PHP etc and work with PHP.
Any good tutorials out there?
@mustimuu Good you tube channels for web dev
https://www.youtube.com/user/TechGuyWeb/playlists
https://www.youtube.com/watch?v=ftPB4qEKlvo&list=PLC5E59DD6D84D34DC
https://www.youtube.com/user/TechGuyWeb/playlists
https://www.youtube.com/watch?v=ftPB4qEKlvo&list=PLC5E59DD6D84D34DC
is it okay?
https://codepen.io/Donnie-D/full/YaydRM/
https://codepen.io/Donnie-D/full/YaydRM/
@Donnie-D :+1:
@Donnie-D looks ok, but it missed my location by almost 100km :(
must be the api
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
}
@thenm I would use reduce
data.reduce((a, c) => { return a[c.PickUpStatus] = c.TotalCount; }, {});
https://codepen.io/roxxlen/pen/pLXGgp
console says: the search parameter must be set
what's wrong with it ?
console says: the search parameter must be set
what's wrong with it ?
@sjames1958gm thanks a lot
thenm sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9212 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@sjames1958gm I think that you need to return the accumulator for that to work.
@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}), {});
@sjames1958gm it's still empty
seems that
seems that
q = $('#query').val()didn't work
@roxxlen Your input is inside a form so you have to stop the form from submitting
@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.
@roxxlen For Wikipedia API you don't need jsonp - you can replace callback=? with origin=* and just use regular json
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.
@Masd925 I have used object spread in react, so at least chrome supports it
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
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
https://codepen.io/oshikurou/pen/yjyaGL
@sjames1958gm it works.. but wondering how come this one runs with it ?
https://codepen.io/annamyself/pen/BKgKmV
https://codepen.io/annamyself/pen/BKgKmV
on mine.. it throwed an error
@thodorisanta try to put these in a row div
@thodorisanta or you can set the parent element to display: flex
@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
@Marianissimus ^ second that.
@roxxlen flex worked thanks! but what do you mean by " try to put these in a row div" ?
thodorisanta sends brownie points to @roxxlen :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @roxxlen |http://www.freecodecamp.org/roxxlen
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?
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
Also with Absolute the element is float off the page, with relative it floats but keep its initial footprint
@thodorisanta just means put left half and right half in the same container ..
@roxxlen okay im lost..what should i do again? :P
@thodorisanta you've already dealed with it.. no worry
@roxxlen yeah but if there is another way to do it, it doesnt hurt to know it :)
@thodorisanta @roxxlen was talking about bootstrap rows
@hensn5250 your explanation isnt quite right
@lydatech oh okay. can you tell me though "what do i have to know to "master" positioning in css?"
@thodorisanta An element with position: absolute; is positioned relative to the nearest positioned ancestor
@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
@lydatech ok, well don't want to add to the confusion so i'll just leave that convo
@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
@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
@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?
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
@hensn5250 what part. sorry. the calc_container?
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.
first youre using min-width in your media query @hensn5250
should be max-width
@hensn5250 something like this https://codepen.io/lydatech/pen/XqJgNB
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;
}
}
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
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
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
@roxxlen Hmm. Interesting
rems is font based ?
yes and no lol
one sec
https://codepen.io/roxxlen/pen/pLXGgp
what happened with append method ? appended items not showing
what happened with append method ? appended items not showing
rems are based on the root font size. unlike ems
r refers to root
hey all hows it goin
anyone need any help?
@lydatech i see. will check the link out. Have you used the chrome mobile layout tool before?
thanks also.
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
@roxxlen You have a form, which means you have to prevent the form from submitting
Change your click event as follows
Change your click event as follows
$('#search').click(function(e){
e.preventDefault();
@hensn5250 no I havent sorry
@lydatech oh ok, thanks for the help.
hensn5250 sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2777 | @lydatech |http://www.freecodecamp.org/lydatech
@sjames1958gm that means keep form stablized which it is the upper part of it and then update the lower part of webpage ?
@roxxlen When you have a form, if you don't block the default behavior it will refresh the page back to the original content
@sjames1958gm got it , thanks, added a parameter ,now it works
roxxlen sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9213 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@roxxlen :+1: :checkered_flag:
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?
Wat u need exactly
@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.
@AidenMead you could make the div a flexbox
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
aidenmead sends brownie points to @ki4jgt :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @ki4jgt |http://www.freecodecamp.org/ki4jgt
css grid is probably better overall, I use flexbox and always struggle, grid seems to be much easier
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.
you'll still have to add width to the div to get any space between the elements, or padding/margin on the elements
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>
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?
@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);
@NJM8 Already got some help in another chat, I am gonna try that! Thanks anyway!
:+1:
@NJM8 thanks,you're a life saver
kingwindie sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 418 | @njm8 |http://www.freecodecamp.org/njm8
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
@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.
.part-one{
margin:0;
}
margin:0;
}
idk why..
@kpbro
lemme try
yeah man. how you got this ?
thanks btw
easy peasy
how you got that exactly this is the problem ?
I think my browser is wonky. That just broke the page for me. :D.
@ki4jgt :smile:
@rdelosh thanks
kpbro sends brownie points to @rdelosh :sparkles: :thumbsup: :sparkles:
:cookie: 99 | @rdelosh |http://www.freecodecamp.org/rdelosh
whenever u get a design issue, just inspect the lement
element*
in the browser
I see in a URL index.do, what does the .do stand for?
@AlvinW89
.do stands for "doing something". Some Java Web Applications use that extension.
@gulsvi thanks
alvinw89 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2705 | @gulsvi |http://www.freecodecamp.org/gulsvi
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
@mgrienauer wondering if its not finding the max-width after you do that
.project > a > img
maybe something like that
its still spilling out
shouldnt it just be setting it to the max width of the column?
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
even if i add
a { max-width: 100% }
before, it doesnt change
1 sec
seems to be not targeting the
img properly or something
works when I add
img { max-width: 100% }
@moT01 thanks, i changed that and it seems to work now
mgrienauer sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1035 | @mot01 |http://www.freecodecamp.org/mot01
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?
where
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
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
img {
display: block; }
hi guys nayone good with jquery? especially ajax? (:
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
https://codepen.io/bones211/pen/LdmyrW?editors=0010
@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
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?
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?
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.
@moT01 thanks, i'll give that a try.
danjp2016 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1037 | @mot01 |http://www.freecodecamp.org/mot01
@DarkxPunk Did you try giving a maximum width to image using media queries ?
@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
sfshameem5 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4785 | @masd925 |http://www.freecodecamp.org/masd925
Well it is a background image. Is the tag extending super wide and I am missing it?
@DarkxPunk Can you share a screenshot ?
@DarkxPunk You could give a max width
so that at that specific size the image doesn't exceed.
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
@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.
Its around 4-6
@bradtaniguchi thank you
tamn1988 sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 466 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
@bradtaniguchi what about load time?
I'd imagine it would be slower if modals have to download a medium size image dynamically
@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?
@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
@bradtaniguchi ah yes thats a good point!
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
@sfshameem5 if you have if return and else return inside a loop the code doesn't get past first iteration of the loop