These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Sep 2017
Trevor Guinn
@trev-of-ev
Sep 07 2017 00:21
Hey everyone. I having an issue with my html and css overlapping content. Would anyone be able to assist?
Long Nguyen
@longnt80
Sep 07 2017 00:43
@trev-of-ev you sould post your code to codepen so that others can easily debug
an image is not helpful
Miguel T Rivera
@mtrivera
Sep 07 2017 01:26

Can someone tell me why this is happening?
index.html

    <div id="game-info">
      Count<span class="score strict-status">--</span>
      <span class="strict-status uppercase-txt">strict mode off</span>
    </div>

app.js

// The Count box is selected but not the box that says 'strict mode off'
const strictMsg = document.querySelector('.strict-status, .uppercase-txt');
korzo
@korzo
Sep 07 2017 01:42

@mtrivera
document.querySelector

Returns the first Element within the document that matches the specified selector, or group of selectors.

Miguel T Rivera
@mtrivera
Sep 07 2017 01:46
@korzo thanks!, I got it now
CamperBot
@camperbot
Sep 07 2017 01:46
mtrivera sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
api offline
Adeel Salim
@adeelsalim
Sep 07 2017 01:48
In bootstrap i am dividing row into 3 colums that is col-lg-4 each... how can i give equal margin in between i know one hack is we do like this
Div row> div col-lg-4> col-lg-12 but can we give pure margin that we can control like 20 or 40 or 60px what ever is our requirement
LydaTech
@lydatech
Sep 07 2017 01:52
@adeelsalim bootstrap 3 or 4?
@adeelsalim if 4 look here
Adeel Salim
@adeelsalim
Sep 07 2017 01:55
3
piteto
@piteto
Sep 07 2017 02:02
@adeelsalim Put a <div> inside each column and apply your margins to that div.
    <div class="col-lg-4">
      <div class="content">col-lg-4</div>
    </div>
.content {
  margin: 25px;
}
Adeel Salim
@adeelsalim
Sep 07 2017 02:03
@piteto awesome thanks mate
CamperBot
@camperbot
Sep 07 2017 02:03
adeelsalim sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
CallMeOrange
@EgnaroDev
Sep 07 2017 03:29
@lydatech Hey I'm just curious, are you a Mod?
Its just that I haven't seen you here before
rafaelmonroy
@rafaelmonroy
Sep 07 2017 04:13
hey guys what value can I set my data.stream equal so that my else if statement returns my desired info?
$(function(){
  var users = ["ESL_SC2", "freecodecamp", "noobs2ninjas", "realisticgamingyoutube"];
  var i = 0;
  while (i<users.length){
   $.ajax({
    type: 'GET',
    url: 'https://wind-bow.glitch.me/twitch-api/streams/'+users[i]+'/',
    success: function(data) {
      if (data.stream === null){
        console.log('offline')
        } else if (data.stream === true){
        console.log(data.stream.game + ', '+data.stream.stream_type)
        }     
      }
    })
    i++
  } 
});
it works when I remove the else if statement and just leave as an else statement, but am curious to know what value i can enter with an else if statement
Fredrik Strand Oseberg
@FredrikOseberg
Sep 07 2017 04:27
Can anyone enlighten me to why this code is producing the error: ‘Cannot read property 0 of undefined’?
var model = {
    cats: [new Cat(), new Cat(), new Cat(), new Cat(), new Cat(), new Cat()],
    cons: function() {
        console.log(this.cats[0]);
    },
    currentCat: this.cats[0],
};
the cons function correctly logs out the first cat in the array, but the currentCat property throws an error.
Johnny
@jtan3
Sep 07 2017 04:36
@rafaelmonroy data.stream is never true . If data.stream !== null you'll get a different set of data in your api
piteto
@piteto
Sep 07 2017 04:37
@rafaelmonroy if it's null, do something, else do something else. You only need one if.
piteto
@piteto
Sep 07 2017 04:50
if(!data.stream) {
  // user is offline
} else {
  // user is online
}
Markus Kiili
@Masd925
Sep 07 2017 06:08
@FredrikOseberg this points to the global object in currentCat: this.cats[0],
Inside a method, this points to the calling object.
Marat
@Marat89bluolyu
Sep 07 2017 06:10
hi all, why this code output result from the end?
function arrayToList (array) {
    var list=null;
    for (var i = 0;i<=array.length-1;i++){
        list = {
            value: array[i], rest: list
        }
    }
return list;
}

