These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Dec 2016
miriam-z
@miriam-z
Dec 15 2016 00:09
@teachtyler I have tried the code in your code pen and my dividers are rendering as short dividers and not full length as they are in the code?
@TylerMoeller I have tried the code in your code pen and my dividers are rendering as short dividers and not full length as they are in the code?
Mark
@vinarius
Dec 15 2016 00:23
hey guys, how would i appropriately target an id element using jquery?
$("'#" + streamers[i] + "'").removeClass("active");
Michael Karpinski
@karpimpski
Dec 15 2016 00:24
@vinarius that's the correct way to target an id element
if streamers[i] is a string, the last set of quotes SHOULDN'T be necessary, but may be with jQuery
FonkyShizuma
@FonkyShizuma
Dec 15 2016 00:27
Malala Yousafzai Tribute Page: https://codepen.io/Shizuma/details/gLQwdO
sparklie3
@sparklie3
Dec 15 2016 00:53
general question
i'm writing a ajax call inside a function
but ajax calls are suppose async
so when i make the call to the function in another function, i have to wait for the response
before I can do anything
for example, my code
```
function ajax(){
$.ajax ({
//does a ajax call

});
}

function  second(){
  ajax();
  //does something more, but want to wait for ajax call

}
i don't think i'm doing this right because now, my second function has to wait for the ajax call to complete before I can do anything
how should i approach this problem?
Michael Karpinski
@karpimpski
Dec 15 2016 01:00
@sparklie3 use Ajax's built in method success
it will run whatever code is in the success function after you get the response from the server
$.ajax ({
//does a ajax call
    url: 'www.example/com',
    success: function(data){
        //will execute code in here after data is received
    }
});
Tyler Moeller
@TylerMoeller
Dec 15 2016 01:18
@miriam-z Not sure how to help without seeing your code :/
@karpimpski @sparklie3 The new way of doing it though is with jQuery's newer deferred callbacks rather than using success. http://stackoverflow.com/a/14754681/5253639
var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second complete" );
});
Michael Karpinski
@karpimpski
Dec 15 2016 01:23
@TylerMoeller yep, should've mentioned that. sorry, I tend to shy away from jQuery and prefer vanilla JS. thanks for the correction!
CamperBot
@camperbot
Dec 15 2016 01:23
karpimpski sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1156 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 15 2016 01:24
The success callback still works great for that purpose - still a good suggestion!
William Cross
@williamtech814
Dec 15 2016 01:39

I'm attempting to make a collapsible navbar for the portfolio project. Not sure what I'm doing wrong, my navbar won't collapse: <!-- nav bar -->

<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Portfolio Site</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
</div>

<div class="collapse navbar-collapse navigation">
<ul class="nav navbar-nav navbar-right" >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

miriam-z
@miriam-z
Dec 15 2016 01:55
@TylerMoeller this is a code pen http://codepen.io/miriam-z/pen/WoYojX
Tyler Moeller
@TylerMoeller
Dec 15 2016 01:58
@williamtech814 Your navbar collapses fine for me - do you have bootstrap added to your project along with jQuery and bootstrap.min.js?
blob
@miriam-z I don't see where you have added a left-border to your navbar link items in that codepen
It also appears you are using bootstrap 4, which isn't ready for production yet. The example I showed you earlier was using Bootstrap 3.7
William Cross
@williamtech814
Dec 15 2016 02:04
I don't think I imported the jQuery
miriam-z
@miriam-z
Dec 15 2016 02:04
I am aware that it is not ready for production its just that the syntax is much more simplified in bootstrap 4
and the features are better :)
I might try to use bootstrap 3 to see if I am producing a similar result
miriam-z
@miriam-z
Dec 15 2016 02:13
@TylerMoeller is it still possible to achieve this using images as such in the nabber?
navbar?
Tyler Moeller
@TylerMoeller
Dec 15 2016 02:15
@miriam-z Yes, it should still be possible using images as your links instead of text
miriam-z
@miriam-z
Dec 15 2016 02:18
thanks
thanks @TylerMoeller
CamperBot
@camperbot
Dec 15 2016 02:18
:star2: 1157 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
miriam-z sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Igor Amidzic
@igoramidzic
Dec 15 2016 02:36
Can I have some critiques so far? Thanks
http://www.codewithigor.com/
Michael Karpinski
@karpimpski
Dec 15 2016 02:38
@amidzicigor it seems like you're just barely started, but so far it seems good. it has a nice design. I'd be careful about being too vanilla, though. it just seems like you used a bunch of Bootstrap classes so far and haven't done much custom styling, which looks nice but may not be what a recruiter is looking for
Igor Amidzic
@igoramidzic
Dec 15 2016 02:39
@karpimpski Yeah I just started learning bootstrap today so not really sure how to customize just yet. Thanks for the tip :)
Michael Karpinski
@karpimpski
Dec 15 2016 02:39
I just completed this vanilla JS clock! you can click it to go from analog to digital and the other way around! I'd really appreciate some help with the digital clock design, I don't like it much. please let me know what you think :)
https://preview.c9users.io/karpimpski/javascript-30/Mike30/02_clock/index.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io
CamperBot
@camperbot
Dec 15 2016 02:39
amidzicigor sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:cookie: 404 | @karpimpski |http://www.freecodecamp.com/karpimpski
Michael Karpinski
@karpimpski
Dec 15 2016 02:40
@amidzicigor no problem! definitely check out flex-box for responsiveness. it's much better and, in my opinion, much easier than Bootstrap
Igor Amidzic
@igoramidzic
Dec 15 2016 02:40
@karpimpski Will do man
Michael Karpinski
@karpimpski
Dec 15 2016 02:44
@amidzicigor are you experienced in back-end development? I noticed that you're using server code in your repo
Dylan-Clelland
@Dylan-Clelland
Dec 15 2016 02:49
Can someone help me, if I put anymore of the 300x300 panels it messes them all up, can someone help please? http://codepen.io/DylanClelland/pen/ENOaGp
Igor Amidzic
@igoramidzic
Dec 15 2016 02:49
@karpimpski I'm familiar with nodejs, yes. Not experienced
Dylan-Clelland
@Dylan-Clelland
Dec 15 2016 02:52
And I can't get the top one to fall in place like the others, it's a bit off and too close to the second one, when you look at it in mobile view.
Igor Amidzic
@igoramidzic
Dec 15 2016 02:54
@Dylan-Clelland can you update your codepen with the problem?
Dylan-Clelland
@Dylan-Clelland
Dec 15 2016 03:31
What do you mean? @amidzicigor \
vengal
@vengal4327
Dec 15 2016 03:44
Can some one help me with this: http://codepen.io/vengal-learn/pen/QGJdze
Is it possible to make header content to display in one single row at any point of time with reduced screen size and instead get a scroll bar when screen size is reduced.
Tom
@moT01
Dec 15 2016 03:49
@vengal4327 look into @media
or css media queries
vengal
@vengal4327
Dec 15 2016 03:52
@moT01 I will check that. Thanks!
CamperBot
@camperbot
Dec 15 2016 03:52
vengal4327 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @mot01 |http://www.freecodecamp.com/mot01
Sundeep
@pidugusundeep
Dec 15 2016 04:04
hey can someone help me with the sticky footer
Dylan-Clelland
@Dylan-Clelland
Dec 15 2016 04:14
Can you guys give me some feedback on this? http://codepen.io/DylanClelland/pen/ENOaGp
Dylan-Clelland
@Dylan-Clelland
Dec 15 2016 04:30
How do I make it so when you click on one of the links it takes you somewhere on the page?
Like when you click "Contact" it takes you to the bottom of the page to the Contact Section
Anthony Contreras
@AmazeCPK
Dec 15 2016 05:00
Man, I absolutely SUCK at front end web dev. I can't seem to do anything without a lot of time googling, and then breaking other code i previously did
Nathanael-M
@Nathanael-M
Dec 15 2016 05:19
@Dylan-Clelland, you use ID's on classes. Then you target those ID's with hashes in hrefs!
@Dylan-Clelland
<a href="#slide-1"></a>

<div id="slide-1"></div>
Anthony Contreras
@AmazeCPK
Dec 15 2016 05:26
Can someone please help me acieve this effect? http://prntscr.com/djm895
I don't even know what to google at this point -__-
Nathanael-M
@Nathanael-M
Dec 15 2016 05:28
@AmazeCPK You mean just having text and an image beside eachother?
Orrr...something more specific? Not 100% sure what you mean!
Anthony Contreras
@AmazeCPK
Dec 15 2016 05:29
simply yes,
Sorin Ruse
@sorinr
Dec 15 2016 05:29
@AmazeCPK you can use flexbox in css with space around. here something to look at:flexbox
Anthony Contreras
@AmazeCPK
Dec 15 2016 05:29
but also I would like it centered vertically on the page
alrighty, watching it now now
Nathanael-M
@Nathanael-M
Dec 15 2016 05:30
@AmazeCPK Flexbox isn't my first recommendation because it isn't well supported by IE, but there are other ways.
Anthony Contreras
@AmazeCPK
Dec 15 2016 05:31
damn that backwards browser!
Nathanael-M
@Nathanael-M
Dec 15 2016 05:31
Look at positioning elements. Just start with the basics :) In this case, floats.
<body>
     <div class="row">

         <div class="text">
               <p>YaddaYadda</p>
         </div>

         <div class="image">
         </div>
     </div>
</body>
Anthony Contreras
@AmazeCPK
Dec 15 2016 05:34
alright, will look at floats first. and while I have you guys here.. I am also always having this problem. (one sec)
For some reason elements are going behind the navabr
Nathanael-M
@Nathanael-M
Dec 15 2016 05:38
body {
   background-image: url(whatever);
   background-size: cover;
}

.row{
   position: relative;
   width: 80%;
   height: 400px;
   margin: 0, auto;
   margin-top: 100px;
}

.text{
   position: relative;
   height: 100%;
   width: 45%;
   float: left;
   margin-right: 10%;
}

.image {
   background-image: url (askldlaksd);
   background-size: cover;

   position: relative;
   height: 100%;
   width: 45%;
   float: left;
}
@AmazeCPK Something like that off the top of my head maybe.
@AmazeCPK Unless you're using bootstrap in which case it's way easier. Just look into their grid system more.
Anthony Contreras
@AmazeCPK
Dec 15 2016 05:43
@Nathanael-M works better than what I had before for sure, just need to align it horizontally center
Sorin Ruse
@sorinr
Dec 15 2016 05:43
margin: 0 auto;
Nathanael-M
@Nathanael-M
Dec 15 2016 05:44
@AmazeCPK as for you navbar, you've got A LOT going on there. I'd recommend starting with a really simple navbar that you understand all about. Quick fix? Make a container class and give it a margin-top of the height of your navbar. Put all your content inside of that.
Change body to display: block; , position: relative; If margin: 0, auto; still doesn't work, just put a left and right margin of 10% on .row.
I gotta head to bed, but definitely read more about positioning!
Goodluck!
Anthony Contreras
@AmazeCPK
Dec 15 2016 05:52
thank you @Nathanael-M ! you've helped a lot!
CamperBot
@camperbot
Dec 15 2016 05:52
amazecpk sends brownie points to @nathanael-m :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @nathanael-m |http://www.freecodecamp.com/nathanael-m
Cruise
@cruiset
Dec 15 2016 05:58
hey guys how to move an image up, towards the top of the page?
Jonathan Marx Domah
@marxcom
Dec 15 2016 05:59
need help with code pen
can someone give me walkthrough? please
Sorin Ruse
@sorinr
Dec 15 2016 06:15
@cruiset you can use a negative margin like: margin-top: -100px;
Cruise
@cruiset
Dec 15 2016 06:28
@sorinr will that move the image?
Sorin Ruse
@sorinr
Dec 15 2016 06:29
@cruiset if you apply it to the container holding the img. yes
Jonathan Marx Domah
@marxcom
Dec 15 2016 07:00
how to access libraries for front end apps
Sorin Ruse
@sorinr
Dec 15 2016 07:06
@marxcom what libs?
Jonathan Marx Domah
@marxcom
Dec 15 2016 07:31
@sorinr I need help building personal profile
Sorin Ruse
@sorinr
Dec 15 2016 07:31
@marxcom whats the problem?
Jonathan Marx Domah
@marxcom
Dec 15 2016 07:32
don't know how begin
Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.
Sorin Ruse
@sorinr
Dec 15 2016 07:35
it tells you that you are free to use whatever you want in terms of html/css/js
Jonathan Marx Domah
@marxcom
Dec 15 2016 07:35
it seem kind of hard given the fact i just started for a week now
i have covered most of the requirements for this project
i just saw the example codes
in codepen
a mixture of html/css/js makes up this page
HAMS
@309382570
Dec 15 2016 07:38
Any one know how to build the navigation bar in Build a Personal Portfolio Webpage...It's so hard XD..
Blessed
@nullx5
Dec 15 2016 07:42
Hello, I share what I take from the Build to Tribute Page in codepen. Build to Tribute Page
Sorin Ruse
@sorinr
Dec 15 2016 07:43
@marxcom the html part is the structure of the page, the css part is how would you like the structure to look on the browser and js is the interactivity of the user with the structure of the page
Blessed
@nullx5
Dec 15 2016 07:43
:smile:
Sorin Ruse
@sorinr
Dec 15 2016 07:44
@309382570 if you are going to use bootstrap i would just go and copy paste their example from the docs and delete whatever i don't in my nav bar
@nullx5 :+1:
HAMS
@309382570
Dec 15 2016 07:48
@sorinr i change the height of the nav bar and the max-width of the container , it turn out that the layout will be a mess when i resize the window..
Sorin Ruse
@sorinr
Dec 15 2016 07:48
@nullx5 i would only change h1 text-size for smaller screens. 50px its too much
Blessed
@nullx5
Dec 15 2016 07:49
:smile:
HAMS
@309382570
Dec 15 2016 07:50
i want to know is everyone here accomplished the Personal Portfolio Webpage or just skip and come back after like me?
jacobus-brogly
@jacobus-brogly
Dec 15 2016 07:50
@moT01 well if someone has an accident and they need to call in donors they can see who lives nearest and has the correct blood type
Adi2Point0
@Adi2Point0
Dec 15 2016 07:51
@309382570 : You will find that as you complete projects you'd want to come back and update your portfolio.. you know.. to show off! ;)
HAMS
@309382570
Dec 15 2016 07:52
@Adi2Point0 ok i got it
Sorin Ruse
@sorinr
Dec 15 2016 07:52
@309382570 why do you wanted to change the main behavior(styling) of the navbar?
HAMS
@309382570
Dec 15 2016 07:55
@sorinr the button style, animation and the layout when user resize the window
Yerrapotu Manojkiran
@nani554
Dec 15 2016 07:55
guys iam doing a pomodore clock timer
where can i get it
i need female timer audio files
Sorin Ruse
@sorinr
Dec 15 2016 07:58
@309382570 then just use media queries along with js code to trigger how your element should behave on smaller screens
@309382570 btw. i've been to shenzhen. nice city
HAMS
@309382570
Dec 15 2016 08:02
@sorinr it's very kind of you..learn it but i need more to finish this project so i gonna to skip this
Sorin Ruse
@sorinr
Dec 15 2016 08:02
@309382570 can u post the link to ur pen?
Jonathan Marx Domah
@marxcom
Dec 15 2016 08:03
can someone share there pen profile please
Silvietta
@Ayvlis
Dec 15 2016 10:17
Sorin Ruse
@sorinr
Dec 15 2016 10:26
@Ayvlis bello
@Ayvlis i've seen u have used materialized.css framework. i would just look further into the nav. its not responsive on smaller screens
Silvietta
@Ayvlis
Dec 15 2016 10:36
@sorinr I wanted the menu items to always be visible then I change the navbar, but I will have a deeper look into it to resolve the responsiveness problem, thank you!
CamperBot
@camperbot
Dec 15 2016 10:36
ayvlis sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 949 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 15 2016 10:39
@Ayvlis si. but in that case i would try to make the nav on mobile look like: brand-logo centered and below the other links
Silvietta
@Ayvlis
Dec 15 2016 10:41
@sorinr I will think about it and make some searches
Sorin Ruse
@sorinr
Dec 15 2016 10:43
@Ayvlis now when you shrink the width you r loosing the logo
Silvietta
@Ayvlis
Dec 15 2016 10:46
@sorinr I saw it, I thought it was not that important (just my name in the end), but now I rethink about it, it was just a stupid idea :laughing:
Sorin Ruse
@sorinr
Dec 15 2016 10:47
@Ayvlis your logo(name) e importante
Silvietta
@Ayvlis
Dec 15 2016 10:48
@sorinr you are right, i told you it was un'idea stupida ;)
Sorin Ruse
@sorinr
Dec 15 2016 10:51
@Ayvlis you can also use this <div class="col s12 m6 tesla"> on your portfolio
@Ayvlis it will make full column width on mobile
@Ayvlis ofc you have to apply sm12 class to each columns in portfolio
abdelaziz Galal mahfouz
@abdelazizMahfouz
Dec 15 2016 10:58
any help about portfolio project i don't know where to start?
kirbyedy
@kirbyedy
Dec 15 2016 11:02
@abdelazizMahfouz look around on the internet for examples and inspiration
abdelaziz Galal mahfouz
@abdelazizMahfouz
Dec 15 2016 11:06
asmaa
@asmaaamer
Dec 15 2016 11:29
hello .if i want to change the social icons with another when click or hover .how can make it this is my code
Sanne
@Cassanne
Dec 15 2016 11:32
Hi! I have this div inside a section and I need it to be at the bottom of the section. So I used: - align-items: flex-end; - on it, but it has no effect. Any ideas why, or what else I can try?
asmaa
@asmaaamer
Dec 15 2016 11:33
it good in my browser how can change image
Sanne
@Cassanne
Dec 15 2016 11:38
@abdelazizMahfouz Just start by building that specifications the challenges gives,even if it's ugly. Then keep making it nicer whenever you read a useful thing. Here is a link to my own half-baked work in progress: http://codepen.io/Cassanne/pen/VmYWYR
abdelaziz Galal mahfouz
@abdelazizMahfouz
Dec 15 2016 11:42
@Cassanne i feel like my brain is stuck , all examples online contain javascript but i need simple one with html and css only, as you said i'll try a simple design even if it's ugly :smile:
nabinsademba
@nabinsademba
Dec 15 2016 11:52
pelase mention the problem you all are facing clearly
asmaa
@asmaaamer
Dec 15 2016 11:59
Hi ,i want to change my social icon image to another when hover .how can make it?
@nabins13
Francois van Leersum
@Blockshot12
Dec 15 2016 12:03
@asmaaamer Which font lib are you using?
kirbyedy
@kirbyedy
Dec 15 2016 12:04
@Blockshot12 is that you on the codepen who started following me ?
Francois van Leersum
@Blockshot12
Dec 15 2016 12:05
@kirbyedy yep!
kirbyedy
@kirbyedy
Dec 15 2016 12:05
ah ok, cause I was wondering :D
nabinsademba
@nabinsademba
Dec 15 2016 12:10
@asmaa where is your code
or problem
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 12:11
Hello, need help!
???
Adi2Point0
@Adi2Point0
Dec 15 2016 12:13
@apoorv-mishra Post your question away!
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 12:13
Alright
I am working with porfolio challenge
nabinsademba
@nabinsademba
Dec 15 2016 12:14
its vey easy @apoorv-mishra
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 12:14
I need the color of my menu items to be changed as I hover over them
heroiczero
@heroiczero
Dec 15 2016 12:15
@apoorv-mishra cant you use http://www.w3schools.com/cssref/sel_hover.asp
nabinsademba
@nabinsademba
Dec 15 2016 12:16
yes aporva look in w3schools for this problem
Adi2Point0
@Adi2Point0
Dec 15 2016 12:16
@apoorv-mishra : Put this in your css section
ul.nav li:hover{
  background:red;
}
replace red with any color you like
@apoorv-mishra : Additionally, you may want this to be applicable only to the elements that are not active. If so, you can do it like
ul.nav li:not(.active):hover{
  background:red;
}
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 12:19
@Adi2Point0:It worked. Thanks :)
CamperBot
@camperbot
Dec 15 2016 12:19
:cookie: 185 | @adi2point0 |http://www.freecodecamp.com/adi2point0
apoorv-mishra sends brownie points to @adi2point0 :sparkles: :thumbsup: :sparkles:
Josaped Moreno
@androuino
Dec 15 2016 12:25
Hi, need some help please. I'm doing the Build a Wikipedia Viewer challenge and i want my expandable search box to behave like the example from the challenge. I want the search box to close when the x button is pressed only not when it lost focus. I made the expandable search box out of pure css so I'm having trouble how to control it using javascript. To better see what I'm talking about, I'd like to share my pen. Thanks in advance.
http://codepen.io/shaolin30/pen/ZBrqJJ?editors=0111
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 12:27
@Adi2Point0 Its also working when I type ul li:hover { background:#111; }
@heroiczero Thanks for the link
CamperBot
@camperbot
Dec 15 2016 12:28
apoorv-mishra sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:cookie: 516 | @heroiczero |http://www.freecodecamp.com/heroiczero
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 12:29
@Adi2Point0: What's the significance of adding .nav after ul
Adi2Point0
@Adi2Point0
Dec 15 2016 12:30
@apoorv-mishra : It will select all the ul elements that have class nav
it won't affect any other ul or any other elements that have class="nav"
it's called specificity
you can be specific about what elements your selector should target
it's a good practive
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 12:33
@Adi2Point0 : Sorry I didn't get you. Your first and second sentence confused me :)
@Adi2Point0 : Can you elaborate a little more>
@Adi2Point0 : never mind
@Adi2Point0 : Get your point. Thanks :)
CamperBot
@camperbot
Dec 15 2016 12:34
apoorv-mishra sends brownie points to @adi2point0 :sparkles: :thumbsup: :sparkles:
:warning: apoorv-mishra already gave adi2point0 points
Clyde Lobo
@oppiniated
Dec 15 2016 12:34
@apoorv-mishra it will only apply to uls withe the class nav like <ul class='nav'>
Sorin Ruse
@sorinr
Dec 15 2016 12:34
@apoorv-mishra just add another ul list on the page and see what happens
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 12:35
@oppiniated yeah got it. Thanks :)
CamperBot
@camperbot
Dec 15 2016 12:35
apoorv-mishra sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @oppiniated |http://www.freecodecamp.com/oppiniated
Josaped Moreno
@androuino
Dec 15 2016 12:41
@oppiniated cannot see the screenshot
Clyde Lobo
@oppiniated
Dec 15 2016 12:41
@androuino click on the link
Josaped Moreno
@androuino
Dec 15 2016 12:44
@oppiniated it's working but when I clicked outside the search box, the x button returned as a tail of the search box.
Clyde Lobo
@oppiniated
Dec 15 2016 12:46
Sorin Ruse
@sorinr
Dec 15 2016 12:48
@androuino @oppiniated i would also clear the val of the input when x is clicked
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 12:48
could you someone suggest what approach should I take to remove the hilt of the magnifying glass ?? https://mr-kumar-abhishek.github.io/wikipedia-viewer/
Clyde Lobo
@oppiniated
Dec 15 2016 12:49
@sorinr providing some basic help, i'd want him to figure the rest
@Mr-Kumar-Abhishek what??
Sorin Ruse
@sorinr
Dec 15 2016 12:49
@oppiniated i've seen its not ur pen
Josaped Moreno
@androuino
Dec 15 2016 12:50
@sorinr That's what I'm going to do, I just want to make the search box responsive first.
Clyde Lobo
@oppiniated
Dec 15 2016 12:50
Josaped Moreno
@androuino
Dec 15 2016 12:51
@oppiniated perfect! Thanks man...
CamperBot
@camperbot
Dec 15 2016 12:51
androuino sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 443 | @oppiniated |http://www.freecodecamp.com/oppiniated
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 12:54
@oppiniated code pen is too heavy for my system , and if it has no username on it ( given as anon ) it purely useless to me. cuz In my system only full mode of the codepen opens and when anonymous ... there is no link for full mode of code pen
@oppiniated thanks for trying to help though :)
CamperBot
@camperbot
Dec 15 2016 12:54
mr-kumar-abhishek sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @oppiniated |http://www.freecodecamp.com/oppiniated
Clyde Lobo
@oppiniated
Dec 15 2016 12:55
@Mr-Kumar-Abhishek What system are you using man :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 12:56
@oppiniated built it myself from e-waste as I had no budget to buy one :p
@oppiniated built it myself from from scratch via e-waste as I had no budget to buy one :p
Clyde Lobo
@oppiniated
Dec 15 2016 12:57
@Mr-Kumar-Abhishek good, try doing a wget of the codepen link and see if you can get the code
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 12:58
@oppiniated bad, as I said it won't work .. as it is too heavy for the processor .. however if I could just get the full link it might work ~
Clyde Lobo
@oppiniated
Dec 15 2016 12:59
can you use jsbin?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 12:59
@oppiniated yup ~
@oppiniated jsbin works ~
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 13:07
@oppiniated nevermind got it ~ https://codepen.io/Mr-Kumar-Abhishek/full/yVQKqL/
Sorin Ruse
@sorinr
Dec 15 2016 13:15
when the input is in focus state and have some value in there, when clicking the x close btn i would just clear the val of the input field
markygan123
@markygan123
Dec 15 2016 13:39
@Ayvlis i like your portfolio page :)
M1ck00
@M1ck00
Dec 15 2016 13:51
Hello guys :)
Sorin Ruse
@sorinr
Dec 15 2016 13:59
@M1ck00 hi there
Tan Nguyen
@huutan806
Dec 15 2016 14:07

<style>

p{margin: 20px 40px

}

.blue-text{

color: blue;

}
h1{
font-family: Combat;
}
img{size: 50px;}
</style>

<center>

<h1 class="blue-text">Pac Man</h1>

I try to input font for my h1
but it doesn't work
Chike Chinukwue
@displacednaija
Dec 15 2016 14:15

@kirbyedy @kirbyedy

its is coming from bootstrap framework I think - Thanks Kirbyedy.

CamperBot
@camperbot
Dec 15 2016 14:15
displacednaija sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1662 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
badalsaibo
@heyDante
Dec 15 2016 14:19
Hello guys. I need help in making the portfolio page.
@Mr-Kumar-Abhishek This is amazing.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 14:22
@heyDante what is ?
badalsaibo
@heyDante
Dec 15 2016 14:24
your pen
alpox
@alpox
Dec 15 2016 14:26
@huutan806 Did you import the font family to your website? I don't think the font-family Combat exists as such.
@huutan806 Also, try to set Combat in ticks: font-family: 'Combat';

@huutan806 If it is the font seen here: https://fontlibrary.org/de/font/combat
You have to add this declaration to the header of your html file:

<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/combat" type="text/css"/>

And the family would be called:

h1 { 
   font-family: 'CombatRegular'; 
   font-weight: normal; 
   font-style: normal; 
}
Tan Nguyen
@huutan806
Dec 15 2016 14:29
oh thanks @alpox
CamperBot
@camperbot
Dec 15 2016 14:29
huutan806 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 693 | @alpox |http://www.freecodecamp.com/alpox
Tan Nguyen
@huutan806
Dec 15 2016 14:33
@alpox also, I only want to style my image and the header in center, not the whole paragraphs.
<center>
<h1 class="red-text">Pac Man</h1>

<img style="max-width:95%;border:20px ridge #545565;" src="http://www.desktopimages.org/pictures/2015/0223/1/orig_67825.jpg" alt= "Manny Pacquiao" width= "800" height="400" </center>
Alexandros Andreou
@alex10791
Dec 15 2016 14:35
hey guys, I have an issue. When I use links to refere to sections within my html code, the section title remains behind my navbar (navbar-fixed-top). What would be the proper fix for this?
Tan Nguyen
@huutan806
Dec 15 2016 14:35
I don't know why everything was locating in the center
kirbyedy
@kirbyedy
Dec 15 2016 14:37
@alex10791 offset-top
Alexandros Andreou
@alex10791
Dec 15 2016 14:41
@kirbyedy is this a div property?
alpox
@alpox
Dec 15 2016 14:41

@huutan806 I would not use the center tag since you cannot go sure, that its supported. Its deprecated and as w3school says (http://www.w3schools.com/Tags/tag_center.asp):

The <center> tag is not supported in HTML5. Use CSS instead.

instead, use css. text-align: center as example. (You may have to set the image to display: inline
kirbyedy
@kirbyedy
Dec 15 2016 14:42
markygan123
@markygan123
Dec 15 2016 14:45

Can i do this?

<a class = "navbar-brand" href="#">Title</a>

can't seem to edit it's font size

Francois van Leersum
@Blockshot12
Dec 15 2016 14:45
@markygan123 Yes you can!
But you can also give it your own css class.
markygan123
@markygan123
Dec 15 2016 14:47

but is it's font size fixed?

https://codepen.io/markygan123/pen/bBMmdz

Francois van Leersum
@Blockshot12
Dec 15 2016 14:48
@markygan123
.navbar {
  font-size: 24px;
}
just add some CSS
Sorin Ruse
@sorinr
Dec 15 2016 14:49
@markygan123 .navbar-brand{font-size: whatever you want}
markygan123
@markygan123
Dec 15 2016 14:50
@Blockshot12 thanks! btw, how do you comment like that? lol
CamperBot
@camperbot
Dec 15 2016 14:50
markygan123 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @blockshot12 |http://www.freecodecamp.com/blockshot12
Silvietta
@Ayvlis
Dec 15 2016 14:50
thank you @markygan123 :)
CamperBot
@camperbot
Dec 15 2016 14:50
ayvlis sends brownie points to @markygan123 :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @markygan123 |http://www.freecodecamp.com/markygan123
markygan123
@markygan123
Dec 15 2016 14:51
@sorinr thanks!
CamperBot
@camperbot
Dec 15 2016 14:51
markygan123 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 953 | @sorinr |http://www.freecodecamp.com/sorinr
Dean
@burtondean
Dec 15 2016 14:51
Is there a group to ask for help on WordPress?
Sorin Ruse
@sorinr
Dec 15 2016 14:52
@markygan123 welcome
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 14:52
https://mr-kumar-abhishek.github.io/wikipedia-viewer/ <-- concluding , is UI good enough ?
Clyde Lobo
@oppiniated
Dec 15 2016 14:53
@Mr-Kumar-Abhishek Why does the page have a scrollbar?
Nathanael-M
@Nathanael-M
Dec 15 2016 14:53
@Mr-Kumar-Abhishek One little thing, maybe turn set the focus outline to none?
Francois van Leersum
@Blockshot12
Dec 15 2016 14:54
@markygan123 The solution @sorinr gave is better
 .navbar-brand{font-size: whatever you want}
Check markdown help on the right for code style!
Nathanael-M
@Nathanael-M
Dec 15 2016 14:55
@Mr-Kumar-Abhishek
#search-me:focus {outline:none;};
markygan123
@markygan123
Dec 15 2016 14:56
@Blockshot12 yep. it worked, i just didn't called the right class. thanks!
CamperBot
@camperbot
Dec 15 2016 14:56
markygan123 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:warning: markygan123 already gave blockshot12 points
markygan123
@markygan123
Dec 15 2016 14:56
lol
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 14:56
@Nathanael-M thanks ... I didn't knew the css property to remove that.
CamperBot
@camperbot
Dec 15 2016 14:56
mr-kumar-abhishek sends brownie points to @nathanael-m :sparkles: :thumbsup: :sparkles:
:cookie: 208 | @nathanael-m |http://www.freecodecamp.com/nathanael-m
alpox
@alpox
Dec 15 2016 14:56
@Mr-Kumar-Abhishek Hey there, you may want to make the link open in a new tab :D
Alexandros Andreou
@alex10791
Dec 15 2016 14:57

@kirbyedy I don't see how this would help.
I found this:

var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }

but I was hoping I could find a pure html/css solution, I wanted to avoid js for now

John S Thompson
@UncleJohn418
Dec 15 2016 14:58
@Mr-Kumar-Abhishek google css reset. I use it in all my web sites to reset CSS.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 15:00
@UncleJohn418 doesn't normalize.css does the same thing ?
alpox
@alpox
Dec 15 2016 15:00
@alex10791 Not sure if there is one. If i had a codepen link i could maybe try out. Did you try to transform your whole content down with transform: translateY(50px)?
(Whole content except the nav)
John S Thompson
@UncleJohn418
Dec 15 2016 15:01
@Mr-Kumar-Abhishek I'm not sure I don't know normalize, but I will check it out.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 15:01
@alpox in the wikipedia viewer ?
alpox
@alpox
Dec 15 2016 15:01
@Mr-Kumar-Abhishek Yup, when you click on a wikipedia link
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 15:02
@alpox oh.... in gitter chat ?
@alpox oh... okay wikipedia link
alpox
@alpox
Dec 15 2016 15:02
@Mr-Kumar-Abhishek :D yea
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 15:03
@alpox thanks for the heads up :)
CamperBot
@camperbot
Dec 15 2016 15:03
mr-kumar-abhishek sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 695 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Dec 15 2016 15:03
@Mr-Kumar-Abhishek Np :D
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 15:06
@oppiniated fixing it thanks for checking it out :)
CamperBot
@camperbot
Dec 15 2016 15:06
mr-kumar-abhishek sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @oppiniated |http://www.freecodecamp.com/oppiniated
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 15:35
@UncleJohn418 I didn't found any "google css reset " but I made this . And normalize.css do not always resets the default css of the browser . https://github.com/Mr-Kumar-Abhishek/wikipedia-viewer/blob/dev/css/reset.css
Sanne
@Cassanne
Dec 15 2016 15:51
Hi! I have this div inside a section and I need it to be at the bottom of the section. So I used: - align-items: flex-end; - on it, but it has no effect. Any ideas why, or what else I can try?
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 16:15
Hi, where can I find good high-res images to add as background to my portfolio page?
Jason Luboff
@JLuboff
Dec 15 2016 16:23
@apoorv-mishra Here's a webpage that has 21 different sites with free stock photos: https://bootstrapbay.com/blog/free-stock-photos/
Apoorv Mishra
@apoorv-mishra
Dec 15 2016 16:28
@JLuboff Thanks :)
CamperBot
@camperbot
Dec 15 2016 16:28
apoorv-mishra sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 492 | @jluboff |http://www.freecodecamp.com/jluboff
Sorin Ruse
@sorinr
Dec 15 2016 16:30
@Cassanne did you declaread ur container as display:flex?
Bogdan Gatej
@Bogdan2992
Dec 15 2016 16:38
hello all

I have some questions

<div class="quote-text">
    <i class="fa fa-quote-left"> </i><span id="text"></span>
  </div>
  <div class="quote-author">
    - <span id="author"></span>
  </div>
  <div class="buttons">
    <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank">
      <i class="fa fa-twitter"></i>
    </a>
    <button class="button" id="new-quote">New quote</button>
  </div>
</div>
<div class="footer"> by <a href="https://codepen.io/hezag/">hezag</a></div>

here in HTML this guy just creates his divs and hise arguments in order to use them later with the css and JavaScript so he may apply some improvements ?

Sorin Ruse
@sorinr
Dec 15 2016 16:47
@Bogdan2992 they are just divs and from what u say u didn't create yourself. right?
Bogdan Gatej
@Bogdan2992
Dec 15 2016 16:48
@sorinr No I open the website that is made in the presentation and I whant to know how they work,they are created for what ? the purpose of them
Robert
@Quadrob
Dec 15 2016 16:52
Hey everyone
Tom
@moT01
Dec 15 2016 17:03
hey
@Bogdan2992 divs are just containers, ...for organizing
nanobyte
@Shivamnema
Dec 15 2016 17:07
blob
Hey Everyone I need little help. I need the button to be place left to the text box.
Please Help.
blazevivan
@blazevivan
Dec 15 2016 17:09
anybody knows if there is hamburger menu covered in exercises later?
Tom
@moT01
Dec 15 2016 17:09
@Shivamnema05 tough when we cant see your code, ...try display: inline
nanobyte
@Shivamnema
Dec 15 2016 17:10
@moT01 Sure I'm sorry. Just wait a sec.

`<!doctype html>

