a place to practice?
codepen.io is a place to start coding if you're kinda new
@Androbat , I know what you are saying. I have tried these, www.codewars.com, www.codechef.com. However, Codewar is my favourite., it will definitely flex those javascript muscles.
Hi. I hope that someone can help me with my Weather App. I have almost the entire thing done, but my problem is accessing some of the API information. I have the location and the weather showing up fine, but I don't know how to accurately pull the description. Could someone look?
I want to get the description, and have tried "data.weather.description" but that's not right.
@moT01 , thanks. I see that. I'm still having trouble. "main.weather[description]" does not work. How should I call for this?
marcgraci sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
Going from that, it should be "data.weather[2]". But that does not work.
Because the description I want is the second element of the array.
so how do i get temp
arr[3,2] ?
so you gotta go back to dot or brackets
So if I want the temp from your example, would I put arr[2].1 ?
arr[2][1]?
i know you know this
you used it to get the location and temp in your pen
so if your
weather = [{description: tornado}]
It looks like the weather array only has one item?
So it's always going to be data.weather[0]. and then "id" or "main" or "description"?
Thanks for your help. My trouble, I think, is viewing the API info. It's a jumbled mess.
for all the things in that object, yes
Is there a better browser for this purpose?
one says JSON maybe and the other says RAW
Options on the page itself? No. Is there a viewing option in the Chrome settings?
i assume chrome has that option but maybe not, ...firefox does. another way would be to console.log(data) and view it in the dev tools
it might be in there not sure
Well, thanks a bunch, Tom. And I actually appreciate how you walked me through it and asked questions instead of giving me it.
not gonna learn if i just paste the answer
yow fam on my repl.it i am returning the right objects but when i paste everything on fcc theres a incorrect return value. heres my code:
// 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(prop !== 'tracks' && value !== '') {
collection[id][prop] = value;
}
else if(prop === 'tracks' && !collection[id].hasOwnProperty('tracks') ) {
collection.tracks = [value];
}
else if(prop === 'tracks' && value !== '') {
collection[id].tracks.push(value);
}
else if(value === '') {
delete collection[id][prop];
}
return collection;
}
updateRecords(5439, "tracks", "Take a Chance on Me");//tracks should have "Take a Chance on Me" as the last element.this is the culprit. but i think its a bug.
updateRecords(5439, "tracks", "Take a Chance on Me");//tracks should have "Take a Chance on Me" as the last element.
i also don't think you need the bracket on value
@MarcGraci you can download an extension called json viewer in chrome to see json objects easier
androbat sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:star2: 1136 | @roxroy |http://www.freecodecamp.com/roxroy
hey guys i need to address a js variable in css -how do i do that
i am trying to neaten up the output from my wikipedia viewer
here is the link
https://codepen.io/ismailhozain/pen/OjvzaZ?editors=0110 @ismailhozain
well so after the search results are shown they are like one big blob that you cant do anything with so i want them to be like multiple entries(like a proper search engine
)
i have been trying to work things out from my console and have not gotten anywhere
that will put a single div in the output
where would i use that like on which part of the output
that's in the js
so something like ...
for(var i = 0; i < info[1].length; i++) {
console.log(info[1][0])
}
except i have no clue how to proceed
I have a similar question as @moT01. Trying to line up items side by side using .append .prepend on a different project. Any reccomendations on a good tutorial?
for (var i=0; i<info[0].length; i++){
#ouput.append('div'+info[0][i]+'/div')
?
cause you get 10 things back
and each will have different info
not exactly like that, but the right idea
so can i give those elements ids and style them like that
@moT01 using Javascript. Using api and wanted the info its pulling to display next to each other horizontal on three divs, instead info is being displayed in one column vertically
or are you using bootstrap
@moT01 $.getJSON(url2).done(function(data3) {
if (data3.error == undefined) {
$("#followerinfo")
if (data3.error == undefined) {
$("#followerinfo")
.prepend("<img src='"+ data3.logo + "'>")
.prepend("<div>" + data3.name+ "</div>")
.prepend("<div>" + data3.status + "</div>");
} else {
var logo= "http://res.cloudinary.com/mers/image/upload/c_scale,w_400/v1504573315/ui-day033-404error_u37kee.png";
$("#followerinfo")
.prepend("<img src='"+ logo + "'>")
.prepend("<div>" + data3.message+ "</div>")
.prepend("<div>" + data3.error + "</div>");
}});
@mers89
I am assuming because I only used prepend
?
looks like prepend is putting all the info you want in there, just maybe not in the order you want
@ismailhozain so I wanted the logo to display next to the user's name and then then there status all in one row. Instead all the info is vertically align
@ismailhozain @moT01 I tried changing some of it to append to move it to the end of the row but no luck.
<div> //make this block
<logo> //inline
<title> //inline
</div>
logo and title aren't actual tags
does that make any sense? if you open your dev tools you can see that the title is taking the whole width of the page
that's block
any block element will take the whole width
you will need to format them in css
probly should anyway
lemme try and write something up how i would do it real quick a little closer to what you actually need
$("#followerinfo").append('<div class="block">
<img src="'+imgHere+'" class="inline">
<div class="inline">' + data3.status + '</div>
</div>');
name the class whatever you want, but then style them in the css like that
that's closer to how i would do it anyway
you could actually maybe just take what you have, add some classes in there, and style it up
Simons Game starting questions. How did you guys do colored fields to click on? Table, buttons or something else?
fyi, im pretty sure prepend adds things to immediately after your target(the first child), and append adds them sequentially
to the end
@moT01 yeah I remember the before and after. It was just the correct way to apply it I guess. But thanks so much you gave me so much info.
mers89 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 840 | @mot01 |http://www.freecodecamp.com/mot01
that's how i did mine
nxdl sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 419 | @gothamknight |http://www.freecodecamp.com/gothamknight
@moT01 Thank you, man
nxdl sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 841 | @mot01 |http://www.freecodecamp.com/mot01
3 projects left on the back-end
just finished my stock market
whats up guys! hope everyone had a good weekend, I just finised about 90%(or so i think) of my wiki search engine, the only thing i am having trouble with is getting my program to print out each title as it irerates through the array, it only prints out the last result, I tried a for loop and while loop but same results, im so close I KNOW IT lol maybe not, can anyone look into my code and see what i am doing wrong? thanks! https://codepen.io/rafaelmonroy/pen/BdEBXB
@rafaelmonroy
acutally, you need that and a
.append
@rafaelmonroy , you are almost there. You are overwriting the #results with each loop iteration. Instead append the new
li to the list. Use the jQuery .append() function. See http://api.jquery.com/append/ to see how it works
your using .html which just changes the whole content of #results each time
so you end up with the last thing returned
and you actually dont need the first thing
@moT01 @roxroy ah man! i knew it was going to be something silly lol well kinda of, that fixed it. thanks guys!
rafaelmonroy sends brownie points to @mot01 and @roxroy :sparkles: :thumbsup: :sparkles:
:star2: 1137 | @roxroy |http://www.freecodecamp.com/roxroy
:cookie: 842 | @mot01 |http://www.freecodecamp.com/mot01
keep it in mind for the twitch project
i dont think you do anyway, it seems to be working without it
@moT01 oh cool, ill keep that in mind for sure! thanks man!
rafaelmonroy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: rafaelmonroy already gave mot01 points
first project i only had to ask one question in here… woooo
@moT01 yeah man, it was different, had to do more reading lol but felt better finishing it without so much help.
hopefully I can say the same about the next project
Found something that looks great. But I was hoping for some video tutorials. http://domenlightenment.com/
thanks @longnt80 , I found one and I’m downloading to my grey matter ssd
hillsie sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 547 | @longnt80 |http://www.freecodecamp.com/longnt80
@Hillsie DOM manipulation is maybe the hardest part of learning JS. Complex stuff and you have to learn it from several resources and by trial and error too.
Browser compatibility problems are also present etc.
Having trouble getting .append to work. I know I must have missed something really obvious, but with no errors I can't work it out
@hashtagyolo1 you're mixing object types. check your console log
@hashtagyolo1
let circ = document.getElementById("circle")
let circle= document.createElement('circle')
circle.setAttribute('cx', 100)
circle.setAttribute('cy', 100)
circle.setAttribute('r', 20)
circ.appendChild(circle)
@hashtagyolo1 not the codepen console :)
the dev console. I know :D. Not a thing in it on my screen
sorry I must have changed something to coerce the error myself. @hashtagyolo1
but in any case, the above code will generate a circle for you :)
inside your circle
VM290 pen.js:6 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at createCircle (VM290 pen.js:6)
at HTMLButtonElement.onclick (index.html?editors=0011:9)
the same thing applies, you can append dom objects but I'm not sure about appending raw html
if you want content, you would set innerHTML or innerText, if you want to append, you create the object (circle) and appendChild usually, or prepend, I think, if you want it as the first child element
hashtagyolo1 sends brownie points to @janshah :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @janshah |http://www.freecodecamp.com/janshah
@hashtagyolo1 JS has
Node.appendChild(). I think .append() is a jQuery method.
as @JanShah already said...
I remember now but it doesn't pop into my head automatically, I usually have to refer back to my own code :(
var age=Number(prompt("your age"));
if (age<0) {
console.log("error" );
}
else if(age===21) {
console.log("happy 21st birthday");
}
else if (age%2==1) {
console.log("your age is odd");
}
else(age % Math.sqrt(age) === 0) {
console.log("your age is perfect square");
}
There is an error in the last else statement
it shows unexpected {
"Uncaught SyntaxError: Unexpected token { "
@Trellowhoomer try removing the conditional expression for the else statement.
else is like a default output so you do not need a conditional for it. I never have anyway (although that is not saying much)
@Trellowhoomer try removing
(age % Math.sqrt(age) === 0) that
trellowhoomer sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 420 | @gothamknight |http://www.freecodecamp.com/gothamknight
still not getting any errors when I do this, but still not amking any circles either
making*
Hmm, when I use the test append, it's putting the text below my SVG box. I wonder if 't calling the circles below my screen? SHouldn't I be able to croll own to see them then?
var age = prompt("What is your age?");
if (age < 0) {
console.log("error" );
} else if (age === 21) {
console.log("happy 21st birthday");
} else if (age % 2 == 1) {
console.log("your age is odd");
} else (age % Math.sqrt(age) === 0)
console.log("your age is perfect square");function createCircle(){
var cx1 = Math.floor(Math.random() * (50 - 5));
var cy1 = Math.floor(Math.random() * (50 - 5));
var r1 = Math.floor(Math.random() * (10 - 2));
//$("#circle").append("<p>test</>");
$("#circle").append("<svg viewBox="0 0 200 200"><circle cx='" + cx1 + "' cy='" + cy1 + "' r='" + r1 + "' /></svg>");
}
double quote and single quotes. Bingo :D
@lydatech the code you have provided is not working correctly
else (age % Math.sqrt(age) === 0)
console.log("your age is perfect square");
in its current place is wrong logic
what iam doing wrong help
Having trouble reading your code @NicolNonga. Why do you have jquery script call in your html box? You can select it by using the cog in the js box. Much easier and tidie
I alos can't see you actual api call
@lydatech sir, i meant to say that, this statement "your age is perfect square" is printing everytime on console irregardless of the number user enters
@Trellowhoomer I think the last
else should be else if. Or just if.
to get the information from wikipedia you'll need to get the JSON data and then arrange it nicely on the screen.
@Trellowhoomer yes because of the logic. You want to test for age. choose what message to display THEN check if its a square
the way you have it in the else statement says if everything else fails in all the ifs then print the square message
@hashtagyolo1 ´$('.input').autocomplete({
source: function(query, result){
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': query.term
},
success: function (data) {
console.log(data)
}
});
}
});´ CONSOLE.LOG(data ) is not responde Iam try to get data from the Weakipedia API
This is the call I used, where searchBox is the value of the search box: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&redirects=return&search=" + searchBox + "&callback=?" @NicolNonga
I think you'll need to put a ? at the end of your url
@gothamknight @hashtagyolo1 it is returning an empty array ["query.term", [], [], []]
@lydatech yeah, but when i enter -ve number, 21 and an Odd number(true conditions), "your age is perfect square" prints too with the other true statement...why it is so?
nicolnonga sends brownie points to @hashtagyolo1 and @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 421 | @gothamknight |http://www.freecodecamp.com/gothamknight
:cookie: 272 | @hashtagyolo1 |http://www.freecodecamp.com/hashtagyolo1
@Trellowhoomer I would do checkSqr() or a single checkAge() function
trellowhoomer sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2406 | @lydatech |http://www.freecodecamp.com/lydatech
@NicolNonga no worries. Glad to be able to give something back
any hint please
So that it all separates out?
now iam able to get data from wikipedia, but i want to show it well formated
@NicolNonga you'll need to get it into a html element. I created my elements on the fly as part of the call with jquery.
append is your friend
:)
Anyone used webpack to generate responsive images? If so which module did you use?
Sorry @FredrikOseberg , not used it.
@SUOERLIU What are you trying to display?
@SUOERLIU What are you trying to display?
@hashtagyolo1 I’m following this: https://www.udacity.com/course/responsive-images--ud882 udacity course. They are using grunt and ImageMagick to create several different versions of an image to use on your website to load the most effective picture depending on screen size in regards to performance. My build tools are generally based on webpack, so I’m trying to find a way to reverse engineer this process using webpack.
Does anyone know a good tutorial for Bootstrap grid system? Only grid. Thanks.
@krckyboy Try this, very informative.
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
krckyboy sends brownie points to @just1witness :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @just1witness |http://www.freecodecamp.com/just1witness
@krckyboy This worked for me https://www.youtube.com/watch?v=mKt-MDwtVB4&index=1&list=PLvAAZChoagM3Ch63apDSE6Ra6NeI62sQV
krckyboy sends brownie points to @vramazing :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @vramazing |http://www.freecodecamp.com/vramazing
How do I make the buttons appear at the center of the word and how do I make the go button go at the bottom
or anyone here that can help me for in js
and you probly dont need any <form>'s if you're not sending info to a server
you should probly also properly indent your code if you want people to help
you can use
text-align: center; in your css to center things - one way anyway
How many web designers buy child themes already done opposed to customizing their own child theme?
@MikeJSchorah Is that a rhetorical question?
There surely can't be that many $200 website guys out there, but when I do a Google search for "website designer", 5/6 of the ads lead me to a landing page of a "web design" company from anywhere in the United States with a contact form and shitty design. Organic search results seem to be legit, though
@MikeJSchorah If you can't find a free theme that suits, you can always go to a freelancing website and ask for a theme designing.
@JohnnyBizzel Is Wordpress.org as good as this chat or do you have to wait a couple of days for an answer?
@JohnnyBizzel I've been using the Divi theme and Avada theme, but I haven't been using child themes. I was going to start doing that today, but the first search result for a YouTube instructional video suggested that I buy a already done child theme and I was like "wait, what?"
@MikeJSchorah Not been on it for a while. Stackoverflow also has a Wordpress forum. Maybe ask a question that will get an answer. "How many web designers?" is such a vague question.
Oh wow there is activity on here! Hello all. I've just found codecamp
@MikeJSchorah I don't even know what a child theme is. A theme for kids? Age <7?
I've changed my html/css junior job to part time so that I can study. I'm going to try to improve to become a front end developer :) wish me luck!
@JohnnyBizzel I tried Stackoverflow before for JavaScript questions. Seems like they want you to have a little bit of experience or they won't give you points. When I first started coding, they actually gave me negative points until I started asking better questions.
@JohnnyBizzel But I guess my answer should be "Only fly-by-night web designers buy already done child themes"
@jatacid Welcome. It's a long journey, but it's worth it
What are people's thoughts on codecamp? any parts I should skip/focus on IYO?
@jatacid the things required for the certs are marked on the map with a *, but i would go through it all
@jatacid Depends. What are you trying to do exactly? This site seems to be more geared towards software development opposed to web development, especially the back-end section
self satisfaction
@MikeJSchorah apart from hosting 3-4 sites and building a plugin, no.
@MikeJSchorah Things change quickly in this industry; that was a while ago.
Sometimes that's enough :P
I'm more interested in foundation logic. Like I know some html/css/javascript but need OOC and understanding of fundamentals. Is this course going to be good for that do you think? or is it more technically focussed?
I'm more interested in foundation logic. Like I know some html/css/javascript but need OOC and understanding of fundamentals. Is this course going to be good for that do you think? or is it more technically focussed?
@JohnnyBizzel You're saying you used to do WordPress, but you wouldn't touch it if your life depended on it now?
@jatacid not sure what you mean by fundamentals, if you know some stuff already you should fly through the first few sections
they give you enough to have a decent enough understanding of the language/technology to use it, but they push you to figure out stuff on your own
@moT01 Yeah hoping so :)
For example I had a phone interview the other day and as a screening question they asked like "Do you know what's the difference between a static, dynamic and persistent variable" and "what are the benefits of using a closure?" I was stumped lol.
For example I had a phone interview the other day and as a screening question they asked like "Do you know what's the difference between a static, dynamic and persistent variable" and "what are the benefits of using a closure?" I was stumped lol.
I know them, probably even used them all - but don't know the theory. Any ideas on how to fill the knowledge holes?
yea, that won't be covered here. You might be looking for some books or video tutorials. But i would say you should definitely do this as well.
@moT01 yeah, having a look through the map and a lot will be quite useful to solidify my technical knowledge & fix up my dorky syntax. OOC stuff too which I'm most interested in
not sure where to go for a book though! There are so many!
@jatacid there is a few videos here that have a little of that, if you scroll down the map
Yeah saw them :) Thanks.
I love 1 minute video summarys - sometimes that's all you need. Not a whole hr lecture at uni lol.
I love 1 minute video summarys - sometimes that's all you need. Not a whole hr lecture at uni lol.
If anyone else wants to chime in and recommend a good book that'd be great! (one that covers what a closure might be or whats the difference between a persistent, static and dynamic variable or information about 'float' vs 'integers' and some core CS info)
floats are usually numbers with decimals, or least have the ability to store decimals, integers are whole numbers
data types
i will assume that dynamic variables have changing values based something else. static probly dont change at all, and im not sure on persistent, maybe they dont change but its passed around or available throughout the code, ...like a global variable - not sure
@jatacid
those questions are javascript related?
"Do you know what's the difference between a static, dynamic and persistent variable" and "what are the benefits of using a closure?"
Hi all, i stacked on creating function, then return all objects from array
var pointK = {
"Moscow":1,
"Samara":1.1
}
var deliveryStore = [];
function registerDelivery(obj){
var cash;
if(Array.isArray(obj)) {
obj.map(function(x) {
obj = x;
});
}
var delivery = Math.floor (obj.price*0.015*pointK[obj.destination]+175);
deliveryStore.push(obj, delivery);
}
registerDelivery([{
product: 'Canon EOS 1500D Kit 18-55mm DC black',
price: 22999,
destination: 'Moscow',
count: 1
},
{
product: 'Canon EOS 1200D Kit 18-55mm DC black',
price: 15000,
destination: 'Samara',
count: 1
}]);
console.log(deliveryStore);
now after map returned only second object
i need get obj from array if argument the array and after use other operation delivery
if my argument is object - its ok
@Marat89bluolyu
then use for of forEach and push to deliveryStore inside after get delivery price
then use for of forEach and push to deliveryStore inside after get delivery price
@Marat89bluolyu What are you trying to achieve here?
obj.map(function(x) {
obj = x;
});
@Marat89bluolyu It overwrites value of obj with first element of array
@korzo using forEach instead map?
@Marat89bluolyu
for(var i = 0; i < obj.length; i++) {
deliveryStore.push(obj[i], Math.floor (obj[i].price*0.015*pointK[obj[i].destination]+175);
}
@Marat89bluolyu but thats wrong.
What shoul be element in deliveryStore? array or object?
What shoul be element in deliveryStore? array or object?
@korzo cause is store deliveries
@Marat89bluolyu then
for(var i = 0; i < obj.length; i++) {
deliveryStore.push([obj[i], Math.floor (obj[i].price*0.015*pointK[obj[i].destination]+175]);
}
Anyone who has some CSS grid experience can help me work out why my grid doesn't reorder when I change the screen size?
marat89bluolyu sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 451 | @korzo |http://www.freecodecamp.com/korzo
werdi, works when I move the actual screen, but not the response in dev tools
all good thanks .. trying to tackle this unit tests in angular :S
i dont think so ... i mean i know JS, im no master at it tho .. not yet
sure .. i would use darksky api, it's pretty good. What i did was display the location info with google maps api and handled all other logic with the API call
i know bit..
and random quote generator but by refering others...
html and css i know...
how to learn api ?
did you complete the challenges ? it's kinda daunting at first, if you've never worked with APIs, but once you get it, it's pretty easy
search on youtube for something like 'working with apis' or api tutorials or something along those lines, you should get some info
@hashtagyolo1 That's CSS grid, which isn't Bootstrap grid. Bootstrap has all cross-browser support while CSS grid doesn't. Keep that in mind. :)
i have dought in using the parameters...
In the tasks the where given the function references and values
but in the projects they where not working with values..
like data is the parameter used but i dont know why it is used...
this data parameter is refer the api?
basically u need to make a call to the server, the url is know as an endpoint .. you pass a URL to the ajax call, or getJSON, whatever method you are using, and pass the url with some values .. then, if the request(the url you sent) is valid, you will get a response from the server, you can then use this data to manipulate your app
are only with particular name ?
if we using the multiple parameters like(resp,req) . how the resp and req will get the proper vaues from the server...
without the values collapse or interchange
because it already knows ... req parameter is the request you pass in , res is the response from the server
that's usually done on the backend tho .. u dont need that much
var url =
"https://api.darksky.net/forecast/8bfe73adbee0a652190e6c9ccd1e1d21/" +
lat +
"," +
long +
"?exclude=minutely,hourly,daily,alerts,flags&units=si&callback=?";
$.ajax({
url: url,
type: "GET",
async: false,
dataType: "json",
success: function(data, status) {
// do some magic with data
}
data is the data you get back from the server .. its an object
status is the status send by the server, used for error handling and stuff like that
in api?
data is just a variable name .. you can use any name you want
it's like naming a parameter for a function, you can use any name you want when getting the info in a function, u just have to use the same name within the function
1532j0004kg sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 460 | @orangekulture |http://www.freecodecamp.com/orangekulture
thanks for spending time for me...
```
function logMe(name){
console.log(name)
}
function logMe(car){
console.log(car)
}
logMe(mercedes);
``
woops
ohh well .. you get it
basically those two are the same
function logMe(name){
console.log(name)
}
function logMe(car){
console.log(car)
}
logMe(mercedes);
console.log(name)
}
function logMe(car){
console.log(car)
}
logMe(mercedes);
this is the code right?
name and car vakue is mercedes right?
value
yeah .. i mean it doesnt make sense to have that, but it's just to illustrate the the variable name you pass in, doesnt matter
yeah i did try to edit, but would go for it .. this p#$^@
:joy:
wouldnt ** even
not learning languages, im developing a small project in angular, sort of like a test to see if i get a job
it's proven to be a tad difficult :S
in what resource u doing project...
from tomorrw i am also doing project insteadof learning theratical , it helpful for me?
It's a test they give you .. if you pass, u probably get the job. We'll see
yeah it's definitely helpful to do projects .. that's why FCC's curriculum is project based. Go through the projects and google what u don't know. There's a lot of good info online
where u doing projects...
in angular js
angular is really fun .. but it's also kinda hard to grasp to a full extent
oh no .. independently. I have express in the backend with nodeJS runtime. i use visual studio code as the code editor
i use node to run the code
or u need to create a code?
nope .. i mean u can have a server running on the frontend only, if the project is small. I do need server side logic, so im using express and mongo
lol...
haha it's all good, we all have to start somewhere .. im still an angular newbie
be back in a few
Is there a way to apply Bootstrap grid system through your main CSS file, without tweaking in HTML? It feels messy to touch HTML.
@krckyboy No. To apply the grid system, you have to use their css class names in your html
krckyboy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 56 | @piteto |http://www.freecodecamp.com/piteto
hey guys, quick question, for img.src, is it possible to turn this into an array? http://www.williammalone.com/briefs/how-to-draw-image-html5-canvas/
for example, would the following code be valid?
img.src = [
'images/image1.png',
'images/image2.png',
'images/image3.png'
];
Yes, if you used .html() you could change your html images with that. At least I'm pretty sure.
.
@AmitP88
Can someone tell me how to get only the Bootstrap v4 Grid, not the full Boostrap?
@just1witness hmmm, well, I'm actually using it to see if I can generate random images in canvas using the drawImage method
amitp88 sends brownie points to @just1witness :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @just1witness |http://www.freecodecamp.com/just1witness
No problem. I'm an opamist who try all sorts of crazy things, I've discovered a lot of them work!
Lol
Opamist... I mean optimist
@just1witness it didn't work, but maybe I can sort of cheat by making multiple img.src's and nest those in an array lol
maybe you want
img {
src: [img1, img2...]
}
I actually thought that was what you meant, lol. I figured the code you posted was a placeholder example.
amitp88 sends brownie points to @mot01 and @just1witness :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave just1witness points
:cookie: 843 | @mot01 |http://www.freecodecamp.com/mot01
I'm on my phone rn and have to go or I would want to see your whole code, this sounds very interesting. I hope someone can help you! 😊
@just1witness thanks bro. I'm actually working on a demo for a mobile game idea that I have. once I get the basic functionality going I'll post it on here :)
amitp88 sends brownie points to @just1witness :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave just1witness points
@AmitP88 you could probably do something like the following if you're trying to add multiple images. You'll still need to do something with the drawImage options though:
let images = [
'images/image1.png',
'images/image2.png',
'images/image3.png'
];
images.forEach( function(image){
let img = new Image();
img.onload = function () {
context.drawImage(img, 100, 100, 150, 110, 0, 0, 300, 220);
}
img.src = image;
}@cmccormack I was brainstorming possible workarounds and I came up with this:
var tileImg = [
'images/tiles/orbs/physical.png',
'images/tiles/orbs/thunder.png',
'images/tiles/orbs/fire.png',
'images/tiles/orbs/earth.png',
'images/tiles/orbs/light.png',
'images/tiles/orbs/water.png',
'images/tiles/orbs/dark.png',
];
img.src = function () {
tileImg[Math.floor(Math.random() * 7) + 0];
};
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
}However, no matter how I set img.src, it seems like if it's anything but an image URL I'll get 'Cannot set property 'src' of undefined'
@cmccormack yeah, I know. I also tried setting img.src = tileImg[Math.floor(Math.random() * 7) + 0];
@cmccormack but that didn't work either
@AmitP88 one thing that can help is to seperate your logic a bit. Make your random function a unique function just for getting random values:
function randRangeInt(m, n){
return Math.floor((Math.random() * (n+1-m)) + m)
}then you can call
tileImg[randRangeInt(0, tileImg.length)]or however you want to do it
you can even add that as a method to the prototype of Array if you wanted, even cleaner as you can use
this
@AmitP88 img.src should be a string right?
in your code above, make sure you set src after you declare the variable
@cmccormack here's my code so far
I built 5 sites, 3 with Divi. I'm learning how to modify the style.css file for a child theme of the Divi theme.
@AmitP88 you're still pointing img.src to a function, so img.src is a function. Don't do that.
@cmccormack ugh, I'm confused.
Correction btw:
tileImg[randRangeInt(0, tileImg.length)]should be
tileImg[randRangeInt(0, tileImg.length-1)]
@cmccormack I think we overcomplicated this
@AmitP88 I don't think we added anything more complicated... what's your code now?
@cmccormack my goal is to be able to use multiple images in img.src somehow when using this code:
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0 )
}
img.src = 'images/image.png';
@AmitP88 that shouldn't be your goal, your goal should be to draw multiple images, as I said earlier
so add the new image and drawing to a loop over your images
@cmccormack yes, but I want to draw one single random image first to make sure that it's working first, before looping over for the rest of the cells on the grid
I understand that, ok, so if you have custom CSS in this child theme, then updates won't erase changes to CSS, but what about HTML? I just pasted a CSS file from a website that I did from scratch and everything changed to my CSS (menu... see paragraph below, background color). But, there is no content on the page. How do I create content/structure if there is no HTML?
@AmitP88 Here - I made you an example for drawing random images while we've been talking:
https://codepen.io/cmccormack/pen/ZJZxJJ
@cmccormack thanks. this makes things a lot clearer. let me see if I can implement this in my code
amitp88 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1185 | @cmccormack |http://www.freecodecamp.com/cmccormack
@cmccormack I feel like I was hovering around this solution, but I just couldn't get it
@AmitP88 Just make sure you look at each line of the example code to see now only what they did but WHY they did it.
@cmccormack for sure, the logic makes more sense now. my main obstacle was being able to use multiple images using img.src (was having a hard time coming up with a workaround that would work)
@AmitP88 but you shouldn't even be considering using multiple images with img.src
Instead, consider pushing all the logic for a new image into a function that you can then call from a loop over all your images
It's
var img = new Image(); not var img = new Images(); :)
@cmccormack the thing is, i'm trying to make a 3 match puzzle game using canvas and JS.
@AmitP88 yup I remember discussing this weekend - look at my code and see how you can use that to fill your board
Notice how all of the
Image code is wrapped in function that can then be reused for whatever you need
@cmccormack for sure. If i'm gonna use this to loop over the entire grid, I'll need to keep things organized into one function when it comes to the images
@AmitP88 sure. I updated it a bit more to separate the functionality a bit more, so you can have a pure drawImage function that may or may not use a random image function
Hi, I'm working on the Random Quote Machine challenge and stuck on trying to figure out the Twitter web intent API. I'm not sure how to pre-populate my tweet with quote text my API is generating. Can anyone help me troubleshoot this? I have a pen here.
@Feldbot you should probably be using the
&text= parameter
@MikeJSchorah I have used WordPress a little... What are you wondering about?
@cmccormack Do you mean to build my URL with that parameter hard-coded in there? I'm not sure how to pass whatever URL I build back to the Twitter intent so it can see what I've constructed.
@Feldbot I think you may be making it more difficult than you need, something like the following is plenty:
$("#btn-tweet").attr("href", twitter_url + quote + ... ), convert to vanilla as necessary
Parameters are usually built as object, are you sure you're following the docs properly?
@cmccormack Yes, I'm sure I am making it more difficult, lol. No, I'm not sure exactly where I need to start with the docs. I got sucked in to all these Twitter docs that I don't quite understand and it does seem I've made a plate of code spaghetti.
@MikeJSchorah wordpress kinda sucks for that very same reason
@Feldbot I built 5 sites, 3 with Divi. I'm learning how to modify the style.css file for a child theme of the Divi theme.
@OrangeKulture Which reason?
that you can have conflicting css rules, depending on the theme
@Feldbot https://dev.twitter.com/web/intents
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
<a href="https://twitter.com/intent/tweet?in_reply_to=463440424141459456">Reply</a>
<a href="https://twitter.com/intent/retweet?tweet_id=463440424141459456">Retweet</a>
<a href="https://twitter.com/intent/like?tweet_id=463440424141459456">Like</a>This part of the documentation is really all you need to complete the web intent. I only used the first two lines in my project
More specifically, I just used the following URL and concatenated the quote:
"https://twitter.com/intent/tweet?related=freecodecamp&text="
@cmccormack With those snippets, don't I still need to build a new URL to pass in to the intent somehow?
@OrangeKulture I'm only using 2 themes... Divi and Avada. I've been using Divi exclusively since I found out it would be cheaper for me
@Feldbot not unless you want to make it harder on yourself
@Feldbot the widget.js will take care of making the new window with all the chrome, just create an href with the text above and your quote appended and it should work fine
@cmccormack So is this one the way to go:
but I'd still need to create variables for twitter_url and quote?
$("#btn-tweet").attr("href", twitter_url + quote + ... )but I'd still need to create variables for twitter_url and quote?
@MikeJSchorah when i worked with WP i always tried to find which rules where affecting which element with chrome dev tools
@Feldbot yeah if you want, mine is posted up above if you want to use it
you can inline the url if you like as well
I don't recommend doing that though, better to declare URLs at the top where it's easy to see and change
feldbot sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1186 | @cmccormack |http://www.freecodecamp.com/cmccormack
@OrangeKulture I understand that, ok, so if you have custom CSS in this child theme, then updates won't erase changes to CSS, but what about HTML? I just pasted a CSS file from a website that I did from scratch and everything changed to my CSS (menu... see paragraph below, background color). But, there is no content on the page. How do I create content/structure if there is no HTML?
@Feldbot If you want to use the official twitter button you just need a div in your HTML:
<div id="tweet"></div>And this line in your JS:
twttr.widgets.createShareButton("/", document.getElementById('tweet'), {size: "large", text: $('#quote-content').text()});
I hadn't seen that URL before when I did this, so maybe it's a slightly easier route since you already have that twitter icon set up in an <a> tag
I'm kicking myself for not seeing that URL @cmccormack took me an hour to figure that code out!
@MikeJSchorah u have to create a new page and add the html .. im not exactly sure what you are trying to do. Are you trying to set new CSS rules for an existing page?
@piteto I thought the text: key would only accept actual text, I didn't know you could put more javascript in there.
Yeah, it will take JS code! You could combine the quote + author in a variable @Feldbot and use that instead - probably a little better
@OrangeKulture
So the HTML (content/structure) will/could change upon theme update if I don't know PHP?
Or will just adding menus, adding Favicon, making the Home Page my front page, etc, etc. (PHP stuff) change upon theme update?
So the HTML (content/structure) will/could change upon theme update if I don't know PHP?
Or will just adding menus, adding Favicon, making the Home Page my front page, etc, etc. (PHP stuff) change upon theme update?
@Feldbot that's an expression, it returns actual text
@MikeJSchorah that depends a lot on the theme .. but the html should not change. Updates on wordpress are usually targeted to add-ons and plugins
you can have a site look completely custom, even if you have wordpress .. you just need to know the file structure and where to find each piece of code
@OrangeKulture I'm a little confused as to why you need a child theme for CSS/PHP... why doesn't HTML get affected?
@piteto It doesn't seem to render the Twitter button for some reason...
@cmccormack hey Chris, I was able to successfully implement your solution into my project (although I didn't separate functionality as much - I wanted to keep it short). However, I'm facing some problems getting my for loop to work in order to generate random images in each cell of the grid, rather than just one.
@Feldbot Put the code inside your success callback - that way it runs after you get the quote text in your HTML
@AmitP88 keeping it short is usually much less of a priority than making it functional
@AmitP88 randomTile should not be declared every time within the loop, move that block to the global scope
@MikeJSchorah wordpress themes are a pain in the ass, if u ask me .. specially if u dont know much php. Unfortunately, it's hard to help out with the exact issue, i would either contact the theme developers (it it's a paid theme) or try to google it out
@AmitP88 tileImgs should also not be declared within your loop
@cmccormack I don't know why this isn't working, as I'm using i and j for the coordinates for the drawImage method (since i is used in my for loop for canvas.width and j is used in the loop for canvas.height.
@piteto Aha! That works... Do you know a way that I can use this on the font awesome icon rather than having it generate the button?
@Feldbot Use the method that @cmccormack recommended if you don't want to use the official tweet button
That twitter widget code is for the official tweet button
@AmitP88 put some console.log statements in there, make sure you log what your values are for i, j, canvas.width, img.src, etc...
hello everyone...may you please advice on the best way to have my project tested on my Mac? like having local Webserver to the my website before I hand it ove to the client?
amitp88 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave cmccormack points
@AmitP88 it's bad practice to not declare your variables in the for loop as well, I would recommend using
let i=0... and let j=0;... in your loops
@pieto Okay, I'll give @cmccormack's solution a try too. Thanks much for the help!
feldbot sends brownie points to @pieto and @cmccormack :sparkles: :thumbsup: :sparkles:
:warning: @pieto's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:warning: feldbot already gave cmccormack points
@AmitP88 also make sure your files are actually in the right directory :D
@cmccormack I see. I always used to see for loops just using i=0 or w/e without declaration with var or let. guess I'll have to get into that habit
Where do you see that? In the FCC exercises I'm pretty sure they stated you should definitely do that, and in most code it's declared
@cmccormack I think I've seen it in code examples on stackoverflow or something
@OrangeKulture No no no, haha. I'm not saying that I updated a theme and it was modified. I'm saying IF IF I update a theme, will the HTML (structure/content) be modified? In other words, I'm a little confused as to why you need a child theme for CSS/PHP... why doesn't HTML get affected?
@AmitP88 with "use strict" the code wouldn't even run, to my knowledge
@Trommelochse I'll have to implement that. thanks
amitp88 sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @trommelochse |http://www.freecodecamp.com/trommelochse
@AmitP88 since I started using Lint, I would never want to write code without anymore
gives you warnings about stuff, that's just a bit 'incorrect', and after you fixed your mistake for the 3rd time, you will never do it again, because now you've learned it
@Trommelochse good to know, I'll have to implement it in my project :)
@Trommelochse thanks
amitp88 sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave trommelochse points
@Feldbot
https://codepen.io/cmccormack/pen/LjvmKZ I was meaning to make a sample for this anyway, hope it helps
hi all, how to comapre object values in arr? whats wrong in my code:
var test = [{
product: 'Canon EOS 1300D Kit 18-55mm DC',
price: 22999,
destination: 'Samara',
count: 1
},
{
product: 'Canon EOS 1200D Kit 18-55mm DC',
price: 15000,
destination: 'Moscow',
count: 1
},
{
product: 'Canon EOS 1300D Kit 18-55mm DC',
price: 22999,
destination: 'Samara',
count: 2
}
]
function getObjReport(test) {
for (var i = 0; i < test.length; i++) {
for (var j = 1; j < test.length; j++) {
if (test[j].destination != test[i].destination){
console.log(test[i].destination);
console.log(test[j].destination);
} else {
console.log(test[i].destination)
}
}
}
}
getObjReport(test);
@Marat89bluolyu you probably want to use
var j = i + 1 in your second loop
and you may need to do
test.length-1 in the first loop as well
need to get output
```
// Moscow:
// Canon EOS 1300D Kit 18-55mm DC ', 22999 , 1 . = delivery 519 .
// Samara:
// Canon EOS 1200D Kit 18-55mm DC ', 22999 , 2 . = delivery 1108 .
// Canon EOS 1200D Kit 18-55mm DC ', 22999 , 2 . = delivery 1108.
// Canon EOS 1200D Kit 18-55mm DC ', 22999 , 2 . = delivery 1108.
// Total: 3843 .
```
// Moscow:
// Canon EOS 1300D Kit 18-55mm DC ', 22999 , 1 . = delivery 519 .
// Samara:
// Canon EOS 1200D Kit 18-55mm DC ', 22999 , 2 . = delivery 1108 .
// Canon EOS 1200D Kit 18-55mm DC ', 22999 , 2 . = delivery 1108.
// Canon EOS 1200D Kit 18-55mm DC ', 22999 , 2 . = delivery 1108.
// Total: 3843 .
@cmccormack That is a nice example Chris, thanks. I'm still trying to understand your previous mention of using
I tried reconstructing this but am not having any luck.
$("#btn-tweet").attr("href", twitter_url + quote + ... )I tried reconstructing this but am not having any luck.
feldbot sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:warning: feldbot already gave cmccormack points
@Feldbot that's with jQuery, have you used it? I intentionally avoided it in my example but the code you posted was from my original quote api
@Marat89bluolyu for
i - you don't want to compare the last element with anything outside of your array :)
or with anything at all as it's already been one by the previous iterations
@Feldbot
$("#btn-tweet").attr("href", twitter_url + quote + ... )is equivalent to
document.getElementById('btn-tweet').href = 'https://twitter.com/intent/tweet?text=' + quote + ...where ... is anything else you want to add like author or whatever.
@cmccormack yeah but how to filter it?
I need output
I need output
test.detination 1 time if i have several identical values
@Marat89bluolyu Can you describe what your function is supposed to do?
@cmccormack this app must output deliveries reports. Function receive some array with objects and after processing makes report:
// Moscow:
// Canon EOS 1300D Kit 18-55mm DC ',price= 22999 , quantity=1 . = delivery 519 .
// Samara:
// Canon EOS 1200D Kit 18-55mm DC ', price=22999 ,quantity=1 2 . = delivery 1108 .
// Canon EOS 1200D Kit 18-55mm DC ', price=22999 ,quantity=1 2 . = delivery 1108.
// Canon EOS 1200D Kit 18-55mm DC ',price= 22999 , quantity=12 . = delivery 1108.
// Total: 3843 .@Marat89bluolyu ah. So what you can do is create a new object that you store these product objects in. As you iterate your array, you can do something like
newObj[test[i].destination].push(test[i])You should check if the destination exists prior to this by doing something like
if (!newObj.hasOwnProperty(test[i].destination){
newObj[test[i].destination] = [ test[i] ]
} else {
newObj[test[i].destination].push(test[i])
}This way you don't even have to compare objects - if your new object doesn't have a property for that destination
Then you can return and parse the newObj as needed to display the results
The code above may have bugs, you'll have to play with it
marat89bluolyu sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1187 | @cmccormack |http://www.freecodecamp.com/cmccormack
@cmccormack Yeah, I'm using jQuery with my modified URL. Can you check out my pen again? I'm still not sure what I am doing.
@Feldbot you're adding the href to your icon, not the anchor tag
@iamknox yeah cause is tried logging in on two separate computers and it keeps saying the same thing.
feldbot sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1189 | @cmccormack |http://www.freecodecamp.com/cmccormack
Finished the twitch app for FCC. Critique is welcome.
@SourceHorse very nice visually, I am surprised you wrote the whole thing in Vanilla JS - but very nice, man really like it :)
@OrangeKulture So the content/structure is all done in the child theme and it comes with CSS and PHP files that can be edited?
So when I activate a child theme, I'm actually using the child theme?
A child theme isn't the CSS/PHP files only. It is EVERYTHING that I'm looking at on my dashboard?
@MikeJSchorah yes.. basically the whole theme is php code. you can build on top of that or you can modify it, if u know how to and if the theme permits, i guess ..
im not really sure tho, like i said, i havent worked all that much with wordpress .. dont really like it that much
No one does. But, I guess it's a way to get experience working with clients
does anyone knows the best room to ask about some git bash queries?
It seems best to ask the FreeCodeCamp room for alot of stuff. They're always active
I'm currently taking a coursera specialization, and I'm now on one exercise where I have to write some scripts on my package.json
using the git bash, but it's giving me error
okay, will try my luck there
thanks!
I'm currently trying to center the text portion of the logos for the social media links I have on this page. Can anyone help? Here's my code https://codepen.io/erichasegawa/pen/YxMJOa
@EricHasegawa put <i> for icon inside <a> and add text-align: center to <a>
@korzo Could you explain the thought process behind the changes?
@korzo Also if you have time, I'm trying to make the colored boxes that act as a background for the icons less tall and I'm having trouble targeting them
before has position: absolute, so it doesn't depend on document flow.
Put it in the middle (left: 50%) and shift it back for half of the width of element (translateX(-50%))
Put it in the middle (left: 50%) and shift it back for half of the width of element (translateX(-50%))
you can see how I'm targeting them
.socialMedias a . No need for duplicate code
@korzo Yeah that makes sense, do you have time for the other question? If not no worries
I'm trying to make the colored boxes that act as a background for the icons less tall and I'm having trouble targeting them
@korzo But when I set a height and width to the .socialMedias a nothing changes
@EricHasegawa You made it very complicated
@EricHasegawa using <i> as an icon you can remove 90% of your css
@korzo I'm importing most of the code from my old personal portfolio which was made when I was very new to coding
So it's kind of tough
But if you have time for one last question, how can I move the text in the boxes lower down so it's not so close to the top? https://codepen.io/erichasegawa/pen/YxMJOa
That works better, but is there an easy way to centre it vertically?
top: 50% and change translate to translate(-50%, -50%)
Thank you so much for all the help I really appreciate it
@korzo thanks
erichasegawa sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
api offline
I think I'm going to study css in some more detail because I'm not familiar with all the concepts on the page now
Thanks though, see you around
Hi. does anyone know what I could search to enable a user to download a .txt file of specific html content on the page?
@gothamknight
@JanShah not really. The user inputs some data, and im using js to provide an output based on that input, which is displayed on the html. So I could obtain the output from the script i guess....