console.log (arrayToList([10, 20]));
Fredrik Strand Oseberg
@FredrikOseberg
Sep 07 2017 06:10
@Masd925 Thanks!
CamperBot
@camperbot
Sep 07 2017 06:10
fredrikoseberg sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Markus Kiili
@Masd925
Sep 07 2017 06:11
@Marat89bluolyu Value of list in overwritten on each loop.
Marat
@Marat89bluolyu
Sep 07 2017 06:16
@Masd925 aaaaaaaa ok, thank you =)
CamperBot
@camperbot
Sep 07 2017 06:16
marat89bluolyu sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
rafaelmonroy
@rafaelmonroy
Sep 07 2017 06:16
hey guys, I’m stuck :( i dont know how to get the online offline status to update to the proper user name… can anyone lend a hand? https://codepen.io/rafaelmonroy/pen/xLewBM
@piteto thanks that works
CamperBot
@camperbot
Sep 07 2017 06:16
rafaelmonroy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
Johnny
@jtan3
Sep 07 2017 06:21
@rafaelmonroy try using a forEach loop on your user names
rafaelmonroy
@rafaelmonroy
Sep 07 2017 06:22
@jtan3 before my if statements or inside?
Johnny
@jtan3
Sep 07 2017 06:23
@rafaelmonroy replace the while loop with forEach
rafaelmonroy
@rafaelmonroy
Sep 07 2017 06:23
ok cool, ill mess around with this new info thanks!
@jtan3 here is my new program running a forEach loop, but the results is still the same :/
$(function(){
  var users = ["ESL_SC2", "freecodecamp", "noobs2ninjas", "realisticgamingyoutube"];
  users.forEach(function(user){
   $.ajax({
    type: 'GET',
    url: 'https://wind-bow.glitch.me/twitch-api/streams/'+user+'/',
    success: function(data) {
      if (data.stream === null){
        $('.offline').text('offline')
        } else {
        $('.online').text(data.stream.game + ', '+data.stream.stream_type)
        }     
      }
    })
  });
});
rafaelmonroy
@rafaelmonroy
Sep 07 2017 06:28
here is the html
<body>
  <div class='container'>
    <ul>
      <li class='user'><a href='https://www.twitch.tv/ESL_SC2' target='_blank'>ESL_SC2</a><span class='offline'></span><span class='online'></span></li>
      <li class='user'><a href='https://www.twitch.tv/freecodecamp' target='_blank'>FreeCodeCamp</a><span class='offline'></span><span class='online'></span></li>
      <li class='user'><a href='https://www.twitch.tv/noobs2ninjas' target='_blank'>noobs2ninjas</a><span class='offline'></span><span class='online'></span></li>
      <li class='user'><a href='https://www.twitch.tv/realisticgamingyoutube' target='_blank'>realisticgamingyoutube</a><span class='offline'></span><span class='online'></span></li>
    </ul>
  </div>
</body>
Johnny
@jtan3
Sep 07 2017 06:37
@rafaelmonroy not sure.. if you console.log(user) it's looping through the array.
rafaelmonroy
@rafaelmonroy
Sep 07 2017 06:39
@jtan3 yeah, the information I want is being returned, but the thing I am having trouble with, is inserting that information into the proper username in the html code

my html looks like this after i run the code

ESL_SC2 offline live: StarCraft II
FreeCodeCamp offline live: StarCraft II
noobs2ninjas offline live: StarCraft II
realisticgamingyoutube offline live: StarCraft II

but I want offline to belong to the offline users and live to the live users…

right, they all go everywhere
Johnny
@jtan3
Sep 07 2017 06:41
@rafaelmonroy i haven't worked with ajax calls in awhile
Carlos Castellon
@Carlosvip91
Sep 07 2017 06:42
hey all I just completed the first part of my front-end development project and wanted to see if I could get feedback on it? it would mean a lot!
rafaelmonroy
@rafaelmonroy
Sep 07 2017 06:42
@jtan3 oh alright, cool man no worries, thanks anyways
CamperBot
@camperbot
Sep 07 2017 06:42
rafaelmonroy sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
api offline
rafaelmonroy
@rafaelmonroy
Sep 07 2017 06:42
@Carlosvip91 yeah man lets see
Carlos Castellon
@Carlosvip91
Sep 07 2017 06:43
Johnny
@jtan3
Sep 07 2017 06:43
@rafaelmonroy i used getJSON and called it pretty similar to your format .
Carlos Castellon
@Carlosvip91
Sep 07 2017 06:43
thank you so much!
rafaelmonroy
@rafaelmonroy
Sep 07 2017 06:44
@Carlosvip91 looks dope man, good job
Le Xuan Trung
@tangkiemandao
Sep 07 2017 06:44
Cool :D.
Carlos Castellon
@Carlosvip91
Sep 07 2017 06:45
thank you so much for that, I was having a bit of trouble with it but glad it came out alright! appreciate it! @rafaelmonroy @tangkiemandao
CamperBot
@camperbot
Sep 07 2017 06:45
carlosvip91 sends brownie points to @rafaelmonroy and @tangkiemandao :sparkles: :thumbsup: :sparkles:
api offline
api offline
Tanushree Samanta
@TSamanta
Sep 07 2017 06:47
where do you guys practice algos using javascript or solveproblems like ones on hackerrank
ofc using js as the language
Markus Kiili
@Masd925
Sep 07 2017 06:51
@TSamanta Many people do CodeWars
Tanushree Samanta
@TSamanta
Sep 07 2017 06:52
is it better than hackerrank
?
Markus Kiili
@Masd925
Sep 07 2017 07:02
@TSamanta No idea.
rafaelmonroy
@rafaelmonroy
Sep 07 2017 07:05
@Masd925 whats up man, any chance you can help my with my code?
Markus Kiili
@Masd925
Sep 07 2017 07:15
@rafaelmonroy Hi. Maybe the problem is that your code $('.offline') targets all the elements with class "offline" etc.
You have hardcoded the users on the html. Maybe if you generated the user html from an array, it would be easy to identify each element.
rafaelmonroy
@rafaelmonroy
Sep 07 2017 07:16
@Masd925 yeah I just realized that right now as i was going over my code, im going to triy and generate eveyrthing with my js
Markus Kiili
@Masd925
Sep 07 2017 07:16
@rafaelmonroy :+1:
rafaelmonroy
@rafaelmonroy
Sep 07 2017 07:17
@Masd925 thanks
CamperBot
@camperbot
Sep 07 2017 07:17
rafaelmonroy sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
rafaelmonroy
@rafaelmonroy
Sep 07 2017 07:56
hey guys just finished the JS part of my twitch api project but I am not sure if this user story is completed “I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.” in the sample they give the user name is linked to the channel, I did the same in my app, but not sure if they wanted the the offline - online to be linked, which doesnt make too much sense now that I think about it but, just to be on the safe side, thought I’d ask one of you :wink: here is my pen (no design yet, just want to get a green light on the JS lol) https://codepen.io/rafaelmonroy/pen/xLewBM
Chris Cullen
@123xylem
Sep 07 2017 08:34

$ heroku pg:promote postgresql-defined-86594
Ensuring an alternate alias for existing DATABASE_URL... !
! postgresql-defined-86594 is already promoted on
! quiet-depths-47005
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
IM putting a WP site on HEROKU>

IM trying to promote a database on heroku... It tells me its already promoted... I wouldnt mind but last time i went with this the site kept giving me error 500 and i assumed it was because I didnt fix this part of the install.
Any Help?

Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Sep 07 2017 09:22
@rafaelmonroy It seems fine to me as it is :)
Emil Malmsten
@EmilMalmsten
Sep 07 2017 09:35
Hi guys I'm wondering why this is not working? I wanna use javascript fetch https://codepen.io/EmilMalmsten/pen/prmYYe
Trommelochse
@Trommelochse
Sep 07 2017 10:12
first of all you need to execute the function
but then you are having a CORS issue
(check the console to see the error)
@EmilMalmsten
Emil Malmsten
@EmilMalmsten
Sep 07 2017 11:24
@Trommelochse Well the button executes the function, but I really dont understand the CORS stuff in the console
When I put the url in the browser I get a quote
Trommelochse
@Trommelochse
Sep 07 2017 11:26
the server of the API doesn't allow requests from from a different origin
using jsonp gets rid of the issue
Emil Malmsten
@EmilMalmsten
Sep 07 2017 11:29
Oh I see, I will try jsonp then. Thank you!! :)
Trommelochse
@Trommelochse
Sep 07 2017 11:29
you will have to specify a callback that handles the server response
Emil Malmsten
@EmilMalmsten
Sep 07 2017 11:30
in the url?
Trommelochse
@Trommelochse
Sep 07 2017 11:31
yes, that's why I dislike jsonp, I basically never use it
aleXYZii
@aleXYZii
Sep 07 2017 12:05