<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../components/bootstrap/dist/css/bootstrap.css">
<title>BaatCheet IM</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" class="form-control input-lg" placeholder="Your message" id="msg"/>
<input type="button" name="start_button" id="start_button" value="Record" onclick="startButton(event)" class="btn btn-info btn-lg">
</li>
<li class="login page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/main.js"></script>
</body>
</html>` This is Index.html

code
.inputMessage {
border: 2px solid #000;
bottom: 0;
height: 60px;
left: 0;
outline: none;
padding-left: 10px;
position: absolute;
right: 0;
width: 100%;
border-radius: 3px;
}
this is in style.css
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:12
how can I get the text , and placeholder image to line up centered vertically? http://codepen.io/amazecpk/pen/pNQxqO (sorry for xposting)
Tom
@moT01
Dec 15 2016 17:16
@Shivamnema05 could try putting both inputs in a div and displaying them inline
not sure i would need to play with it
or maybe both in a div and float the record button left
@AmazeCPK centered vertically is tough i cant help ya there
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:21
@moT01 what bout the placeholder images below not being centered horizontally on smaller displays? (they are centered left)
Tom
@moT01
Dec 15 2016 17:26
@AmazeCPK i believe you would want to add classes for that next to your col-md-4, ...that means when the screen is medium sized(md) they ill take up 4 columns, ...add col-sm-4 and col-xs-4 to all of them, ...should make it keep the same look when the window shrinks, but then the images will be smaller
or if you want the images to stay the same size you can offset them
with like offset-md-2 or some class like that, ...not really sure
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:27
ahh makes sense. thanks!
Tom
@moT01
Dec 15 2016 17:28
click name n say thanks
im hungry
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:28
.. lol sorry
@moT01 thanks!
CamperBot
@camperbot
Dec 15 2016 17:28
amazecpk sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @mot01 |http://www.freecodecamp.com/mot01
bistuDaniel
@bistuDaniel
Dec 15 2016 17:31
hello guys, can someone tell me how I get a background like the one in the following link?https://www.youtube.com/watch?v=qqrnzmqCGDw
(the grey one)
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:32
body{
backgound-color: grey;
}
@bistuDaniel that should do it
bistuDaniel
@bistuDaniel
Dec 15 2016 17:33
take a look at the video please
because I don`t want the whole background grey
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:33
I will not
bistuDaniel
@bistuDaniel
Dec 15 2016 17:33
thanks anyway then
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:33

