on your confirmEnding("Open sesame", "same") i just did a basic console log of it and it only pulled an e
oh ok i see that. so i'm trying to figure out how to get it to pull the whole string. isn't that what length is for then? that was why i put target.length as the second parameter
for .str , the first param is for where to start it and the second is for how much
at substr(-1) you are saying the last letter, with a length of how long it is, but it will always be 1
why will it always be 1 even though i'm specifying the length?
because you start at the end
ohhh
@rrspence The length is optional.
var str = "Open sesame";
var lastFive = str.substr(-5); // esameOR...only get the 3 characters after the fifth to last character:
var str = "Open sesame";
var lastFive = str.substr(-5, 3); // esa
*starting from the fifth to last character, I should say
@gulsvi oh ok that make sense! i'll play with this for a sec.
there is probably a bunch of ways to do it but you can just look for (if needed) the last instance of a space and grab the string after it
Unfortunately, that would not work for
confirmEnding("Open sesame", "same")
alright nvm
hey guys, i just have a quick question about changing props in jquery using
.prop()
is there an elegant way to refactor this code?
$(hiddenFields).each(function(field_i, field) {
$(field).prop('id', function(p, value) {
return value.replace(/\[[0-9]+\]/g, '[' + list_i + ']');
})
$(field).prop('name', function(p, value) {
return value.replace(/\[[0-9]+\]/g, '[' + list_i + ']');
})
});
instead of the same callback function, is there a way to pass multiple props in the one method?
dont worry about the code per se, its more just about DRYing up the code
@JackEdwardLyons Factor out the callback into a non-anonymous funciton.
yeah, so thats the only way @sjames1958gm
i cant do two props in one call?
@JackEdwardLyons Looks like you could pass an object with key/value pairs
But then I am not sure how the function would fit in.
But then I am not sure how the function would fit in.
yeah, its weird huh
you can pass in an object but then i need to call the function
Maybe this?
$(hiddenFields).each(function(field_i, field) {
const getValue = (p, value) => value.replace(/\[[0-9]+\]/g, "[" + list_i + "]");
$(field).attr({
"id": getValue(p, value),
"name": getValue(p, value)
});
});
I thought .attr() was for IDs and Names, and .prop() was for checked/disabled on inputs
A guess... to be honest
that looks cool, ill give it a go thanks @gulsvi
jackedwardlyons sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2631 | @gulsvi |http://www.freecodecamp.org/gulsvi
@JackEdwardLyons I don't think that will work, where are p and value coming from?
@gulsvi @eweiss17 got it! thanks for your help. :)
rrspence sends brownie points to @gulsvi and @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 612 | @eweiss17 |http://www.freecodecamp.org/eweiss17
:star2: 2632 | @gulsvi |http://www.freecodecamp.org/gulsvi
@JackEdwardLyons
If you need to call the same function on each attr - then maybe like this?
If you need to call the same function on each attr - then maybe like this?
['id', 'name'].forEach((attr) => $(field).attr(attr, (p, value) => value.replace(/\[[0-9]+\]/g, "[" + list_i + "]"));
Hey I was wondering if somebody can help me out with adding seconds to my pomodoro clock?
Sure, what have you got so far?
https://codepen.io/CurtisjCamp/pen/gvdjOY?editors=0010
this is it so far its almost done but I want to change what gets displayed in the "progress bar"
Originally I was just going to show the minutes but I want it to shows seconds as well now. I feel like it should be just some simple math thrown in somewhere but I'm pretty frustrated.
@NJM8
ok
sorry I turned my notifications off
after joining main room the noise was too much.
How do i solve this challenge ?
// Setup
var myObj = {
gift: "pony",
pet: "kitten",
bed: "sleigh"
};
function checkObj(checkProp) {
// Your Code Here
myObj.hasOwnProperty(checkProp);
return "Change Me!";
}
// Test your code by modifying these values
checkObj("gift");
@NJM8 its all good that room is super busy
@CurtisJCamp When I use the timer the minutes count down like seconds?
@mananshah51 think of it this way
if myObject has checkProp
change prop
if myObject has checkProp
change prop
Yeah I changed the timer to seconds instead of minutes for testing but ultimately I would like it to cycle every seconds and display the progress " 5:32 Left". I have been trying to manipulate the workCount to be able to display it.
@mananshah51 if you want to have a function return different values you might need an if check
every second*
ok
@mananshah51 Modify the function checkObj to test myObj for checkProp. If the property is found, return that property's value. If not, return "Not Found".
do a basic if statement
@CurtisJCamp store your time in seconds and count down using 1000 milliseconds on your timer.
when you display it convert seconds to minutes and seconds by dividing by 60 and taking the remainder dividing by 60
when you display it convert seconds to minutes and seconds by dividing by 60 and taking the remainder dividing by 60
I have tried multiplying the workCount and then Math.floor"ing" the result tp get the minutes but I havent had much luck with seconds displaying correctly
So I assume originally workCount would be 600 if set to 10 minutes?
ohhh I wasnt doing the remainder part of displaying it
so you want to do something like this:
function displayTimeLeft(seconds){
const minutes = Math.floor(seconds / 60);
const remainderSeconds = seconds % 60;
const displaySeconds = remainderSeconds >= 10 ? remainderSeconds : '0' + remainderSeconds;
const display = `${minutes}:${displaySeconds}`;
timerDisplay.textContent = display;
document.title = display;
}
@NJM8 I am unable to figure it out.
@sjames1958gm I am unable to figure it out.
@eweiss17 I am unable to figure it out.
@mananshah51 you need an if statement -
myObj.hasOwnProperty(checkProp) this returns true/false so you can use it in your if
@mananshah51 Take it one step at a time. What code would you write to make sure your object has the variable?
That is exactly it. I wasn't handling the remainder correctly. Thanks @NJM8 and @sjames1958gm
curtisjcamp sends brownie points to @njm8 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @njm8 |http://www.freecodecamp.org/njm8
:star2: 9044 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@CurtisJCamp :+1:
No problem @CurtisJCamp . Took me awhile too. Who wants to do math? :)
Ain't nobody wanna do math
lol
Ha, it's quite helpful for programming actually. I've been doing basic algebra and stuff on Kahn Academy as well. It's a little embarrassing to miss problems and see, Oh, that's part of the fifth grade curriculum. :0
Haha and I never thought I would use that stuff
The only math I ever liked was finite state machine stuff, but then IDK if that's actual math haha
Nothing like a good turn-style or traffic light to warm the blood huh? :smile:
@mananshah51 Did you make some progress?
@sjames1958gm Thanks for checking back in.
I was able to solve that challenge, I saw the solution for reference.
I was able to solve that challenge, I saw the solution for reference.
mananshah51 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9046 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
could anyone help me on something frontend out of fcc @all
just post it here
how can I update the "model" of the datatables so when changing the drop down on each row the data will get updated ? here is the testing page i am working on it testing page
I mean i want know when i am in table without adding selected inside the table html when click on option let's say it is cancel it will added selected to it so when i am filter to cancel value i will say only cancel , can anybody help me in this and here is the link
https://codepen.io/HusseinZaki/pen/QQzVNG @all
jeez 4k lines of js
i only want update the "model" of the datatables so when changing the drop down on each row the data will get updated
hi
hi
@eweiss17 sjames is one of the most experienced in here, i would wait for him to respond
@Hussein90 Do you have like some other place to look at this code? I don't think anyone will be able to or want to put in their time to figure out 4k lines of code. Also your second part of your question is very confusing.
okay @bradtaniguchi
is there an area in the code you are trying to do this - and it's not working - or some lines you can point us toward
has pointed out - nobody can go through that much code very quickly
i assume you're talking about the drop down on the top left that shows the number of entries
@moT01 i am talking about the drop down which has pending ,cancel options
so you want to update that value to whenever you change it to - where is the data stored or coming from
i want when i click on it the select on the rows and choose option when i filter i want only these will appear there without go back to html and add attr. selected it will be selected so when i am filter it will do as it do with accepted
by filter - you mean when you use the search in top right?
no by filter beside the title it is icon
icon on the left of status order @moT01
where are you getting the values of the table to do that filter
is there an object in the js - is it created in the html
add an onchange event for that drop down - and change the data there - then when you run the filter - the data should be updated
and the filter should work
so maybe, in that onchange event - there should be a way to change what is selected in the dropdown - it sounds like you filter by whatever option has
selected
so onchange - remove selected from pending or whatever - and add it to cancel
or whatever is picked
i write the values in html @ moT01
Hey folks, I am testing a pure function with Jest and it throws such error
expect(received).toBe(expected)
Expected value to be (using ===):
[["QUARTER", 50]]
Received:
[["QUARTER", 50]]
Difference:
Compared values have no visual difference.
but it still fails the test.
@Heathercoraje how's your test?
@moT01 that what i am trying to do
so maybe, in that onchange event - there should be a way to change what is selected in the dropdown - it sounds like you filter by whatever option has
selected
@moT01 can you help me do it
@Marmiz
describe('checkCashRegister', function() {
describe('#return a correct change record array', function() {
it('should return one array', function() {
assert.equal(
checkCashRegister(19.5, 20.0, [
['PENNY', 1.01],
['NICKEL', 2.05],
['DIME', 3.1],
['QUARTER', 4.25],
['ONE', 90.0],
['FIVE', 55.0],
['TEN', 20.0],
['TWENTY', 60.0],
['ONE HUNDRED', 100.0]
]),
[['QUARTER' , 50]]
);
});
});
});
https://codepen.io/papageg/pen/yvGYQM Why does my nav bar not not change cover when i hover over it? Is it because of a img background if anyone can help thanks
@Marmiz the operator isn't even
=== I am not sure what makes the test fails when there is no visual difference
@greggordoncode_twitter
#navbar li {
display: inline-block;
padding-right: 100px;
margin: 25px;
float: right;
color: white;
}
#navbar li:hover {
color: orange
}
@Heathercoraje Are you trying to compare
[['QUARTER' , 50]]with an other array (that looks the same?)
Yeah
@greggordoncode_twitter Adding the last bit under
navbar liwill do. I think it is because it didn't have specific target
thanks i see i need to be more specific
@greggordoncode_twitter :+1:
@bradtaniguchi
[['QUARTER', 50]] is the return value.
Is it because of it looks the same but it isn't the identical array?
It technically is the same by value, but the reference (which is checked with assert) is different
AFAI the assert doesn't do a deep compare, which is why its failing
like value quality is not the same but the value itself is the same?
Wait, I thought deep compare is what checks if they have same refernece.
Deep compare checks all the values, regardless of if the reference is the same or not
===?
that is not deep compare
thats like "strict equals", its different
Thanks! then == / === isn't the same as deep compare or shallow? compare.
@bradtaniguchi 'not having same reference' does this mean one comes from function and the other is just an array that inserted?
no, the == should be avoided cuse of things like this:
'1' == 1 returns true, or null == undefinedis true
I understand. the word reference is a bit fuzzy in my head still.
@Heathercoraje So when I say reference I mean in memory. Non-primitives (like objects and arrays) are passed by reference, not value
Its pretty complicated, but its a lower level idea that comes from how computers work
so if it is not deep compare, it will just check reference. if it is deep compare then it checks the actual value ?
@Heathercoraje https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects read the "comparing objects" section for a good explintion
@bradtaniguchi thank you. Reading it
heathercoraje sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 402 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Yes when it comes to assert and
===
np, Id read the whole article, or at least skim through it :D
@Heathercoraje why using
I've used assertion with other testing libraries (jasmine..) but never with jest
assert instead of the jest built-in expect ?I've used assertion with other testing libraries (jasmine..) but never with jest
@Marmiz Whats the difference between assert and expect? (I don't do testing too much)
@Marmiz expect and toBe also throw the same error
@Marmiz Which I didnt understand because
expect toBe is supposed to be deep comparision?
as far as I know?
I mean to do a deep compare there are a few tricks to check equality, but JS has no built in function to do so normally. Idk if test suites offer it aswell.
expect(received).toBe(expected)
Expected value to be (using ===):
[["QUARTER", 0.5]]
Received:
[["QUARTER", 0.5]]
Difference:
Compared values have no visual difference.As far as I recall @bradtaniguchi jest implemented expect from expect.js (another testing lib) that gives meaningful messages from testing.
for example
assert(4 >=0) && expect(4).toBeGreaterThanOrEqual(4)will perform the same test, but assert often reply with a simple expected true to be false
while expect should be more informative on the tree error..
or so it used to be, i'm not on point with recent versions
@Heathercoraje You can pass the test by doing one of 2 things. 1. transfer the return value to a string, and compare it against a string. This will work, but is kinda "meh" since your not technically checking the values. 2. manually check the length of the array, the first sub array's first and second values manually. This will check the actual return by value
@Marmiz Ah so it gives a better printout, I see
that was the tradeoff
@bradtaniguchi it also passes with toEqual
instead of toBe
I will have to read the docs..
have noooo idea
Yea definantly haha, toEqual probably does a deep compare
Yea just read off SO toEqual does a deep compare
@Heathercoraje have you tried
toEqual?
@Marmiz @bradtaniguchi Thanks mates
heathercoraje sends brownie points to @marmiz and @bradtaniguchi :sparkles: :thumbsup: :sparkles:
api offline
:star2: 1179 | @marmiz |http://www.freecodecamp.org/marmiz
toBe means literally is that element. If your function returns a new element will fail (as it should)
@Marmiz Claudio, you missed my chat before yours. toEqual worked. I thought we are friends :(
@Marmiz @bradtaniguchi .toEqual(value)
Use .toEqual when you want to check that two objects have the same value. This matcher recursively checks the equality of all fields, rather than checking for object identity—this is also known as "deep equal". For example, toEqual and toBe behave differently in this test suite, so all the tests pass:
Use .toEqual when you want to check that two objects have the same value. This matcher recursively checks the equality of all fields, rather than checking for object identity—this is also known as "deep equal". For example, toEqual and toBe behave differently in this test suite, so all the tests pass:
@Heathercoraje Nice :)
by the way.. I just realized I was using mocha then integrated jest init....
does anyone know C? lol
const x = obj => Object.assign({}, obj)
test('is the same obj', () => {
const result = x({a: 1});
expect(result).toBe({a: 1}) // should fail
expect(result).toEqual({a: 1}) // should pass
})toBe uses Object.is to test exact equality. If you want to check the value of an object, use toEqual instead:
@Heathercoraje
I just realized I was using mocha
that's where the assert came from
:/
uhm..
yeah
@RandyGoldsmith heve not used C in a while, somehow more confortable with Cpp
and then I was running all test with jest installed globally
but test is not defined within Mocha.
but all tests are tested with jest.
@Marmiz how does the computer remember the change variable?
do {
printf("How much change is owed: ");
change = get_float();
}
while(change < 0.00);
somehow if i use another printf outside of the do while loop.. and use change as my output varaible, it knows what i typed into my first printf
does the following line after my first printf just know to store the first input value into change?
@RandyGoldsmith Is that C?
@bradtaniguchi I just tried the test I written above, this is the error message:
Compared values have no visual difference. Looks like you wanted to test for object/array equality with strict
toBematcher. You probably need to usetoEqualinstead.
More informative than the assert " compared values have no visual difference"
(this should be a lesson for you @Heathercoraje as well! you could have solved it in a second)
@bradtaniguchi yes it is.. maybe get_float would be GetFloat().. im taking harvards cs50 course
they have a cs50.h library for GetFloat which would be get_float
@Marmiz yeah. I add
to 2 more chars and solved it. My last 3hours..
@Marmiz Back to react......... have a good day buddies
Odd place to be asking for C advice (front-end web development room), I'm trying to remember my experience with how C works, its been a few years. But what is your exact question? Just how C remembers the values?
@Heathercoraje we all have those moments haha
60% of the time would fire you from my team 100% of the time! @Heathercoraje
:stuck_out_tongue: :stuck_out_tongue:
:stuck_out_tongue: :stuck_out_tongue:
ahahahaha
@bradtaniguchi haha yeah true, im taking a course from a suggested path from an old camper..the p1xt guide
@bradtaniguchi but yes..wondering how c remembers the values
in javascript its var number = prompt();
so your declaring a variable number that will hold the value of prompt in it..thats explicit
@RandyGoldsmith you have defined change outside the do while as well otherwise this
change = get_float();would throw an error (change type is not defined, at least here)
@Marmiz I don't think hes asking about why its breaking (I don't think it is)
@Marmiz okay, so since its inside the loop.. change is automatically going to a take a float of whatever my input value is?
@bradtaniguchi its not breakin
@bradtaniguchi no but he's asking why he can access it outside of
do while, and that's because is defined somewhere else
@Marmiz ah yes, its outside my do while loop declared initially as float change;
because ill have to use it again outside the do while loop
@Marmiz just doesnt make sense why the input can hold or remember the change value... unline var number = prompt()...which is explicit in why it can hold whatever the user types in prompt
so you are modifing that variable
@Marmiz maybe i need to understand what get_float is which I thought it just means its going to hold a floating point value
so printf('enter a value: ');
and after i put my floating variable change.. and set it equal to get_float()
@RandyGoldsmith it's probably an helper to handle floating precision while the user input a float.
types are fun! :)
types are fun! :)
@RandyGoldsmith To me the act of prompting the user for a value in js, and how it works in C is more or less the same (you need to care about datatypes in C, but its the same otherwise)
Learning a strictly-typed language is an esset imho. Makes working in JS feels like child play :sparkles:
I mean the one pro (and con) of C is the memory management and pointers shudders
Make you REALLY appreciate JS, hell almost any other language handles the memory for you
#include <stdio.h>
#include <cs50.h>
#include <math.h>
int main(void)
{
float change;
int totalCents;
do {
printf("How much change is owed: ");
change = get_float();
}
while(change < 0.00);
//convert $1: 100 cents
//multiplying the users input change amount by 100 to get the total amount of cents
printf("Answer is %f'", change)
//floating point imprecsion
//round
}
that code there.. the last printf line
how does C know what i inputting into my first prinf statement?
i didnt save my first printf into a variable like in JS example of var number = prompt()
oh wow cs50x im only on chapter 3.
@RandyGoldsmith
i didnt save my first printf into a variable
of course you did:
change = get_float();is reading whatever value the user input and assign it to change
@rdollent yup lol
@Marmiz oh okay..thats what its doing? thats what im asking lol
and i reckon get_float() is defined by the faculty in cs50.h kinda like get_string()
@rdollent yes
basic I/O :+1:
@Marmiz so get_float() function is really taking the input from the printf method?
@Marmiz ugh so confusing
so maybe in that function get_float() if you look in the file you;ll see something that takes whatever you pass onto printf() take the thing after ":" and returns it
@Marmiz starting with python and then javascript and now trying a lower level language.. its a lot harder
The get_float() and printf methods are totally unrelated
@rdollent yes thanks, Claudio helped me out on that
randygoldsmith sends brownie points to @rdollent :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @rdollent |http://www.freecodecamp.org/rdollent
@Marmiz thanks
@rdollent maybe when your done we could work on a project together..the final one? :)
im only on chapter 3 but i think that's how it works. otherwise, how does get_float() know what you put in printf() unless they use printf() inside get_float() and printf() returns a value
@RandyGoldsmith i dont do any of the projects i just watch the videos hahah. a video already runs for 90 mins
@rdollent yeah, thats where im confused
@RandyGoldsmith You could probably do without the printf() method, you just wont see any strings printed to the terminal.
@bradtaniguchi well for this excercise im doing, it prompts a user to input a dollar amount so i do need it in this case
I guess you could say the printf() method just outputs to the terminal (using some underlying IO functions) and the get_float() takes the value later()
I was saying you don't need it idea wise. (plus the user wont know wtf is going on)
as the two functions are unrelated, unlike alert in JS, which is kinda both
@RandyGoldsmith is that the only code there is?
okay well wait maybe get_float() runs an alert() function inside it
so a dialog box appears and asks for a number
@rdollent What the?
You know this is C code right haha
hahah yes
but idk the equivalence of alert() in C
there isn't one
oh wait sorry i am confused
You can get input from the terminal using something like
fgetor another one i don't remember off the top of my head( I remember there were a few ways)
Looking at the code, it seems like a small cli app. The UI is the terminal, so nothing fancy
yeah i vaguely remember that you just supply a value to the function using trhe terminal
in cs50x video
so prolly the get_float() function wraps the fget (or equivalent) function probably to keep things simple
i see
so you just run it in the terminal
then it goes to a new line and you just enter a value
i just watched lecture 3 and it says get_string("Name: ");
so for sure get_float() gets passed something.
I've done the cs50, what exactly seems to be the problem, maybe I could help
@RandyGoldsmith
@RomchyFCC just wondering about the get_float() function and how it knows to store user input from the printf command
oh get_float is a custom function you import from cs50 library
it's basicly a prompt that cs50 implemented so they can ease you into learning and abstract away things behind the scenes
#include <cs50.h>when you type this you get stuff like get_float, get_int, get_string and so on :)
@RomchyFCC correct
:+1:
Hello guys !
Can someone help me out?
I have this navigation. When i scroll down the property 'black" should be added. When i scroll back up the black should be removed. When i scroll down the navigation should also follow, but i cant find the mistake, heres the link:
you want the nav to be black when you scroll down? anyway, this condition should be more than this: if ($(window).scrollTop()) - it should be more or less than something
@Marianissimus thanks
mustimuu sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 471 | @marianissimus |http://www.freecodecamp.org/marianissimus
by the way what is angular2 ?
a framework https://angular.io/
@mustimuu You can add a
position: fixed; and width:100% to the nav, then add margin: auto; to the menu div
The position prop will keep the navbar on top. The width and margin will reproduce the current style you have.
@X140hu4 thank you so much
mustimuu sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @x140hu4 |http://www.freecodecamp.org/x140hu4
it helped
@mustimuu
AngularJS x means the old angular, and Angular x means the new angular.
guys
what is the difference between joomla and bootstrap?
From what I google, joomla is a CMS like wordpress it allows you to create websites and manage the content. Bootstrap is a front-end library that allows you to style your website.
They are very different
@mustimuu Joomla is a Content Managenent System (CMS), and Bootstrap is a CSS framework (roughly put).
so guys
what would you recommend?
If i learn bootstrap and joomla and Sass?
Would it be a good combination to start with?
A good combination for what?
@mustimuu What do you know at the moment?
i know some HTML and CSS
but my sites always look bad
doesent look like a site and i need some free projects to work on
@mustimuu JS and possible jQuery is next on skill list.
but how do i master html and css ?
You never
just by building sites ?
@mustimuu That path is infinite. Nobody really masters HTML/CSS imo.
what is the best way to learn it then?
just youtube and build and repeat
@mustimuu Read and code and repeat, yes.
Good, if someone more experienced is there to bark at you at times.
any good youtubers?
i am starting to learn to build navigation bars
HTML&CSS you need to be able to search what you need, know well the most common HTML elements and CSS properties, learn how to code maintainable code (for you or others).
i keep repeating it
after html css is jquery
i see
If you want to build sites that look nicer, you need to train your eye and your mind to identify "good" design
@mustimuu I would do some JS before jQuery, but FCC has it in reverse order.
One way is to translate an image to a webpage for example
do you guys know any free projects?
its just overhelming me
someone says bootstrap
other say joomla
wordpress
What is your goal learning development?
my goal is to build websites for customers
and work for a company
You just entered a restaurant that has all the world's cuisine on its menu. People will have different taste and opinions
I see
So if my goal is to be working at a company i should just start building pages and repeat
Ok so you need to focus on a core set of technologies to learn and not stray from that until you feel confident you have a good grasp of your tech stack.
exactly
HTML&CSS are the building blocks. Now you need Javascript to make your pages more dynamic.
You will practice HTML&CSS anyway going forward with JS.
I see
someone told me to practise angular2 also
do you know any good tutorials?
or is it just by finding
I personally prefer not to touch too much the different frameworks and libraries, because at their core they are always HTML/CSS/JS.
i see
JS og jquery?
But that's my approach, it makes things difficult but you get a better understanding of the frameworks/libraries and how they work
jquery is the library
@mustimuu HTML/CSS/JS is the basic, but for most common tasks, most firms use frameworks and libraries that make the development easier to manage.
jQuery is a JS library. It's like the difference between making your own dough or buying it when you want to make a cake
so if i want to work for a company i should mix between html & css, js and frameworks
Different companies use different tech stacks but focusing on these will give you a good shot.
I see
Thanks
Afterwards learning other languages is not as difficult as they share a lot of concepts.
than kyou
@X140hu4 thank you
mustimuu sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
api offline
@mustimuu You will be learning new things all the time anyway, so learning one way at first is enough.
@mustimuu You could start with what freeCodeCamp offers, read articles related to web dev, listen to podcasts (freecodecamp, codenewbie, etc), lurk in the forum and chatrooms helping others or reading about other peoples struggles and achievements.
Learning the language is only part of the equation. You wouldn't learn [insertForeignLanguage] only from books about grammar, vocab and syntax :)
@X140hu4 thank you
mustimuu sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @x140hu4 |http://www.freecodecamp.org/x140hu4
@Masd925 thank you
@X140hu4
i know a company that required HTML & CSS, Jquery and joomla
hello everoyone ..unable to get the weather data......here is the code.....function showPosition(position) {
var lati=position.coords.latitude;
var logi=position.coords.longitude;
x.innerHTML = "Latitude: " + lati + "<br>Longitude: " +logi;
var resultElement = $('#resultDiv');
var weather="https://api.openweathermap.org/data/2.5/weather?lat="+lati+"&lon="+logi+"&appid=7658e29ee6204da60dcec48c4cd297a5"
$.ajax({
url:'weather',
method:'get',
dataType:"json",
success:function(data){
resultElement.html('weather:'+data.weather[0].main+'<br/>'+'Description:'+data.weather[0].description);
}});
}
i got the coordinates of location.
error : "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
please help me..
@puneethnviraat
it's a codepen issue (or actualy a cross-origin security issue)... but can't remember the solution... :(
@puneethnviraat Hello you must remove " ' " from 'weather' then test
because weather is variable not string
@puneethnviraat
crossOrigin = *
add this in the URL.
yes, or this: https://cors-anywhere.herokuapp.com/https://api.openweathermap... etc. also listen to @Aka-Dev , weather is not a string
@Aka-Dev thanks lot...:)
puneethnviraat sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @aka-dev |http://www.freecodecamp.org/aka-dev
@puneethnviraat you're welcome
@mustimuu One company among many thousands. Where are you from?
@X140hu4 Denmark
i designed "Show the Local Weather" its working in my local folder....if i copy and paste in code-pin it's not working code pin sitte..
in my desktop i created an index.html it's working fine..
@puneethnviraat check your browser console for errors
@ldocherty1 could be a missing resource, or a difference in some resource version
I can't see the resources you've added on jsfiddle to compare them
I can't see the resources you've added on jsfiddle to compare them
@h1tag this is the erroe: Access to Font at 'https://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff' from origin 'https://codepen.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://codepen.io' is therefore not allowed access.
@puneethnviraat can you provide the link to your pen
@puneethnviraat that was a warning, not an error.
it's working fine for me, I get the coordinates and the weather status
it's working fine for me, I get the coordinates and the weather status
did you check to see if you get any error (red colored) after pressing the button?
@h1tag ,,really u got coordinates and the weather status...i'm trying here but not working an error displaying for me...same as i mentioned above.
@puneethnviraat whats the color of the error?
if it's yellow, then it's a warning (it won't cause a problem). if red, then it's an error
it's in red.
I see
What browser are u using?
chrome
is there any way to send screenshot
I'm on firefox. I tried chrome, and now I see the error
I don't see the link to the font that's causing the error, where did you add it?
hey thank you your support..chrome was blocked my location access...that was the error now i solved it...thank's lot...:)
really?! We should checked for that first, lol
Hey guys, im facing a problem which stumps me
this is a sample portfolioi made
i made the same with react components , sass and you can see that here
the css is pretty much the same, however the one i hosted isnt responsive
Im using css-grid for making it responsive
how to make offset for positioning absolute element responsively
I have no idea what I'm doing wrong with my weather app it returns "Please provide longitude as lon and latitude as lat as numbers/floats."
@Zalmez Codepen link perhaps?
I tried making the float into a whole number, tried to change the variable names to lat and lon cuz it didn't really accept it as latitude or longitude
facepalm
found it
var weatherLink = api + "lon=" + lon + "&lat=" + lat;
thanks tho @ezioda004
zalmez sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @ezioda004 |http://www.freecodecamp.org/ezioda004
You debugged yourself :clap:
I really don't know where I got the ":" from :thought_balloon:
Its in the endpoint page example syntax :D prob from there
probably
Hei guys i need help with bootstrap, can anyone help me?
@fez994 I'll try
I want the search button on the same line as the input, how can i do it? https://codepen.io/fez994/pen/wyNNdq
@fez994 it's on the same line for me
nope it's slight higher
oh, ok
@fez994 you dont want to use css?
it's ok using css
as long as it's responsive
@h1tag
@fez994 change the margin for the button, use
em units (you'll need to use small numbers like 0.35em)
@fez994
col classes scale up, so just col-xs-2 would do the same as col-xs-2 col-md-2 col-xl-2 I think.
@Masd925 oh i see thank you
fez994 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4710 | @masd925 |http://www.freecodecamp.org/masd925
@h1tag yeah em worked, thanks
@RishabhGupta22 did you found your answer or having problem.I've gone through your code!
Can you pls explain me this line of code??
$("#display").html(eval(total));
what does the eval(total) does here??
have a good read
thank you...
lol this function is huge amount slower than other ones @X140hu4
lol this function is huge amount slower than other ones @X140hu4
spetsnaz-dev sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @x140hu4 |http://www.freecodecamp.org/x140hu4
@Spetsnaz-Dev Yes because it goes against some JS rules that makes it so fast
You can read a bit about that on You Dont Know JS, maybe on the closure & scope book
I think you aren't supposed to use eval.
^
Can anyone help me with my random quote generator? https://njm8.github.io/FreeCodeCampFrontEndProjects/randomQuoteGenerator/
I'm using this css to load the image full viewport with no overflow:
html {
background: url(01860_sanfrancisco_2560x1600.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but it is disabling my button
for some reason the waves class does nothing and clicking the button does nothing
If I remove the css for the image it works fine. I have also tried a couple different methods to do the back ground image from this article: https://css-tricks.com/perfect-full-page-background-image/. And they all have the same affect on the button.
@NJM8 which button, cause the new quote and twitter buttons are working for me
Sorry, the blue thing that says created by nate dawg is supposed to a link to my portfolio
If you delete the css for the image you will see it works
hey hope you are doing well ,,, who has an idea about this challenge!!
https://www.freecodecamp.org/challenges/find-the-longest-word-in-a-string
https://www.freecodecamp.org/challenges/find-the-longest-word-in-a-string
Did you read the helpful links?
string.split can split the string into an array, from there just check the length of each and return the longest
@NJM8 where did these classes come from
waves-effect waves-light btn blue lighten-2 hoverable?
@NJM8 so, if you remove the
html rule in the CSS file, the button works?
Yes, if you open your browser tools, go to styles and delete the whole html rule the button will work
@NJM8 I tried to that here, but it's still not working
Huh, yeah that's weird
@h1tag Sorry just got back, I did do a cross check and noticed no difference. Going to repost in the hope someone spots my mistake. Thanks for the response.
ldocherty1 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 927 | @h1tag |http://www.freecodecamp.org/h1tag
you would think an a tag would work in codepen
When I move my jsfiddle over to my code it doesn't seem to work. I copied all the html,css and JS over. Is it a resource link I'm missing? https://github.com/ldocherty1/Unit28_Assignment1. The navigation bar doesn't come out as the same as in the JSFIDDLE. https://jsfiddle.net/dff82rp5/ Any ideas?
GUYS DOES ANYONE KNOW HOW TO RESTORE FB LIKES AFTER MOVING TO SSL???
@NJM8 If you add
target='_blank', yes
@coderNewby hey noticed your new PM, will check it when I get a chance
thanks @coderNewby for being patient :D
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 60 | @codernewby |http://www.freecodecamp.org/codernewby
@NJM8 thanks i ll try it
kwfe sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @njm8 |http://www.freecodecamp.org/njm8
@NJM8 it has to do with the z-index for the quote-card
its disabling your button
Ohh, huh, but the quote card doesn't cover it?
it's fixed by removing postion: absolute from quote card too, lol @NJM8
absolute
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
man
CSS :p
Whoever created CSS was like, hey lets make this 3D container for all our elements that has all these weird rules and cases where things affect each other differently
ugh
thanks @h1tag
njm8 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 928 | @h1tag |http://www.freecodecamp.org/h1tag
lol, true
you're welcome
I just made the z-index the same. removing the absolute screws up the initial position, is there a better way?
idk
@DarrenfJ thanks for the heads up
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2409 | @darrenfj |http://www.freecodecamp.org/darrenfj
https://codepen.io/ybisht1997/pen/LQaPZw?editors=0100
Can anyone see the shadow of sidebar on top of blue header clearly ?
Can anyone see the shadow of sidebar on top of blue header clearly ?
expected output: should not be visible
@yb1997 it's there, but not that clear
@h1tag is it ignorable on monitor screen ?
@h1tag my monitor resolution is not that good so can't say how it's rendering on high res displays
@yb1997 second thought, I 'm not sure tbh, could be an illusion (the shadow)
but if it's rly there, I'd say its ignorable
you're talking about the bar that show after checking the box, right?
@h1tag yea thats the sidebar
@h1tag is there any way to bring the shadow of blue bar on top of sidebar ?
that blue bar is actually the parent element of sidebar so z-index is not gonna work here
@yb1997 why do you want to bring the shadow over the blue bar, i think it looks better the other way
and from a functional standpoint too
@h1tag hmm thanks for your suggestion
yb1997 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 929 | @h1tag |http://www.freecodecamp.org/h1tag
either, I think it's showing on top of the blue bar, but not 100 sure :smile:
the more I focus more I get confused so I better leave that shadow in its place :smile:
lol
one more thing, clicking on either google or fb link slowly doesn't navigate to the link but if you click quickly then everything's fine
@yb1997 you need target="_blank" for the link to work properly on codepen, target="_blank" opens the link in new tap. Not sure if that what was causing the problem, but it seems fixed
@h1tag sorry my bad, I was lookig at previous version of the styles
@ldocherty1 I added the css from jsfiddle to one on github, and it looks the same: https://codepen.io/anon/pen/ddrPZw
@yb1997 Curious if you're aware of the Materialize CSS Framework. I noticed you were using bootstrap. https://codepen.io/gulsvi/pen/ddrGYj?editors=1010
materialize is great
maybe i should use materialize css. i dont wanna be hard-coding all the transforms and animation and box shadows. ugh. why is css so tedious
The problem with materialize, at least for me, is your website looks like it was coded by Google. Not very unique
Hey folks! I was hoping to grab a bit of input on some more in depth CSS styling (kind of)
@AidenMead Google search: “harry roberts css” nuff said
Am I supposed to be seeing a site that asks me repeatedly to hire him? XD