These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Feb 2017
Fabricio Leal
@pharaohlxvi
Feb 11 2017 00:00
Hey, guys, I'm doing the "quote machine" project but I can't figure out why my background color is not changing when the quote changes. Any ideas? https://codepen.io/pharaohlxvi/pen/jyvexW
By the way, I'm trying to use only vanilla JS.
runnerbill75
@runnerbill75
Feb 11 2017 00:02
Ok @SkyCoder01 I created new repository, however I do not see "initialize this repository with a README"
Gulsvi
@gulsvi
Feb 11 2017 00:03
@runnerbill75 You should see that before you click the "create repository" button
runnerbill75
@runnerbill75
Feb 11 2017 00:03
oh ok thanks
Gulsvi
@gulsvi
Feb 11 2017 00:03
You can delete it and start over again by clicking settings. I had to do that a few times :) didn't want to use the command line
@pharaohlxvi I think your syntax is wrong, check out this: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backgroundcolor
Fabricio Leal
@pharaohlxvi
Feb 11 2017 00:08
Thanks, @SkyCoder01! That seems to work! I'm intrigued though as to why can't I use this: https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute
CamperBot
@camperbot
Feb 11 2017 00:08
pharaohlxvi sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 175 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 11 2017 00:11
@pharaohlxvi That sets an attribute and "background-color" isn't an attribute. Try it: <body background-color="red">
runnerbill75
@runnerbill75
Feb 11 2017 00:12
Ok got it uploaded to github. Here is my html: <img src="https://github.com/runnerbill75/Zamperini1.jpg"/>
image not showing up on web page...
Gulsvi
@gulsvi
Feb 11 2017 00:13
@runnerbill75 It looks like you created a repository named runnerbill.io not runnerbill75.github.io -- read those instructions again :)
runnerbill75
@runnerbill75
Feb 11 2017 00:14
Yep, you are exactly right, can you tell I'm new at this ?haha
Gulsvi
@gulsvi
Feb 11 2017 00:14
Lol, it took me three tries today
runnerbill75
@runnerbill75
Feb 11 2017 00:15
Ok glad I am not only one struggling with it lol
Fabricio Leal
@pharaohlxvi
Feb 11 2017 00:16
Hmmm, I see. backgroundColor is a CSS property, not an attribute. Confusing, but i'll have to accept it for now. :smile: .
Gulsvi
@gulsvi
Feb 11 2017 00:17
  1. go to https://github.com/new
  2. repository name: runnerbill75.github.io
  3. Select "Initialize this repository with a README"
  4. Click "Create repository"
  5. Go to your new repository at https://github.com/runnerbill75/runnerbill75.github.io
  6. Click "Upload Files"
  7. Access your files at https://runnerbill75.github.io/filename
@runnerbill75 It may take a few minutes for the site to be created after the above steps
jamesjd54
@jamesjd54
Feb 11 2017 00:17
do I need to enable anything specific on codepen to get fontawesome for buttons?
i tried enabling bootstrap but it didn't affect anything
runnerbill75
@runnerbill75
Feb 11 2017 00:17
ok
Gulsvi
@gulsvi
Feb 11 2017 00:18
@jamesjd54 Yes, this challenge will show you what to do: https://www.freecodecamp.com/challenges/add-font-awesome-icons-to-our-buttons
jamesjd54
@jamesjd54
Feb 11 2017 00:18
sweet thanks
@skycoder01 thanks
CamperBot
@camperbot
Feb 11 2017 00:18
jamesjd54 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 176 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 11 2017 00:19
I don't have the link to font awesome in my history so it's easier to give that
runnerbill75
@runnerbill75
Feb 11 2017 00:19
it worked, hooray!!
jamesjd54
@jamesjd54
Feb 11 2017 00:20
its cool that got me right to it, issue solved
Gulsvi
@gulsvi
Feb 11 2017 00:22
@runnerbill75 :clap: congrats I see the file now at: https://runnerbill75.github.io/Zamperini1.jpg
runnerbill75
@runnerbill75
Feb 11 2017 00:29
awesome! I really appreciate your help.
jamesjd54
@jamesjd54
Feb 11 2017 00:31
can someone link me to something that explains api's better than the freecodecamp tutorials on it?? i went throught he json and ajax stuff and am now building the quote machine but really feel i have no understands of what I'm actually doing
ive formatted my page so far and have it so my button returns something different, but i now need to actually add the api
Daniel
@danielbyun
Feb 11 2017 00:43
hey guys, my website is loading fine on firefox but not loading on chrome?!
works in incognito mode
Thomas Mullen
@t-mullen
Feb 11 2017 00:49
@danielbyun Link to the site?
Tony
@FreakishLancer
Feb 11 2017 01:09
Been adding some more touches to my Simon game and still can't quite figure out how to make the game state reset to original when pressing the power/play button on and off and on again (I just ended up disabling it so the user can't break it). Can anyone help? http://codepen.io/Freaklancer/pen/BpOEvO
Daniel
@doodleslr
Feb 11 2017 01:22
Hey guys does anyone have good knowledge of .when() and .then()?
I've made global array variables and assigned json data to the variables inside the .when() functions but they act local so i can't refer to the variable inside my .then() function it's just returning the original empty array variable
vanessamuller
@vanessamuller
Feb 11 2017 01:25
hey does anyone know why geolocation might not be working in codepen?
it is also not working on my local host
Daniel
@doodleslr
Feb 11 2017 01:26
does it say something about requiring https?
vanessamuller
@vanessamuller
Feb 11 2017 01:26
I have the same code that I have on free code camp
it said something about that before so I went to the settigns and local host is supposed to have a excepetion so that geolocation can be accessed
but the local host is not showing my geolocation
I thought if I did it on an outside editor and launch a local host I would be able to get it but it doesn't seem that way
Daniel
@doodleslr
Feb 11 2017 01:28
i think it blocks it since it's accessing a local file and assumes it's for some malicious purpose, you can try
http://ip-api.com/json
i've had good results getting lat and lon with it if that's what you're chasing
vanessamuller
@vanessamuller
Feb 11 2017 01:28
yes that's what im looking for
thank you I'll read the documentation to see how to use that api
Daniel
@doodleslr
Feb 11 2017 01:28
no worries
can anyone figure out why my userWeather variable wont work in my .then() function?
var arrLocat = [];//location
var userURL = "";
var userWeather = [];

$(document).ready(function(){
  $.when(//waits for both GET requests to complete
    //first JSON request
    $.getJSON("http://ip-api.com/json", function (data){
     arrLocat = data;
     userURL = "http://api.openweathermap.org/data/2.5/weather?lat=" + arrLocat.lat + "&lon=" + arrLocat.lon + "&appid=61c4ebe6f40d2e2d7085e7c42d287e1d&units=metric";
      //second JSON request
     $.getJSON(userURL, function(index){
       userWeather = index;
       //console.log(userWeather);//this one works!
     });
    })
    //end when, GET waiting
  ).then(function(){//do stuff here to update page
    $("#locat").text(arrLocat.city + ", " + arrLocat.regionName + ", " + arrLocat.country);
    console.log(userWeather);//wont log, the userWeather doesnt carry
  });


});
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:31
@doodleslr This is an example I made this morning, with the data getting passed back from the async functions to the .then() method: http://s.codepen.io/TylerMoeller/pen/bgQYQe
Daniel
@doodleslr
Feb 11 2017 01:31
arrLocat works in the console.log at the bottom but userWeather does not..??
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:32
For the weather app, you shouldn't need to do that though - it can all go in the callback function where you have "this one works!"
Daniel
@doodleslr
Feb 11 2017 01:34
i was hoping to have all the data required and use that to personalise the page based on the weather, but since its all async i thought i'd let it wait until all the json had loaded and then begin "prettying" up the page
hence the when and then
Skullvapor
@Skullvapor
Feb 11 2017 01:35
How can I make this F work so that it is next to the word? https://codepen.io/Skullvapor/pen/JEvVzv?editors=1100
Daniel
@doodleslr
Feb 11 2017 01:36
would it be better to write the function in .then as a variable as in your example instead of lumping all the code it all in the .then? @TylerMoeller
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:36
@doodleslr You can do all of that like:
$.getJSON(locationUrl, function(locationData) {
  // use locationData to construct the weather url
  $.getJSON(weatherUrl, function(weatherData) {
    // access locationData and weatherData here
    // or pass it to a function: displayData(locationData, weatherData);
  });
});
rachiscuy
@rachiscuy
Feb 11 2017 01:38

This is probably really trivial for most of you, I posted in the regular "help" chat but haven't had any responses. Can someone take a look at this and tell me where I've gone wrong?

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<form type="button" class="btn btn-primary"></form>
<form type="button" class="btn btn-primary"></form>
<form type="button" class="btn btn-primary"></form>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<form type="button" class="btn btn-primary"></form>
<form type="button" class="btn btn-primary"></form>
<form type="button" class="btn btn-primary"></form>
</div>
</div>
</div>
</div>