you really expext someone to watch a 4 min long video to help you, when you don't want to explain your problem?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 17:35
I might watch a video ~
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:35
anyways, you probably want your content in a container,, and then give the container the same css style that I gave you
@Mr-Kumar-Abhishek I'm just saying, its common courtesy.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 17:37
@AmazeCPK ofcourse :)
bistuDaniel
@bistuDaniel
Dec 15 2016 17:37
you know that you can skip the video until the background I want
I mean, I cannot find my words to explain it
and I posted a video for a better understanding of my problem
:D
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:38
@bistuDaniel then please give a time stamp.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 17:38
Even I won't listen to the video ~ at most I will only watch it ....
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:38
anyways if it's anything like at 2:47, then the second bit of information I provided should help
bistuDaniel
@bistuDaniel
Dec 15 2016 17:40
it starts at 2:45
Tom
@moT01
Dec 15 2016 17:40
just give the link to that codepen instead of the video
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:42
bistuDaniel
@bistuDaniel
Dec 15 2016 17:50
YAAAAAAAAAAAAAAAAAAY
THANK YOU VERY MUCH @AmazeCPK
CamperBot
@camperbot
Dec 15 2016 17:50
:warning: could not find receiver for amazecpk
bistudaniel sends brownie points to @amazecpk :sparkles: :thumbsup: :sparkles:
Anthony Contreras
@AmazeCPK
Dec 15 2016 17:51
yeah, of course!
Callum Ward
@callumquick
Dec 15 2016 18:00
On this algorithm challenge https://www.freecodecamp.com/challenges/validate-us-telephone-numbers
I have an algorithm that works to tests against all of the allowed formats, and it removes spaces and dashes as well
I console.log() the edited string to see that the regexp removal of spaces and dashes work and it does
My algorithm works for all of the tests except that "1 (555) 555-5555" registers false whilst "1(555)555-5555" passes as true:
However after editing they should be the same , and I console.log it to prove it and they both edit to 1(555)5555555
One of the edited strings which are identical passes, the other does not... is it a bug?
Tom
@moT01
Dec 15 2016 18:06
got the code?
does seem strange
CamperBot
@camperbot
Dec 15 2016 18:10
no wiki entry for: me httpcodepeniocharan1922pennbemwqeditors0010
Sunny Ouyang
@ShennyO
Dec 15 2016 18:21
is there anyone here that's familiar with html5 canvas stuff?
Charan Teja
@charan1922
Dec 15 2016 18:22
@camperbot i dont get u
Emanuele Antonelli
@Em-Ant
Dec 15 2016 18:23
@charan1922 you have a CORS issue. You should use JSONP. Add ?callback=? to your query url. More infos here.
@charan1922 please don't open issues on FCC github for this kind of problems.
Callum Ward
@callumquick
Dec 15 2016 18:30
@moT01
function telephoneCheck(str) {
  console.log("Testing: "+str);
  //remove spaces and dashes:
  var editedStr = str.replace(/\s|-/gi, "");
  console.log("Str edited: " + editedStr);
  if(editedStr.length == 10 && /\d{10}/.test(editedStr)) {
    console.log("True - length 10");
    return true;
  } else if (editedStr.length == 11 && editedStr[0]=="1" && /\d{10}/.test(editedStr)) {
    console.log("True - length 11");
    return true;
  } else if (editedStr.length == 12 && str[0]=="(" && str[4] == ")" && /\d{7}/.test(editedStr)) {
    console.log("True - length 12");
    return true;
  } else if (editedStr.length == 13 && str[0]=="1" && str[1] == "(" && str[5] == ")" && /\d{7}/.test(editedStr)) {
    console.log("True - length 13");
    return true;
  } else {
    console.log("False");
    return false;
  }
}
blob
Also please note the top series of console.log and the bottom series
Top should be "true - length 13" just like the bottom
Lydia Larae
@nevaIsDreaming
Dec 15 2016 18:43
anybody hanging around that knows a thing or two about the wikipedia viewer? I am stuck trying to figure out how to use the API
Callum Ward
@callumquick
Dec 15 2016 18:50
@nevaIsDreaming I did the wikipedia viewer recently, what are you stuck on?
If it is that the API doesn't work due to Cross-Origin issues I can probably help as I did eventually get it to work (this is the really annoying thing about dealing with all of the APIs FCC want us to use...)
Sorin Ruse
@sorinr
Dec 15 2016 18:54
@callumquick you can use any api or lib u want. this is what fcc say. the ones they make as example its just an example. nothing more
Lekulino
@kuleCRO
Dec 15 2016 18:58
Hi everyone! :) I need a feedback of my Tribute page: http://codepen.io/kule666/pen/pNOKYX
Sorin Ruse
@sorinr
Dec 15 2016 19:03
@kuleCRO just add class="img-responsive" to your img
Lekulino
@kuleCRO
Dec 15 2016 19:04
tnx, i've tried, but then image goes all to the left side :/
Sorin Ruse
@sorinr
Dec 15 2016 19:05
@kuleCRO nope. see the example
Lekulino
@kuleCRO
Dec 15 2016 19:07
yep, and then you have on the right of the image some background space. i dont know is this because of image itself,or?
Lydia Larae
@nevaIsDreaming
Dec 15 2016 19:07
I am trying to come up with a specific question. I am a little lost on trying to figure out get the URL written so that I am getting a list of search results. I've been reading through the documentation but I don't see this addressed specifically anywhere I look. Where does the user's input go in the URL? I think I'm supposed to be using query and list, but what parameter does the actual search term entered by the user go in the URL?
Perhaps what is more troubling than the fact that I don't know the parameter I am supposed to use is that I can't figure out how to find it in the documentation when I look for it?
Callum Ward
@callumquick
Dec 15 2016 19:14
@sorinr Well really its an issue with any API, that we're not really told how to handle (it's quite difficult)
@nevaIsDreaming It is confusing in the documentation, especially because they don't have a page on how to search, but what you want is "?method=opensearch" in the URL, this searches wikipedia... then you need another "search=" parameter for the users input
@kuleCRO I think it is very good!
Sorin Ruse
@sorinr
Dec 15 2016 19:17
@callumquick to proper use any api you just need to read their docs.
Lekulino
@kuleCRO
Dec 15 2016 19:18
tnx Callum :)
Callum Ward
@callumquick
Dec 15 2016 19:19
@sorinr What about when you run into a CORS issue as a beginner? Do you need to sift through pages and pages of forums to find that sometimes using JSONP works but sometimes it doesn't and sometimes you need to include CrossDomain:true; in your ajax object and sometimes you don't, and sometimes neither works? It's not constructive as a beginner to run into these issues when the challenge is supposed to be testing your knowledge of API calls, not cross-origin headers and security...
Sorin Ruse
@sorinr
Dec 15 2016 19:22
@callumquick the early u learn about issues u may encounter the better is for you as a future developer
alpox
@alpox
Dec 15 2016 19:22
@callumquick there are 2 points to take into account: using JSONP, and if this doesnt work out, use crossorigin.me
but youre right, its no fun to run into these issues
Callum Ward
@callumquick
Dec 15 2016 19:23
@alpox What is crossorigin.me, I haven't seen that one? Could you explain, it might help me fix some of the buggy API calls I've made on codepen
alpox
@alpox
Dec 15 2016 19:23
But as programmer you will always have to deal with such problems
Callum Ward
@callumquick
Dec 15 2016 19:24
It is true that we will have to deal with them, but the help online is actually quite vague because the issue is often different
alpox
@alpox
Dec 15 2016 19:24
@callumquick you just put that url (with https://crossorigin.me/) in front of the real url you want to access and in almost all cases it will work
Lydia Larae
@nevaIsDreaming
Dec 15 2016 19:31
@callumquick Thank you! That is very helpful. Can I ask how you know that/where did you find that? I had no problem using the API for the weather app that we made, but this one is confusing.
CamperBot
@camperbot
Dec 15 2016 19:31
:cookie: 289 | @callumquick |http://www.freecodecamp.com/callumquick
nevaisdreaming sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
Robert Purcea
@RobertPurcea
Dec 15 2016 19:42
is there any way to style numbers?
Callum Ward
@callumquick
Dec 15 2016 19:49
@nevaIsDreaming Surprisingly I had a lot of issues with the weather API, it works on my laptop but not my desktop, very weird! I found that just by trial and error, but there is a wikimedia page about opensearch and how to use it, you just need to know that it is the one that does the "search" functionality... I had to look through wikipedias docs for a while to find that
@nevaIsDreaming Essentially there is a lot of stuff you don't need in the docs! But also note that it is helpful to the wiki api to include a "format=json" parameter as well
Łukasz Sobek
@lukaszsobek
Dec 15 2016 19:54
Help pls, this throws an 'Access-Control-Allow-Origin' error even though there is a callback used
function clickThis() {

  var searchText = document.getElementById("searchText").value;
  var encSearchText = encodeURI(searchText);
  var apiLink = "http://en.wikipedia.org/w/api.php?action=opensearch&search=" + encSearchText + "&limit=10&namespace=0&format=json&callback=?";


 $.get(apiLink, function(data) {
      console.log(data);
 });


  // construct output
  // display output


 }
CamperBot
@camperbot
Dec 15 2016 19:54
no wiki entry for: pls this throws an access-control-allow-origin error even though there is a callback used function clickthis var searchtext documentgetelementbyidsearchtextvalue var encsearchtext encodeurisearchtext var apilink httpenwikipediaorgwapiphpactionopensearchsearch encsearchtext limit10namespace0formatjsoncallback getapilink functiondata consolelogdata construct output display output
Melissa
@mmarieg7
Dec 15 2016 19:57
i am about to build a tribute page and am confused as to what user stories is and what i am supposed to be writing... can someone help me please
Łukasz Sobek
@lukaszsobek
Dec 15 2016 19:59
@mmarieg7 user stories tell you what the person using the page expects to experience
@mmarieg7 they are guidelines to how your code should work from the perspective of a user of the application
Callum Ward
@callumquick
Dec 15 2016 20:00
@lukaszsobek As suggested earlier try appending https://crossorigin.me/ to the front of your apiLink and see if that works otherwise get back to me
@remdata Please link your codepen/send your code
@remdata Actually your issue might be that src needs to point to the actual image, not to a page where the image is displayed
@remdata Try src="https://thumbs.dreamstime.com/x/las-vegas-nv-dec-closeup-profile-dr-ben-carson-retired-neurosurgeon-republican-presidential-candidate-s-speaks-spin-66214063.jpg" instead
Łukasz Sobek
@lukaszsobek
Dec 15 2016 20:02
@callumquick works <3 have been struggling with this thing throughout all projects
@callumquick thank you
CamperBot
@camperbot
Dec 15 2016 20:02
lukaszsobek sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @callumquick |http://www.freecodecamp.com/callumquick
Callum Ward
@callumquick
Dec 15 2016 20:02
@lukaszsobek I also struggled, fortunately this means that I know most of the potential fixes :)
Icah Banton
@remdata
Dec 15 2016 20:02
@callumquick I will try that. thanks
CamperBot
@camperbot
Dec 15 2016 20:02
remdata sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @callumquick |http://www.freecodecamp.com/callumquick
Jonathan Marx Domah
@marxcom
Dec 15 2016 20:03
@remdata you are missing a quote after the src=. Should be src="
Fabio Di Pane
@saylos
Dec 15 2016 20:09
guys, I don't get why it's not working...
http://codepen.io/saylos/pen/BQGNYd?editors=1010
Callum Ward
@callumquick
Dec 15 2016 20:12
Geolocation by navigator doesn't work on codepen atm because it's not secure
@saylos Also as a side note your longitude and latitude are the wrong way round in their definitions :smile:
@saylos Try http://ip-api.com/json to get the geolocation information
Łukasz Sobek
@lukaszsobek
Dec 15 2016 20:14
lol, "api.openweathermap.org refused to connect."
there are a lot of options
Icah Banton
@remdata
Dec 15 2016 20:16
@marxcom . Thanks
CamperBot
@camperbot
Dec 15 2016 20:16
:cookie: 145 | @marxcom |http://www.freecodecamp.com/marxcom
remdata sends brownie points to @marxcom :sparkles: :thumbsup: :sparkles:
Fabio Di Pane
@saylos
Dec 15 2016 20:19
@callumquick ahahahah I saw it just now. though I don't get why in the challenge description they don't tell about the navigator-codepen issue
@lukaszsobek @callumquick thanks
CamperBot
@camperbot
Dec 15 2016 20:19
:cookie: 292 | @callumquick |http://www.freecodecamp.com/callumquick
saylos sends brownie points to @lukaszsobek and @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @lukaszsobek |http://www.freecodecamp.com/lukaszsobek
Callum Ward
@callumquick
Dec 15 2016 20:22
@saylos The API challenges are now quite a bit harder because of things that have changed with the way the recommended APIs work, and increased browser security measures, but I suppose FCC wants you to exercise your Read-Search-Ask mentality
Łukasz Sobek
@lukaszsobek
Dec 15 2016 20:27
besides, there is always something to improve - even with fcc
Jichoat
@Jichoat
Dec 15 2016 20:59
Anyone around to give me some helpful advice with my Tribute Page Project. https://codepen.io/Jicho/ I feel like might be overthinking this project.
Specifically with my .test-box. I was trying to give my page a color and leave a white space similar in the demo. Can I make everything with <div>'s?
Callum Ward
@callumquick
Dec 15 2016 21:15
@Jichoat It would probably be best to group everything into divs and style them up that way, you should also try to make good use of bootstrap to make things easy for yourself
@Jichoat I think the "Volbeat" text looks really nice though!
@Jichoat You could use the "container" class (instead of "container-fluid") to make everything more central and columnal
Jichoat
@Jichoat
Dec 15 2016 21:18
@callumquick I will give that a shot, I may have started all this project in a weird way. I will give a try though. Thank you Callum!! :D
CamperBot
@camperbot
Dec 15 2016 21:18
jichoat sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @callumquick |http://www.freecodecamp.com/callumquick
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 21:30
What is the proper way of getting values from the form ??
What is the proper way of getting values from the form in js??
Igor Amidzic
@igoramidzic
Dec 15 2016 21:31
Someone build the rest for me, god that took forever..
http://codepen.io/amidzicigor/full/MbzxON/
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 21:33
I know how to get via backend ... but in front end ??
I know how to get via backend ... but in front end ?? what is the best way to get form values from front end ??
I know how to get via backend ... but in front end ?? what is the best way to get form values from front end in js??
Igor Amidzic
@igoramidzic
Dec 15 2016 21:33
Do you use vanilla or jquery?
@Mr-Kumar-Abhishek
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 21:34
jquery , vanilla is good too
anything ~
not using react or angular though
just have jquery as an asset
Igor Amidzic
@igoramidzic
Dec 15 2016 21:35
$('#id').val();
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 21:35
@amidzicigor but submitting it clears it value ~
Igor Amidzic
@igoramidzic
Dec 15 2016 21:36
@Mr-Kumar-Abhishek What are you submitting?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 21:36
@amidzicigor I shouldn't use form tag or what ??
Igor Amidzic
@igoramidzic
Dec 15 2016 21:36
oh you are submitting a form?
@Mr-Kumar-Abhishek
Pieter Stokkink
@forkerino
Dec 15 2016 21:37
Dimitrios Kouveris
@dimkouv
Dec 15 2016 21:37
Can someone help with random quote task?
https://codepen.io/dimkouv/pen/aBQMEN
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 21:38
GabriRa
@GabriRa
Dec 15 2016 21:40
Hey!, I did this https://codepen.io/GabriRa/pen/NbEvGK but i dont realy know if I have to do it in a more optimal way
Henz
@pilotwhiterabbit
Dec 15 2016 21:42
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 21:42
@amidzicigor @forkerino thanks ,got it :)
CamperBot
@camperbot
Dec 15 2016 21:42
mr-kumar-abhishek sends brownie points to @amidzicigor and @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 56 | @amidzicigor |http://www.freecodecamp.com/amidzicigor
:cookie: 374 | @forkerino |http://www.freecodecamp.com/forkerino
Jason Luboff
@JLuboff
Dec 15 2016 21:43
@GabriRa Looks good. You should move your CSS portion into the CSS pane of Codepen though
Igor Amidzic
@igoramidzic
Dec 15 2016 21:43
@Mr-Kumar-Abhishek How did you do it?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 21:47
Callum Ward
@callumquick
Dec 15 2016 21:48
@dimkouv What do you need help with?
Jonathan Marx Domah
@marxcom
Dec 15 2016 21:57
@Ayvlis you profile page site is cool
thescotty125
@thescotty125
Dec 15 2016 21:57
for the front end challenge do I do it on anyone or what?
Zaurbek Zhakupov
@zzhakupov
Dec 15 2016 21:59
Hello guys, I just finished my Recipe Box project, I'll appreciate very much if you can afford me any feedback that you want. http://codepen.io/Zooll/pen/eBjqox
Jason Luboff
@JLuboff
Dec 15 2016 22:03
@thescotty125 Yes do it on anyone you'd like
Tom
@moT01
Dec 15 2016 22:15
@Zooll8 looks good
@Zooll8 needs a pointer on the recipe, so i know its clickable
Callum Ward
@callumquick
Dec 15 2016 22:17
@Zooll8 Works great! Just a few typos here or there which is easy to fix :) Ingridient -> ingredient for example :)
Tom
@moT01
Dec 15 2016 22:18
@Zooll8 when i add some things with spaces it put them on new lines
@Zooll8 i guess maybe i didn't read the directions well enough
'separated by spaces'
i added one thing then hit enter and added another
so i can't add ingredients with spaces in them i guess
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 22:58
I need a quick help , anyone ?
https://mr-kumar-abhishek.github.io/wikipedia-viewer/ <-- I need to add a class to .text-center from result_display(wiki_data) function , but I am unable to do it ~
Callum Ward
@callumquick
Dec 15 2016 23:10
@Mr-Kumar-Abhishek I can't see your code on that view
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 23:11
@callumquick press CTRL + U in browser ?
@callumquick or right click on website and choose view source
@callumquick code pen is too heavy for my system , my apologies
Callum Ward
@callumquick
Dec 15 2016 23:13
@Mr-Kumar-Abhishek What are you trying to add the .text-center class to?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 23:14
@callumquick I want a class name searched to division tag having class text-center
Callum Ward
@callumquick
Dec 15 2016 23:14
@Mr-Kumar-Abhishek You want to add the class .search to the div which already has class .text-center?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 23:15
@callumquick $(".text-center").addClass("searched"); is not working ~
Jacob
@jdc101214
Dec 15 2016 23:15
Hey guys.
Why is this code not working?
function truncateString(str, num) {
  // Clear out that junk in your trunk

  return str.slice(0, num) + "...";
}

