These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Dec 2017
Moisés Man
@moigithub
Dec 10 2017 00:03
trial n error :)
Linus Phan
@linusphan
Dec 10 2017 00:04
lol
it's been 5 hours maybe
T_T
.main-ul {
  position: relative;
}

.main-ul > li {
  position: absolute;
}
Linus Phan
@linusphan
Dec 10 2017 00:13
@moigithub thank you so much, I'm going through your sol'n right now to try to understand it
CamperBot
@camperbot
Dec 10 2017 00:13
linusphan sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
api offline
Linus Phan
@linusphan
Dec 10 2017 00:22
.sub-ul > li { display:inline-block;
confused about this
.sub-ul was made to be display block on the code before it, when it's hovered over. So now we're targeting the list items in that list to be inline-block
oh nvm
i see it
that puts the list down and list items horizontal
Moisés Man
@moigithub
Dec 10 2017 00:26
yep.. horizontal align
Linus Phan
@linusphan
Dec 10 2017 00:36
so what does the absolute position do?
I thought it makes the position absolute to where the parent element is
nvm, thanks for all your help so far
I'll try to take it from here
still stuck though T_T
Kelsey
@iverunamok
Dec 10 2017 01:16
Hi there! any bootstrap wizzzez out there? I cannot figure out why my tribute page text isn't mobile responsive, but my images are. https://codepen.io/iverunamok/pen/LxrqZJ/
Moisés Man
@moigithub
Dec 10 2017 01:24
use em or rem instead of px for ur fontsizes @iverunamok
Kelsey
@iverunamok
Dec 10 2017 01:27
cooooooolio. @moigithub I will try that. Thanks!
CamperBot
@camperbot
Dec 10 2017 01:27
iverunamok sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3728 | @moigithub |http://www.freecodecamp.org/moigithub
Moisés Man
@moigithub
Dec 10 2017 01:28
it will "scale", but not always will "looks good" so u need to use media queries
to do adjustments
Jean Marco Romero
@volkranium
Dec 10 2017 02:06
Hey guys how can i iterate throught that API object
i tried using forEach but console tells me its not a function
Tom
@moT01
Dec 10 2017 02:37
foreach is for arrays i believe
@volkranium
creator0323
@Amasian
Dec 10 2017 02:49
https://codepen.io/Amasian/pen/OOeZKV
Could you teach me how to display the words on where I want? I want to put them on the center of the menu bar
@Amasian
creator0323
@Amasian
Dec 10 2017 02:59
@moT01 Thank you so much!!
CamperBot
@camperbot
Dec 10 2017 02:59
amasian sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 928 | @mot01 |http://www.freecodecamp.org/mot01
TheDaniel97
@TheDaniel97
Dec 10 2017 03:45
Hey everyone
anyone ??
Vamp
@the-vampiire
Dec 10 2017 04:05
@volkranium what do you want to iterate through?
Gaurav khanna
@gomzk85
Dec 10 2017 04:57
hi
guys , want to know is there a way to know in angular js 1.5 whether a page opened or loaded
?
Linus Phan
@linusphan
Dec 10 2017 05:01
what other icon packs are out there other than font-awesome?
I'm trying to get square icons of various social media
but font-awesome doesn't have the ones i want
primuscovenant
@primuscovenant
Dec 10 2017 05:03
@heroiczero tx
CamperBot
@camperbot
Dec 10 2017 05:03
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2101 | @heroiczero |http://www.freecodecamp.org/heroiczero
TJ Hardin
@AndroidNinjaX
Dec 10 2017 05:18

@linusphan You could use Google's Material Icon's. I do and I love them.

https://material.io/icons/

Gaurav khanna
@gomzk85
Dec 10 2017 05:25
hey any one can help me with solution for my question?
James Patrick Kerrane
@jamesjpk123
Dec 10 2017 05:29
hey guys
anyone awake?
I need help with something
anyone here?
i guess not
I'm going to try another server ;(
sorry if this bothers you @QuincyLarson, but we need a better way to talk to other campers in real time other than the forum.
Linus Phan
@linusphan
Dec 10 2017 05:53
@AndroidNinjaX tx
CamperBot
@camperbot
Dec 10 2017 05:53
linusphan sends brownie points to @androidninjax :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @androidninjax |http://www.freecodecamp.org/androidninjax
Gaurav khanna
@gomzk85
Dec 10 2017 06:13
@gomzk85
hi
guys , want to know is there a way to know in angular js 1.5 whether a page opened or loaded
?
Henry
@GitHub-Henry
Dec 10 2017 06:39
@gomzk85 perhaps the folks in this room are in the know
MROB0T
@MROB0T
Dec 10 2017 06:40
Hey does anyone know where I can learn genetic algorithms?
Ahmed raza
@Raza403
Dec 10 2017 07:47
Hello everyone, I have main css file of roughly 2200 lines including bootstrap, in my critical css by "https://jonassebastianohlsson.com" I get back about 700 lines as critical css, I want to remove these 700 lines from main css, how can I do it.
_
Ivan Ngundela
@ingundela
Dec 10 2017 08:01
hello everyone… is here anyone with experience using GitHub desktop on mac?.. I’ve just got a new mac and installed GitHub desktop, want to clone new repository and keep saying that the destination already exists.. I’ve created different destination but it keep saying the same thing.. very annoying… Please advice..Thank in advance
Gaurav khanna
@gomzk85
Dec 10 2017 08:01
@GitHub-Henry can u help me with some answer to my problem
Ivan Ngundela
@ingundela
Dec 10 2017 08:02
@GitHub-Henry PLEASE HELP
Ivan Ngundela
@ingundela
Dec 10 2017 08:08
Screen Shot 2017-12-10 at 10.07.58 AM.png
This is annoying.. I’ve just created this folder in my desktop
Onome Sotu
@onomesotu
Dec 10 2017 11:08
Hello guys/gals
I have a question regarding vanilla js
when we want to run a jquery on pageload, we use $document.ready(myfunction);
Do we have to call a function to run pageload in vanilla js or the javascript runs automatically same like css does
Long Nguyen
@longnt80
Dec 10 2017 11:19
Any recommended podcast for front end?
Henry
@GitHub-Henry
Dec 10 2017 11:50
@gomzk85 I don't know angular, perhaps ask your angular question in the https://gitter.im/angular/angular room
@ingundela perhaps try putting the repository in a new folder, based on the error msg
creator0323
@Amasian
Dec 10 2017 11:58

Hello! I am trying to make responsive web page and the first media query does not work(Making the MenuText disappear). Could you let me know the reason? Thank you :)