Nest three button elements within each of your div elements with class well.
You should have a total of 6 button elements.
Make sure all your button elements have closing tags.
HALP

Daniel
@doodleslr
Feb 11 2017 01:38
but any visuals i need to do would happen before the json loads like that, i'll deal with that bridge when i come to it though
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:39
@rachiscuy Where is your <button> element?
Daniel
@doodleslr
Feb 11 2017 01:39
it's just the userWeather = index not carrying over from the .when to the .then
rachiscuy
@rachiscuy
Feb 11 2017 01:40
@TylerMoeller got it, thank ya!
CamperBot
@camperbot
Feb 11 2017 01:40
rachiscuy sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1482 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
vanessamuller
@vanessamuller
Feb 11 2017 01:44
can anyone tell me what I am doing wrong? The alert says that the value is undefined and I don't get why
Daniel
@doodleslr
Feb 11 2017 01:44
but that makes it local to the .when, but i made it global outside so i can get it into the .then
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:45
$.when runs deferred objects all at once and holds on to their data until they report back. In .then() you can process their return values.
vanessamuller
@vanessamuller
Feb 11 2017 01:45
hey can anyone tell me what I'm doing wrong? when the alert appears it tells me the value is undefined

$(document).ready(function(){
var lat;
var lon;

$.getJSON("http://ip-api.com/json",function(data){
lat = data.lat;
lon = data.lon;

});

alert(lat);
});

Tyler Moeller
@TylerMoeller
Feb 11 2017 01:45
If you want to try and use $.when for this, you'll need to create separate functions, wrap them in $.Deferred and resolve their data when complete
Daniel
@doodleslr
Feb 11 2017 01:46
hmmmmmmmm
ok i'll check out deferred objects, thank you @TylerMoeller
CamperBot
@camperbot
Feb 11 2017 01:47
doodleslr sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1483 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:47
@vanessamuller It's a similar issue to what @doodleslr is facing. $.getJSON is asynchronous. It takes some time to go out to the server and get the location data. By the time that data comes back, your alert(lat); has already run.
Put everything inside the function(data) { } portion of your $.getJSON
vanessamuller
@vanessamuller
Feb 11 2017 01:47
yes when I ut the alert inside it does work
but I am actually doing the alert to test if it was working I actually need the lat and lon for another api
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:48
@vanessamuller Maybe this code example would help: :point_up: February 10, 2017 5:36 PM
vanessamuller
@vanessamuller
Feb 11 2017 01:49
ok great let me take a llok at that thanks!
eshaffer321
@eshaffer321
Feb 11 2017 01:50

Hey guys I have a question! I wanted to edit an image thats in a div class using css but i can't get it to work. Let me know what I'm doing wrong

<div class = "media1">
<h2>GitHub</h2>
<a href="#"> <img class ="image" src="https://image.flaticon.com/icons/svg/25/25231.svg" ></a>
<p>Check out some of my public repositories and open source contributions</p>
</div>

CSS FILE
.media1 > a {

width: 100px;

}

if i use .media1 > img {} it doesnt work either
Daniel
@doodleslr
Feb 11 2017 01:51
@eshaffer321 put your code between three ``` on the top and bottom makes it easier to read
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:51
@vanessamuller It's similar to doing this:
$.getJSON("http://ip-api.com/json", function(data){
  alertMyLocation(data);
});

function alertMyLocation(data) {
  var lat = data.lat;
  var lon = data.lon;  
  alert(lat)
}
eshaffer321
@eshaffer321
Feb 11 2017 01:51
''' <div class = "media1">
<h2>GitHub</h2>
<a href="#"> <img class ="image" src="https://image.flaticon.com/icons/svg/25/25231.svg" style="width: 100px"></a>
<p>Check out some of my public repositories and open source contributions</p>
</div>
'''
CamperBot
@camperbot
Feb 11 2017 01:51
:bulb: to format code use backticks! ``` more info
Daniel
@doodleslr
Feb 11 2017 01:51
backtick, next to the number 1 on the left
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:52
Press the up arrow to edit your post :)
eshaffer321
@eshaffer321
Feb 11 2017 01:53
This message was deleted
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:53
```html
your html goes here
```
or
```css
your CSS goes here
```
Shift+Enter for a new line
vanessamuller
@vanessamuller
Feb 11 2017 01:53

