Anyone working on some interesting design projects ideas they are having trouble with?
@Dimitrios51 Yes width height should do the job, but only when the images we are using don't have empty space between the actual content of image and the edges of that image.
hey folks
Hello how are you all
i am going to start study as a front end developer please some study materials.
@Refath :wave:
Hello
why I can't resize the PNG File in Navbar ?
@umerhayat2013_twitter - welcome - have you started the freeCodeCamp program? It's a good way to start learning, there are links along the way to various topics, exercises and challenges that help you to use and learn the information. And the chat rooms for help if you have questions. Are you looking for something more than that? There are so many resources out there that it would be hard to pick a starting place.
@dhavalveera - could you be more specific? Do you have a project URL that you could share and ask specific questions?
@khaduch <nav class="navbar navbar-expand-md bg-dark navbar-dark">
<img class="navbar-brand" src="Long Drive.JPG"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Tourist Place.html">Tourist Place</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="Accomodation.html">Accomodation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Transport</a>
</li>
</ul>
</nav>
<img class="navbar-brand" src="Long Drive.JPG"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Tourist Place.html">Tourist Place</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="Accomodation.html">Accomodation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Transport</a>
</li>
</ul>
</nav>
this is the Coding
in second line you may see that <img cl
@khaduch Sir can we chat in Private ?
@dhavalveera - so how are you trying to resize it? It can be a little tricky to override bootstrap classes there are some complicated selector strings that you have to find (I usually use the devtools and examine the element I want to alter) and find the selector that is controlling the CSS properties. Then duplicate that selector and add your properties that you want to change. Not sure if I'm on the right track to try and help you?
I'd rather try to help you here, because I'm about to go offline for the night and it would be better if others who might stop in and be able to help would see the progress of the discussion.
@dhavalveera you can set min & max heights for the navbar-brand img and specify specific heights for responsiveness in media queries. if you make a codepen with your issue and post a link it will be easier to explain
Hey all. Working on the quote generator project. Does anyone have a quotes api they'd recommend?
@dhavalveera Also you can box in more readable formated code if you type ``` (tildas) and hit enter before pasting, ctrl+enter to send
hi ppl
i want some help
Hi! purpose in the code below is to change the background image depending upon the weather condition returned from the api server. Issue is that the switch statement is not executing the conditions correctly and goes to default case. Could somebody see to this please?
https://codepen.io/Donnie-D/pen/YaydRM
https://codepen.io/Donnie-D/pen/YaydRM
@Donnie-D Your cases should be strings
case 'Clear' instead of case Clear.
@toianw you are a gem :+1:
@markclynch Isnt that -> ~ a tilda? and ` an accent?
https://unicode-table.com/en/007E/
https://unicode-table.com/en/0060/
https://unicode-table.com/en/007E/
https://unicode-table.com/en/0060/
how do I add specific files from a folder to my repository
i've changed my directory to where the correct folder
once in the folder i enter
git add *
and when i push to the remote, it adds even folders that wasn't in the directory i was in
the directory i'm in is js30/adam/02
but it'll add stuff from js30
does that make sense?
but it'll add stuff from js30
does that make sense?
function confirmEnding(str, target) {
if (str.substr(-(target.length))=== target){
return true;
}else{
return false;
}
}
confirmEnding("Bastian", "n");
Can you tell me if its clean or not ?
@Peioa You could just return the condition. So that if structure is redundant.
Then it becomes clean.
So just
function confirmEnding(str, target) {
return str.substr(-target.length)===target;
}
would do it.
@Masd925 Thanks for your answer
peioa sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4748 | @masd925 |http://www.freecodecamp.org/masd925
Hi guys, just a newbie question; I'm trying to use atom to solve the freecodecamp Javascript exercices but can't seem to find the way. How do you use javascript on atom ? How can I find the console ?
@Peioa In the future, a better place for working code is https://gitter.im/FreeCodeCamp/CodeReview Here it might spoil someone's work.
Thanks for the advice @Masd925
peioa sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
@Peioa do you want to use the command line or run it as a project?
@h1tag I would like to run it as a project so I could do My exercices on it
@Peioa then you'll have to create a .html file (add some basic html code to that file (html, head, body)), then create a .js file, then link that file in your html file, then add your javascript code to the js file (you'll have to use
console.log to show the results in your browser console or use some other way (like updating your html with the results)). Finally, open the html file in your browser.
@DarrenfJ thanks
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2442 | @darrenfj |http://www.freecodecamp.org/darrenfj
hello everyone!! i am working on freecodecamp front end project and i want put no. in block and text in normal font....how can i do this "1914-some text" and i want both of this to be in the same line
wrap that no.in a span or something and do styles on that
@gulsvi , thanks a bunch for the suggestions. Those were some good simplified codes. Will update them on the server soon. Thanks again.
zappy555 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2693 | @gulsvi |http://www.freecodecamp.org/gulsvi
@umerhayat2013_twitter You may need to look at this GitHub repo for some guide. It contains some useful free materials for both front and back end though. Cheers!
helo every1
@harshrana212_twitter Hi.
Hello everybody
Can someone help me out?
I have got a child-theme where i want to add my own style.css file
There is allready one style.css, but i want my own
in wordpress
well place your css file below their own css stuff
and it will get overwrite
Hi everyone, I have an admittedly broad question about error handling that I’ve been unsure about for a while. Would appreciate some advice from seasoned programmers about best practices https://softwareengineering.stackexchange.com/questions/368539/what-is-the-standard-method-of-handling-errors-in-a-nodejs-web-app
@phao5814 other than sending some message to the frontend I store the system error's on a log file
interesting…so I guess in my case since I have my web app hosted on heroku, I would simply just write to standard error and standard out (as specified here https://devcenter.heroku.com/articles/logging) and just review the log file every now and then to see if everything is running smoothly?
in this case you could even create a file like server.log
but I guess also the heroku logs would work
but if was there any internal error from heroku the logs would get a bit big I guess so makes more sense to have your own file
@tiagocorreiaalmeida understood, will have a look into setting up logging :)
i need this to fill up the entire half of the page
and also the text to move to the middle of it
@Frosty427 pen?
@Frosty427 middle horizontally? or vertically? I use flexbox for most of my positioning needs these days
@sjames1958gm i doubt he'll take the time to learn flexbox, so just
align: center i guess
but not vertically
@Frosty427 please explain what u want clearly
@Frosty427 In order to fill the page vertically, you will need to make sure the containing elements are also using that space
@Frosty427 ur gonna have to learn flexbox
@Frosty427 Should just take a few minutes to do this one http://flexboxfroggy.com/ you'll know how to do that then
@Frosty427 If you don't make your body height more, you can't make the contents height larger.
You need justify-content to adjust along the main axis of the flex (which is by default row or horizontal)
align-items is along the other axis, here up and down, but your element size is only one row so it doesn't adjust
You need justify-content to adjust along the main axis of the flex (which is by default row or horizontal)
align-items is along the other axis, here up and down, but your element size is only one row so it doesn't adjust
@sjames1958gm wdym by if i dont make my body height more?
I don't think he knows flexbox... @sjames1958gm
like height 100%
im closer to what i want
@Frosty427
height: 100vh; width: 100vh;
@MuhammedKarim that ruins my 50% of width
@Frosty427 add
display:flex;
this is on the container right?
remove max width
add
width: 50vw; height: 100vh
@Frosty427
this part made no sense to me
Where can i get some wordpress back-end help ??
https://codepen.io/TravisTtk/pen/bvWwBp
hey guys, could someone show me how I could make the grey horizontal bg color with "experience" and the text fill 100% width?
hey guys, could someone show me how I could make the grey horizontal bg color with "experience" and the text fill 100% width?
@TravisTtk you currently have it as part of the table with the text, just make it it's own element and style with width: 100vw
Can anyone help me with my wikipedia viewer? I have an odd bug where sometimes after the iframes load the page layout gets all screwed up. I'm not really sure what is happening, it only occurs on some searched but is repeatable. Try searching for "whale songs". https://www.natethedev.com/FreeCodeCampFrontEndProjects/wikipediaViewer/
@NJM8 it isn't part of the table. it's a class in the div that the table is in.
@NJM8 or am i getting it wrong?
@Frosty427 for height I think you have to make your body height 100% as well
@sjames1958gm thanks for the suggestion but i already figured it out
frosty427 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9145 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@Frosty427 :+1:
@NJM8 Weird, the wonkyness fixes itself when you select the third tab
@sjames1958gm Yeah and it is only on some searches, I'm thinking it has something to do with the iframe content. I noticed that the third frame that is pushed over is scrolled down to the bottom
@TravisTtk Yes your class is providing styling but the HTML defines the basic structure. If you want experience to be full width, then text full width below it, you could make it a flex column and that would do it, but the HTML layout wouldn't make sense, so rather than force the layout to do what you want, just make the layout you want. consider the following:
@NJM8 I went into devtools and clicked on and off of the absolute position setting and it adjusted correctly.
@TravisTtk
<div class="full-width-row">
<div>experience</div><!-- I'll be half width -->
<div>text</div>
</div>
<div class="full-width-row">
<div>experience</div> <!-- I'll be full width -->
</div>
<div class="full-width-row">
<div>text</div>
</div>
@sjames1958gm on TabContent?
Hmm, a lot of my styling is dependent on that. I'll have to think about that. Without it the tabcontents aren't in the same line
so you get this:
so I guess if I could get them to be inline in a different way then it would work
guys lets say I have a list that I can add items to through javascript. Each list item has a class of either high, medium or low. How can I make it so that the list sorts itself from high to low?
@sh4r10 - do you want to sort it afterward, or sort as you are adding the elements? Is there a secondary key, or just sort by high, medium and low?
I would like to do both @khaduch
but right now I think I can settle for afterwards
I just want ideas on how I can achieve this
@sh4r10 - are these objects that you are putting in the list? If you can figure out how to write a sort function to compare them, you can just use the
sort function in javascript. You might also make your own object that would store the elements in separate lists, and then when you wanted the whole list you could just concatenate them - for another idea.
@sh4r10 What you want is often called in CS "PriorityQueue".
It's a pretty common data structure, it's a great asset to know how to implement one.
You can go for a very simple one to a more advance one, like the one Google uses.
You can look at how they implemented it since it's OS:
https://google.github.io/closure-library/api/goog.structs.PriorityQueue.html
It's a pretty common data structure, it's a great asset to know how to implement one.
You can go for a very simple one to a more advance one, like the one Google uses.
You can look at how they implemented it since it's OS:
https://google.github.io/closure-library/api/goog.structs.PriorityQueue.html
thanks a lot @khaduch @Marmiz
sh4r10 sends brownie points to @khaduch and @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1196 | @marmiz |http://www.freecodecamp.org/marmiz
:star2: 3831 | @khaduch |http://www.freecodecamp.org/khaduch
@NJM8 - that is strange. If you just go to the wikipedia site and put in "The Whalesong", it redirects to that page that is causing the problem and scrolls to the bottom, but I see that it has an internal link to
#Publications that makes it scroll to the bottom of the page that it redirects to. Interesting!
@khaduch I think you are onto something there! It must have something to do with how to page was created, how can you tell that #publications makes it scroll to the bottom? Other than the fact that it does.
I think iframes can prevent certain actions inside them, I'll take a look at that
@NJM8 - I wonder if it has to do with the scrolling or the redirection, or both? Or neither? Maybe something else on the page...
@khaduch Thanks! I got it
njm8 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3832 | @khaduch |http://www.freecodecamp.org/khaduch
adding the sandbox attribute prevents the iframe from doing, anything really
I just pushed my changes to the repo, refresh and try the search again, layout good and the page is not scrolled
:fire: :smile:
@NJM8 - nice! That's a great implementation of the wikipedia viewer! I was going to ask if it was possible to put the URL on the page, then I noticed the button in the bottom right corner to actually go to the page. Very nice!
Thanks. :smile: I try to push it a bit past what FCC asks for, to learn more
I don't really like the colors, not my specialty, but they are ok
url = "https://google.com/search?query="+query;
window.open(url)
window.close();
here is a working example
type something and it will work
and then CTRL+SHIFT+T
Try again and it will open a tab with google.com
anyone?
@sh4r10
it opens the query in a new tab but also replaces the current tab with google.com
it did this in the first time for me
yeah any idea how to fix it
can you check if it is fixed @h1tag
@sh4r10 still the same
so it still opens a new google.com window @h1tag
yes, and redirects the original page to google
yeah thats what I am trying to achieve
does it open any extra tabs
yes
what
the google search for the text you entered
that is what I am trying to do
anything except that
no, as I told you, it only redirects the original page to google.com, and opens a new tab for the google search for the word the user entered
ahhh ok
thanks dude
/dudette
you'r welcome
@sh4r10 do you know why it redirects the original page to google?
no
thats what I am trying to fix @h1tag
it should either redirect to google with the query text or close
but I can't seem to achieve either
@sh4r10 it doesn't redirect here, right?
@sh4r10 - I haven't quite figured out what is going on, but I see that you are using a form. The default action of a form (you probably already know this, so maybe I'm just unnecessarily thinking out loud) is to submit the action and that might be opening a new tab? Could it be that you want to use
.preventDefault() and control the search action from your own page? I guess I'm not 100% sure how it should be working.
guys u know about firebase @sh4r10 @h1tag
@khaduch
@1532j0004kg - I don't know about firebase
@khaduch ohh ok
me neither
i heard from lot of people that the firebase is useful
anybody have interest in learning firebase ?
if u have , shall we study in pair ?
how do i make these stack on top of each other rather than do this?
use block elements or put them in block elements
maybe
Hi,
- I am trying to create a simple directive
- It should allow numbers only in the text box.
- wrote code but not sure what logic should I put inside the code for directive
- can you guys tell me how to fix it.
- providing the code below.
https://stackblitz.com/edit/angular-okulty?file=app/fontcolor.directive.ts
isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
@rajkumart08_twitter - I'm not familiar with angular (it looks like that is what you are using?) Can you use regular expressions to validate the input?
Any wordpress experts in here ???
@mustimuu - just so you know I'm not ignoring your question, I'm not a wordpress expert. Maybe I qualify as a newbie, maybe not even that. And otherwise it seems to be pretty quiet here. But you can post your question if you'd like, perhaps someone will happen to come by and see it?
@khaduch thank you very much. I will do that
mustimuu sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3834 | @khaduch |http://www.freecodecamp.org/khaduch
Finished my Frecodecamp Camper Leaderboard React : https://codepen.io/BlessedCamper/full/QmQowy/
@GilTorch Good job.
Although the header is a bit large, reducing the number of rows visible without scrolling.
Also, I don't see where you indicate which list is being looked at recent or all time. I guess you can tell from the numbers
Also, normal people (not programmers) wouldn't start a list and zero :)
Although the header is a bit large, reducing the number of rows visible without scrolling.
Also, I don't see where you indicate which list is being looked at recent or all time. I guess you can tell from the numbers
Also, normal people (not programmers) wouldn't start a list and zero :)
You're the head of the list though :smile: . Congrats
Thank You @sjames1958gm . I'm going to do this
giltorch sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9146 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
guys
yup
lets say I am making a todo list application and I want a way to store the information so that it is accessible to the user no matter which device they use so some kind of authentication system but i don't want to use php and sql database
i was trying firebase, i have managed to get user authentication but I have no idea how I can store data for a specific user
anyone
????????
Hey, all. Working on my portfolio, and wondering if anyone could recommend a method to insert an autoplaying video/gif as a banner? For instance, some Facebook pages like this Boise State page (https://www.facebook.com/BoiseStateLive/) has a video that autoplays at the top of the profile. Would like something like that on my profile.
@kevinwr How about just using the html5 video element?
Really sucks because last year I was nearly done with the Front End portion of the curriculum (a couple projects from getting my FE cert), but deleted my account. Now I have to start all over. Wish I wouldn't have done that.
@Masd925 That's a possibility. Wasn't sure if that would be the correct route. I guess I'm more concerned with size of the video so it doesn't take 20 years to load
How can I find out what element is causing double window scroll on my site?
@sh4r10 Hello, using firebase you would want to authenticate the user, when they are authenticated you would want to store their auth information within the firestore database. This way you can save other information about the user.
@NJM8 thank you. will try it out
travisttk sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @njm8 |http://www.freecodecamp.org/njm8
Hello there, I have two different media queries for different screen sizes, I have a problem with the "small version" which would be used for mobile and tabled devices.. https://codepen.io/dimitris51/pen/GxOVbX
Can somebody help?
Dont use max and min width. Only min. (just a tip). So you have always a base for mobile
And dont use position absolute ^_^
I removed all media queries and posistion absolutes and it worked like a charm
hey everyone, i have a question for the experienced folks in here, i have been working on websites for a little bit more than 1 and half a year now, i have been working with, html,css,javascript,jquery a little bit react, php ,databases , wordpress and i have created 1 website for a small company with wordpress and 1 with plain html,css,javascript and javascript frameworks for another company, im not sure how to continue right now, where to focus most ? and i want to have my skills evaluated by someone to see if i actually do know these things or i have to revise some of my knowledge
any good place you know to find a mentor or something like that?
tnx in advance for anyone answering
@SakisBal Find a meetup near you, perhaps on meetup.com
tnx mat
folks
is anyone here?
@Refath Hey :wave:
hey guys, I am trying to make my h2 tag closer to the travis barker profile pic i cant seem to reduce the h2 and the p tags closer to travis barkers round image
here is the codepen link
I want to reduce black space between image and text
@zootechdrum Weird there is space at the top of figcaption that I cannot figure out where it is coming from
@zootechdrum its like the space there is where the image is taking up space, but you have moved it up
@zootechdrum Try setting the margin-bottom of the image to -100px
@zootechdrum
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
So, what's happening here is that the image with the .faceprofile class is taking up that space because it is set to position: relative. The quick fix is to do what @sjames1958gm recommends.
You could also make
figcaption have a relative position and change the .faceprofile to absolute position instead of adjusting the bottom margin
.profile1 figcaption {
position: relative;
}
.profile1 .faceProfile {
position: absolute;
border-radius: 50%;
max-width: 90px;
opacity: 1;
bottom: 100px;
left: 25px;
}