https://codepen.io/Amasian/pen/OOeZKV

Pendramon
@Pendramon
Dec 10 2017 11:58
Why do you have two same media CSS Rulesets?
creator0323
@Amasian
Dec 10 2017 12:02
I was trying to figure out what would happen comparing two cases
Pendramon
@Pendramon
Dec 10 2017 12:06
Well the problem is you need to override the class MenuText's display in the media ruleset
Johnny
@JohnnyBizzel
Dec 10 2017 12:10
@Amasian Try using @media only screen and (max-width: 600px)
Pendramon
@Pendramon
Dec 10 2017 12:11
@Amasian If you put the media ruleset at the bottom it should work just fine
Johnny
@JohnnyBizzel
Dec 10 2017 12:11

@Amasian Look at this (I put a border on so the change is clear) https://codepen.io/JohnnyBizzel/pen/zPgXEo

Problem is that the icon won't show because it is inside the now hidden MenuText

Henry
@GitHub-Henry
Dec 10 2017 12:13
@Amasian perhaps try something like this
Johnny
@JohnnyBizzel
Dec 10 2017 12:17

@Amasian change the rule for the icon in the media query to just

  .icon {
    float: right;
    display: block;
  }

Once I click the icon, everything disappears but that's another problem :P

creator0323
@Amasian
Dec 10 2017 12:19
@Pendramon @JohnnyBizzel @GitHub-Henry I really appreciate your help! It was very helpful!
@Pendramon Thank you so much for help :)
@JohnnyBizzel Thank you for giving me clear understand I will keep trying to solve the problems lol
CamperBot
@camperbot
Dec 10 2017 12:21
amasian sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1778 | @johnnybizzel |http://www.freecodecamp.org/johnnybizzel
Johnny
@JohnnyBizzel
Dec 10 2017 12:21
@Amasian :+1:
Pendramon
@Pendramon
Dec 10 2017 12:23
Np mate, i am very bad at explaining things but if you need help with anything else hit me up and i'll try my best
creator0323
@Amasian
Dec 10 2017 12:26
@Pendramon Thank you so much! thanks to your help, now I got motivated
CamperBot
@camperbot
Dec 10 2017 12:26
amasian sends brownie points to @pendramon :sparkles: :thumbsup: :sparkles:
:cookie: 207 | @pendramon |http://www.freecodecamp.org/pendramon
Pendramon
@Pendramon
Dec 10 2017 12:27
I do not know why it goes into blank after clicking any link but my first guess is codepen x)
creator0323
@Amasian
Dec 10 2017 12:46
Ah cuz I did not make other pages yet lol after making them all, I will connect them
Pendramon
@Pendramon
Dec 10 2017 12:53
@Amasian no yea but it shouldn't be doing that, it should just reload the page. So i guess its something to do with how Codepen updates it's content
creator0323
@Amasian
Dec 10 2017 12:54
Oh Thank you lol I learned it from you
A-J Roos
@Asjas
Dec 10 2017 13:15
@onomesotu You use the following in Vanilla JS
document.addEventListener('DOMContentLoaded', function() {
});
Pendramon
@Pendramon
Dec 10 2017 13:24
Anyone here with good understanding of BEM Naming Methodology that could spare a few minutes?
Chi
@chiyc
Dec 10 2017 13:51
@Pendramon What are you looking to know?
Ethan Sturtz
@sturtzethan97
Dec 10 2017 13:58
What all do you need to know to complete the second project? I was looking at the functionality of it and I feel like I havent learned how to do that stuff at all :P
Chi
@chiyc
Dec 10 2017 13:59
@sturtzethan97 Do you mean the personal portfolio page?
Ethan Sturtz
@sturtzethan97
Dec 10 2017 13:59
@chiyc Yes!
Chi
@chiyc
Dec 10 2017 14:00
Is there a particular user story that you're not sure about?
Ethan Sturtz
@sturtzethan97
Dec 10 2017 14:01
Well a few things. For instance the header and how clicking the buttons will bring you to that certain part of the page. I'm not finding if that was gone over in HTML, CSS, Bootstrap, or Jquery
Chi
@chiyc
Dec 10 2017 14:04
Ahh, I see. Yeah, you'll find that the projects often need you to look to external resources. Don't force yourself to use only FCC :)
Chi
@chiyc
Dec 10 2017 14:12
I think that's one of the best things about FCC. They don't hold your hand through everything. I had tried so many other tutorials before where I didn't feel like I learned anything
Let me know if you have trouble finding out how to do what you're looking for online. I'm more than happy to help
Marc
@MWBauer
Dec 10 2017 14:18
Hey Ya'll!
Marc
@MWBauer
Dec 10 2017 14:28
Can someone walk me thru the steps of making a button do a thing?
Pascal Clanget
@Gh05d
Dec 10 2017 14:32

