These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Sep 2017
Ismail Hozain
@ismailhozain
Sep 25 2017 00:06
quick question will i have to do an api for every single user?
stream and info
Gersho
@Gersho
Sep 25 2017 00:07
one call per user yes
the call is basically saying "give information on stream(or user) X"
Geekomatic
@Geekomatic
Sep 25 2017 00:13
@hifede Look here https://www.w3schools.com/Bootstrap/bootstrap_grid_examples.asp at "offsetting columns". Or change col-3 to col-6 in the form. Same with navbar brand, try setting it into it's own row and then applying a col- class.
hifede
@hifede
Sep 25 2017 00:28
@Geekomatic thanks for the tip! if i change col-3 to col-6 all that happens is that the form is bigger in size but it doesnt go back to the lefct
CamperBot
@camperbot
Sep 25 2017 00:28
hifede sends brownie points to @geekomatic :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @geekomatic |http://www.freecodecamp.com/geekomatic
Geekomatic
@Geekomatic
Sep 25 2017 00:28
@hifede yeah but you could offset it so that you keep the same size 3 cols but centered.
Ismail Hozain
@ismailhozain
Sep 25 2017 00:58
thanks @Gersho
CamperBot
@camperbot
Sep 25 2017 00:58
ismailhozain sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 456 | @gersho |http://www.freecodecamp.com/gersho
Miguel T Rivera
@mtrivera
Sep 25 2017 01:02
Can anyone help me with my Simon game? When the sequence playbacks, the user can press the colors and contaminate the sequence. I've put in code to disable the board during playback but it's not working properly:
https://codepen.io/mtrivera/pen/wqpZZZ
korzo
@korzo
Sep 25 2017 01:13
@mtrivera you can either place all your listeners in one function and attach/ remove them when sequence is played or add some flag n the global state, toggle it when sequence plays and test this flag at the start of listener
@mtrivera like
colorsDiv.addEventListener("click", e => {
   if(sequenceIsPlaying === true) {
    // do nothing or return
  }
Miguel T Rivera
@mtrivera
Sep 25 2017 01:21
@korzo I tried something like that already and its not working properly. Could it be not working because my playSequence function uses recursion?
korzo
@korzo
Sep 25 2017 01:25
@mtrivera you should set flag/remove listeners before first call to playSequence
and then at the top toggle the flag/attach listeners back
if (index === sequence.length - 1) {
    sequenceIsPlaying  = false;
or you can set the flag to true in else branch @mtrivera
Moisés Man
@moigithub
Sep 25 2017 01:31
last week got a interview for a FRONTend position...
when i got there.. they asked me..
. design a db to handle tourism data
. create a SQL statement to gather x and y data from ur db
i was like.. WT*.. wasnt this for a frontend position? :)
Gersho
@Gersho
Sep 25 2017 01:34
well maybe not the first one, but the second one i'd consider that front end (but that would be assuming the sql db was set up already)
shivam gupta
@shivamg11000
Sep 25 2017 01:37
hey in browserify,
how to output the bundled.js to a another folder from the cli
Miguel T Rivera
@mtrivera
Sep 25 2017 01:42
@korzo I tried that too :( Thanks anyway
CamperBot
@camperbot
Sep 25 2017 01:42
mtrivera sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 543 | @korzo |http://www.freecodecamp.com/korzo
John
@desmoquak
Sep 25 2017 03:58
Hi everyone!
I am having trouble with my code for my portfolio page. How to create multiple scolling images in CSS to be exact. Infact, i can’t even get Codepen to load images in CSS, I have to use query. any help would be sublime!
Shubham Singh
@imshubhamsingh
Sep 25 2017 04:00
Hey guys just started to learn scss and canvas .... What you guys think https://codepen.io/imshubhamsingh/pen/jGVemG
heroiczero
@heroiczero
Sep 25 2017 04:05
@imshubhamsingh nice animation of the :star: in the background and clouds :+1: :star2:
Shubham Singh
@imshubhamsingh
Sep 25 2017 04:06
@heroiczero thanks
CamperBot
@camperbot
Sep 25 2017 04:06
imshubhamsingh sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1772 | @heroiczero |http://www.freecodecamp.com/heroiczero
Cullen99
@Cullen99
Sep 25 2017 04:14
I am about to start the basic front end development project to create a portfolio. I havnt looked at the example's code, but i was wondering how to make a scrolling navigation bar?
piteto
@piteto
Sep 25 2017 04:21
@Cullen99 The example portfolio uses a bootstrap navbar, the bootstrap documentation has some instructions on how to get started with the code
linkin-park
@linkin-park
Sep 25 2017 04:23
http://cssdeck.com/labs/a4wsas8y how to give transparent image
piteto
@piteto
Sep 25 2017 04:23

@desmoquak some small issues in this CSS:

body{
  background-image:url("http://www.baltana.com/files/wallpapers-4/Steel-Background-Widescreen-Wallpapers-14575.jpg")
  font-family:Slabo;
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Missing a semi-colon on that first line
the background property requires an image first. Try this instead:

body{
  background: url("http://www.baltana.com/files/wallpapers-4/Steel-Background-Widescreen-Wallpapers-14575.jpg") no-repeat center center fixed;
  font-family:Slabo;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
linkin-park
@linkin-park
Sep 25 2017 04:23
opacity 0.4
http://cssdeck.com/labs/a4wsas8y how to give transparent image
GM @heroiczero
heroiczero
@heroiczero
Sep 25 2017 04:26
@linkin-park which image do you want transparent?
linkin-park
@linkin-park
Sep 25 2017 04:27
the section-1 image aka having currently cloud
should i need to have rgba with opacity 0.5 ?
or is there any other option
John
@desmoquak
Sep 25 2017 04:28
@piteto it worked! Than you so much! If i were to scroll multiple images on each page, would they need their own divs? or could i just add multiple urls separated by commas? Or would that stack all the images on top of one another?
heroiczero
@heroiczero
Sep 25 2017 04:30
@linkin-park Dont really see an image
@linkin-park I must be blind lol
piteto
@piteto
Sep 25 2017 04:32
@desmoquak not sure what you mean by scrolling multiple images
heroiczero
@heroiczero
Sep 25 2017 04:32
@linkin-park maybe this will help if you want to make a transparent background https://css-tricks.com/snippets/css/transparent-background-images/
linkin-park
@linkin-park
Sep 25 2017 04:33
may be i might be thinking wrong , what do you call icon as ?
its materilize icon , isnt that image ?
heroiczero
@heroiczero
Sep 25 2017 04:33
@linkin-park <i>
piteto
@piteto
Sep 25 2017 04:34
if you add multiple <img> tags all next to each other, they will appear the same as text, all on a line and then wrap to the next line depending on screen width.
If you put the <img> tags in a <div> they will each take up their own line
@desmoquak
heroiczero
@heroiczero
Sep 25 2017 04:34
@linkin-park could use http://materializecss.com/icons.html or awesome fonts
John
@desmoquak
Sep 25 2017 04:57
@piteto maybe scrolling isn’t the word I am looking for?
Zerka1982
@Zerka1982
Sep 25 2017 05:10
hello everyone !
Long Nguyen
@longnt80
Sep 25 2017 05:36

hello, here's my Markdown Previewer: https://codepen.io/longnt80/pen/jGMXJw?editors=0010

I wonder how I can extract the textarea and the previewer area to components

Zerka1982
@Zerka1982
Sep 25 2017 05:47
guys anyone
I have this API (http://api.timezonedb.com/v2/list-time-zone?key=9OMIDMSCMG7D&format=json) , and I was wondering how can I display the timestamp based on user input
can anyone help ?
Markus Kiili
@Masd925
Sep 25 2017 05:50
@Zerka1982 What user input do you mean?
Zerka1982
@Zerka1982
Sep 25 2017 05:51
I mean if they type for example Dubai or Dublin then the timestamp must be displayed
if the user type for example : Dubai , then the timestamp & gmtOffset must be displayed accordingly
Markus Kiili
@Masd925
Sep 25 2017 05:53
@Zerka1982 json.zones is an array of objects, and you need the object with the given countryName. You could iterate the array or use an array iterator like .find()
Zerka1982
@Zerka1982
Sep 25 2017 05:54
Could you please Markus make an example ?
There is also a possibility of adding the countryName into Select html, but don't know how to do it
here is the code
<script>
var timeZone = new XMLHttpRequest();
timeZone.open("GET", "http://api.timezonedb.com/v2/list-time-zone?key=9OMIDMSCMG7D&format=json", false);
timeZone.send(null);

var r = JSON.parse(timeZone.response);

// Read the data from API

var countryName = "Country :" + r.zones[1].countryName;
var region = "The region :" + r.zones[1].zoneName;
var GMT = "GMT : " + r.zones[1].gmtOffset;
var localTime = "timestamp is : " + r.zones[1].timestamp;


// Display the data on my page ....
document.getElementById("countryName").innerHTML = countryName;
document.getElementById("region").innerHTML = region;
document.getElementById("city").innerHTML = GMT;
document.getElementById("localTime").innerHTML = localTime;

</script>
However, the problem is that I want to loop over all countries and have them for example inside Option HTML
Markus Kiili
@Masd925
Sep 25 2017 05:57
@Zerka1982 You can loop the r.zones array and do what you need to do. For finding a certain object on an array you can use find:
var arr = [{name:"cat",age:5},{name:"dog",age:6},{name:"horse",age:7}];

arr.find(function(elem){return elem.name==="dog"}).age; // 6
Zerka1982
@Zerka1982
Sep 25 2017 05:58
I ll try
is it possible to put all countries inside option HTML ?
Markus Kiili
@Masd925
Sep 25 2017 06:02
@Zerka1982 Sure. You need to make a select element and then generate option elements inside it. You can use document.createElement() and Node.appendChild().
Or similar jQuery methods.
Zerka1982
@Zerka1982
Sep 25 2017 06:11
I can select only one country :(
Markus Kiili
@Masd925
Sep 25 2017 06:12
@Zerka1982 You need to loop the r.zones array and generate one option element for each object in that array.
Zerka1982
@Zerka1982
Sep 25 2017 06:12
inside the Select box I have this
image.png
Amit Patel
@AmitP88
Sep 25 2017 06:13
hey guys, I know this is sort of off topic, but I just have to say this because I had a weird dream about it. What if there was a Matrix prequel in where we see "Mr. Anderson" in the matrix before he got out? Remember in the first movie where Agent Smith said he was living a double life as a hacker? What if in this prequel, we got to see what he did as a hacker before he got out? In my dream, it was almost as if I were watching this movie (not the original, but the idea that came to me). In my dream, Mr. Anderson was drinking coffee and reading a newspaper in a coffee shop, where he sees a young teen delivering packages on a bike. The teen is very clumsy, to the point where he's pissing people off and causing a mess. Mr. Anderson approaches the guy after and tells him that he's not very good with this delivery thing and asks him what he wants to do with his life. The teen said that he was previously studying comp sci, but that he dropped out. Mr. Anderson asks why doesnt he go back? The teen says that he could never go back and that he got expelled for doing something he shouldnt do on the computer. Mr. Anderson asks to meet with him later on at his apartment. When they meetup there, Mr. Anderson starts teaching him how to hack and code, and that everything in the world is essentially just code and was showing him how to manipulate this and that. That's when I woke up lol
Zerka1982
@Zerka1982
Sep 25 2017 06:14
I've created an HTML element Select - Option with a specific ID and then I could only display one array, by giving index number
How to loop over the api and get all countries inside Select Option element ?
Markus Kiili
@Masd925
Sep 25 2017 06:17
@Zerka1982 for (var i=0; i<r.zones.length; i++){...}. Iniside the loop block r.zones[i] is one looped object. You need to generate a new option element and its value attribute to the country from the object.
Zerka1982
@Zerka1982
Sep 25 2017 06:19
Thank you Markus, I ll check it
Markus Kiili
@Masd925
Sep 25 2017 06:31
@Zerka1982 Here is an example of how you can generate option elements inside an existing select element:
    var json= {"status":"OK","message":"","zones":[
        {"countryCode":"AD","countryName":"Andorra","zoneName":"Europe\/Andorra","gmtOffset":7200,"timestamp":1506327092},
        {"countryCode":"AE","countryName":"United Arab Emirates","zoneName":"Asia\/Dubai","gmtOffset":14400,"timestamp":1506334292},
        {"countryCode":"AF","countryName":"Afghanistan","zoneName":"Asia\/Kabul","gmtOffset":16200,"timestamp":1506336092}
        ]};

    var select = document.getElementsByTagName("select")[0];
    for (var i=0; i<json.zones.length; i++) {
        var obj = json.zones[i];
        var elem = document.createElement("option");
        elem.setAttribute("name",obj.countryName);
        elem.textContent = obj.countryName;
        select.appendChild(elem);
    }
Zerka1982
@Zerka1982
Sep 25 2017 06:31
lool I get the last element of the api
@Masd925 thank you very much. I appreciate your help!
CamperBot
@camperbot
Sep 25 2017 06:32
zerka1982 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4498 | @masd925 |http://www.freecodecamp.com/masd925
Markus Kiili
@Masd925
Sep 25 2017 06:33
@Zerka1982 That last line adds the generated element into the browser dom, so it is actually shown on the page.
Zerka1982
@Zerka1982
Sep 25 2017 06:36
I got it now
Thank you very much Markus
Markus Kiili
@Masd925
Sep 25 2017 06:36
@Zerka1982 :+1:
Zerka1982
@Zerka1982
Sep 25 2017 06:37
Could you give me a hint Markus
just a hint
If I select a country ----> get timestamp
Markus Kiili
@Masd925
Sep 25 2017 06:39
@Zerka1982 You can use change event on the select element.
Zerka1982
@Zerka1982
Sep 25 2017 06:40
Thank you!
linkin-park
@linkin-park
Sep 25 2017 06:53
please review my hello_world_fb let me know how i can improve the design
http://cssdeck.com/labs/a4wsas8y
only js is added on the title
Gersho
@Gersho
Sep 25 2017 06:55
lots of duplicate link at bottom
arpitanand112
@arpitanand112
Sep 25 2017 06:55
@linkin-park can you chnage the font same that facebook uses
use this tool to detech font - http://www.chengyinliu.com/whatfont.html
*detect
linkin-park
@linkin-park
Sep 25 2017 06:57
yes @Gersho just to get similar look :)
Zerka1982
@Zerka1982
Sep 25 2017 07:48
Back again :)
Guys I have a crazy question
if you don't mind :)
Can we edit an API link by allowing users to type for example their location place. The location will be added to the API and generate JSON output ?
Gersho
@Gersho
Sep 25 2017 07:51
sure
Zerka1982
@Zerka1982
Sep 25 2017 07:51
Gresho, Could you please look at this API
IT gives information about Stockholm ( time, weather, etc ...)
Can I somehow allow the user to mention their location and based on that I wanna get the weather and time
Gersho
@Gersho
Sep 25 2017 07:53
if you getjson (url , callback) the url can be constructed however you see this
like
var url = "http://apicall.com/user/";
url += "gersho";
Zerka1982
@Zerka1982
Sep 25 2017 07:53
@Gersho Could you please make an example out of the API I gave please ?
Gersho
@Gersho
Sep 25 2017 07:53
you don't use navigator.geolocation
?
Zerka1982
@Zerka1982
Sep 25 2017 07:54
No
could you please use codepen , so I can look at it, if you don't mind!
This is the data I receive from the API I sent
{"location":{"name":"Stockholm","region":"Stockholms Lan","country":"Sweden","lat":59.33,"lon":18.05,"tz_id":"Europe/Stockholm","localtime_epoch":1506325909,"localtime":"2017-09-25 9:51"},"current":{"last_updated_epoch":1506325510,"last_updated":"2017-09-25 09:45","temp_c":14.0,"temp_f":57.2,"is_day":1,"condition":{"text":"Partly cloudy","icon":"//cdn.apixu.com/weather/64x64/day/116.png","code":1003},"wind_mph":8.1,"wind_kph":13.0,"wind_degree":70,"wind_dir":"ENE","pressure_mb":1036.0,"pressure_in":31.1,"precip_mm":0.0,"precip_in":0.0,"humidity":94,"cloud":75,"feelslike_c":13.1,"feelslike_f":55.5,"vis_km":10.0,"vis_miles":6.0}}
Gersho
@Gersho
Sep 25 2017 07:55

http://api.apixu.com/v1/current.json?key=ae8eb72b72d6406ebd0224840163011&q=stockholm

well it seems you only need to use
http://api.apixu.com/v1/current.json?key=ae8eb72b72d6406ebd0224840163011&q=

and use a town name at the end ? but i don't know this api so i don't know what data it expects (what town are ok to ask ?) also, it seems you linked your API key, you should keep those private

Zerka1982
@Zerka1982
Sep 25 2017 07:56
here is the result of the api u think I need to use:
{"error":{"code":1003,"message":"Parameter q is missing."}}
check it urself :)
There Where I'm struggling
Gersho
@Gersho
Sep 25 2017 07:57
try with paris at the end
Zerka1982
@Zerka1982
Sep 25 2017 07:57
with Paris, it will work
Adeel Salim
@adeelsalim
Sep 25 2017 07:57
hi! how can i set values of some elements for e.g i have 9 div and i want to access some of those div using jquery how can i do that this gives error
$('div)[x].css("backgroundColor", "#fff");
Gersho
@Gersho
Sep 25 2017 07:57

you make a variable that is

var url = "http://api.apixu.com/v1/current.json?key=ae8eb72b72d6406ebd0224840163011&q=";

and when you get your user input, you add it at the end of that string, and use that string to make the call

Zerka1982
@Zerka1982
Sep 25 2017 07:58
I just was wondering if I can keep it without city name and then in the page (body section), user can type the city
yes
Gersho
@Gersho
Sep 25 2017 07:58
@adeelsalim give them id's it's the simpliest
Zerka1982
@Zerka1982
Sep 25 2017 07:59
@adeelsalim use ID's instead of DIV
Adeel Salim
@adeelsalim
Sep 25 2017 07:59
That wont be the solution if tmrw i have like 100 divs and i want to access some of them i can acess particular number through a loop so giving id will be quite hactic to 100 div @Zerka1982 @Gersho
Zerka1982
@Zerka1982
Sep 25 2017 08:00
Give ID to each DIV , then in Jquery call it this way $('#id_name').style("backgroundColor", "#fff");
@Gersho could you please make an example using Codepen for the API so I can look at it ?
Gersho
@Gersho
Sep 25 2017 08:01
loop for N'th child then
@Zerka1982 sorry i'm going to bed (4am) but have a look here if you want
https://codepen.io/Gersho/pens/popular/?grid_type=list
the twitch or the weather ones should have what you're looking for
or the wikipedia one
good luck, i'm off to bed
Zerka1982
@Zerka1982
Sep 25 2017 08:02
@Gersho thank you
CamperBot
@camperbot
Sep 25 2017 08:02
zerka1982 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 461 | @gersho |http://www.freecodecamp.com/gersho
Adeel Salim
@adeelsalim
Sep 25 2017 08:02
So thier is no way to access the way i am trying to like in javascript this will work queryselectorall ('div')[1].style.backgroundColor = "#fff" but wont work with jquery
linkin-park
@linkin-park
Sep 25 2017 08:27
what can i build next @Gersho
after FB
Zerka1982
@Zerka1982
Sep 25 2017 09:53
gys
guys
How can I access to "place_id" ?
{
"predictions" : [
{
"description" : "Paris, France",
"id" : "691b237b0322f28988f3ce03e321ff72a12167fd",
"matched_substrings" : [
{
"length" : 5,
"offset" : 0
}
],
"place_id" : "ChIJD7fiBh9u5kcRYJSMaMOCCwQ",
"reference" : "CjQlAAAAPPk3aUQt2IWDuSMyiPtukJCjXBGtXUUGf43YXirIVyeAF61ZZ0sdE_swX17c7DwREhCaSP6APoPyplLmzsuO4UoCGhRgf1xRAmovBvq80BltltCtLqNH2g",
"structured_formatting" : {
"main_text" : "Paris",
"main_text_matched_substrings" : [
{
"length" : 5,
"offset" : 0
}
],
"secondary_text" : "France"
}]
}
iso
@iso1048
Sep 25 2017 09:56
@Zerka1982 try viewing the data in the console. It will make it easier to see the structure of the json
Zerka1982
@Zerka1982
Sep 25 2017 09:56
I get really confused
let s review this example please
{
"predictions" : [
{
"description" : "Paris, France",
"id" : "691b237b0322f28988f3ce03e321ff72a12167fd",
"place_id" : "ChIJD7fiBh9u5kcRYJSMaMOCCwQ"
}
]
}
How Can i access to "place_id" please ?
Markus Kiili
@Masd925
Sep 25 2017 10:02
{
  "predictions" : [{"description" : "Paris, France",
                    "id" : "691b237b0322f28988f3ce03e321ff72a12167fd",
                    "place_id" : "ChIJD7fiBh9u5kcRYJSMaMOCCwQ"
                   }
                  ]
}
If you format it better, you can see the object structure.
@Zerka1982 json.predictions would be the array there.
Zerka1982
@Zerka1982
Sep 25 2017 10:05
json.predictions[place_id]
iso
@iso1048
Sep 25 2017 10:05
json.predictions[0].place_id @Zerka1982
Zerka1982
@Zerka1982
Sep 25 2017 10:06
uuups, I forget that the array has index :D
linkin-park
@linkin-park
Sep 25 2017 10:07
array is not array that you know
Zerka1982
@Zerka1982
Sep 25 2017 10:08
Array that is composed of objects
linkin-park
@linkin-park
Sep 25 2017 10:14
close too :)
array often starts with some index and are sequential but hey does js array are ?
Zerka1982
@Zerka1982
Sep 25 2017 10:53
@linkin-park Do I look funny :(
George Kemp
@gkemp94
Sep 25 2017 11:08
Anybody else having an issue accessing their challenges? Not sure if it's the wi-fi I'm on or the website.
linkin-park
@linkin-park
Sep 25 2017 11:09
thats the behavior js array my friend @Zerka1982
Zerka1982
@Zerka1982
Sep 25 2017 11:19
@linkin-park Javascript is something I'm learning at the moment
Guys does anyone have examples about Google APIs ? especially, for the time zone :)
Fabien SHAN
@X140hu4
Sep 25 2017 11:27
@gkemp94 I don't see any problem. Have you checked the internet speed?
Fernando
@lestairon
Sep 25 2017 11:42
https://codepen.io/Lestairon/pen/ayraQg?editors=0110
Hi, how can align each letter so it doesn't end up like this...?
image.png
rscales02
@rscales02
Sep 25 2017 11:46
can someone tell me how to center the image in the row vertically?
Zerka1982
@Zerka1982
Sep 25 2017 11:48
@rscales02 use an inline-block helper with height: 100% and vertical-align: middle
rscales02
@rscales02
Sep 25 2017 11:48
Screenshot (7).png
Olawale Akinseye
@brainyfarm
Sep 25 2017 12:14

Hi everyone,

I am Olawale Akinseye (A full stack javascript developer) and I am offering live javascript help to anyone interested via Zoom.

Reach out to me if you are stuck!

George Kemp
@gkemp94
Sep 25 2017 12:15
@X140hu4 Oddly enough it wouldn't allow me to connect with the starbucks wi-fi, have to use a VPN...never had that issue before...
shivam gupta
@shivamg11000
Sep 25 2017 13:11
any browserify user can help me with configuring package.json file
piteto
@piteto
Sep 25 2017 13:31
@shivamg11000 You might try here: http://webchat.freenode.net/?channels=browserify
linkin-park
@linkin-park
Sep 25 2017 14:48
why to use react/angular/vue
tundeiness
@tundeiness
Sep 25 2017 14:49
hello guys. So I have a question (it's just a sort of double check.) I'd like to know if it's possible to have multiple Ajax call getting data from one source please. Help will be appreciated. Thank you.
linkin-park
@linkin-park
Sep 25 2017 14:49
please let me know
piteto
@piteto
Sep 25 2017 14:52
@tundeiness Yes, it's possible to make multiple ajax calls to the same source
tundeiness
@tundeiness
Sep 25 2017 14:58
@piteto ah..great!
Alexx Martínez
@AlexxMart
Sep 25 2017 15:42

Guys, after a rough week I completed the "Show the local weather" challenge.

Tell me what you think: https://codepen.io/Alexxander/pen/QMVjPb

And thanks again to the two kind guys here that helped me when I was stuck

Ken Haduch
@khaduch
Sep 25 2017 16:02
@AlexxMart - nice work on the weather app - looks like it got things right as far as location, forecast. A couple suggestions about the styling - putting the information in quotation marks is a little unusual - there are many styling options that you can use with CSS and HTML to present the information in a nice format. That's just a suggestion, it doesn't make the app more correct, just a better use of the tools at your disposal. Getting it to work is the first and most important step. The styling is somewhat the "icing on the cake", but also an important part of site design, so you want to try and focus on that a little, as well. Good work, though - sounds like you had a lot of learning in the process so it's a good success to get it working!
Alexx Martínez
@AlexxMart
Sep 25 2017 16:04

@khaduch Thanks for the feedback.

Yes, now I will change the colors to something with a better contrast, I'll also change the font. I tried removing the quotation marks, but I couldn't figure out how to do it since that is how it comes in the json file I used

CamperBot
@camperbot
Sep 25 2017 16:04
alexxmart sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3312 | @khaduch |http://www.freecodecamp.com/khaduch
Alexx Martínez
@AlexxMart
Sep 25 2017 16:05
but I totally get your point, style is not everything, but is a very important factor when delivering a product. Again, thanks for taking the time to check my page
Ken Haduch
@khaduch
Sep 25 2017 16:07
@AlexxMart - oh, I see what you're doing. You do not need to use JSON.stringify to access the data - you should just be able to access it directly from the JSON object - for example $(".country").html(json.sys.country); and so forth for all of the JSON data. Do that and it will not have the quotation marks, the strings will be handled as they normally are in JavaScript and the values will be written to your DOM elements as you have specified.
Alexx Martínez
@AlexxMart
Sep 25 2017 16:10
@khaduch cool. I'll try that
Ken Haduch
@khaduch
Sep 25 2017 16:11
@AlexxMart - happy to help you and check your project... good luck!
Zay
@incognitonerd
Sep 25 2017 16:16
hey everyone
Olawale Akinseye
@brainyfarm
Sep 25 2017 16:17
Hello @incognitonerd :)
Ken Haduch
@khaduch
Sep 25 2017 16:38
@incognitonerd @brainyfarm - hello to both of you!
JulienZiadeh
@JulienZiadeh
Sep 25 2017 16:51
Hi everyone, I am creating a project similar to Hashnode.com but not for developers(for another target audience)and I was wondering which is better BS or MDL. I heard that MDL has a better performance since it relies on HTML and CSS only while BS relies on both HTML, CSS and JS. Any suggestions?
Jorge
@OrangeKulture
Sep 25 2017 16:51
hey guys
krckyboy
@krckyboy
Sep 25 2017 17:09
Can anyone suggest any CSS3 templates I can use to clone as practice? Mostly what I find online has some JS and I just wanna practice CSS3.
I mean, if you guys have a website that you occasionally go to when you want to clone something or something like that. Need a good source myself, not something random. Thank you!
wnghero
@wnghero
Sep 25 2017 17:09
// Setup
var collection = {
    2548: {
      album: "Slippery When Wet",
      artist: "Bon Jovi",
      tracks: [ 
        "Let It Rock", 
        "You Give Love a Bad Name" 
      ]
    },
    2468: {
      album: "1999",
      artist: "Prince",
      tracks: [ 
        "1999", 
        "Little Red Corvette" 
      ]
    },
    1245: {
      artist: "Robert Palmer",
      tracks: [ ]
    },
    5439: {
      album: "ABBA Gold"
    }
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));

// Only change code below this line
function updateRecords(id, prop, value) {
  if(value !== "" && prop !== "tracks"){
    collection.id.prop = value;
  }

  return collection;
}

// Alter values below to test your code
updateRecords(5439, "artist", "ABBA");
why isnt my function working?
Jan Shah
@JanShah
Sep 25 2017 17:14
@wnghero use brackets instead of dots when using variables to call an object
collection[id][prop]
wnghero
@wnghero
Sep 25 2017 17:14
ahh ok thankyou
GabriRa
@GabriRa
Sep 25 2017 17:19
Hey, anyone knows about react-router-v4? I dont know how can I pass some props to a <Route/> element
alpox
@alpox
Sep 25 2017 17:26
@GabriRa use render instead of component https://reacttraining.com/react-router/web/api/Route/render-func
GabriRa
@GabriRa
Sep 25 2017 17:27
@alpox I have tried, but I couldn't make it work, will check the docs and try again
GabriRa
@GabriRa
Sep 25 2017 17:38
@alpox Okey, I think I got it now, thanks for making me look at it again!
CamperBot
@camperbot
Sep 25 2017 17:38
gabrira sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1333 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Sep 25 2017 17:42
@GabriRa np :-)
Renato Francia Castillo
@rmfranciacastillo
Sep 25 2017 19:10
Hello Everyone :)
Is anyone here familiar with SMACSS?
I'm trying to find a similar architecture to organize JS files
Cheers :smile:
Amanda
@Amandaan
Sep 25 2017 19:50
Does anyone know why I just can't change the width and height of a form of a table label?
the width and height of a form or a table label?
piteto
@piteto
Sep 25 2017 19:52
@Amandaan height and width should work on <form> elements. <label> is for <input> elements though. Maybe we need to see your code to know what's going on.
Amanda
@Amandaan
Sep 25 2017 19:54
屏幕快照 2017-09-25 下午3.53.53.png
屏幕快照 2017-09-25 下午3.54.54.png
piteto
@piteto
Sep 25 2017 19:59
@Amandaan That should result in an orange square 393px wide with 65px height
You are missing a closing </table> though
<div class="rfloat">
  <form action="https://www.facebook.com/login.php?login_attempt=1&lwv=110">
    <table cellspacing="0">
    </table>
  </form>
</div>
Amanda
@Amandaan
Sep 25 2017 20:01
I folded the table
piteto
@piteto
Sep 25 2017 20:01
Here's what I see - maybe you need to put everything in a codepen to see if something else is causing a conflict. https://codepen.io/anon/pen/vegmNq
would help to debug if it's in codepen/jsfiddle/etc
Amanda
@Amandaan
Sep 25 2017 20:04
Thank you! I'll check that later
You're right. The table element should be 393px for width and 65px for height. But then I checked that in the browser
The values still didn't change. They remained the same as they were.
still 393px for width, and 83px for height....
Koderkid1936
@Koderkid1936
Sep 25 2017 20:26
Hey guys check out my website I need criticism It's the last one I promise (I used SCSS this time) https://codepen.io/Mr_Evers/pen/eGgWKj thanks in advance
its not finished yet btw
iso
@iso1048
Sep 25 2017 20:29
@Koderkid1936 looks good. at smaller screen sizes, the icons and text in the footer overlap
image.png
Koderkid1936
@Koderkid1936
Sep 25 2017 20:31
@gothamknight yeah I need to fix that, I usually dont run into these problems but I build the footer and nav ul's with flexbox this time around I'm not exactly sure how to go about fixing it yet but I'll manage it eventually
Gersho
@Gersho
Sep 25 2017 20:56
@Koderkid1936 have you considered using vw unit for your font size ?
Koderkid1936
@Koderkid1936
Sep 25 2017 20:57
@Gersho is vw short for viewport? if it is then I'm sorry but I hve never heard of giving a font a value of 'vh'
'*vw'
I thought they only take 'em' 'rem' '%'and 'px' @Gersho
Gersho
@Gersho
Sep 25 2017 20:58
yes that's viewport (https://www.w3schools.com/cssref/css_units.asp) i don't know if it's good practice or not, but it works on fonts
Koderkid1936
@Koderkid1936
Sep 25 2017 20:58
thanks I'll check it out
Gersho
@Gersho
Sep 25 2017 20:59
you can try it on my pen https://codepen.io/Gersho/pen/qPqRMj?editors=0110
(the maintitle class)
sometimes cloud appear out of nowhere, but it's really cool looking
Koderkid1936
@Koderkid1936
Sep 25 2017 21:03
I've been dabbling with CSS animations recently (but this was just so I could add hover effects on some elements ) just wanted to share https://codepen.io/Mr_Evers/pen/XepdjY
Gersho
@Gersho
Sep 25 2017 21:04
@Koderkid1936 thanks, i'll keep those in stock, they'll probably be of use at some point
CamperBot
@camperbot
Sep 25 2017 21:04
gersho sends brownie points to @koderkid1936 :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @koderkid1936 |http://www.freecodecamp.com/koderkid1936
Koderkid1936
@Koderkid1936
Sep 25 2017 21:05
@Gersho oh np tho I never intended to use them for anything it was just messing around with code
Gersho
@Gersho
Sep 25 2017 21:06
that's what makes them intersting to me, there's not a lot of code so you can check how it works easily
Koderkid1936
@Koderkid1936
Sep 25 2017 21:10
true , I've been looking at some of them recently they go into more detail and look really cool https://codepen.io/juliangarnier/pen/idhuG/
just1witness
@just1witness
Sep 25 2017 21:20
@Koderkid1936 I've been playing with css too, check out my drawn x's and o's. (the x is missing one thing still, it will be implemented with the JS later)
awesome tictactoe
you have to hit run to see the effect btw
Koderkid1936
@Koderkid1936
Sep 25 2017 21:27
@just1witness cool
@just1witness you drew this yourself did you use a svg editor?
for the o's and x's?
@just1witness which one do you recommend
just1witness
@just1witness
Sep 25 2017 21:28
I used adobe illustrator to get the svg code and drew them myself. They were tweeked afterwords a little
I tried inkscape first, since it's free, but couldn't get the right code output. (it IS possible though)
@Koderkid1936
Do you know how to make an element invisable before the animation plays? Without JS?
Koderkid1936
@Koderkid1936
Sep 25 2017 21:31
@just1witness I dont wanna have to pay for adobephotoshop tho I'm broke atm :/ looks like there's no avoiding it
just1witness
@just1witness
Sep 25 2017 21:31
It can be done with inkscape, I just haven't figured it out yet.
Koderkid1936
@Koderkid1936
Sep 25 2017 21:31
it looks good so far when are you getting the JS in @just1witness
just1witness
@just1witness
Sep 25 2017 21:32
I am going to see if I can add audio to the animation using html and css first, then I'm moving on to the JS
@Koderkid1936
@Koderkid1936 Do you want me to let you know if I figure it out on inkscape? Now that I know what the correct code is supposed to look like, I may be able to get it now.
Koderkid1936
@Koderkid1936
Sep 25 2017 21:40
@just1witness dont bother, I might as well use AdobePhotoshop it's what everyone uses anyway just a pain in the ass to buy it #brokePeopleProblems
thanks anyway tho
just1witness
@just1witness
Sep 25 2017 21:41
@Koderkid1936 Oh, I get it. I'm on a free 7 day trial, I don't have the cash to buy either, that's why I'm trying to figure inkscape out.
George Kemp
@gkemp94
Sep 25 2017 21:52
Anybody available for a quick question about animation with javascript?
For some reason my animation is not working...I can't figure out why.
Chris
@bestintown23
Sep 25 2017 22:23
how can i make my li2 and li3 classes show inline, the goal is to make both li2 and li3 parallel and even https://codepen.io/bestintown23/pen/XepNLG
piteto
@piteto
Sep 25 2017 22:24
@gkemp94 to add a class, delay, and then remove a class, use setTimeout or a Promise
Not sure if that's the animation you're referring to
George Kemp
@gkemp94
Sep 25 2017 22:29
sure is. I was thinking about setTimeout. I'll give that a go thanks.