truncateString("A-tisket a-tasket A green and yellow basket", 11);
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 23:15
@callumquick yes
Callum Ward
@callumquick
Dec 15 2016 23:15
@Mr-Kumar-Abhishek Really? You're applying that in the result_display function?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 23:16
@callumquick yes
Callum Ward
@callumquick
Dec 15 2016 23:16
@Mr-Kumar-Abhishek Try making a more specific selector by giving it an ID like #content and then calling $("div.text-center#content")
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 23:17
@callumquick thanks :) I am trying it
CamperBot
@camperbot
Dec 15 2016 23:17
mr-kumar-abhishek sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @callumquick |http://www.freecodecamp.com/callumquick
Callum Ward
@callumquick
Dec 15 2016 23:18
@jdc101214 It works for some of the case but you'll need some conditionals for special cases, for example if the string length is shorter than num then your "..." is being applied anyway which you don't want.
@jdc101214 Try some console.log()s to see what is being outputted, this helps greatly with debugging.
@jdc101214 For almost all the algorithms, what you think will happen won't happen, and only by seeing what does happen can you find the bug in your code.
Jacob
@jdc101214
Dec 15 2016 23:20
@callumquick Thanks for the help, but the consol.log doesnt work on the lessons.
CamperBot
@camperbot
Dec 15 2016 23:20
jdc101214 sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @callumquick |http://www.freecodecamp.com/callumquick
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 15 2016 23:20
@callumquick it worked :D thanks
CamperBot
@camperbot
Dec 15 2016 23:20
mr-kumar-abhishek sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:warning: mr-kumar-abhishek already gave callumquick points
Jacob
@jdc101214
Dec 15 2016 23:20
Ive tried so many times....
Callum Ward
@callumquick
Dec 15 2016 23:21
@jdc101214 It does, it says it gets outputted to the little black box there, but it doesn't, right? But it still does get outputted in the Javascript developer console. Press CTRL-SHIFT-J while on the lesson and clear away the error messages, then ctrl-enter run your code again with some console.log()s, they show up in the console.
Jacob
@jdc101214
Dec 15 2016 23:21
ok.
Let me try that
Callum Ward
@callumquick
Dec 15 2016 23:21
@Mr-Kumar-Abhishek Welcome
Jacob
@jdc101214
Dec 15 2016 23:30
function truncateString(str, num) {
  // Clear out that junk in your trunk
  var str1 = "";
  if(str.length > num){
  return str.slice(0, num - 3) + "...";
} if(str.length < num) {
  str1 = str.slice(0, num + num) + "...";
  return str1;
}
  if (num <= 3) {
    return str.slice(0, num + num) + "...";
  }
console.log(str1);

}