Hello guys, I've created a search bar on my navigation using Materialize CSS
My problem here is that, the "clear function" for the search field is not working at all.

Here's my pen:
https://codepen.io/aleXYZii/pen/YxboxO

Thanks in advance!

Henry
@GitHub-Henry
Sep 07 2017 12:18
@Trommelochse aren't callbacks are fundamental to async js
LydaTech
@lydatech
Sep 07 2017 12:27
@EgnaroDev yes
Ahmed raza
@Raza403
Sep 07 2017 12:39
Can someone explain DNA pairing challenge to me, I didn't understand how to pair in the challenge discription
Actually didn't understand what to do in the DNA challenge.
Vignesh Ramesh
@VRamazing
Sep 07 2017 12:55
@rafaelmonroy seems perfect
Liam Docherty
@ldocherty1
Sep 07 2017 12:58
Hi, can I have feedback on my portfolio please? I haven't finished adding the proper text on there and certain links don't work. However, just looking for some feedback. http://guard-tent-20884.bitballoon.com/
Vignesh Ramesh
@VRamazing
Sep 07 2017 12:59
@EmilMalmsten What the heck is fetch().You need to use Jquery commands $.ajax(), $.json() and make sure you handle cors issue.
@ldocherty1 Great Design.You can add a footer displaying Created by and Copy right
Emil Malmsten
@EmilMalmsten
Sep 07 2017 13:01
@VRamazing https://developers.google.com/web/updates/2015/03/introduction-to-fetch
I dont wanna use jquery, but yeah the cors issue I will solve it by using jsonp :)
just1witness
@just1witness
Sep 07 2017 13:02
How do I check if the last index of a string isNaN?
Seems simple, but it's defeating me this morning
Vignesh Ramesh
@VRamazing
Sep 07 2017 13:02
@EmilMalmsten A lot of CORS issue is handled in jquery well.Choose wisely.You can use angular if you hate it.
korzo
@korzo
Sep 07 2017 13:03
@just1witness isNaN(str.[str.length -1])
This message was deleted
just1witness
@just1witness
Sep 07 2017 13:05
No, I'm trying to bar repeats of special characters, like **, I want to allow only one
Liam Docherty
@ldocherty1
Sep 07 2017 13:05
@VRamazing Thanks much appreciated. I will do that now :+1:
CamperBot
@camperbot
Sep 07 2017 13:05
ldocherty1 sends brownie points to @vramazing :sparkles: :thumbsup: :sparkles:
api offline
Vignesh Ramesh
@VRamazing
Sep 07 2017 13:06
@just1witness isNaN() function exists in javascript https://www.w3schools.com/JSREF/jsref_isnan_number.asp
If you want to check all not boolean numbers try !Boolean(str[str.length -1])
just1witness
@just1witness
Sep 07 2017 13:06
I'm getting a syntax error with what you suggested, should I change the square brackets to round ones?
korzo
@korzo
Sep 07 2017 13:06
@just1witness It works, I tried it
just1witness
@just1witness
Sep 07 2017 13:06
hmm, let me look again
korzo
@korzo
Sep 07 2017 13:07
@just1witness
var a = '123A';
isNaN(a[a.length - 1])
try it in console
just1witness
@just1witness
Sep 07 2017 13:07
isNaN(screen.[screen.length -1] This is what I have, but code pen is saying "unexpected token ["
korzo
@korzo
Sep 07 2017 13:08
@just1witness you have dot before [
just1witness
@just1witness
Sep 07 2017 13:08
oh, duh... Thank you, lol
PERFECTO! @korzo Thank you very much! :)
CamperBot
@camperbot
Sep 07 2017 13:09
just1witness sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
api offline
Daniel Feldman
@Feldbot
Sep 07 2017 13:49
Can anyone point me to a good resource that explains how to create a toggle button? I'm working on the Local Weather app, where 1 button would toggle between Celcius and Fahrenheit, and I'm finding that harder to figure out than I imagined. I'm trying to use jQuery as well.
Doug Franklin
@Imaginativeone
Sep 07 2017 13:51
@Daniel joshmorony.com
Peter Steele
@PeterHSteele
Sep 07 2017 13:58
@feldbot set up a button with a .click() listener in jquery. then make a function that accepts a temp in fahrenheit as a parameter and returns a temp in celsius (here's the formula for the conversion: http://www.rapidtables.com/convert/temperature/how-celsius-to-fahrenheit.htm). Lastly, pass your function into the .click() and you're good to go
Jorge
@flawedLogic506
Sep 07 2017 14:00
hey whats up guys
KnoX
@knox97
Sep 07 2017 14:16
OFF TOPIC: I need someone to do a test against one of these severs on beta.speedtest.net
Servers: Tokyo, Sagamihara, Yokohama
please I need this really fast within the 45 minutes for an interview
Jorge
@flawedLogic506
Sep 07 2017 14:18
i can help u out
Chris Cullen
@123xylem
Sep 07 2017 14:19

Can Someone help.. Where do I change the HTTP to HTTPS in my project? THis is the ERROR :::

Mixed Content: The page at 'https://quiet-depths-47005.herokuapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://quiet-depths-47005.herokuapp.com/wp-content/themes/twentyfifteen/style.css?ver=4.1.1'. This request has been blocked; the content must be served over HTTPS.

SO how do i change the http reference??

Daniel Feldman
@Feldbot
Sep 07 2017 14:19
@PeterHSteele That is pretty close to what I'm doing, but I can't figure out the logic for toggling the button. My codepen is https://codepen.io/Feldbot/pen/MvRZqZ?editors=1011
Jorge
@flawedLogic506
Sep 07 2017 14:20
@knox97 not working
@123xylem u need to use content served over https ..
if the site only serves your request over http, then you can use a proxy, altho it slows down the performance considerably
Chris Cullen
@123xylem
Sep 07 2017 14:21
@OrangeKulture where do I change teh code to serve over https?
Jorge
@flawedLogic506
Sep 07 2017 14:22
let me see your pen
Chris Cullen
@123xylem
Sep 07 2017 14:23
@OrangeKulture ok but its pretty big :)
its a wp site hosted on heroku using php and
Jorge
@flawedLogic506
Sep 07 2017 14:24
@Feldbot you could use a flag and then when check for that flag when the user clicks the button ... something like
var tempInC = true;

$('#yourButton').on('click', function(){
if(tempInC){
// show temp in C
//tempInC = false;
}else
//show temp in F
})
KnoX
@knox97
Sep 07 2017 14:24
@OrangeKulture do it on a regular website speedtest.net could you do me this favor please?
Chris Cullen
@123xylem
Sep 07 2017 14:24
god knows what... its took me so long going through so many bugs
Daniel Feldman
@Feldbot
Sep 07 2017 14:24
@PeterHSteele Part of my problem might be in line 65. I'm trying an equality comparison but I don't think they are the same strict values. I'm not sure how to assign the html to a variable there.
Jorge
@flawedLogic506
Sep 07 2017 14:25
@123xylem its your same site?
you are requesting the CSS from the same application, you just have a typo
Chris Cullen
@123xylem
Sep 07 2017 14:25
@OrangeKulture yea
Jorge
@flawedLogic506
Sep 07 2017 14:25
when requesting the stylesheet, make sure u are requesting it to httpS and not http
Chris Cullen
@123xylem
Sep 07 2017 14:26
i dont actaully know which file requests the css.. if so i could change the line from http i guess
there are a lot of files
its the whole wp download
Jorge
@flawedLogic506
Sep 07 2017 14:26
@123xylem where did you get the html from?
Chris Cullen
@123xylem
Sep 07 2017 14:26
wpcontent wp admin wpincludes
Jorge
@flawedLogic506
Sep 07 2017 14:26
yeah wordpress sucks major tume
time, even
Daniel Feldman
@Feldbot
Sep 07 2017 14:27
@OrangeKulture If I change tempInC to true wouldn't I lose the actual temperature because it is reassigning the variable?
Jorge
@flawedLogic506
Sep 07 2017 14:27
@Feldbot i would use .text() instead of .html
tempInC is a flag variable .. it only contains the value true or false
@Feldbot also .. you can just take the temperature from the API and store it iin a variable, then immediately calculate what the F temp would be and store it in another variable .. and just check to see what is the current variable and display the other one when the user clicks
quickspeedy
@quickspeedy
Sep 07 2017 14:36
Is it a common practice to use section tag in bootstrap?
Daniel Feldman
@Feldbot
Sep 07 2017 14:36
@OrangeKulture The flag doesn't seem to be working. It takes two clicks to change the temp, and then just sticks.
Peter Steele
@PeterHSteele
Sep 07 2017 14:42
@feldbot i think the .html in your equality comparison needs parentheses $("#temperature).html()!=tempF
Mukul Agrawal
@mukul09
Sep 07 2017 15:59
@piteto Thanks. It was a pretty simple mistake and i wasted a lot of time on it
CamperBot
@camperbot
Sep 07 2017 15:59
mukul09 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
Trommelochse
@Trommelochse
Sep 07 2017 15:59
@GitHub-Henry yes, I just don't like jsonp, and defining callbacks in the url
Liam Docherty
@ldocherty1
Sep 07 2017 16:17
Has anyone built an e-commerce website on here?
quickspeedy
@quickspeedy
Sep 07 2017 16:37
When I resize the webpage to mobile page, the menu button doesn't open up the menu items. I checked the bootstrap doc and I followed as instructed. Any help would be appreciated! https://codepen.io/quickspeedy/pen/BdeJEw?editors=1100
Trommelochse
@Trommelochse
Sep 07 2017 16:40
@quickspeedy you have to import jquery & or bootstrap js
not entirely sure anymore
sec
quickspeedy
@quickspeedy
Sep 07 2017 16:43
@Trommelochse I imported bootstrap js and it worked. Thanks!
CamperBot
@camperbot
Sep 07 2017 16:43
quickspeedy sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
api offline
Daniel Feldman
@Feldbot
Sep 07 2017 17:07
@OrangeKulture Thanks for the help Jorge. I got the flag method working, I just had to set the back to true again at the end otherwise it just toggled once. That is a valuable technique, I'm sure that will come up again!
CamperBot
@camperbot
Sep 07 2017 17:07
feldbot sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
api offline
Daniel Feldman
@Feldbot
Sep 07 2017 17:08
@PeterHSteele Thanks for the help Peter, I did have to set the html() with parens as you mentioned. Much appreciated, I don't know if I ever would have figured that out!
CamperBot
@camperbot
Sep 07 2017 17:08
feldbot sends brownie points to @peterhsteele :sparkles: :thumbsup: :sparkles:
api offline
Chris
@bestintown23
Sep 07 2017 17:18
why are my media queries not working on my page? https://codepen.io/bestintown23/pen/zdpXjB
Ghost
@ghost~56c733f2e610378809c24d2c
Sep 07 2017 17:41
Hello. Would someone be able to assist me in a webpage focus. I am working on a page for a customer that needs to focus on a date when it goes to the page, the date is september 14th, but the page auto focus on september 12th.
just1witness
@just1witness
Sep 07 2017 17:50
@bestintown23 What do you mean by media queries?
Abdullah Clute
@abdullahbc989
Sep 07 2017 18:12
Hello, all. I'm having some trouble with the weather app project. If I could get some help that'd be really great
Morchid Chellali
@Morched23MJ
Sep 07 2017 18:38
What's the problem? and please, give the link to your project.
Morchid Chellali
@Morched23MJ
Sep 07 2017 18:39
What's the problem?
Abdullah Clute
@abdullahbc989
Sep 07 2017 18:41
I'm making an XMLHttpRequest to get the data from the fcc weather api. To access the right area's forecast I'm dynamically inserting the latitude and longitude into the url but I'm not exactly getting what I want. I console.log it with the coordinates and it works perfectly. but the get request method isn't working
iceveda06
@iceveda06
Sep 07 2017 18:45
Put some console.log for your coordinates before your xml request to see if you get correct values
Jorge
@flawedLogic506
Sep 07 2017 18:45
@Feldbot sure thing, welcome!
just1witness
@just1witness
Sep 07 2017 18:59
@abdullahbc989 You might find this usefull
https://www.sitepoint.com/geo-location-2-lines-javascript/
BrianWilliams28
@BrianWilliams28
Sep 07 2017 19:11
Can someone who's completed the steamroller algorithm provide a hint on what they did to solve the problem?
quickspeedy
@quickspeedy
Sep 07 2017 19:23
Quick question: Do h1-h6 automatically resize as browser window resize?
korzo
@korzo
Sep 07 2017 19:25
@quickspeedy No. you need media queries to do that
quickspeedy
@quickspeedy
Sep 07 2017 19:26
@korzo Ok thank you!
CamperBot
@camperbot
Sep 07 2017 19:26
quickspeedy sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Sep 07 2017 19:27
@BrianWilliams28 I did it using recursion
Trommelochse
@Trommelochse
Sep 07 2017 19:31
@BrianWilliams28 you need to use recursion (call a function in itself) and typeof, in order to figure out if an element is an array
BrianWilliams28
@BrianWilliams28
Sep 07 2017 19:34
everyone says to use recursion but i have zero experience with recursion so i'm not really sure how i should be calling the same function again and in what context..
function steamrollArray(arr) {
// let test = /\w|{}/g;
let flattened = [];  
for (let i = 0; i < arr.length; i++) {
  if (Array.isArray(arr[i])) {
      console.log(arr[i]);
  }
}

  return arr;
}

steamrollArray([1, [2], [3, [[4]]]]);
korzo
@korzo
Sep 07 2017 19:36
@BrianWilliams28 Now, if it is array, call steamrollArray(arr[i])
BrianWilliams28
@BrianWilliams28
Sep 07 2017 19:37
why?
korzo
@korzo
Sep 07 2017 19:38
@BrianWilliams28 Because array can have infinite depth. Like [[[[[[[[[6]]]]]]]
without the recursion, you'll have infinite depth of for() loops
BrianWilliams28
@BrianWilliams28
Sep 07 2017 19:40
but arr[i] includes the nested arrays
korzo
@korzo
Sep 07 2017 19:42
@BrianWilliams28
I added
function steamrollArray(arr) {
// let test = /\w|{}/g;
let flattened = [];  
for (let i = 0; i < arr.length; i++) {
  if (Array.isArray(arr[i])) {
      console.log(arr[i]);
  } else {
    flattened = flattened.concat(arr[i]);
}
}

  return flattened;
}

steamrollArray([1, [2], [3, [[4]]]]);
BrianWilliams28
@BrianWilliams28
Sep 07 2017 19:43
@korzo you mean?
function steamrollArray(arr) {
// let test = /\w|{}/g;
let flattened = [];  
for (let i = 0; i < arr.length; i++) {
  if (Array.isArray(arr[i])) {
      return steamrollArray(arr[i]);
  } else {
    flattened = flattened.concat(arr[i]);
}
}

  return flattened;
}

steamrollArray([1, [2], [3, [[4]]]]);
korzo
@korzo
Sep 07 2017 19:44
@BrianWilliams28
function steamrollArray(arr) {
// let test = /\w|{}/g;
let flattened = [];  
for (let i = 0; i < arr.length; i++) {
  if (Array.isArray(arr[i])) {
      flattened = flattened.concat(steamrollArray(arr[i]));
  } else {
    flattened = flattened.concat(arr[i]);
}
}

  return flattened;
}

steamrollArray([1, [2], [3, [[4]]]]);
BrianWilliams28
@BrianWilliams28
Sep 07 2017 19:45
why do you use concat? can't you also use .push()?
korzo
@korzo
Sep 07 2017 19:46
@BrianWilliams28 Because steamrollArray returns array.
@BrianWilliams28 Yes, you should use push in else branch
@BrianWilliams28 without the recursion, you would have to copy whole code again in if (Array.isArray(arr[i]))
Emil Malmsten
@EmilMalmsten
Sep 07 2017 19:54
Hey guys, can someone help me how I should do so I cant get the same color 2 times in a row?
https://codepen.io/EmilMalmsten/pen/prmYYe
BrianWilliams28
@BrianWilliams28
Sep 07 2017 19:54
@korzo fcc tells me flattened.concat is not a function
korzo
@korzo
Sep 07 2017 19:55
@BrianWilliams28 did you copy my code?
Because I fixed some typos later
@BrianWilliams28 is not a function means that flattened is undefined
BrianWilliams28
@BrianWilliams28
Sep 07 2017 19:57
it worked when i changed flattened=flattened.concat on else line, i had it as flattened = flattened.push since i figure it would push elements that were not arrays
havent used concat much
@korzo thanks for help
CamperBot
@camperbot
Sep 07 2017 19:57
brianwilliams28 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 458 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Sep 07 2017 19:59
@BrianWilliams28 concat joins 2 or more arrays or acts as push, if parameter is not an array
BrianWilliams28
@BrianWilliams28
Sep 07 2017 20:04
ok good to know thank you
is push usually used to add strings?
or it can do numbers too
Ken Haduch
@khaduch
Sep 07 2017 20:07
@BrianWilliams28 - .push() adds whatever parameter you supply as the new last location in the array - strings, numbers, objects, etc.
BrianWilliams28
@BrianWilliams28
Sep 07 2017 20:07
@khaduch thanks
CamperBot
@camperbot
Sep 07 2017 20:07
brianwilliams28 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3273 | @khaduch |http://www.freecodecamp.com/khaduch
diegoignacious
@diegoignacious
Sep 07 2017 21:11
hey everybody
im having troubles with a responsive sh#t
Robertzamora
@robert910
Sep 07 2017 21:14
Sup all
diegoignacious
@diegoignacious
Sep 07 2017 21:14
hey robert
im really new on code
would you help me ?
<3
thing is, i have a template
that is made on bootstrap
i have a bar, that on dekstop
looks like this
Robertzamora
@robert910
Sep 07 2017 21:16
I'd like to help but I'm new to this as well.
diegoignacious
@diegoignacious
Sep 07 2017 21:17
that blue highlited bar
image.png
on a mobile phone, would change to white
image.png
and i can't find the piece of f#cking code that is doing that
would anyone help me to solve this, please please please ?
Gaurav
@gauravmagan
Sep 07 2017 21:19
npm ERR! webpack-dev-server --watch --inline
failed
@diegoignacious try to give this to the header
position : fixed
diegoignacious
@diegoignacious
Sep 07 2017 21:23
it would f#ck up my site even more
im making a pen
with my code
sec
nvm, i dont even know how to do a propper pen
do you know how can i write here as a code?
Ken Haduch
@khaduch
Sep 07 2017 21:28
@diegoignacious - to post code here, put a line with three backticks ``` at the start, nothing else on the line. Then your code, then on a new line, another set of three backticks.
diegoignacious
@diegoignacious
Sep 07 2017 21:29
ty
Ken Haduch
@khaduch
Sep 07 2017 21:29

in other words:
```
your code here
```

Would post as

your code here
diegoignacious
@diegoignacious
Sep 07 2017 21:30
well, this is my css code that is destroying my mobile site :(
Ken Haduch
@khaduch
Sep 07 2017 21:30
if it's CSS code, then make that first line:
```css
diegoignacious
@diegoignacious
Sep 07 2017 21:31
.btn {
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 1.5px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
  height: 37px;
  background: #141414;
  outline: none;
  border: none;
  border-radius: 2px;
  padding: 7px 20px;
  -moz-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -o-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s; }
  .btn .btn-label {
    padding: 4px 0; }
  .btn:hover, .btn:focus, .btn:active {
    background: #00a6e2 !important;
    outline: none !important;
    border: none !important;
    color: #fff !important; }
  .btn span {
    position: relative;
    z-index: 2;
    display: inline-block; }
  .btn .mask {
    background: #00a6e2;
    border-radius: 2px;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 1;
    -moz-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -webkit-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s; }
  .btn:hover .mask {
    width: 100%; }

.name span {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: block;
  color: #fff;
  padding-top: 7px; }

header {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  height: 70px;
  -moz-transition: transform 0.6s ease 0s;
  -o-transition: transform 0.6s ease 0s;
  -webkit-transition: transform 0.6s ease 0s;
  transition: transform 0.6s ease 0s; }
  header .header-wrap {
    padding-top: 15px; }
    header .header-wrap .pe-7s-download {
      font-size: 25px;
      display: none;
      color: #00a6e2; }
    header .header-wrap .pe-7s-menu {
      font-size: 25px;
      color: #00a6e2; }
  header.fixed {
    top: -70px;
    margin-top: 70px;
    width: 66.66%;
    position: fixed;
    z-index: 99;
    background: #00a6e2;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-transition: margin 0.6s ease 0s, transform 0.6s ease 0s;
    -o-transition: margin 0.6s ease 0s, transform 0.6s ease 0s;
    -webkit-transition: margin 0.6s ease 0s, transform 0.6s ease 0s;
    transition: margin 0.6s ease 0s, transform 0.6s ease 0s; }
    header.fixed .name span {
      color: #fff; }
    header.fixed .btn {
      color: #fff;
      background: #141414; }
      header.fixed .btn .mask {
        background: #e91e63; }
      header.fixed .btn:hover, header.fixed .btn:focus, header.fixed .btn:active {
        background: #141414 !important;
        outline: none !important;
        border: none !important;
        color: #fff !important; }
it switches from blue to white, when you goes as a mobile.
and i dont want to >:|
diegoignacious
@diegoignacious
Sep 07 2017 21:37
help please :(
Trommelochse
@Trommelochse
Sep 07 2017 21:41
@diegoignacious I don't think the issue is in the code that you posted. Full source code would certainly help to solve the issue
Ken Haduch
@khaduch
Sep 07 2017 21:42
@diegoignacious - @Trommelochse is correct - it would help to have the full source code
diegoignacious
@diegoignacious
Sep 07 2017 21:44
Ty guys @khaduch @Trommelochse , i've already uploaded the code to my website ; www.505.cl
where can i paste my full code propperly
i've tryed to paste it on codepen, but i've got troubles in the "JS" part
Trommelochse
@Trommelochse
Sep 07 2017 21:48
@diegoignacious ok mate as a general adive: use the DevTools, you can select elements, and see where they are getting their styles from
diegoignacious
@diegoignacious
Sep 07 2017 21:49
devtools ?
what you mean with devtools ?
Trommelochse
@Trommelochse
Sep 07 2017 21:49
are you using Windows & Chrome?
diegoignacious
@diegoignacious
Sep 07 2017 21:50
if you mean a text writter
i use sublime
yea
im at chrome and windows
Trommelochse
@Trommelochse
Sep 07 2017 21:50
ok, just open your page and press F12 ;)
diegoignacious
@diegoignacious
Sep 07 2017 21:50
oh you mean to the "inspect" option
sorry, i come from the "designer" side
Trommelochse
@Trommelochse
Sep 07 2017 21:50
exactly
diegoignacious
@diegoignacious
Sep 07 2017 21:50
so im really new to code
ty
Trommelochse
@Trommelochse
Sep 07 2017 21:51
if you 'inspect' an element
you can see all the styles applied in DevTools
diegoignacious
@diegoignacious
Sep 07 2017 21:51
oh i see
ty
Trommelochse
@Trommelochse
Sep 07 2017 21:52
and in your case the style is current applied by
@media only screen and (max-width: 1199px)
.navbar-default .navbar-collapse, .navbar {
    background: #fff;
    border: none;
}
diegoignacious
@diegoignacious
Sep 07 2017 21:52
holys#it
Trommelochse
@Trommelochse
Sep 07 2017 21:53
as you can see, you have a specificity of 30 (3 nested classes )
diegoignacious
@diegoignacious
Sep 07 2017 21:53
that's why i coul'dnt find it on the block code
that is located at the bottom of the code
i see
Trommelochse
@Trommelochse
Sep 07 2017 21:53
in order to override this, you need at least the same specificity, or a higher one
diegoignacious
@diegoignacious
Sep 07 2017 21:53
Trom, ty again
Trommelochse
@Trommelochse
Sep 07 2017 21:54
if you use @Trommelochse I even brownie points for your thank you ;)
CamperBot
@camperbot
Sep 07 2017 21:54
sorry trommelochse, you can't send brownie points to yourself! :sparkles: :sparkles:
Trommelochse
@Trommelochse
Sep 07 2017 21:54
let me know if you keep being stuck, happy coding!
diegoignacious
@diegoignacious
Sep 07 2017 21:54
thank you thank you thank you @Trommelochse
CamperBot
@camperbot
Sep 07 2017 21:54
diegoignacious sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @trommelochse |http://www.freecodecamp.com/trommelochse
Trommelochse
@Trommelochse
Sep 07 2017 21:54
hehehe ;)
diegoignacious
@diegoignacious
Sep 07 2017 21:54
you really rock it
i was getting mad already
with coding
haha
Nicol
@NicolNonga
Sep 07 2017 21:55
hello everyone i have problem to display the data
diegoignacious
@diegoignacious
Sep 07 2017 21:55
thank god, a friend told me about this chat from freecodecamp
Trommelochse
@Trommelochse
Sep 07 2017 21:55
well, there will be times when you get frustrated
diegoignacious
@diegoignacious
Sep 07 2017 21:55
chat *
sorry
HAHa
Trommelochse
@Trommelochse
Sep 07 2017 21:55
and these times will keep coming
Nicol
@NicolNonga
Sep 07 2017 21:55
here is my codepen, iam doing wikipedia view https://codepen.io/Nicol/pen/zdWxwO?editors=1010
amare16
@amare16
Sep 07 2017 21:55
how to alert message disappear after few seconds?
Trommelochse
@Trommelochse
Sep 07 2017 21:56

@amare16 with the vanilla

alert('I am an alert');

ther is no way to make it disappear

Sue
@coding-sue-true
Sep 07 2017 21:57
@coding-sue-true
hellooooo
I have a question.. as most of everyone in this rrom
room
I am using bootstrap 4, and I want to open a modal only when the button is clicked and not onload
I went to bootstrap modal methods and I copied the code, but it always opens onload.. does anyone knows how to change this only to open onclick?
I want to use JS methods and not data-
amare16
@amare16
Sep 07 2017 21:59
@Trommelochse ok...what can i use when i click ok button to show the message at the top of the page and that message have to disappear after 5 seconds? how to do that
Trommelochse
@Trommelochse
Sep 07 2017 22:00
assuming you are using jQuery
$('#button').click(function(){
  const msg$= $('<div>');
  msg$.text('your message');
  $('body').prepend(msg$);
  setTimeout(function() {
    msg$.remove();
  }, 5000)
})
amare16
@amare16
Sep 07 2017 22:02
ya... but i am really bad in jquery
Trommelochse
@Trommelochse
Sep 07 2017 22:04
@amare16 see code, above, not very pretty, but should work in a vacuum
@coding-sue-true source code would help
amare16
@amare16
Sep 07 2017 22:05
i put the message div at the top of the page or?
diegoignacious
@diegoignacious
Sep 07 2017 22:06
@Trommelochse, yo men
u still there?
Trommelochse
@Trommelochse
Sep 07 2017 22:06
@amare16 it's up to you where you want to display the message. In my example, the div will appear as the first element inside the body
@diegoignacious yes
diegoignacious
@diegoignacious
Sep 07 2017 22:08
what should i modify on the code, if instead the navbar switches fix (color switch), it would change the color of the phrase "DIEGO PALACIOS · UI · UX..." on a mobile version
amare16
@amare16
Sep 07 2017 22:08
@Trommelochse ... it is working bro! thanks a lot
CamperBot
@camperbot
Sep 07 2017 22:08
amare16 sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @trommelochse |http://www.freecodecamp.com/trommelochse
Trommelochse
@Trommelochse
Sep 07 2017 22:10
happy to hear, man
diegoignacious
@diegoignacious
Sep 07 2017 22:10
found the line
what syntax should i apply ?
just "color"?
Trommelochse
@Trommelochse
Sep 07 2017 22:12
if you want to change the text-color, then you have to use color: #yourcolor, if you want to change the background, you should use background-color: #yourcolor
diegoignacious
@diegoignacious
Sep 07 2017 22:13
i did
but i have a trouble now
Trommelochse
@Trommelochse
Sep 07 2017 22:13
be aware of specificity
this article might help
diegoignacious
@diegoignacious
Sep 07 2017 22:14
Thank you @Trommelochse
CamperBot
@camperbot
Sep 07 2017 22:14
diegoignacious sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
api offline
diegoignacious
@diegoignacious
Sep 07 2017 22:14
:(
it is offline the ty sh#t
/:
anyway
thing is, when i scroll down on the mobile version now
it would get the color inherited from the dekstop version
if i apply this
.name span {
    font-size: 13px;
    padding-top: 17px; 
    color: #000;}
Trommelochse
@Trommelochse
Sep 07 2017 22:15
so you want the colors to be different on desktop and mobile?
then you need a media query
Sue
@coding-sue-true
Sep 07 2017 22:16
@Trommelochse
diegoignacious
@diegoignacious
Sep 07 2017 22:16
i am at the media query section
Sue
@coding-sue-true
Sep 07 2017 22:16
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
Trommelochse
@Trommelochse
Sep 07 2017 22:17
@media (max-width: 1199px) {
  .yourSelector {
    background: #mobile-color;
  }
}
Sue
@coding-sue-true
Sep 07 2017 22:17
@Trommelochse forget it
I don't even know how to put this properly
thank you anyway
diegoignacious
@diegoignacious
Sep 07 2017 22:17
lets try
Trommelochse
@Trommelochse
Sep 07 2017 22:17
put it inbetween 3 backticks
@coding-sue-true
diegoignacious
@diegoignacious
Sep 07 2017 22:17
is not that hard @coding-sue-true
i got here from no-where
Sue
@coding-sue-true
Sep 07 2017 22:18
'''
CamperBot
@camperbot
Sep 07 2017 22:18
:bulb: to format code use backticks! ``` more info
diegoignacious
@diegoignacious
Sep 07 2017 22:18
and i have my own responsive website now
```
Sue
@coding-sue-true
Sep 07 2017 22:18
'''<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>'''
CamperBot
@camperbot
Sep 07 2017 22:18
:bulb: to format code use backticks! ``` more info
Sue
@coding-sue-true
Sep 07 2017 22:18
nop, doesn't
work
Trommelochse
@Trommelochse
Sep 07 2017 22:18
nope, you are using single quotes
diegoignacious
@diegoignacious
Sep 07 2017 22:18
is with this ones ```
Sue
@coding-sue-true
Sep 07 2017 22:18
today is just one of those day you feel like giving up
and everything goes wrong
Trommelochse
@Trommelochse
Sep 07 2017 22:18
@coding-sue-true no point in giving up
those days just happen
Sue
@coding-sue-true
Sep 07 2017 22:19
<div id="loginModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg" role="content"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Login </h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div>
Trommelochse
@Trommelochse
Sep 07 2017 22:19
there you go
Sue
@coding-sue-true
Sep 07 2017 22:19
lol, that looks even worse
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
Trommelochse
@Trommelochse
Sep 07 2017 22:19
<div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="content">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Login </h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
try it with
```html
Sue
@coding-sue-true
Sep 07 2017 22:20
```html<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
Trommelochse
@Trommelochse
Sep 07 2017 22:20
new line after html ;)
by pressing shift+enter
diegoignacious
@diegoignacious
Sep 07 2017 22:21
image.png
Sue
@coding-sue-true
Sep 07 2017 22:21
oh my days
@Trommelochse you understand, that's the beginning of my code
diegoignacious
@diegoignacious
Sep 07 2017 22:21
now i got that
Sue
@coding-sue-true
Sep 07 2017 22:21
what's the javascript to open that on click?
Trommelochse
@Trommelochse
Sep 07 2017 22:21
@diegoignacious yes, because you are only selecting your span and give your span a background color, not your whole navbar
@coding-sue-true what do you want to open on click?
Sue
@coding-sue-true
Sep 07 2017 22:22
that modal
it's a login modal
Trommelochse
@Trommelochse
Sep 07 2017 22:22
ah, I see
ok
are you using jQuery?
Sue
@coding-sue-true
Sep 07 2017 22:23
yes
diegoignacious
@diegoignacious
Sep 07 2017 22:23
ok i got it @Trommelochse , but i don't want to change the background color, just want to change the color of the text selected on the responsive version. thanks again, sorry for the dumbness.
CamperBot
@camperbot
Sep 07 2017 22:23
diegoignacious sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
api offline
diegoignacious
@diegoignacious
Sep 07 2017 22:24
the thing is that
i have this
image.png
and when i scroll down
Trommelochse
@Trommelochse
Sep 07 2017 22:24
@coding-sue-true not entirely sure how bootstrap4 transitions work. But I would approach it the way, that my modal has usually the css property display: none
diegoignacious
@diegoignacious
Sep 07 2017 22:25
it goes like this
image.png
Trommelochse
@Trommelochse
Sep 07 2017 22:25
and when I want to show that modal when a button is clicked
you can simply say
diegoignacious
@diegoignacious
Sep 07 2017 22:25
i guess because it get inherited from the desktop-version color ?
Trommelochse
@Trommelochse
Sep 07 2017 22:27
$('#login-button).click(function() {
  $('#loginModal').show();
})
@coding-sue-true
if the font color is supposed change as well, you will need to specify that, of course @diegoignacious
Sue
@coding-sue-true
Sep 07 2017 22:28
@Trommelochse going to try that now, thank you
CamperBot
@camperbot
Sep 07 2017 22:28
coding-sue-true sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @trommelochse |http://www.freecodecamp.com/trommelochse
Trommelochse
@Trommelochse
Sep 07 2017 22:28
@diegoignacious just put a color property in the same media-query that you used for the background
would be much easier if you had a pen :(
diegoignacious
@diegoignacious
Sep 07 2017 22:28
okay, thing is in the "js" part
i got confused
because i have a lot of js files
so, i dont know wich one should i copy there
Trommelochse
@Trommelochse
Sep 07 2017 22:30
@diegoignacious can't help you without seeing your code, bro :(
diegoignacious
@diegoignacious
Sep 07 2017 22:34
@Trommelochse thank you!
CamperBot
@camperbot
Sep 07 2017 22:34
diegoignacious sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
api offline
diegoignacious
@diegoignacious
Sep 07 2017 22:34
wtf, why can't i send some cookies >:l
thing is, i want to change the text color on the mobile version
i follow that it should be done with a @mediaquery property
but wich one should be ?
Trommelochse
@Trommelochse
Sep 07 2017 22:35
@diegoignacious exactly
diegoignacious
@diegoignacious
Sep 07 2017 22:36
because, atm , it swaps color when i scroll down
why is that happening :(
would you check now my website ? , i've updated the code ; 505.cl
now @Trommelochse
why the bot won't let me send cookies @Trommelochse thanks!
CamperBot
@camperbot
Sep 07 2017 22:39
diegoignacious sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
api offline
Trommelochse
@Trommelochse
Sep 07 2017 22:43
@diegoignacious when you inspect the element you will see, that there is a selector header.fixed
which has a background color of this light blue
you should select header.fixed in your media query and apply your desired color
diegoignacious
@diegoignacious
Sep 07 2017 22:51
@Trommelochse thank you bro
CamperBot
@camperbot
Sep 07 2017 22:51
diegoignacious sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
api offline
diegoignacious
@diegoignacious
Sep 07 2017 22:51
@now i can select the color, of the on the mobile version
but there is not the trouble, thing is
when i scroll down
it swaps to white
image.png
what is doing that ?
image.png
diegoignacious
@diegoignacious
Sep 07 2017 23:09
anyone there ?
please :(
korzo
@korzo
Sep 07 2017 23:13
@diegoignacious yup