url('../img/1.jpg')
.../img/1.jpg
is telling it go up 1 folder and then go into the img folder. if your img folder is in the same location as your html file, you don't need the leading ...
. if you open your dev console and re-load the page what's the error message that is being logged? 404 not found?
/img/1.jpg
<script type="text/javascript" src="js/move-top.js"></script>
<div class="bg"></div>
before opening the jumbotron?
var jumboHeight = $('.jumbotron').outerHeight();
should be var jumboHeight = $('.jumbotron-fluid').outerHeight();
</div>
tags. Line 115 and 117
width:100%
kind of rules can be calculated properly
create-react-app
max-width
or min-width
in media queries right?
@Athanasopoulos1
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
found it, scroll down below to see the viewport
item
longnt80 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1379 | @alpox |http://www.freecodecamp.com/alpox
width=device-width
@linkin-park
what are the plugins i need to install in vscode
Babel syntax
ESlint
Reactjs code snippets
athanasopoulos1 sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @ashwins93 |http://www.freecodecamp.com/ashwins93
linkin-park sends brownie points to @longnt80 and @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1380 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 606 | @longnt80 |http://www.freecodecamp.com/longnt80
@linkin-park btw, use create-react-app if you're just starting with reactjs
+1
If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install
padunk sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1381 | @alpox |http://www.freecodecamp.com/alpox
@alpox
It is tiny (2kB, including dependencies).
how does that work!
Elm
is quite nice in some measures but it forces you to do everything exactly their way with no excuse. Thats one thing i didn't like much about it. It prohibits generalization in most cases (Does not necessarily have to be a bad thing though)
padunk sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 607 | @longnt80 |http://www.freecodecamp.com/longnt80
myscript_1508761436559.js
the query string version may confuse.
.img {
display: flex;
justify-content: center;
}
Hi. This seems super basic, but I'm not understanding something basic about incrementing variables:
var x = 5;
var y = x++;
console.log("x: ", x);
console.log("y: ", y);
Why does X get evaluated to 6? I understand that in y the value of x is incremented after evaluation, but why does x change at all?
x++
does not mean x + 1
. It means x = x + 1
. Therefore, y = x++
is the same as y = x = x + 1
x
is assigned x + 1
. Then y
is assigned the new value of x
var y = x++
is equivalent tovar y = x;
x = x + 1;
var y = ++x
would be equivalent tox = x + 1;
var y = x
++x
before. Probs one of those things I'd rather avoid for readability anyways
x++
y = ++x
, y
would be 6
let x = 1;
let y = 2;
y = x;
x ++;
x
will be 2 here, y
will be 1
y
is not being assigned whatever is in x
at all times, it is simply taking the value stored in x
and assigning that same value to y
let x = 1;
let y = x + 1;
As you expect, x
remains 1 here whereas y
is 2
let y = x ++
, which is basically the same as writinglet y = x;
x = x + 1;
x++
is not the same as x + 1
. x++
reassigns x
without having to explicitly state that you are making an assignment.
x++
is not shorthand for x + 1
, it is shorthand for x = x + 1
, ie you're reassigning x
x
is changing because x++
means change the value of x
to one more than it is right now
y = x ++
y = x;
x = x + 1;
let x = 0;
x
x + 1
x
x ++
x
x + 1
and x++
is that you are only reassigning x in the latter
y = x + 1
, the engine is reading that as find what the value of x
is, add 1
, and assign that total value to y
y = x ++
, which is interpreted is find the current value of x
, assign y
that same value, and then reassign x
to 1
more than it is right now
feldbot sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @kbaig |http://www.freecodecamp.com/kbaig
++
operator in situations without the equals sign. It's a lot more readable and no need to get into the headache of using shorthand that doesn't actually shorten things
feldbot sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @ashwins93 |http://www.freecodecamp.com/ashwins93
++
in a line where I am assigning (=
) or comparing (==
/===
) something
feldbot sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8603 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
y = x ++
wouldn't necessarily be read as if it was happening right to left because x
was being incremented after y
was assigned a value
feldbot sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
<img src="https://s20.postimg.org/t3n507v8t/email_icon.png" alt="" width="50px"
position: relative
and left: 500px
kennethli36 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @kbaig |http://www.freecodecamp.com/kbaig
kennethli36 sends brownie points to @kbaig and @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @ashwins93 |http://www.freecodecamp.com/ashwins93
<figcaption>
element is meant to caption images and also happens to be a block element by default.
bestintown23 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @kbaig |http://www.freecodecamp.com/kbaig
@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {
$at1x_path: "#{$path}.#{$ext}";
$at2x_path: "#{$path}@2x.#{$ext}";
background-image: url("#{$at1x_path}");
background-size: $w $h;
background-position: $pos;
background-repeat: $repeat;
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
background-image: url("#{$at2x_path}");
}
@media only screen and (-webkit-min-device-pixel-ratio : 2.5),
only screen and (-o-min-device-pixel-ratio: 5/2),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (min-device-pixel-ratio: 2.5),
only screen and (min-resolution: 216dpi) {
background-image: url("#{$at2x_path}");
}
}
how long you will take to study a framework , atleast for a beginner :P @ashwin93
You know that i study CA. So as with my academics, i take everything very slowly. In depth analysis and then proceed.
@ashwins93 by the way why we need redux?
For scalable projects, performance
The whole state of your app is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.
That's it!
</div>
right before your h2
this
i can go for fp
this
for example const foo = []
this is true for all the languages
C++. Friendly. Im out :D
Hahaha
SELECT var = expression; SELECT var = expression;
||=
operator in javascript
||=
, ||==
etc
||==
doesn't make much sense in my eyes
a = a || b
to just do a ||= b
. I think this actually exists in some languages
jsd540 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @kbaig |http://www.freecodecamp.com/kbaig
position: fixed
? I don't see any in your pen
position: fixed
does its work
@KacperPL0
header {
background: white;
position: fixed;
width: 100%;
}
Looks about right like this
@KacperPL0
header {
background: white;
position: fixed;
width: 100%;
z-index: 100;
}
try it like this
@shilpiverma509 You use this code for adding the class taskCompleted
.
$(".checked").on('click','li',()=>{
$('this').addClass("taskCompleted");
});
Now, at the time you want to add those eventlistener to all buttons with class checked
, those buttons don't yet exist because you didn't add any todos yet. (At page load).
delegate
the event to all li
descendants - but those would have to be descendants of the button with class checked
- but the button itself doesn't have any descendants.
'this'
as a string which should be the keyword this
(No string). That keyword cannot be used in an arrow function though, because the arrow function keeps the lexical scope. Use function() {}
instead if you have to access the this
keyword in a jquery callback.
@alpox Ahh, I get it now. So, I think I should use
$("#todos").on('click','li',function(){
$(this).addClass("taskCompleted");
});
Now, it will delegate the events to all li descendants
li
element :D if thats what you want, yea
show
each time you call add
.
@shilpiverma509 The way to create a working todo list as you do is a complicated one done with jquery. Its just a nasty tool for that.
When you want to use jquery and not have a bad life, don't draw everything newly each time you add/remove something.
Except you know how to handle some global state which holds all information about the look of all elements and redraw them correctly through the known state.
glitch
instead of gomix
in the url - they changed their domain
cb
for using a jsonp request but you don't use it. Just add it to the url
niloy513 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1384 | @alpox |http://www.freecodecamp.com/alpox
url+ch+"freecodecamp"+cb
would as example give you a good url for the freecodecamp channel. If you exchange ch
with st
you get the stream which is currently offline and data.stream
would be therefore null.
console.log(data);
to see what exactly you get back
niloy513 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
url+st+"freecodecamp"+cb
, you get the stream information. If the stream is offline, data.stream
is null
. If its online, you get data.url+ch+"freecodecamp"+cb
. That gives you general information without the need that the channel is currently streaming.
<div id="one two three"></div>
, isn't it?
"https://wind-bow.glitch.me/twitch-api/streams/freecodecamp?callback=?"
api call instead of just using your own account on twitch api directly?. i've seen that my twitch app is still working.
Hi all, I'm working on the front end weather app project. It's not a required user story, but I was trying to add a feature that pulled JSON from another API.
I get the JSON with jQuery's .getJSON, JSON.stringify it, and console.log that data. It looks just as it does in the browser but of course I can't access the data in it in string form. So I use JSON.parse. Once it is parsed, the value I am looking for DISAPPEARS, and only and empty Object {} is shown. I've already checked to make sure the JSON is valid. Any ideas?
JSON.stringify
and JSON.parse
) instead of working directly with the object "result" u get from here $.getJSON(b, function(result){.....
?
@moT01 here's what i did. i added a working demo as a new feature to my application contained in a nest of other elements. my application has lots of other css. so there are conflicts. i run both apps side by side and inspect an element with a problem. i go through the computed properties list of the element in both apps, looking for differences. if i find one that's different and can be toggled, i do that and see what happens. then i go up one element in the tree and do the same thing. i usually don't find the problem, but if i find something that i can toggle off and fix the problem i compare that attribute's original and updated value in my app to the good value for that same attribute in the demo app. and here's the rub... in the demo app the value is the same as the original one in my app. so i want the computed value to be what it is in the demo, but i also want the element to look the same way it does in the demo. so i'm stuck.
does that make sense? is this what you would do?
Hi guys, do you know how can I add jquery to my .js file? I want to add a fadeIn effect I tried this:
HTML<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--AGREGO JQUERY -->
<script src="script.js"></script>
.js file:
$(document).ready(function(){
$("#hidden").fadeIn();
});
css
display:none;
}
#hidden
$("#submit").click(function() {
var a = $("#address").val();
outside of the function doWeather()
function and should work
color: blue
and nothing happens
color: blue !important
and it changes to blue
String.prototype.toJadenCase = function () {
return this.split` `.map(x => x[0].toUpperCase())
};
str.toJadenCase(), "How Can Mirrors Be Real If Our Eyes Aren't Real";
victorja sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @kbaig |http://www.freecodecamp.com/kbaig