truncateString("Absolutley", 2);
Why is this not working?
Callum Ward
@callumquick
Dec 15 2016 23:32
@jdc101214 Why str.slice(0, num + num)?
num+num will just return 2*num
Jacob
@jdc101214
Dec 15 2016 23:32
right. I did that bec truncateString("A-", 1) should equal "A..." ANd that was how I got that to work.
Callum Ward
@callumquick
Dec 15 2016 23:33
@jdc101214 Maybe you should remove all non-alphabetic characters with a RegExp test?
Actually no, sorry, that's not what you want
What you want is that if str.length<3 you just cut it to num long and tack "..." on the end
I.e. don't cut it to num-3 to squeeze in the extra "...", this is what the description says you should do if the string is shorter than 3 characters
Jacob
@jdc101214
Dec 15 2016 23:37
Ok, I think Im completely confused about this challenge...
Callum Ward
@callumquick
Dec 15 2016 23:37

Also, I don't understand what purpose

if (num <= 3) {
    return str.slice(0, num + num) + "...";
  }

is serving?

Jacob Jackson
@bearswamppastor
Dec 15 2016 23:38

Can someone help me understand how to insert an image using bootstrap? <img src="test.jpg" style:"width:100%">

That is the code I'm using, but it only gets me a broken image and it's small and in the left hand corner of the screen.

