Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Stephen James
@sjames1958gm
@shubham1604 API challenges are like learning to swim by jumping in the deep end
hensn5250
@hensn5250
Well for the quote machine you can also use another pen as your Psedo server and keep the JSON data( your quotes) in it and then make the AJAX requests within the codepen site
that way you accomplish the task of making AJAX request but not have no worry about API keys and CORS issues
Shubham Sharma
@shubham1604
I think I am gonna create a much simpler version of random quote api for new folks so they dont get stuck just like i did.
hensn5250
@hensn5250
the QuotesOnDesign api is pretty simple
Shubham Sharma
@shubham1604
That's a great idea @hensn5250
hensn5250
@hensn5250
its just on url in your code
the rest is making the request
which i posted above
its just 1 url*
Shubham Sharma
@shubham1604
The url is same as given on their site ?
that's it
//for making AJAX request
let requestObj = new Request(PUT_URL_HERE, {
method: "GET",
headers: headersObj,
mode: "cors",
origin: "https://codepen.io/USER-NAME/pen/PAGE-NAME"
});
Shubham Sharma
@shubham1604
Well, thats the same as given on their site
Great
hensn5250
@hensn5250
but you have to edit the url to your desired needs
Shubham Sharma
@shubham1604
Okay
Thanks for helping me mate
hensn5250
@hensn5250
no prob
Shubham Sharma
@shubham1604
I owe you one 😉
hensn5250
@hensn5250
almost forgot. in case you run into issues with codepen
ismail
@ismail2009
hi everyone
I want some help in css
hensn5250
@hensn5250
sure
whats the problem
Quantomistro3178
@Quantomistro3178
var b = /[A-Z]/;
Is this the correct RegExp for all captial alphabets?
capital*
hensn5250
@hensn5250
yes
Quantomistro3178
@Quantomistro3178
@hensn5250 thnx
CamperBot
@camperbot
:cookie: 282 | @hensn5250 |http://www.freecodecamp.org/hensn5250
quantomistro3178 sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
imemoje
@imemoje
hello

can someone help me with one line of css in this example

<!DOCTYPE html>

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}

.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}

.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}

.icon-bar a:hover {
background-color: #000;
}

.active {
background-color: #4CAF50 !important;
}
</style>
<body>

<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>

</body>
</html>

i do not understand how overflow in this example works? if i remove that line it wont work, when i add that line it is all ok?

imemoje
@imemoje

final product is horizontal menu and I understand everything except

overflow: auto;

why without that line wont work?

anyone?
Aditya
@ezioda004
@imemoje Because the height of the <div> containing all of the icons is 0, so even though the icons are still there due to lack of background color and no overflow, they don't appear. overflow: auto in this case is making their heights equal and giving the icons appropriate background color from the div and they become visible again.
imemoje
@imemoje
@ezioda004 I do not understand how overflow make their heights equal and appropriate color? i have problems with concept of overflow. I taught that overflow is for something else?
0nly169
@0nly169

Hi guys having issues with media queries not working i want to give a <p> a margin of 3% on larger screen sizes .... tried everything been stuck for 4/5 days :( @media all and (min-width: 800px) {

.paragraph3 {
margin-top: 8%;

}

}

Dan Lafferty
@DanLaff
@0nly169 That CSS gives a top margin of 8% on screens wider than 800px. Perhaps you have a typo in your HTML? Share your full project.
Ken Haduch
@khaduch
@0nly169 - did you fix your problem? That does work to add a margin-top on paragraphs with the class <p class="paragraph3">some content</p> when the screen width is greater than 800px. The value that you have in there is 8% but you can adjust that. Just make sure that you put the class that you've created on the paragraphs. If you just want it to apply to all paragraphs, then instead of using a CSS selector of .paragraph3, just use p.
imemoje
@imemoje
@khaduch can you help me
Ken Haduch
@khaduch
@imemoje - what are you trying to do? Is it the question of the overflow? Or something else?
imemoje
@imemoje
yes
overflow
example above
imemoje
@imemoje
i do not understand how overflow works in this example and why it show elements when is set to auto? i tought that overflow is for something else.
Ken Haduch
@khaduch
@imemoje The coloring of the first icon is accomplished by the .active CSS selector and the fact that the CSS class is assigned to the "home" element. So that is how the background-color is set.