$(document).ready(function(){
var lat;
var lon;

$.getJSON("http://ip-api.com/json",function(data){
lat = data.lat;
lon = data.lon;

      var api = "api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+lon+"&APPID=cadef13c885fc3c4131bed504a6caaf2";

   $.getJSON(api,function(trob){
     alert(lat);


  });

});

Tyler Moeller
@TylerMoeller
Feb 11 2017 01:55
@vanessamuller Close, try this instead:
$.getJSON("http://ip-api.com/json", function(data) {
  var lat = data.lat;
  var lon = data.lon;
  var api = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=cadef13c885fc3c4131bed504a6caaf2";

  $.getJSON(api, function(trob) {
    alert(lat);
  });
});
Need to use var and http://
eshaffer321
@eshaffer321
Feb 11 2017 01:55
     <div class = "media1">

                    <h2>GitHub</h2>

                        <a href="#"> <img class ="image" src="https://image.flaticon.com/icons/svg/25/25231.svg" style="width: 100px"></a>

                            <p>Check out some of my public repositories and open source contributions</p>

.media1 > img {

width: 100px;

}

             </div>
             ```
vanessamuller
@vanessamuller
Feb 11 2017 01:55
oh ok yeah I totally missed that thanks @TylerMoeller I'll try it now
CamperBot
@camperbot
Feb 11 2017 01:55
vanessamuller sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1484 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
vanessamuller
@vanessamuller
Feb 11 2017 01:57
omg thanks! I've been fighting with this for two days now @TylerMoeller
CamperBot
@camperbot
Feb 11 2017 01:57
vanessamuller sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: vanessamuller already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:57
@eshaffer321 All you have to do is refer to the class of the image:
.image {
  width: 100px;
}
No problem @vanessamuller happy coding :)
eshaffer321
@eshaffer321
Feb 11 2017 01:58
how do i pick a specific class that the img is in
so like
<div class= "hey">

<img src="#">

</div>
i want to edit only the image inside the hey class
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:59
@eshaffer321 You can define the class:
<img class="whatever-name-you-want-to-use" src="#">
eshaffer321
@eshaffer321
Feb 11 2017 01:59
ohhh yeah!
thanks :)
Tyler Moeller
@TylerMoeller
Feb 11 2017 01:59
:+1:
eshaffer321
@eshaffer321
Feb 11 2017 02:00
ur the best!
joopt
@joopt
Feb 11 2017 02:05
anyone know how to make my submit button into a link?
  <input id ="randArticle" type="submit" value="Random article" style="margin-bottom: 20px; margin-left: 10px;"><a href="https://en.wikipedia.org/wiki/Special:Random"></a></input>
Ayush Bahuguna
@relentless-coder
Feb 11 2017 02:06
Hi, I need help with setting up LiveReload with gulp-connect
var gulp = require('gulp');
var connect = require('gulp-connect');
var eslint = require('gulp-eslint');
gulp.task('lint', function(){
    return gulp.src('/app.js')
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});

gulp.task('connect', function() {
  connect.server({
      livereload: true,
      root: '/home/ayush/Desktop/Starter/'
      });
});

gulp.task('livereload', function () {
  gulp.src('/index.htm')
    .pipe(connect.reload());
});

gulp.task('watch', function () {
  gulp.watch('/index.htm', ['livereload']);
});

gulp.task('serve', ['connect', 'livereload', 'watch']);

gulp.task('debug', ['lint']);
Gulsvi
@gulsvi
Feb 11 2017 02:13
@joopt Just make it a link and style it like a button:
<a class="btn btn-secondary" target="_blank" href="https://en.wikipedia.org/wiki/Special:Random">Random article</a>
jassonsgs
@jassonsgs
Feb 11 2017 02:34
Guys I'm right at the beginning of the tribute page challenge, I just want to know if I have to build the tribute web page on my own totally or are there instructions to follow
im I on my owm now, that's all I want to know
Gulsvi
@gulsvi
Feb 11 2017 02:36
No more instructions - just forums, bootstrap documentation, youtube, and this chat room
jassonsgs
@jassonsgs
Feb 11 2017 02:36
sounds like a real challenge, thanks.
Gulsvi
@gulsvi
Feb 11 2017 02:37
eightball will jassonsgs make a nice tribute page?
CamperBot
@camperbot
Feb 11 2017 02:37
@SkyCoder01 :8ball: you may rely on it :sparkles:
Gulsvi
@gulsvi
Feb 11 2017 02:37
:)
my story
alican karalar
@alicankaralar
Feb 11 2017 02:57
sky ure still here :)
Gulsvi
@gulsvi
Feb 11 2017 02:58
And I still haven't finished my twitch app :p but almost have chunky monkey figured out I think
Lorrie Pearson
@Lorrie01
Feb 11 2017 03:00
@SkyCoder01 I'm still working on my twitch app too :smile:
Gulsvi
@gulsvi
Feb 11 2017 03:03
I need to set a goal, definitely by Sunday
Tony
@FreakishLancer
Feb 11 2017 03:13
Managed to (I hope) fix all bugs in my Simon game. Hope it works correctly now. What do you guys think? https://codepen.io/Freaklancer/full/BpOEvO/
alican karalar
@alicankaralar
Feb 11 2017 03:14
@SkyCoder01
i've managed it with another dynamically html method
rather than hardcoding each tag into html
i used js to create them
example
//create a list element inside the ul
          var newList =  document.createElement('li');
          //give it classes
          newList.className = "links-card " + status();
          //append it under desired node (channels-list in this case)
          document.getElementById('channels-list').appendChild(newList);
this goes on about a long period
but the end product is perfect
alican karalar
@alicankaralar
Feb 11 2017 03:21
@karannandha well done man :) i hope u reach your goals without any hassle, i also quit landscape architecture due to not similar reasons, but we share something :)
Karan Nandha
@karann7
Feb 11 2017 03:22
@alicankaralar Dope! Thanks! Lets work on a project and pair program sometime . I live in Sacramento, CA so if your in the same time zone that be great
CamperBot
@camperbot
Feb 11 2017 03:22
karannandha sends brownie points to @alicankaralar :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @alicankaralar |http://www.freecodecamp.com/alicankaralar
Stephan Sharps
@ssharps711
Feb 11 2017 03:27
I'm on the portfolio page and I'm completely lost.
I feel like I didn't learn anything
Gulsvi
@gulsvi
Feb 11 2017 03:31
@alicankaralar Nicely done :)
alican karalar
@alicankaralar
Feb 11 2017 03:31
i am living in istanbul / turkey @karan :)
Karan Nandha
@karann7
Feb 11 2017 03:31
@ssharps711 I can help you make a portfolio page
alican karalar
@alicankaralar
Feb 11 2017 03:31
@karannandha
Gulsvi
@gulsvi
Feb 11 2017 03:32
I used template literals for wikipedia and it helped me with the dynamic HTML. Each search result gets written like normal HTML:
      $('#results').append(
        `<a class="article animated slideInUp" target="_blank" href="${data[3][i]}">
           <p class="article-title">${data[1][i]}</p>
           <p class="article-extract">${data[2][i]}</p>
         </a>`
      );
except the variables in ${}
Karan Nandha
@karann7
Feb 11 2017 03:32
gotcha @alicankaralar
alican karalar
@alicankaralar
Feb 11 2017 03:32
hmm that $ variables
are they angular?
or is it a feature in jquery? i didn't know that method
Gulsvi
@gulsvi
Feb 11 2017 03:33
No, it's pure javascript
Stephan Sharps
@ssharps711
Feb 11 2017 03:33
@karannandha will you? I'm lost.
alican karalar
@alicankaralar
Feb 11 2017 03:33
wow man, i escaped every "" before this method seems way better
Gulsvi
@gulsvi
Feb 11 2017 03:34
You could do something like:
var html = 
          `<a class="article animated slideInUp" target="_blank" href="${data[3][i]}">
           <p class="article-title">${data[1][i]}</p>
           <p class="article-extract">${data[2][i]}</p>
         </a>`;
document.getElementById('someID').appendChild(html)
alican karalar
@alicankaralar
Feb 11 2017 03:34
yep that works too
hey what is this target attribute for in anchor?
i mean what does target:blank do
Gulsvi
@gulsvi
Feb 11 2017 03:34
It opens it in a new tab
alican karalar
@alicankaralar
Feb 11 2017 03:35
aha
cool :)
let me know about your progress in twitch
Gulsvi
@gulsvi
Feb 11 2017 03:36
I hope to finish on Sunday now :)
alican karalar
@alicankaralar
Feb 11 2017 03:36
but @karannandha lets try a pair program anyways, i try to sleep early and wake up midnight for coding when everything is silent it is much easier to concentrate
i live in a busy place so there are honks and people and everything
during the day
Karan Nandha
@karann7
Feb 11 2017 03:37
@ssharps711 do you have google hangouts??
@alicankaralar okay lets do it. Let me know what you would wanna work on, even if its just solving algorithms
jassonsgs
@jassonsgs
Feb 11 2017 03:40
hey guys how do I upload an image from my desktop
tribute page
jassonsgs
@jassonsgs
Feb 11 2017 03:43
I love you guys, really trying to open my mind by having me research
kudos
jassonsgs
@jassonsgs
Feb 11 2017 03:49
will this work on codepen, because I already tried it and doesn't seem to upload
<img src="jesusmercedes en ofensiva.jpg"/>
alican karalar
@alicankaralar
Feb 11 2017 03:52
well i don't have anything right now, what is your progress at the moment?
i mean i'm about to finish twitch and move on to algoritms again
then i will have the advanced front end project
i guess we can collaborate there
jassonsgs
@jassonsgs
Feb 11 2017 03:53
help please
alican karalar
@alicankaralar
Feb 11 2017 03:53
advanced front end projects
would be good
@jassonsgs what is it
jassonsgs
@jassonsgs
Feb 11 2017 03:57

will this work on codepen, because I already tried it and doesn't seem to upload

<img src="jesusmercedes en ofensiva.jpg

I'm trying to upload this image from my desktop
intead of the web
jassonsgs
@jassonsgs
Feb 11 2017 04:08
is the question unclear?
Paulo Tokimatu
@paulotokimatu
Feb 11 2017 04:28
@jassonsgs Maybe I did not understand the question, but if you want to use a local image in codepen, you need to host the image in some site like imgur or similar sites
Gulsvi
@gulsvi
Feb 11 2017 04:59
@jassonsgs @paulotokimatu Don't use imgur, codepen blocks requests from them. Lots of people use https://postimage.io
Ken Haduch
@khaduch
Feb 11 2017 05:00
@jassonsgs - the answer is that you cannot do that - an image on your desktop cannot be accessed from the web, unless you've made your desktop a web server with a way to access it from the web. As @paulotokimatu said - for use on CodePen (unless you get a premium account on CodePen, where you can then upload some resources) you have to host your image on a site like postimg.org, or dropbox, or amazon web services, and provide a full URL for the image so that it can be loaded in codepen. and as @SkyCoder01 just posted - imgur is a little tricky to use, they block external cross-link references to the images.
Paulo Tokimatu
@paulotokimatu
Feb 11 2017 05:01
@SkyCoder01 Oh, I see. Nice to know, thanks
CamperBot
@camperbot
Feb 11 2017 05:01
paulotokimatu sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 177 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 11 2017 05:01
You can also upload to github. See instructions I gave earlier here and replace your github username with runnerbill75: :point_up: February 10, 2017 4:17 PM
joopt
@joopt
Feb 11 2017 05:13
@SkyCoder01 thanks missed your reply
CamperBot
@camperbot
Feb 11 2017 05:13
joopt sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 178 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ken Haduch
@khaduch
Feb 11 2017 05:15
@SkyCoder01 - thanks for the tip on setting up the github repo - I haven't done that yet and I made a note of it for when I need to do it! :)
CamperBot
@camperbot
Feb 11 2017 05:15
:cookie: 179 | @skycoder01 |http://www.freecodecamp.com/skycoder01
khaduch sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
joopt
@joopt
Feb 11 2017 05:20
hey guys just completed the wiki viewer app can anyone give me some feedback? much appreciated https://codepen.io/cckid/full/wgYgPz/
Priyanka
@pd21
Feb 11 2017 06:21
@joopt it works fine..:) the font size of the body is larger than the heading "Search for.." Just a suggestion you can alternate that
@joopt all the functions you have incorporated nicely..:)
Steve Robison
@ikisteve
Feb 11 2017 06:53
Hello, I need some help with my portfolio project. I am trying to use bootstrap to style the Navbar, but when I define the classes for the navbar, it is not appearing in the browser. http://codepen.io/steverobison/pen/PWyVQX
Seth
@sethmchris
Feb 11 2017 07:02
@ikisteve Try linking to the current stable version of bootstrap:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Steve Robison
@ikisteve
Feb 11 2017 07:03
Oh awesome! That worked, thank you.
Okay another problem, now my text is floating underneath my img in my header section.
Ahmed Shawky
@Ahmed-ShawkyEgy
Feb 11 2017 07:09
hey guys I have a question
now I have a simple JS code
it makes an ajax call when the page is loaded and then updates the html of some elements
after debugging I found out that the code that is responsible for updating the html is executed before the ajax is called
how can I make this code execute after the ajax is called???
http://codepen.io/Ahmed_Shawky/pen/rjQzGP?editors=1010
Seth
@sethmchris
Feb 11 2017 07:11
@ikisteve Try adding whatever padding you need to your body in the CSS. According to the Bootstrap docs, a fixed navbar will overlay your other content https://getbootstrap.com/components/#navbar-fixed-top
Sorin Ruse
@sorinr
Feb 11 2017 07:16
@Ahmed-ShawkyEgy instead of for(var i = 0;i<users.length;i++) try to use array.each function
@Ahmed-ShawkyEgy the for loops dont wait for your asynchronous ajax call to get a response back
Ahmed Shawky
@Ahmed-ShawkyEgy
Feb 11 2017 07:21
@sorinr Still not working :worried:
Sorin Ruse
@sorinr
Feb 11 2017 07:25
@Ahmed-ShawkyEgy see where are u defining api1, param[0] etc you are trying to use them before they r defined
@Ahmed-ShawkyEgy so you need first to define your variables and after use them
Ahmed Shawky
@Ahmed-ShawkyEgy
Feb 11 2017 07:27
@sorinr they are declared at the begining of the loop and defined inside the ajax and after that they are used after the ajax call
Mike Boardley
@Boardley
Feb 11 2017 07:29
:mute:
Steve Robison
@ikisteve
Feb 11 2017 08:08
Thank you for the help <3
eshaffer321
@eshaffer321
Feb 11 2017 08:15
can someone help me with this html/css? i want to be able to select an image from within a class and edit it with css but its not working.
<div class = "media1">

           <h2>GitHub</h2>

           <a href="#"> <img class 
="image1"
 src="https://image.flaticon.com/icons/svg/25/25231.svg" ></a>

        <p>Check out some of my 

         public repositories and open         source 

contributions</p>

        </div>


.media1 > .image1 {


    width: 100px;


}
Seth
@sethmchris
Feb 11 2017 08:19
@eshaffer321 If you want to use the child selector, there's no need for class names, simply use the selector names. If you need more specificity, maybe you could try an id?
eshaffer321
@eshaffer321
Feb 11 2017 08:19
@sethmcrhis so would it be .media1 > img? if that is what your referring to
Sorin Ruse
@sorinr
Feb 11 2017 08:21
@eshaffer321 instead of this .media1 > .image1 it should work just fine .image1 or img.image1
eshaffer321
@eshaffer321
Feb 11 2017 08:22
ohh i see! worked perfectly thanks a lot! ill research more about child selectors @sorinr
CamperBot
@camperbot
Feb 11 2017 08:22
eshaffer321 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1166 | @sorinr |http://www.freecodecamp.com/sorinr
ndaude
@ndaude
Feb 11 2017 10:11
Hey guys. I am new here and I'm starting in frontend development and I am currently working in the Tribute Page project. I'd like to know if I have to build a tribute page of a different person or I can build the same page (Dr. Norman Borlaug).
Piotr Małecki-Jurek
@piotr-m-jurek
Feb 11 2017 10:13
@ndaude i think the idea is to make about your mentor or famous person you admire, but if you make tribute page of the same person, but make it a bit different it'll be ok
;)
ndaude
@ndaude
Feb 11 2017 10:14
Thanks a lot @piotr-m-jurek ;)
CamperBot
@camperbot
Feb 11 2017 10:14
ndaude sends brownie points to @piotr-m-jurek :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @piotr-m-jurek |http://www.freecodecamp.com/piotr-m-jurek
Nathalie
@nattilyb
Feb 11 2017 10:19
anyone else just go to Codecademy's HTML and CSS course, as instructed on here, and find that they're not offering it until summer--updating to HTML5 ... ugh :(
h1tag
@h1tag
Feb 11 2017 10:22
@nattilyb where's this mentioned?
Nathalie
@nattilyb
Feb 11 2017 10:23
@fortMaximus in the lesson Web Development 101
h1tag
@h1tag
Feb 11 2017 10:24
where's that? xD
Nathalie
@nattilyb
Feb 11 2017 10:24
@fortMaximus I'm not sure what you're asking
h1tag
@h1tag
Feb 11 2017 10:25
where's is this lesson? I can't find it
Nathalie
@nattilyb
Feb 11 2017 10:28
@fortMaximus under assignment, after points to ponder, on here: http://www.theodinproject.com/courses/web-development-101/lessons/html-and-css-basics?ref=lnav
h1tag
@h1tag
Feb 11 2017 10:29
@nattilyb this is not FCC
Nathalie
@nattilyb
Feb 11 2017 10:31
@fortMaximus sorry, I'm not sure what you mean by FCC, but I'm assuming you're telling me this the wrong place to talk about that topic
h1tag
@h1tag
Feb 11 2017 10:31
yea, this chat is for https://www.freecodecamp.com/
@nattilyb are you on freecodecamp?
Nathalie
@nattilyb
Feb 11 2017 10:33
@fortMaximus oh, i'm on TOP
h1tag
@h1tag
Feb 11 2017 10:33
how did you end here? xD
Nathalie
@nattilyb
Feb 11 2017 10:34
@fortMaximus that's weird, I don't even know, now that I see where I am, I've never seen this chat room before
mustimuu
@mustimuu
Feb 11 2017 10:46
can someone help me ?
h1tag
@h1tag
Feb 11 2017 10:51
@mustimuu what do you need help with?
mustimuu
@mustimuu
Feb 11 2017 10:52
@fortMaximus
i want my button to bounce
want to see my code? i want to do it with jquery
h1tag
@h1tag
Feb 11 2017 10:53
yea, that's the same question as yesterday
idk how
check out my jquery
and dislike button
wtf
this isnst the right pen
why isnt it updated sec
this is the irght one
ndaude
@ndaude
Feb 11 2017 11:05
@mustimuu I just opened your project but I cant see the button
ndaude
@ndaude
Feb 11 2017 11:24
@mustimuu I am not sure if i got your question right but to make a button bounce you must add this code to make the button bounce:
$( "#target1" ).click(function() {
$( "#target1" ).addClass("animated bounce");
});
Rebecca
@RebeccaLouiseM
Feb 11 2017 11:30
@mustimuu if you want to use the bounce effect which you have in your code you also need jQueryUI along with jQuery. Try adding <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> in the “Stuff for head” section in the settings.
alamdar786
@alamdar786
Feb 11 2017 11:40
guys
i am using thumbnail bootstrap class
how to bring my image to the center?
alican karalar
@alicankaralar
Feb 11 2017 11:47
hi guys i would appreciate some help
there are inconsistencies with the api returns
one time it returns online, the other it returns offline
whats going on?
Rebecca
@RebeccaLouiseM
Feb 11 2017 11:50
@alicankaralar are you talking about the users? these are real users. The results you get wont always be the same. It depends if they are online or not.
alican karalar
@alicankaralar
Feb 11 2017 11:50
@RebeccaLouiseM
when you refresh the page
for like 3-4 times
you'll know what i mean
all the returns are random
it doesn't make any sense but i make a correct request i assume
i don't know... maybe my method is not right, i'd like to hear some perspectives on this
i mean the getJSON method
Phiggins567
@phiggins567
Feb 11 2017 11:58

Does anyone know how to change the text of a button when its been clicked? I'm working on the local weather challenge and want the button to switch between "C" and "F". I've got the temperature changing just not the button.

http://codepen.io/phiggins567/pen/pRxpvV?editors=1010

Tony
@FreakishLancer
Feb 11 2017 12:05
@phiggins567 You could make a boolean variable at the top of your JS, then change the text according to the state of the variable.
Something like isMetric ? " metres/sec" : " miles/hour";
And then change " metres/sec" on line 22 to a variable speedUnit and change the text whenever you click the button.
krckyboy
@krckyboy
Feb 11 2017 12:19

Inside of @keyframes animation - can you select different elements, modify their elements or you can only select one (for example h1, and that's it)?

Some kind of noob example:

@keyframes animation {
    h1 {
        <!-- some kind of animation here -->
    }

    h2 {
        <!-- some kind of animation here, as well -->
    }
}
Philipp Scholz
@philipp32
Feb 11 2017 12:20
Hey friends, I have a problem.
http://codepen.io/philipp32/full/QdrgYR/
Just enter any valid twitch channel name into the search bar and press enter. The error in the console is "Cannot read property "8" of undefined." I google the error message and it seems that I have defined something before executing the function except I didn't. Can you please help me?
Tony
@FreakishLancer
Feb 11 2017 12:21
@philipp32 I am getting a jsonData[0] is undefined.
Phiggins567
@phiggins567
Feb 11 2017 12:23
@FreakishLancer thanks! On the right track now
CamperBot
@camperbot
Feb 11 2017 12:23
phiggins567 sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 367 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Philipp Scholz
@philipp32
Feb 11 2017 12:23
@FreakishLancer I do not. Very weird.
Here is an example API call.
Tony
@FreakishLancer
Feb 11 2017 12:25
@philipp32 If I remember correctly, you shouldn't use array notation for a JSON object.
You would do something like jsonData.stream.channel.display_name
@phiggins567 No problem. Always glad to help.
Philipp Scholz
@philipp32
Feb 11 2017 12:33
@FreakishLancer Didn't help. :/
Tony
@FreakishLancer
Feb 11 2017 12:39
@philipp32 Hmm, give me a few minutes and I will try to see what is wrong with your code. In the meantime, I recommend you download a JSON viewer plugin for your browser if you already haven't.
Philipp Scholz
@philipp32
Feb 11 2017 12:42
Thank you. :)
Probably a wrong notation or something. I am trying to figure that out right now.
Spyrantis Theodoros
@thodorisanta
Feb 11 2017 12:45

I need help with the javascript on the calculator project. How should i start?

https://codepen.io/oshikurou/pen/WRyJwm?editors=0100

viorelfoamete
@viorelfoamete
Feb 11 2017 12:49

<div class="container-fluid">
<nav class="navbar navbar-default">
<a class="navbar-brand" href="#">Logo</a>
<div class="collapse">
<ul class="nav navbar-nav pull-right">
<li class="nav-item">Home</li>
<li class="nav-item">Projects</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
</div>

Can YOU guys please help me? Why my li items won't move to the right? I don't get it..

Tony
@FreakishLancer
Feb 11 2017 12:52
@philipp32 It seems that you have an error with your searchTerm initialization. It doesn't seem to input the streamer I put into the search bar.
@philipp32 You need to initialize your searchTerm after you hit the enter button. I placed var searchTerm = $("#search-bar").val(); just after your bind() but before the JSON call and it seems to get the appropriate data (also fix the json[0] stuff).
Philipp Scholz
@philipp32
Feb 11 2017 12:57
@FreakishLancer THANK YOU!!!
CamperBot
@camperbot
Feb 11 2017 12:57
philipp32 sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Tony
@FreakishLancer
Feb 11 2017 12:57
This will help:
$('#search-bar').bind("enterKey",function(e){
  var searchTerm = $("#search-bar").val();
  $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + searchTerm + "?callback=?", function(jsonData) {
    window.profileBannerLink = jsonData.stream.channel.profile_banner; /* [9][12]*/
    window.profileName = jsonData.stream.channel.display_name;
    /*window.profileLink=jsonData[0][21][0];*/
    console.log(jsonData);
    console.log(profileName);

  });
});
@philipp32 Np.
Philipp Scholz
@philipp32
Feb 11 2017 12:58
Let me give you a thousand kisses.
Radek
@radekjohn
Feb 11 2017 12:58
Hi, please, do you see your location and weather icon? http://codepen.io/radekjohn/full/wgEjdj/
Tony
@FreakishLancer
Feb 11 2017 12:59
@philipp32 Also remember ofc, if the streamer is offline, the stream object within the JSON data will be null.
h1tag
@h1tag
Feb 11 2017 12:59
@radekjohn yes :+1:
@Ahmed-ShawkyEgy how did you solve the problem you had earlier today?
Ahmed Shawky
@Ahmed-ShawkyEgy
Feb 11 2017 13:04
@fortMaximus I nested the code inside the (succes) function
It turned out that JS executed the the code in a non-sequential manner
Radek
@radekjohn
Feb 11 2017 13:05
@fortMaximus thanks
CamperBot
@camperbot
Feb 11 2017 13:05
radekjohn sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Spyrantis Theodoros
@thodorisanta
Feb 11 2017 13:12

I need help with the javascript on the calculator project. How should i start?

https://codepen.io/oshikurou/pen/WRyJwm?editors=0100

Tony
@FreakishLancer
Feb 11 2017 13:13
@thodorisanta You can start by setting up the click functions for each of your buttons. Something like $("#buttons").on("click", () => { [your behavior here] });
You should find a way to differentiate between your numbers and your operations. When I did the project, I gave the numbers and the operations a different class in the HTML.
Also, your buttons do not seem to line up for me. You could try putting them in a table to align them more easily.
Deepak8717
@Deepak8717
Feb 11 2017 13:42
Hello all, I just built my first FCC front end project. I want someone to review my code and provide some idea what else can be added.
Johnny
@JohnnyBizzel
Feb 11 2017 13:43
@radekjohn Good work.
Alesandra
@petraboot
Feb 11 2017 14:12
Hi, I just started working in CodePen, I have bootstrap and wrote <div class="well"></div> but somehow I don't see in codepen the effect for this (grey rectangle). Is this normal? Or did I messed up something?
Alesandra
@petraboot
Feb 11 2017 14:15
@fortMaximus - what should I do with this? Write it into my code? in html part?
h1tag
@h1tag
Feb 11 2017 14:15
@petraboot add it from the CSS settings
Sorin Ruse
@sorinr
Feb 11 2017 14:16
@thodorisanta here some js inspiration part for the calc
Alesandra
@petraboot
Feb 11 2017 14:17
@fortMaximus - thank you. why this one works and the other one doesn't? what's the difference?
CamperBot
@camperbot
Feb 11 2017 14:17
petraboot sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Feb 11 2017 14:18
@petraboot The one that Codepen adds by default is still in alpha
Deepak8717
@Deepak8717
Feb 11 2017 14:20
Can anyone review my code.
Alesandra
@petraboot
Feb 11 2017 14:20
oh, ok
Amit Patel
@AmitP88
Feb 11 2017 14:22
Hey guys, I really need some help. I'm trying to get my modals to work with my JSON code, but I keep getting the modals contents as 'undefined'. Repo: https://github.com/AmitP88/Khmer-Family-Cafe/tree/gh-pages Demo: https://amitp88.github.io/Khmer-Family-Cafe/
modal-error.png
I've reviewed my code and I have no clue why this isn't working :worried:
Sorin Ruse
@sorinr
Feb 11 2017 14:27
@AmitP88 try to load bootstrap.js after jquery
@AmitP88 as you can see here http://getbootstrap.com/javascript/#modals modals needs the js part of bootstrap
@Deepak8717 just share your codepen link with us
Amit Patel
@AmitP88
Feb 11 2017 14:34
@sorinr hmmm, I tried that, but it still didn't work.
bts.png
Fabio
@Gentarozzo
Feb 11 2017 14:36
Hello everyone need an help for a button redirect...
I'm working for the quote machine and I'm not able to tweet the quote
can someone help me please?
Fabio
@Gentarozzo
Feb 11 2017 14:41
$('#tweet').on('click', function() { $(location).prop('href','https://www.google.it/?gfe_rd=cr&ei=TiGfWIaeAcn08Afn3YYw')
});
this button redirect me to nothing... why?
(from code pen)
devpaaji
@devpaaji
Feb 11 2017 14:51
"1,000"
"1,000"
print an integer with commas as thousands separators
Gulsvi
@gulsvi
Feb 11 2017 14:59
@Gentarozzo try using .attr() instead of .prop(). http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_attr_set
h1tag
@h1tag
Feb 11 2017 15:00
@Gentarozzo and I think you need to set target = "_blank" for the anchor element
Fabio
@Gentarozzo
Feb 11 2017 15:02
@fortMaximus already have that one... not working... also with tested link
h1tag
@h1tag
Feb 11 2017 15:03
@Gentarozzo share your pen
I need to tweet the quotes!
h1tag
@h1tag
Feb 11 2017 15:05
@Gentarozzo what's location in $('#tweet').on('click', function() { $(location).prop('href','https://www.google.it/?gfe_rd=cr&ei=TiGfWIaeAcn08Afn3YYw') }); ?
Fabio
@Gentarozzo
Feb 11 2017 15:06
Just trying some links
@fortMaximus just trying some links
h1tag
@h1tag
Feb 11 2017 15:07
no, what does location mean here in $(location).prop(...
?
Fabio
@Gentarozzo
Feb 11 2017 15:07
move to a location
@fortMaximus I've read that the "location" redirects you
@fortMaximus https://twitter.com/intent/tweet?hashtags=ninjaquotes'+ encodeURIComponent(autore)+'&content=' + encodeURIComponent(testo)
@fortMaximus I need this as a link... it's a link to twitter with two variables containing the quote
Spyrantis Theodoros
@thodorisanta
Feb 11 2017 15:09

how can i fix my buttons possitioning? if you notice the "0" "=" and "." button aren't align in the same way with the other buttons. So how can fix this?

https://codepen.io/oshikurou/pen/WRyJwm?editors=0100

h1tag
@h1tag
Feb 11 2017 15:10
@Gentarozzo use #tweet instead of location
Fabio
@Gentarozzo
Feb 11 2017 15:11
@fortMaximus it worked... this made me crazy... really THANKS, many many THANKS
CamperBot
@camperbot
Feb 11 2017 15:11
gentarozzo sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Feb 11 2017 15:11
YW :+1:
Sorin Ruse
@sorinr
Feb 11 2017 15:27
@AmitP88 then its something wrong in the html part. i would just grab an example from bootstrap docs and make it working. then change the styling and others to suit your needs
Christopher
@christopherwangemann
Feb 11 2017 15:28
can someone please tell me why my buttons don't stay centered when the window is made smaller? Thanks! http://codepen.io/ChristpherWangemann/pen/vypraO?editors=1100
Sorin Ruse
@sorinr
Feb 11 2017 15:35
@Deepak8717 do you have some questions you would like to ask about your pen?
Yevhen Diachenko
@EugeneDyachenko
Feb 11 2017 15:37
Hello, tell me pls. Why there is a white space on the left and right of the panel heading? what am I doing wrong?
http://codepen.io/EugeneDyachenko/pen/ZLmNEZ
Sorin Ruse
@sorinr
Feb 11 2017 15:40
@christopherwangemann so you want your abot,portfolio and contact btns to be centered on mobile?
Bgene
@Bgene
Feb 11 2017 15:43
how do I put a list and a heading nest to each other
like on the same row
Sorin Ruse
@sorinr
Feb 11 2017 15:44
@EugeneDyachenko add this in css:
div.panel-primary {
  padding: 0;
}
Yevhen Diachenko
@EugeneDyachenko
Feb 11 2017 15:45
Thanks!
Deepak8717
@Deepak8717
Feb 11 2017 15:46
@sorinr no just your feedback
Sorin Ruse
@sorinr
Feb 11 2017 15:50
@Deepak8717 you should try to improve your section's styling. positioning some other way your text and imgs will make your page no to look monotone
Bgene
@Bgene
Feb 11 2017 16:03
I want to place a heading and the options for my navigation bar on the same row
how do I do it?
Bgene
@Bgene
Feb 11 2017 16:17
But it doesn't show me how I can align my h1 with my ul
Alesandra
@petraboot
Feb 11 2017 16:27
what should I look for if I want to limit height of the image? (I don't want the image to be higher than screen height).
Sorin Ruse
@sorinr
Feb 11 2017 16:28
@petraboot add this in css max-height: 100vh;
Rimi.
@Codevotee
Feb 11 2017 16:28
@petraboot max-height probably
Benm
@ben7259123
Feb 11 2017 16:29
Hello! been working on portfolio project.. everything went smoothly except for navbar. I looked at bootstrap doc could not decipher it. Is there any resource which shows how to make a pretty basic navbar without scrolldowns? Also noticed most people are using javascript dont know that yet. thanks!
h1tag
@h1tag
Feb 11 2017 16:30
:point_up: February 11, 2017 6:04 PM @ben7259123
Rimi.
@Codevotee
Feb 11 2017 16:32
@ben7259123 I will show you what you can comment out from the Bootstrap navbar, to get a more simple one
just a sec
Benm
@ben7259123
Feb 11 2017 16:32
thanks!
Sorin Ruse
@sorinr
Feb 11 2017 16:34
i have no idea why people are still using ul-li combination for defining a menu when you can simply use <a> tags
using ul-li (a block element) will force you make it inline. so more code in css
h1tag
@h1tag
Feb 11 2017 16:36
@sorinr I didn't use <ul><li> in my project but I thought the one I linked looks nice
I thought that <ul><li> is better
Sorin Ruse
@sorinr
Feb 11 2017 16:37
@fortMaximus what was the reason that made you think ul-li its better the plain <a>?
@fortMaximus and inside li you placed an <a> tag. right?
h1tag
@h1tag
Feb 11 2017 16:38
maybe because it looked better than mine and I thought that's the right/ best way to create nav bars
Rimi.
@Codevotee
Feb 11 2017 16:38
@ben7259123 I commented out the dropdown menus and the form and you only get the other menus now:
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <!-- <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li> -->
      </ul>
      <!-- <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form> -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <!-- <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li> -->
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
h1tag
@h1tag
Feb 11 2017 16:40
@sorinr also, I think when you use lists, you don't have to work too much on positioning (padding)
Rimi.
@Codevotee
Feb 11 2017 16:40
@ben7259123 the navbar collapses on mobile devices, and if you want to move it more towards the middle, you can change div class="container-fluid" to div class="container"
Benm
@ben7259123
Feb 11 2017 16:40
thanks sooo much!!!
Rimi.
@Codevotee
Feb 11 2017 16:41
sorry for the long post
@sorinr the only reason I could think of is maybe because ul is a block-level element whilst a is an inline-level element, so it might be easier to use it, im not sure
@ben7259123 you're welcome
Sorin Ruse
@sorinr
Feb 11 2017 16:44
@fortMaximus @APRim05 here an example of using only one major inline element for an entire site
Rimi.
@Codevotee
Feb 11 2017 16:45
@sorinr nice haha
Jared de Guzman
@JDVariadic
Feb 11 2017 16:46
Hey Guys!
http://codepen.io/JDVariadic/pen/RRxEdP?editors=1010
Can anyone check the twitter button? It doesn't work.. Thanks!
kirbyedy
@kirbyedy
Feb 11 2017 16:51
@JDVariadic I dont quite understand your code, but can you tell me how is htmlQuote visible inside a tweet function, when its created inside a retrieveQuote function?
SebastianPag
@SebastianPag
Feb 11 2017 16:53
hi guys!
Jared de Guzman
@JDVariadic
Feb 11 2017 16:55
@kirbyedy oh, I forgot htmlQuote is out of scope.. Thanks!
CamperBot
@camperbot
Feb 11 2017 16:55
jdvariadic sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1769 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Sorin Ruse
@sorinr
Feb 11 2017 16:57
@JDVariadic this is a must when you have buttons with a border radius:
button{
  outline: none;
}
Jared de Guzman
@JDVariadic
Feb 11 2017 16:59
@sorinr thanks
CamperBot
@camperbot
Feb 11 2017 16:59
jdvariadic sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1167 | @sorinr |http://www.freecodecamp.com/sorinr
Alesandra
@petraboot
Feb 11 2017 16:59
@sorinr thx
CamperBot
@camperbot
Feb 11 2017 16:59
petraboot sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1168 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 11 2017 17:00
@petraboot @JDVariadic welcome
Ralph Nahra
@Rallph
Feb 11 2017 17:28

Hey can someone give me a hand? I'm having trouble aligning the elements in the bottom row with the top row

https://codepen.io/Rallph/pen/dNjVPK

h1tag
@h1tag
Feb 11 2017 17:33
@Rallph add <div class="col-3"></div> before and after <div class = "col-6 self-align-center item">Test</div> on row 31 in HTML
Ralph Nahra
@Rallph
Feb 11 2017 17:35
@fortMaximus that worked, thanks man!
CamperBot
@camperbot
Feb 11 2017 17:35
rallph sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Feb 11 2017 17:35
YW :+1:
@Rallph nice and clean design btw
Ralph Nahra
@Rallph
Feb 11 2017 17:42
@fortMaximus thanks :)
CamperBot
@camperbot
Feb 11 2017 17:42
rallph sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: rallph already gave fortmaximus points
Veronika Krukovich
@VKrukovich
Feb 11 2017 18:17
Clip2net_170211211601.png
how to find how many words "violet" in array A?
function LinearSearch(t, A) {
var A = arrLab4str[""];
var t = "violet";
var index, len;
for (index = 0, A[len] = t, len = A.length; index < len; ++index) {
console.log(A[index]);
}
}
Sorin Ruse
@sorinr
Feb 11 2017 18:32
@VKrukovich who is A[len]?
@VKrukovich where do you get len from?
vtarun
@vtarun
Feb 11 2017 18:33
Hi, i have a question . does media query work on child elements or siblings?
Veronika Krukovich
@VKrukovich
Feb 11 2017 18:42
@sorinr len is from var len it is length of array, how to write condition that if t belongs to A?
Sorin Ruse
@sorinr
Feb 11 2017 18:42
@vtarun media query works on any css selector. it actually say that when screen is a certain width the browser should apply certain css rules not the default ones
@VKrukovich not sure if in a for statement works like that. you declare it after you wanna use it. hope it makes sense
Ralph Nahra
@Rallph
Feb 11 2017 19:22
is general is it bad to use too many GET requests?
Tom
@moT01
Feb 11 2017 19:25
@Rallph yea, i would say that too many is probly too many
use as many as you have to, but as few as you can
Ralph Nahra
@Rallph
Feb 11 2017 19:25
@moT01 ok
Chelsea Scott
@chelseas9210
Feb 11 2017 20:02
so i'm doing my first project and his quote has a long line - but i don't know how to make this line
can't even copy it
hello?
Gulsvi
@gulsvi
Feb 11 2017 20:04
Are you asking a question? :)
Chelsea Scott
@chelseas9210
Feb 11 2017 20:04
yeah just didn't put a question mark
Gulsvi
@gulsvi
Feb 11 2017 20:05
You don't know how to copy text from your web browser?
Tony
@FreakishLancer
Feb 11 2017 20:05

@Rallph yea, i would say that too many is probly too many

Uh, what? :)

Chelsea Scott
@chelseas9210
Feb 11 2017 20:05
i want my website to look nice, i'm being a perfectionist, and i would like the dash for the quote to be long like on the example page
Gulsvi
@gulsvi
Feb 11 2017 20:05
What's the question @chelseas9210
Chelsea Scott
@chelseas9210
Feb 11 2017 20:06
xD i don't know how to explain
"quote" --person
but it's not two dash marks, it's one long line
he has it
i just don't know how to do it
i just wanna know please D:
lol
mine looks like this
--Utada Hikaru
that doesn't look good
runnerbill75
@runnerbill75
Feb 11 2017 20:08
hello I currently have an unordered list on left side of screen, when i try to move to right side with css, text moves over but bullets do not....
VladislavMoroshan
@VladislavMoroshan
Feb 11 2017 20:08
Build a Simon Game: Where I can get AUDIO. Here 4 sounds only for click buttons. But when ERROR or WIN here is not sounds
Chelsea Scott
@chelseas9210
Feb 11 2017 20:08
it should be a nice long line then her name
Gulsvi
@gulsvi
Feb 11 2017 20:08
@chelseas9210 I think what you're looking for is the Em dash? https://en.wikipedia.org/wiki/Dash
Chelsea Scott
@chelseas9210
Feb 11 2017 20:09
DD: yesssssssssssssss
@SkyCoder01
Jakov Horvat
@Yaaqovv
Feb 11 2017 20:09
Hello
Does anybody know how can I get redirect URI for twitch.tv app?
Tony
@FreakishLancer
Feb 11 2017 20:09
@VladislavMoroshan You can use the Web Audio API to generate your own sounds and pitches, but that will require some reading.
Gulsvi
@gulsvi
Feb 11 2017 20:09
There are maybe four different sizes here you can copy/paste into your page: https://en.wikipedia.org/wiki/Dash#Common_dashes
Chelsea Scott
@chelseas9210
Feb 11 2017 20:10
thank you @SkyCoder01 i am crying it looks so good now
CamperBot
@camperbot
Feb 11 2017 20:10
chelseas9210 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 180 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 11 2017 20:10
lol :)
Jakov Horvat
@Yaaqovv
Feb 11 2017 20:11
Does anybody know how can I get redirect URI for twitch.tv app?
Benm
@ben7259123
Feb 11 2017 20:12
@runnerbill75 try putting all of the list into a <div> and then css the <div> with display: inline-block; and then text-align: left;
Gulsvi
@gulsvi
Feb 11 2017 20:12
@Yaaqovv I'm doing twitch.tv now, but didn't need a redirect URI - where do you see that?
runnerbill75
@runnerbill75
Feb 11 2017 20:13
ok thank you @ben7259123
CamperBot
@camperbot
Feb 11 2017 20:13
runnerbill75 sends brownie points to @ben7259123 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @ben7259123 |http://www.freecodecamp.com/ben7259123
Jakov Horvat
@Yaaqovv
Feb 11 2017 20:13
@SkyCoder01 Well I'm following this instructions https://github.com/justintv/twitch-js-sdk
@SkyCoder01 So there is a part where I need to register my app to get my cliend id
@SkyCoder01 Have you already connected twitch to your site?
Gulsvi
@gulsvi
Feb 11 2017 20:14
@Yaaqovv You don't have to register, Free Code Camp has a pass-through for the API: https://wind-bow.gomix.me/
Just use those urls in your getJSON/ajax/etc
runnerbill75
@runnerbill75
Feb 11 2017 20:16

Ok, not working yet, here is my CSS: div.list{

color: #683807;
font-size: 13px;
font-weight: bold;
max-width: 350px;
line-height: 3.5;
margin-top: 100px;
display: inline-block;
text-align: right;

}

Jakov Horvat
@Yaaqovv
Feb 11 2017 20:16
so, instead of "freecodecamp" I should insert a username of a wanted streamer? @SkyCoder01
Tony
@FreakishLancer
Feb 11 2017 20:16
@Yaaqovv I suggest getting Postman to organize your API calls. It will make your life easier.
Gulsvi
@gulsvi
Feb 11 2017 20:16
@Yaaqovv Yes, exactly
EpicTriffid
@EpicTriffid
Feb 11 2017 20:17
Hello all! Im currently losing my mind! I cant get the row of pictures in my Pen to have the same height. Any help? http://codepen.io/EpicTriffid/pen/MJzMgK
Jakov Horvat
@Yaaqovv
Feb 11 2017 20:17
oh, thank you @SkyCoder01 mate, you probably saved a hours of my time
CamperBot
@camperbot
Feb 11 2017 20:17
yaaqovv sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 181 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 11 2017 20:18
No problem :+1:
@EpicTriffid Your smallest image is 147px tall, so you could do something like:
.img-responsive {
  max-height: 147px;
}
EpicTriffid
@EpicTriffid
Feb 11 2017 20:21
@SkyCoder01 Oooo, lemme try
Gulsvi
@gulsvi
Feb 11 2017 20:21
maybe better to give those images a class name instead though or every img-responsive image will be that height
runnerbill75
@runnerbill75
Feb 11 2017 20:21
hello @SkyCoder01 did you by chance see my earlier question? Any help is greatly appreciated..
EpicTriffid
@EpicTriffid
Feb 11 2017 20:22
That Works!
Thanks!
Gulsvi
@gulsvi
Feb 11 2017 20:23
@runnerbill75 I used the bootstrap grid for the bulleted list in my tribute page.
I offset the column by 1 to center it and then did hanging indentation with padding and text indents on the <li> elements
runnerbill75
@runnerbill75
Feb 11 2017 20:24
ok, I just used float: right, will that work as well?
Gulsvi
@gulsvi
Feb 11 2017 20:24
float: right puts them on the right I think?
runnerbill75
@runnerbill75
Feb 11 2017 20:25
yes, that is what i wanted
Gulsvi
@gulsvi
Feb 11 2017 20:25
See the .col-md-6 col-md-offset-3 here: http://getbootstrap.com/css/#grid-offsetting
That's basically what I did but with a smaller offset
joopt
@joopt
Feb 11 2017 20:25
can anyone tell me why my imgs are suddenly out of position? it was working when I made it but now the positioning of the placeholder images are wacky
Gulsvi
@gulsvi
Feb 11 2017 20:25
I haven't used float in CSS yet, need to read more about it
runnerbill75
@runnerbill75
Feb 11 2017 20:25
ok i will take a look at that also, thank you
LemuelReyes
@LemuelReyes
Feb 11 2017 20:26
@runnerbill75 do you have a codepen i could look at
runnerbill75
@runnerbill75
Feb 11 2017 20:29
yes, but i am not sure how to share it...
Chelsea Scott
@chelseas9210
Feb 11 2017 20:30
how do i submit my project?
runnerbill75
@runnerbill75
Feb 11 2017 20:30
copy and paste?
Chelsea Scott
@chelseas9210
Feb 11 2017 20:30
i don't know where the link is
Chelsea Scott
@chelseas9210
Feb 11 2017 20:30
when i press "i've completed this challenge" it wants the link
runnerbill75
@runnerbill75
Feb 11 2017 20:30
yay it worked!
Chelsea Scott
@chelseas9210
Feb 11 2017 20:30
i doubt it wants the link with my code too
unless it does want the code too???
how do i find the link for my project? so confusing. all i can see is the code and my project but not just my projects link/page
i don't see results
runnerbill75
@runnerbill75
Feb 11 2017 20:33
is there a way to see pen full screen?
Chelsea Scott
@chelseas9210
Feb 11 2017 20:33
is it the share button?
doubt it's the embedded button
Gulsvi
@gulsvi
Feb 11 2017 20:33
There's a big button in the top right that says "Change View"
I mean really big button :)
Chelsea Scott
@chelseas9210
Feb 11 2017 20:34
maybe export? i think i clicked that one and it wanted me to download it or something
oh i see well gotta do the email thing first
runnerbill75
@runnerbill75
Feb 11 2017 20:34
sorry i should have been more specific i meant on this page...
Gulsvi
@gulsvi
Feb 11 2017 20:35
eightball will they find the "change view" button?
CamperBot
@camperbot
Feb 11 2017 20:35
@SkyCoder01 :8ball: most likely :sparkles:
Gulsvi
@gulsvi
Feb 11 2017 20:35
Good :)
Chelsea Scott
@chelseas9210
Feb 11 2017 20:35
ok so i just copy the link after pressing full page?
runnerbill75
@runnerbill75
Feb 11 2017 20:35
so if someone posts a pen in here, how do i see fullscreen?
Gulsvi
@gulsvi
Feb 11 2017 20:35
Yes :)
Chelsea Scott
@chelseas9210
Feb 11 2017 20:35
ok cool
Gulsvi
@gulsvi
Feb 11 2017 20:36
You open it and click the change view button @runnerbill75 then select the Full page view
Chelsea Scott
@chelseas9210
Feb 11 2017 20:37
thanks @SkyCoder01 i should check out all features on a page i guess...i just don't wanna mess anything up D: the struggle lmaop
CamperBot
@camperbot
Feb 11 2017 20:37
chelseas9210 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: chelseas9210 already gave skycoder01 points
runnerbill75
@runnerbill75
Feb 11 2017 20:37
got it thank you
Gulsvi
@gulsvi
Feb 11 2017 20:37
:laughing: sorry for having some fun with the 8 ball there :)
runnerbill75
@runnerbill75
Feb 11 2017 20:38
someday maybe in 20 years from now i will be the one laughing at someone else haha
Chelsea Scott
@chelseas9210
Feb 11 2017 20:40
?_? who what where 8 ball? if you're laughing at me i am probably laughing with you to be honest. humility will be the death of me
runnerbill75
@runnerbill75
Feb 11 2017 20:40
before embarking on this adventure, extent of computer knowledge was checking e-mail, making purchases on amazon rofl
Chelsea Scott
@chelseas9210
Feb 11 2017 20:41
trolling people on facebook...lmao
runnerbill75
@runnerbill75
Feb 11 2017 20:41
haha
Chelsea Scott
@chelseas9210
Feb 11 2017 20:41
ok back to coding :D
eshaffer321
@eshaffer321
Feb 11 2017 20:59
Hey does anyone have advice of how to make a thumbnail of a codepen.io projects for my website portfolio I'm making?
Tom
@moT01
Feb 11 2017 21:03
@eshaffer321 you can embed a pen, ...theres a button to show you how on the bottom right of codepen
runnerbill75
@runnerbill75
Feb 11 2017 21:04
I have an unordered list of timeline events, some of them take up two lines, trying to figure out how to reduce line space between the two lines so that they are distinct from other list elements thoughts? suggestions?
Tom
@moT01
Feb 11 2017 21:04
if you just want a thumbnail, i dunno...take a screenshot and crop it
taltmann42
@taltmann42
Feb 11 2017 21:05
@runnerbill75 you could add a margin-bottom to the li elements
runnerbill75
@runnerbill75
Feb 11 2017 21:06
I thought about that but I'm not sure would give me results i'm looking for...
taltmann42
@taltmann42
Feb 11 2017 21:06
@runnerbill75 you'd have to try it in order to know that ;)
@runnerbill75 if you want to decrease the line-height, you can use line-height:10px (adjust to your needs), but this will affect all elements, and the space would end up the same between elements
runnerbill75
@runnerbill75
Feb 11 2017 21:07
here is my code: <li>With encouragement and support from his older <class= "line-height">brother Pete, joins the High School track team</li>
as you can see i tried putting a class between the two elements in my html text, adjust in css, it didn't work...
taltmann42
@taltmann42
Feb 11 2017 21:09
@runnerbill75 ah didn't mean adding a class, but CSS
runnerbill75
@runnerbill75
Feb 11 2017 21:09
the reason i didn't think margin-bottom would work is because it would affect all list elements, correct?
taltmann42
@taltmann42
Feb 11 2017 21:09
@runnerbill75
li{
  margin-bottom:10px;
}
yes it would do that, do you have a codepen link so I might have a look at it?
runnerbill75
@runnerbill75
Feb 11 2017 21:10
yes, thank you for your help
taltmann42
@taltmann42
Feb 11 2017 21:11
@GarrusNapp how about a full-screen background-image?
@runnerbill75 If you only want it to be more ovious when an element ends, you could add a border-bottom to an element (in CSS), without changing the space between them
runnerbill75
@runnerbill75
Feb 11 2017 21:14
oh ok, i will try that thank you
Garrus Napp
@GarrusNapp
Feb 11 2017 21:48
@taltmann42 I have changed it, however I don't want full screen background, so I gave it just some .svg do you think it looks better now?
taltmann42
@taltmann42
Feb 11 2017 21:54
@GarrusNapp looks okay yep. do you want full design-review or just "ok" - "no ok"? :D
Garrus Napp
@GarrusNapp
Feb 11 2017 21:54
@taltmann42 If you have any more suggestions I would be very thankful for them!
taltmann42
@taltmann42
Feb 11 2017 21:58

@GarrusNapp allright:

  • the headline text is not centered vertically (it's a bit lower)
  • there's no space between the searchbar and the submit-button
  • the submit button could be as wide as the two buttons below combined
  • the header-section could be as high as the section right to it (search, metric)
  • the main window with the icon could be as high as the two info-sections left to it
  • the icon showing the current weather has no space to the description of the weather (e.g. light rain and the icon intersect minimally
  • the info-boxes too are not perfectly centered vertically, there's more space to the bottom than to the top

these are just suggestions to reduce the congnitive load of the page and it's purely aesthetic, had some clients that where fanatic with such things so I got an eye for such things too :P

  • the searchbar has no border-radius whereas each section has one, and the buttons too, maybe you could add one there too to give it a more uniform look
Garrus Napp
@GarrusNapp
Feb 11 2017 22:05
@taltmann42 thank you a lot I will take those into account
CamperBot
@camperbot
Feb 11 2017 22:05
garrusnapp sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 479 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Feb 11 2017 22:05
@GarrusNapp allright, you don't have to do all that, since some of them require use of flexbox and freecodecamp doesn't teach that as far as I know
Gulsvi
@gulsvi
Feb 11 2017 22:09
@GarrusNapp You probably shouldn't use that proxy server, it's just meant for trying out this developer's proxy code. https://github.com/Rob--W/cors-anywhere#demo-server
If you don't know who that developer is, you're giving them your API key along with the IP address and location of everyone who visits your page.
Michael Karpinski
@karpimpski
Feb 11 2017 22:10
http://codepen.io/karpimpski/pen/egbmOV made a quick codepen to demo word replacement, I was trying to figure it out for a little while
found a pure CSS solution, which was the goal
Gulsvi
@gulsvi
Feb 11 2017 22:12
Nice work @karpimpski I've never seen &:hover before, will have to check it out.
Michael Karpinski
@karpimpski
Feb 11 2017 22:12
@SkyCoder01 just a cool SCSS function! instead of doing #box:hover, you can just nest that in the #box selector
taltmann42
@taltmann42
Feb 11 2017 22:13
same in LESS - @karpimpski have you used LESS too at some point?
Michael Karpinski
@karpimpski
Feb 11 2017 22:13
@taltmann42 no, I've only ever used SCSS and SASS
Gulsvi
@gulsvi
Feb 11 2017 22:13
SCSS? I'll have to check that out too :) thanks for the demo
Michael Karpinski
@karpimpski
Feb 11 2017 22:13
@SkyCoder01 sure, no problem! you can easily achieve this with pure CSS, no need to use SCSS. SCSS just allows you to write significantly less code
taltmann42
@taltmann42
Feb 11 2017 22:13
@karpimpski okay, because people always recomment SCSS/SASS whereas I'm still happy with LESS :P
Michael Karpinski
@karpimpski
Feb 11 2017 22:14
@taltmann42 never used it so I can't say one way or the other. I prefer SCSS because it's close to normal CSS syntax, but adds a whole lot of features
Garrus Napp
@GarrusNapp
Feb 11 2017 22:14
@SkyCoder01 thanks for that insight, what forced me to use it was geolocation not working in chrome while on http combined with openweather API not using https. Not sure if I should change it though since it's only for FCC purposes
CamperBot
@camperbot
Feb 11 2017 22:14
garrusnapp sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 182 | @skycoder01 |http://www.freecodecamp.com/skycoder01
joopt
@joopt
Feb 11 2017 22:14
hey guys how do i make the banner on the codepen the same size and make the text not go outside the block? https://codepen.io/cckid/full/ggQBRz/
taltmann42
@taltmann42
Feb 11 2017 22:15
@karpimpski yup less basically does the same, however just a suggestion for you pen: you could use classes instead of id's that way it's way simpler to add more boxes that change on hover
Michael Karpinski
@karpimpski
Feb 11 2017 22:15
@taltmann42 yeah, good idea. would definitely do that on a project where I use this multiple times, but for a single pen I figured it doesn't really matter
taltmann42
@taltmann42
Feb 11 2017 22:15
fair enough ;)
Michael Karpinski
@karpimpski
Feb 11 2017 22:16
@taltmann42 still gonna go back and change that so it's easier for future use. thanks for the suggestion!
CamperBot
@camperbot
Feb 11 2017 22:16
karpimpski sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Alo
@aloRanking
Feb 11 2017 22:49
evening guys, pls i need help creating a navigation bar using bootstrap
joopt
@joopt
Feb 11 2017 22:56
alo what up
just create a list and style it
Alo
@aloRanking
Feb 11 2017 23:00
ok..im tryin to build a portfolio page with one scrolling page
Thomas Nguyen
@todadqa
Feb 11 2017 23:00
hey guys, im just making a website with the materializecss library and the picture i want to use for my parallax box at the top is too big. I want to resize it but when i change the size using height:...; width: ...; the parallax effect is taken away. Any ideas?
Jordan Meyer
@Jordanmeyer89
Feb 11 2017 23:23
Can anyone check out my game and try to help me see why my for loop is off
it is in bottom in the generate() function
Lorrie Pearson
@Lorrie01
Feb 11 2017 23:28
@karpimpski I really liked your project...congrats on getting the word to replace seemlessly.
@runnerbill75 nice tribute page. you may want to re-align your detail content and make the font slightly bigger. It's all floating to the bottom right.
Michael Karpinski
@karpimpski
Feb 11 2017 23:33
@Lorrie01 thank you!
CamperBot
@camperbot
Feb 11 2017 23:33
karpimpski sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @lorrie01 |http://www.freecodecamp.com/lorrie01
Adam
@GoingAllTheWayUp
Feb 11 2017 23:55
Anyone know the protocall for adding a new object to an existing array? Do i just call myObjectArray1 = [{,,,}] ? From Manipulating Complex Objects