Hi all, I recently got a new laptop and cloned our project on it. I did npm install and everything seemed fine, but when I try to run the app, I get an error that he can't parse the sass files and that the loader is missing. The problem is that in the package.json, there is a stylus-loader and a sass-loader, so this should not be a problem.

Anybody an idea what causes this bug and how to fix it?

A-J Roos
@Asjas
Dec 10 2017 14:32
@MWBauer If you need help you need to post your code and what it needs to do. It doesn't help if you ask someone to do all the work for you. You need to show what you have done and what isn't working
Marc
@MWBauer
Dec 10 2017 14:38
I have made the C and F buttons, and I'm putting in the formulas for them. What I need is to connect the formula to the button.
Premprakash singh
@PREMPRAKASHSINGH
Dec 10 2017 14:39
@MWBauer
Marc
@MWBauer
Dec 10 2017 14:48
well, i guess I could copy this, change some var names and post it. lol
I'm just scrolling thru trying to find the button info
It looks to me like he doesn't do the conversion, he just calls out to the weather api and gets the C or the F temp and posts it.
Premprakash singh
@PREMPRAKASHSINGH
Dec 10 2017 14:53
Chekout the above article on weather app. That will help!
@MWBauer
Marc
@MWBauer
Dec 10 2017 14:56
I was.
I did
Stephen James
@sjames1958gm
Dec 10 2017 15:12
@MWBauer
You will need to set the globals for C and F inside the callback that has access to the weather data.
dinesh
@1532j0004kg
Dec 10 2017 15:42
@MWBauer use the event handler
when clicking on the "c" ,the "f" will converted into "c".
Marc
@MWBauer
Dec 10 2017 15:53
@sjames1958gm please speak english. You know I'm still trying to learn how to talk like that.
Stephen James
@sjames1958gm
Dec 10 2017 16:04
@MWBauer The values for temperature that you need to set the variables c and f are only available inside the callbacks for the getJSON
I think it is json.main.temp and that is degrees C
$(".message").html(JSON.stringify(json.main.temp));
try this and you will see
Marc
@MWBauer
Dec 10 2017 16:06
$(".message").html(JSON.stringify(json.weather[0]));
    var c=5/9*(f-32)
    var f=9/5*c+32
    function Celsius() {
    return c;
Here? Or just after json.weather?
OH...hold on. That's a whole new line.
Stephen James
@sjames1958gm
Dec 10 2017 16:10
@MWBauer it was more of a debug statement to show the value.
You should probably have event handlers for "click" on the buttons.
Rather than trying to call directly from HTML
var c = json.main.temp
var f = 9 / 5 * json.main.temp + 32
Marc
@MWBauer
Dec 10 2017 16:11
ok
AbrisM
@AbrisM
Dec 10 2017 16:11
Hi! Does anyone know how to add a cursor effect to a webpage using a .ani file?
Marc
@MWBauer
Dec 10 2017 16:12
the display of the weather info is still so ugly. I don't know how to make that a readable attractive display
How can I take the raw data and display it properly?
Stephen James
@sjames1958gm
Dec 10 2017 16:17
@MWBauer Draw out how you want the information to be displayed, then create the HTML for that with default data.
Then if you assign ids, or classes to the HTML elements, you can use javascript to set the values from the data.
If your temperature element is say <div><p>Temp><span class="temp"></span></p></div>
var tempElement = document.querySelector(".temp");
tempElement.textContent = c;
Marc
@MWBauer
Dec 10 2017 16:22
the last line, you are using the tempElement....then what does textContent do? Display the info?
Marc
@MWBauer
Dec 10 2017 16:30
bbl. Ya'll have fun. Happy coding.
Stephen James
@sjames1958gm
Dec 10 2017 16:55
@MWBauer Yes, it stores the value into the element for display
Abdullah-Al-Zubair
@a2-zubair
Dec 10 2017 18:12
hello guys, how do you doing? Need help about my "Local weather app". I want to update one activities about wind speed and temperature unit. I like to do something like when i click the temp Unit, the wind speed will be change mps/kmph according with C/F. How can i do it?
code link: https://codepen.io/a2-zubair/pen/XzYaYZ
Christina Smithers
@mcsmithers
Dec 10 2017 18:27
Hry everyone. I am trying to get NASA data to map on Google maps VueJS2 API. I got static ata for meteorite landings to map on the latitude and longitude to map on markers, but now I am trying to do live NASA API data and my markers are not showing. The docs show it expects a nunmber which I am doing. I would love to have some help since I can't think of what I am doing that's resulting in no markers:
<template>
  <div class="hello">
    <p>Find a meteorite by typing in the searchbox.</p>
  <gmap-map
    :center="center"
    :zoom="1"
    style="width: 100%; height: 300px"
  >
    <gmap-marker
      :key="index"
      v-for="(m, index) in filteredList"
      :position="m.position"
      :clickable="true"
      :draggable="true"
      :label="m.name"
      @click="center=m.position"
    ></gmap-marker>
  </gmap-map>
  <br/>

<h2>Sites</h2>
  <input v-model="search" placeholder="Search a meteorite">
  <p v-for="meteorite in filteredList">Name: {{ meteorite.name }}, Location: {{ meteorite.reclat }} latitude {{ meteorite.reclong }} longitude, Mass: {{meteorite.mass}} grams, Recorded: {{meteorite.year}}</p>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
        data() {
      return {
        center: {lat: 10.0, lng: 10.0},
        markers: [{
          position: {
            lat: 0,
             // lat: meteorite.reclat
            lng: 0
            // lng: meteorite.relong 
          }
        }],
          search: '',
          meteoriteList: []
      }
        },
    computed: {
      filteredList() {
        return this.meteoriteList.filter(meteorite => {
          return meteorite.name.toLowerCase().includes(this.search.toLowerCase())
        })
      }
    },
    created() {
      let vm = this
      axios.get('https://data.nasa.gov/resource/y77d-th95.json')
      .then(function (response) {
        vm.meteoriteList = response.data;
      // console.log(response);
       })
     .catch(function (error) {
      console.log(error);
     });
     }
}
</script>
It would be the position I am trying to set
Stephen James
@sjames1958gm
Dec 10 2017 18:40
@mcsmithers The data appears to be an array with lat/lon at geolocation.coordinates[0] / geolocation.coordinates[1] of each entry
@a2-zubair You'll need move windMeterPerSec to a higher scope along with lat/lon
Then when you update your temperature also update #windSpeed element
Christina Smithers
@mcsmithers
Dec 10 2017 18:44
That's true, there is the array, but there's also reclat and reclon as well with those. I thought it would be easier that way.
That's why I was stuck, haha. seems like it should want to work
"fall":"Fell","geolocation":{"type":"Point","coordinates":[6.08333,50.775]},"id":"1","mass":"21","name":"Aachen","nametype":"Valid","recclass":"L5","reclat":"50.775000","reclong":"6.083330","year":"1880-01-01T00:00:00.000"}
Abdullah-Al-Zubair
@a2-zubair
Dec 10 2017 18:50
@sjames1958gm Actually i want to focus on to change the wind speed kmps into mph when the temp unit was clicked. how can i do it?
Stephen James
@sjames1958gm
Dec 10 2017 18:51
@a2-zubair Add code to the function that changes the temp unit to also update the #windSpeed element.
@mcsmithers Well if you look up Aachen lat lon in google - 50.7753° N, 6.0839° E
you get this so it appears that the coordinates are [lon, lat]
@a2-zubair But you will need to store the wind speed in a scope that is available to that function
@a2-zubair Which it appears it already is.
Marc
@MWBauer
Dec 10 2017 18:58
@sjames1958gm I'm trying to break down the different pieces of info from the raw data to display
Stephen James
@sjames1958gm
Dec 10 2017 19:02
@MWBauer So some of the data is not in the weather[0] object.
Here is the whole json object.
json.name is "Fairview" which I think is the city
{"coord":{"lon":-96.67,"lat":33.16},"weather":[{"id":801,"main":"Clouds","description":"few clouds","icon":"https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F02d.png?1499366021821"}],
"base":"stations","main":{"temp":18.15,"pressure":1028,"humidity":23,"temp_min":17,"temp_max":19},"visibility":16093,"wind":{"speed":3.6,"deg":270},"clouds":{"all":20},"dt":1512929820,
"sys":{"type":1,"id":2592,"message":0.0062,"country":"US","sunrise":1512911996,"sunset":1512948004},"id":4689871,"name":"Fairview","cod":200}
Marc
@MWBauer
Dec 10 2017 19:03
ok.
Stephen James
@sjames1958gm
Dec 10 2017 19:04
Work from outside in to find the data you want. Then plug it into the code and see if you are right, then repeat until you are :)
Marc
@MWBauer
Dec 10 2017 19:04
So, there is the weather, the clouds are displayed, the temp is there
the city name.
the temp is in C, right
?
Marc
@MWBauer
Dec 10 2017 19:26
Everyone's quiet
@sjames1958gm Still here?
Marc
@MWBauer
Dec 10 2017 19:31
I'm trying to follow this and it's doing things differently.
A-J Roos
@Asjas
Dec 10 2017 19:32
@MWBauer Why are you constantly posting the same codepen link? Just link to it using alt-click like this :point_up: December 10, 2017 4:38 PM
Marc
@MWBauer
Dec 10 2017 19:33
alt-click?
Abdullah-Al-Zubair
@a2-zubair
Dec 10 2017 19:34
@sjames1958gm I have done it. you can visit now i update my code. now the wind speed change base on C/F. here: https://codepen.io/a2-zubair/pen/XzYaYZ
A-J Roos
@Asjas
Dec 10 2017 19:34
Correct. You alt-click on the time you want to link to. So you don't post a codepen link 4 or 5 times but rather just point someone to it. It makes the room really hard to read
Marc
@MWBauer
Dec 10 2017 19:36
ahh....
thanks for the instruction
Just point to the post, hold alt and left click?
Stephen James
@sjames1958gm
Dec 10 2017 19:37
@a2-zubair :+1:
Marc
@MWBauer
Dec 10 2017 19:37
AH!
Abdullah-Al-Zubair
@a2-zubair
Dec 10 2017 19:38
@sjames1958gm thanks man for your reply.
CamperBot
@camperbot
Dec 10 2017 19:38
a2-zubair sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
Marc
@MWBauer
Dec 10 2017 19:38
If you're into hunting or fishing, check out MeatEater.
CamperBot
@camperbot
Dec 10 2017 19:38
:star2: 8763 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Dec 10 2017 19:38
@MWBauer You have to assign the temperature inside the displayWeather function, that is where json is available to get the temp
@a2-zubair You're welcome
Marc
@MWBauer
Dec 10 2017 19:39
``function displayWeather(json) { console.log(json.weather[0].main.toLowerCase()) var URL = images[json.weather[0].main.toLowerCase()]; $("body").css("background-image",url("${URL}")`);
}
grr...
function displayWeather(json) {
    console.log(json.weather[0].main.toLowerCase())
    var URL = images[json.weather[0].main.toLowerCase()];
$("body").css("background-image", `url("${URL}")`);
}
Ok...is this where you're talking about?
Stephen James
@sjames1958gm
Dec 10 2017 19:40
@MWBauer yes.
Marc
@MWBauer
Dec 10 2017 19:40
Thank you. Do I need the console.log?
what is DOM?
A-J Roos
@Asjas
Dec 10 2017 19:46
Document Object Model
Linus Phan
@linusphan
Dec 10 2017 20:57
do you guys use imgur to upload your pics to the web?
A-J Roos
@Asjas
Dec 10 2017 20:59
I sometimes use imgur. I mostly use github especially for my projects if i need to use an image in a project
Linus Phan
@linusphan
Dec 10 2017 20:59
oh, I didn't know you can use github
thanks lol
Adel
@AdelMahjoub
Dec 10 2017 21:06
@linusphan Im' using this imaguri, but not yet coupled with an url shortener. The users images folder are not shareable, only images urls could be shared
Ken Haduch
@khaduch
Dec 10 2017 21:35
@linusphan - imgur has restrictions on using their site as a file sharing site - sometimes they will block it. (They have a warning about it in their TOS.) There are other sites that are created for this purpose. postimg.org is one that comes to mind, too.
Kudzu
@czhower
Dec 10 2017 21:36
Basic web plans with ulimited (well within limits that you wont exceed likely) start at like $3 on blluehost etc... so if you need something simple...
AbrisM
@AbrisM
Dec 10 2017 21:54
postimg.org is prettygood :)
well it looks similiar but there was another picture uploading site that allowed for E-rated and college-rated picture uploads
It had a good bulk option, though
There is always grey shadow color around the button “new quote”. I do not know why it happens. I tried eliminating it but all fails.
Kudzu
@czhower
Dec 10 2017 21:59
Try using the DOM debugger tools and look at the CSS tab.
Ctrl-Shift-J in the browser for Chrome, I think FF is same.
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:00
I already looked at it and still don’t know why.
Then I seek help here.
Chi
@chiyc
Dec 10 2017 22:02
It looks like a shadow, but it's actually a border @huyingjie
If you go through the styles for that element in the dev tools, you'll see that the button has a 2px border around it
The border is not the same solid color all around because it has a border-style: outset property to make it look like a button
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:05
@chiyc I used chrome’s inspector and did not find border-style: outset. Where is it located?
Chi
@chiyc
Dec 10 2017 22:05
Keep scrolling down. It's part of the default input[type="button"] styles
On my browser, those style rules show up with a gray background
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:08
@chiyc I still did not find it in Elements tab. In which tab did you find it?
Screen Shot 2017-12-10 at 5.09.17 PM.png
This is my bottom of chrome inspector.
Chi
@chiyc
Dec 10 2017 22:10
Try scrolling back up your styles
They're about 40% of the way down
Just sent you a screenshot
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:15
Screen Shot 2017-12-10 at 5.15.31 PM.png
In my end, border-style: outset has a crossed line but the border still exists.
It is weried
Weird
Chi
@chiyc
Dec 10 2017 22:17
Oh, well above it, you can see another border style that's overwriting that one
I wonder if your version of Chrome has different default stylesheets
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:20
It might be the problem. I opened the page in the safari. Safari shows a different border style
Chi
@chiyc
Dec 10 2017 22:21
Ohh, haha. The CSS rules are ordered by priority, so if you see something crossed out, you can find the rule that's overwriting it back up the list
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:21
So the question becomes how to override browser’s style?
Chi
@chiyc
Dec 10 2017 22:21
If you just set the border for the button yourself, it'll take priority
You could test it with a quick border: none
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:23
Thank you. It works. This means I have to set border color every time when creating a button. Otherwise, different browser will give different style of borders.
Chi
@chiyc
Dec 10 2017 22:24
Yep, buttons have default stylings to make them stand out
You might also notice that when you click on a button to focus it, it gets a blue border (in Chrome at least)
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:24
@chiyc Thank you👍
CamperBot
@camperbot
Dec 10 2017 22:24
huyingjie sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @chiyc |http://www.freecodecamp.org/chiyc
Chi
@chiyc
Dec 10 2017 22:25
You can set styles for that by accessing the :focus pseudoclass. And even though it looks like a border, it's actually the outline property in CSS, which is like a border but it's drawn around the outside of the element
You're welcome, @huyingjie !
AbrisM
@AbrisM
Dec 10 2017 22:30
https://daneden.github.io/animate.css/ Does anyone know how to get the flash animation like on this site? :) Not Blink, but this type of flash animation for css?
Unfortunately blink does not work for chrome or edge
Micah M.
@mcmxl22
Dec 10 2017 22:38
How do I get the header all the way across the top with the links sidebar on the left under it? Why isn't the linked image in the header showing? https://codepen.io/mcmxl22/pen/pdGrxx
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:39
@chiyc I used outline-style: none; inside both button element and button: hover but there is still a gray border around the button when I click it.
@mcmxl22 You mean drop-down menu?
Chi
@chiyc
Dec 10 2017 22:41
You'll want to use the button:focus selector @huyingjie
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:42
I tried button:focus but it did not work either.
Chi
@chiyc
Dec 10 2017 22:42
Do you have a link to your updated pen?
AbrisM
@AbrisM
Dec 10 2017 22:42
Hi, does anyone know how to have links glow white when the cursor hovers over it?
Micah M.
@mcmxl22
Dec 10 2017 22:43
@huyingjie It's not supposed to be a drop down menu. I want it a sidebar with the links in it.
Chi
@chiyc
Dec 10 2017 22:44
@AbrisM Look into using a :hover pseudoclass selector to add styles when you hover over an element. And the CSS property you're looking for is probably going to be text-shadow
alpox
@alpox
Dec 10 2017 22:44
@AbrisM The css they used is:
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}
Chi
@chiyc
Dec 10 2017 22:45
Hmm, I don't see any outlines when I click the button on Chrome. I wonder if Safari is different. Have you also tried outline: none? @huyingjie
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:46
@chiyc I guess it is related chrome’s.
Chi
@chiyc
Dec 10 2017 22:46
For accessibility though, removing :focus outlines from elements is generally considered unfriendly for users. I'd consider adding a custom style of your own instead
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:47
After I adding button:focus { outline-style: none; }, codeine and local file in the safari do not show border when I click the button.
But chrome still has the border.
Chi
@chiyc
Dec 10 2017 22:48
Interesting. I don't see it in Chrome
Yingjie (Iris) Hu
@huyingjie
Dec 10 2017 22:49
@chiyc Probably you can reproduce this by downloading original files to the local machine.There is no problem in the codepen
AbrisM
@AbrisM
Dec 10 2017 22:58
@alpox @chiyc Yes, I am currently using keyframes with blink. I'll try it with the flash and see if it fixes the compatibility issue with chrome :)
Christina Smithers
@mcsmithers
Dec 10 2017 23:40
Hey guys, I wrote earlier with trying to tie in a latitude and logitude to a position object in Google Maps. I tried to assign the position to an object i the array where the api data was getting pulled in and stil can't get it to work.
export default {
        data() {
      return {
        center: {lat: 10.0, lng: 10.0},
        markers: [{
          position: {lat: meteorite.geolocation.coordinates[0], lng: meteorite.geolocation.coordinates[1]}
        }],
          search: '',
          meteoriteList: []
      }
        },
Looking in the chrome console. it says vue.esm.js?65d7:574 [Vue warn]: Error in data(): "ReferenceError: meteorite is not defined"
Do I set it to meteoriteList then instead? Because if so, it still has the error of being undefined
Christina Smithers
@mcsmithers
Dec 10 2017 23:57
I tried to see if I can set it where the data comes in and that's not working either:
<script>
  import axios from 'axios'
  export default {
        data() {
      return {
        center: {lat: 10.0, lng: 10.0},
          search: '',
          meteoriteList: []
      }
        },
    computed: {
      filteredList() {
        return this.meteoriteList.filter(meteorite => {
          return meteorite.name.toLowerCase().includes(this.search.toLowerCase())
        })
      }
    },
    created() {
      let vm = this
      axios.get('https://data.nasa.gov/resource/y77d-th95.json')
      .then(function (response) {
        vm.meteoriteList = response.data;
         this.meteoriteList.reclat = reclat;
         this.meteoriteList.reclong = reclong;
         this.position = { 'lat': reclat, 'lng': reclong }
      // console.log(response);
       })
     .catch(function (error) {
      console.log(error);
     });
     }
}
</script>
Micah M.
@mcmxl22
Dec 10 2017 23:59
@mcsmithers You need to define meteorite as a variable or function in your script. you are calling it without defining it.
same for meteoriteList