Callum Ward
@callumquick
Dec 15 2016 23:38
@bearswamppastor Which challenge?
@bearswamppastor Putting in the img is the same in bootstrap, bootstrap just offers classes to make it look prettier
@jdc101214 Maybe it is best if you comment out what you already have, and start again from scratch thinking about what you need to do
Jacob
@jdc101214
Dec 15 2016 23:39
ok will do.
ok, i figured it out. thanks
@callumquick thanks
CamperBot
@camperbot
Dec 15 2016 23:40
jdc101214 sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:warning: jdc101214 already gave callumquick points
Callum Ward
@callumquick
Dec 15 2016 23:41
@jdc101214 No problem :)
Jacob Jackson
@bearswamppastor
Dec 15 2016 23:42
@callumquick It's the first challenge that you do on your own without the guides. Making a tribute page.
Callum Ward
@callumquick
Dec 15 2016 23:43
@bearswamppastor Ah ok, on codepen.io you have to make sure to include your own dependencies, have you added the bootsrap URL in the Settings>CSS part of the interface?
Jacob Jackson
@bearswamppastor
Dec 15 2016 23:43
@callumquick Yes, I added bootstrap in the CSS settings.
@callumquick The image is on my computer. Does it need to be online?
Callum Ward
@callumquick
Dec 15 2016 23:46
@bearswamppastor I think it does, for codepen to be able to access it
GabriRa
@GabriRa
Dec 15 2016 23:47
Thanks @JLuboff
CamperBot
@camperbot
Dec 15 2016 23:47
gabrira sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 494 | @jluboff |http://www.freecodecamp.com/jluboff
Joshua
@jfc246
Dec 15 2016 23:51
Jacob Jackson
@bearswamppastor
Dec 15 2016 23:53
@callumquick So I would need the <a href="http://9430jfkldkjfg0..."> ?