can someone help me? I am having all kinds of issues with <input type="text">
@kaymonlee what issue?
anyone familiar with jspdf?
I am not familiar with jspdf, sorry
it's ok :thumbsup:
check youtube :P
https://www.youtube.com/watch?v=CnprxD_sJFE <-- part 1 looks soo easy
@moigithub i did, but my case is a bit complex
the pdf is stretching too much that it goes out of the page
if the content is small
yeah i can export it easily
but if the content is larger than 1 pdf page, it doesn't work for me
here's my code
@brittanyrutherford what is this about?
@newtothat am having a page with repeated sections that I want to export to pdf
it is really confusing to usee all of those tags ,codes and properties
at once
what tags and properties?
i mean how you deal when a page getting bigger
with your css html js
what do u suggest i change?
no i mean look at what i have learned today it was simple
it is onle responsive i mean the hardness was only media but i was confused with that
aha
how do you deal when codes getting bigger and bigger
js code or css?
in general
js, i separate it into functions
when you have jump to one and another and come again
css i just start from the containers, and go down to more specific stuff
how do you deal with layout
and how long it takes to become middle level pro at it
am a noob :joy:
so ur asking the wrong person here
hah
well everyone have experience
yeah, but others can give u better answers than me, if u wanna learn
for example in the future you can tell somebody how to do certain things
from your own experience
or even teach if you wish to
@newtothat I follow in the footsteps of those who have done it more. Usually I look into best practicies for project layouts, cuse I hate it when I can't find anything
but never mind
uh, if am gonna teach someone something, then they'll forget how to code
since am clueless myself
i meant in the future when you become pro
@bradtaniguchi so you mean if you wanna be the best then learn from the best?
Yes, your problems are (probably) not new to the world, someone has to have ran into it before
what do you mean
.........
@bradtaniguchi by saying "not new to the world "
@brittanyrutherford ok thank you
ok got it
Someone probably has ran into the same issue before you ran into it
im not fluent in english so sometimes to undderstand something i have to read it again and think lol and find what you meant it is like literature
And I'm pretty noob too, but that's usually how I approach everything
but when you watch it again few times and practice more focus on it you easily handle it .i mean tutorial or w3schools and learn the same thing from several resourses
noob like newbie?
guess what? it worked!
I'm young and don't have much experience compared to some 40+ year old person
I usually learn best by doing, I don't watch videos cuse I get distracted or start daydreaming
hey guys i am having trouble understanding this function
function flatten(arr) {
if (Array.isArray(arr)) {
return arr.reduce(function(done,curr){
return done.concat(flatten(curr));
}, []);
} else {
return arr;
}
}
// it will be applied to this array [ 1, 2, 3, [ [ 4 ] ] ]
//this is to help me with sorted union challenge
my question is when does it stop being an array?
more clearly when does arr stop being an array? Is it at the end, I assume
hmm you'll want to iterate through elements of
arr - something like if (Array.isArray(arr[0]))
@zootechdrum well the first three values are not arrays immediately
on the first recursion of the last value you have
is 4 in the first loop of the last recursion
on the first recursion of the last value you have
[[4]] which recurses to [4] whichis 4 in the first loop of the last recursion
looks infinitely loopy
eeflores @eeflores off to lunch
this is the site i am studing from if it makes any difference
@brittanyrutherford what worked?
@sjames1958gm even though one is inside an array when it iterates through the values it just shows one ?
@bradtaniguchi if you learn by doing ? then when do you learn? like from books or i mean y ou have to learn somewhere right?
flatten([ 1, 2, 3, [ [ 4 ] ] ])
flatten(1) - return 1
flatten(2) - return 2
flatten(3) - return 3
flatten([[4]]) - flatten([4]) - flatten(4) - return 4
flatten(1) - return 1
flatten(2) - return 2
flatten(3) - return 3
flatten([[4]]) - flatten([4]) - flatten(4) - return 4
@sjames1958i would have thought when it returns 1 in the else statement it would have stopped everything
When it returns 1 from the recursive call it returns back inside of the reduce
Ignoring the last value the first three get treated like this, so they return 1, 2, 3 from flatten 2
function flatten(arr) {
if (Array.isArray(arr)) {
return arr.reduce(function(done,curr){
return done.concat(flatten2(curr));
}, []);
} else {
return arr;
}
}
function flatten2(arr) {
if (Array.isArray(arr)) {
return arr.reduce(function(done,curr){
return done.concat(flattenX(curr));
}, []);
} else {
return arr;
}
}
let me study real quick
just to be clear this line if (Array.isArray(arr))
is the same as if (Array.isArray([ 1, 2, 3, [ [ 4 ] ] ]))
is the same as if (Array.isArray([ 1, 2, 3, [ [ 4 ] ] ]))
@zootechdrum depends on what the
arr param is :)
@Marmiz I figured that. when is the else statement executed is it after the number 4
@zootechdrum in this case you are passing it an array:
[1,2,3, [4] ]Is a valid array, so the else won't get executed
@Marmiz so the else statement is executed when there are no more items passed in the array.
@zootechdrum the
else is executed if Array.isArray return false
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar'); // false
Array.isArray(undefined); // false
which in the case of [1,2,3, [4] ] are all true until the items run out . right?
@zootechdrum nope, since the whole argument is a single array
It's not looping inside:
[1,2,3, [4] ] this is a single array
@Marmiz okay i think i see please tell me if I am right
if we pass in the argument [1,2,3, [4] ] it first executes as an array so it starts to reduce and then it returns whatever previous was and concats it to the current value . When we do the second return i make sure we are starting with no previous values. because curr on its first iteration 1 is not an array the else statement is executed
this happens for 1 2 3
until it reaches number 4
which is an array which recalls the reduce function again and executes until it is no longer in an array
hi, which parts of javascript should i master before moving on to a framework?
@jefflung What comes to mind, is data manipulations. Since most of the DOM/CSS/display stuff is handled by the framework in their own way. All the "business logic" is left to you.
I edited that since I could be forgetting something important haha
@bradtaniguchi thanks for your advice
which parts of javascript should i master before moving on to a framework
javascript
just to give you an insight @jefflung , yesterday a guy @ work asked for help since he always got undefined.
he got a class/setup like this:
class a {
constructor(){
this.value = [1,2,3];
this.total = 0;
}
method() {
this.value.forEach(function(val) {
this.total += val
})
}
}You should spot the error in a second, since many modern frameworks works with classes :)
Yes very true :smile:
sorry i am not good with js yet, could you tell me the error so I can learn from this? Thanks
@jefflung If your not good with js yet, then you need to learn js before using a framework.
@jefflung
I can learn from this
You got the answer in there :)
Or you can run it and see it yourself:
class a {
constructor(){
this.value = [1,2,3];
this.total = 0;
}
method() {
this.value.forEach(function(val) {
this.total += val
})
}
}
var b = new a();
b.method()
Thanks let me try
console returns "Uncaught SyntaxError: Identifier 'a' has already been declared" , is it the error of class a declared?
nah, you probably have already a fucntion
a declared in your console. Don't ask me why
Just rename the class to something with more sense than "a"
just open a new browser tab and paste the code in the developer console :)
(I promise nothing's harmful is in there)
(I promise nothing's harmful is in there)
ok, now i got "Uncaught TypeError: Cannot read property 'total' of undefined" after I change a to another word
bingo
you should know why on the spot, just by looking at the function :)
this.total = 0 and this.total += val has conflict?
@jefflung not at all :)
When you said that:
I can learn from this
You were pretty close: this
total has not defined but this applies?
this is some crazy stuff
@jefflung just to make it simple: traditional functions in JS have their own
this context. So when using this.arr.map(function(el) {
// in here this, is now binded to the map callback function.
// it's no more the class.
console.log(this) // undefined
})
@Marmiz Thanks, I may need some time to digest, and I found on web This is quite convoluted to JS novice.
@jefflung well, you got your answer now.
Now you know why in [insert framework here] documentation they show examples mainly with es6 arrow function:
Now you know why in [insert framework here] documentation they show examples mainly with es6 arrow function:
this.arr.map( el => {
// arrow function don't bind this
console.log(this) // the class instance
});
I thought because of concise
hello. I was wondering if I want to implement a component with editable text in react, without changing it into an input field, draftjs would be the right tool to use
@Marmiz so the framework examples avoid the "this" error in traditional function by using arrow function?
@zebralight we use draftJS @ work.
there are components already made based on that
there are components already made based on that
in case you want something easier
@jefflung that's one way. In react they show the usage of bind(this)
constructor() {
this.myMethod = this.myMethod.bind(this)
}Or you can use the good old var that = this :)
@Marmiz Thanks for your patient explanation, I have a good lesson.
@jefflung :+1: no problem :)
@Marmiz :+1:
Will someone tell me what I'm not doing correctly for setting state? https://codepen.io/lalov1/pen/97756811476267a589a730dc15f881a1?editors=0010
@lalov1 well, the structure tree make no sense:
you have a key
you have a key
recipes but what values hold? You have a list of object just written randomly. It's not an array of objects, a map, a list or any other valid data structure
Hey friends
what is ~~ in js? is it for like getting an approximate value?
for example
var a = ~~((event.clientY - c.getBoundingClientRect().top) / 40);
@Heathercoraje It is similar to Math.trunc()
Another way to trunc is
val>>0.
ES5 JS didn't have a built-in trunc method that also worked on negative numbers, so people used bitwise operator tricks like that.
@Masd925 Awesome Thanks!
Hi. I have a vue component and I want to show some items to the users. But I want to show the delete button only to the admin which approach is the best look at these codes
```
<div v-if="user.admin">
<div v-for="item in items"></div>
</div>
<div v-else="">
<div v-for="item in items"></div>
</div>```
or this way in codes below
```
<div v-for="item in items">
<div>
{item.title}
</div>
<div>
{{item.info}}
</div>
<div v-if="user.admin">
<button>delete item</button>
</div>
</div>```
Or maybe I should make two components for admin or other users?
second approach
<div v-for="item in items">
<div>
{item.title}
</div>
<div>
{{item.info}}
</div>
<div v-if="user.admin">
<button>delete item</button>
</div>
</div>
personally I would use separated the components for user and admin, if I have more methods for user or admin in future then the code will be more clean for myself.
@shekharramola Thanks. This way is easy for developers but it has a if statement for many items. Does it have any bad effect?
@edgaryp Thanks. Thas is the benefit but in this way we should copy and paste many codes too.
hey, what do you guys think of my completed twitch streamers app? https://mgrienauer.github.io/twitch_streamers/
@mgrienauer :+1: looks great - works great
@sjames1958gm thanks!
@mgrienauer :+1:
@mgrienauer great
fellas can i adjust the height of the html or body elements in css. I dont see why not but it doesnt work when i try for example
<html>
<head>
<style>
body{background-color:green; height: 50px;}
</style>
</head>
<body>
<div>im a div</div>
</body>
</html>
@Donnie-D maybe U wanna style
div to set height of 50px?
@IsaakNazar yes that works but as mentioned this is only an example i basically would like to know why it doesnt work :shipit:
@IsaakNazar nope still got the whole page green lol
@Donnie-D U tried smth like this?
div {background-color:green; height: 50px;}
I need help. I use babel-eslint. but I got this error. Anybody know what happened?
Error: Cannot find module 'escope'
at Function.Module._resolveFilename (module.js:538:15)
at monkeypatch (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\babel-eslint\index.js:41:26)
at Object.exports.parse (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\babel-eslint\index.js:384:5)
at parse (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:565:29)
at Linter._verifyWithoutProcessors (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:957:33)
at preprocess.map.textBlock (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:1046:35)
at Array.map (<anonymous>)
at Function.Module._resolveFilename (module.js:538:15)
at monkeypatch (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\babel-eslint\index.js:41:26)
at Object.exports.parse (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\babel-eslint\index.js:384:5)
at parse (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:565:29)
at Linter._verifyWithoutProcessors (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:957:33)
at preprocess.map.textBlock (C:\Users\hzmaoxunxing\AppData\Roaming\npm\node_modules\eslint\lib\linter.js:1046:35)
at Array.map (<anonymous>)
this is my package.json:
{
"name": "eslint-config-base-mxx",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"keywords": [
"eslint",
"eslintconfig"
],
"devDependencies": {
"babel-eslint": "^8.2.3",
"eslint": "^4.19.1"
}
}
@IsaakNazar yep as mentioned earlier, this works but why when i try to set the body or html tags with same properties, it wouldnt work?
.eslintrc.js:
module.exports = {
"parser": 'babel-eslint',
"rules": {}
};
my npm version is: 4.6.1
@Donnie-D no you cant set the height on body and html. They are document roots
@Donnie-D just set the height to the div, not to the body, it wont work
that explains it then . so how many other tags are document roots. or are these are the only 2 @lydatech
@Donnie-D basically just the 2 in relation to css.
root isnt the exact name but its an easy concept to understand
@lydatech rightiho! and i suppose the principle stands the same for
width as well?
@Donnie-D yep
@lydatech so would you call it a glitch in the matrix as to why the background is taking the whole window space but width is enforced there?
https://jsbin.com/cubokuqoki/edit?html,output
https://jsbin.com/cubokuqoki/edit?html,output
Hey can someone help me?
i want my section to take 100% of the body
how to do so?
@Donnie-D you mean
<meta name="viewport" content="width=device-width">?
nah sorry i had to copy the link again. please try and click once more. it was showing up blank before :+1:
@lydatech
@Donnie-D thats not standard. Though its showing it isnt correct. Like drinking water from a shoe, you could do it but it isnt supposed to be done
@lydatech lol yep got it
@mustimuu you have a 50px padding applied
@lydatech i removed it
@lydatech Still not taking the 100% width
@mustimuu no it hasnt been changed
.elementor-31 .elementor-element.elementor-element-fd1ba23 {
background-image: url(http://mustidev.beproductive.dk/wp-content/uploads/2018/04/cover-pic-1.png);
background-position: center center;
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
height: 250px;
padding-left: 30px;
width: 100%;
box-sizing: border-box;
padding: 50px;
}
it has
@mustimuu not on the link you sent
hmm try again sir.
Still same ?
yeah you probably didnt push your changes to the server or something
When i open the file, it hasnt those changed your pointing
@mustimuu look at the path to the css file. You sure youre changing the correct file?
@mustimuu when you click this link http://mustidev.beproductive.dk/wp-content/themes/understrap-child/ms-custom/style.css?ver=0.5.0 what do you see?
try now
@mustimuu when you click this link http://mustidev.beproductive.dk/wp-content/themes/understrap-child/ms-custom/style.css?ver=0.5.0 what do you see?
site not found
My eslint and babel-eslint version is not correct. I had solved it. Thanks....
@mustimuu idk why youre not seeing that... anyway the padding youre getting is from the bootstrap class
col-md-12 content-area
you right
@lydatech thank you
@mustimuu you might want to add
background-size: cover;
hello.. i am stuck in portfolio page
here background color in contact section is not covering the entire area
The background color of form is white instead of the color i have set
@Donnie-D @lydatech You *can* set the body height - try adding a border and you'll see the height is applied:
body {
background-color: green;
border: 1px solid black;
height: 50px;
}The issue you're seeing is with the background-color property. When no background-color is specified for the html element, the body background will cover the entire page. To only have your green background apply to a smaller height body, you would need to apply a background to both the html and body elements, like:
html {
background-color: white;
}
body {
background-color: green;
height: 50px;
}
A bit more of an explanation: https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
Code above in a pen: https://s.codepen.io/anon/pen/bMwKLW?editors=1000
Guys can you tip me what I'm doing wrong with those css animations? On the page you can see demo as well.
When you click on any of the links(top right corner) it opens something like modal that its pain for me to create a smooth animation? What I'm doing wrong?
https://github.com/dbsimeonov/hennessy
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color:rgb(247, 244, 243)
}
/* GLOBAL */
.container {
width: 80%;
margin:auto;
overflow:hidden;
}
/* HEADER */
header {
background: #431906;
color: #ffffff;
padding-top: 30px;
min-height:70px;
border-bottom:#337616 8px solid;
}
header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size:16px;
}
header ul {
margin:0;
padding:0;
}
header li{
float:left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float:left;
}
header #branding h1 {
margin:0;
}
header nav{
float:right;
margin-top: 10px;
}
header .highlight, header .current a{
color: #46C211;
font-weight: bold;
}
header a:hover{
color:rgb(49, 53, 124);
font-weight: bold;
}
/* SHOWCASE */
#showcase {
min-height:400px;
background-img: url('./Images/showcase.jpg') no-repeat 0 -400px;
text-align: center;
color:#ffffff;
}
#showcase h1{
margin-top:100px;
font-size:55px;
margin-bottom:10px;
}
Can anyone help me figure out why my #showcase image isn't showing at all?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fordyce Custom Carpentry</title>
<!--FAVICON CODE-->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--END FAVICON CODE-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Fordyce Custom Carpentry</h1>
</div>
<nav>
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Finish Carpentry at its finest in Santa Barbara</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus quos quidem excepturi nostrum in, quas dignissimos non numquam a laboriosam!</p>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./Images/Entry_Door.jpg" alt="">
<h3>Custom Entryway</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad, id.</p>
</div>
<div class="box">
<img src="./Images/cabinet.jpg" alt="">
<h3>Cabinetry</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, nam!</p>
</div>
<div class="box">
<img src="./Images/Deck.jpg" alt="">
<h3>Deck and Railing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, voluptatum voluptate!</p>
</div>
</div>
</section>
</body>
</html>
Relavent CSS then HTML attached :) Thanks!
holy code batman
lol, I thought it would help
Since I've got no clue where the mistake is!
My guess is how your doing your url, or the image doesn't exist at that url at all
@sjames1958gm @1532j0004kg thanks
hello. what property do non-window elements have that's the equivalent of window.scrollx/scrolly?
Guys for creating animation with
relative position that pushes my navbar from top, what css properties should I use? Can I do it with changing to absolute or height etc? Been trying for the past 3-4 hours but none of it seems to work smoothly
@dbsimeonov these may be helpful: :sparkles:
Really appreciate the links, the first one definitely is worth reading it. Kind of waiting for your golden Google skills. The animation is quite similar than the first one, but the menu is outside the window and I want to push the top element. You can see what I've created so far or to understand my issue easier https://dbsimeonov.github.io/hennessy/
@dbsimeonov hmmm... what is the "top element"? i see a toggle activated side menu. i don't see any content that would (possibly?) allow me to see the/any issue? i don't think I understand what we're trying to do...
try to click on sign up login or ssearch
@dbsimeonov ok, will do. btw i only see
Log in & Create an account - no search...
@ndburrus yes my bad, long day. Those 2 +
search icon activating new elements from top
hey guys, on my twitch channels project, the cretetion channel is displaying as offline in the app, but when I click the link the twitch channel is live. I don't get why it's doing this. I thought I did the ajax calls correctly O_o
@dbsimeonov ok... i don't see any functionality (yet) on
create an account or log in. i do see that Hennesey is sticky. so what are we trying to achieve? do we want the top section (ie everything) to be sticky?
@ndburrus idea is just to create smooth animation to open them. I'm not bothered doing the functionality of them now. Only the animations look really bad but that was the closest I could do to
smooth or to the original
i think your looking for smooth fade in/out?
- Fade In/Out (scroll down to...)
...employ both visibility and opacity style attributes.
im learning php now but dont know most people say you have to learn first js and it's framework
but i enjoy learning php more
am i in the right direction?
@markclynch Use
background instead of background-img if you're specifying more than just the image path.
background: url("./Images/showcase.jpg") no-repeat 0 -400px;
not:
background-img: url("./Images/showcase.jpg") no-repeat 0 -400px;
(and, it's really helpful if you can copy/past that into a codepen for us to see rather than spamming walls of code here in chat!). For example: https://s.codepen.io/anon/pen/rvMEBR?editors=1100
@gulsvi sounds like so professional
experienced
I started learning last summer here at FCC
like you were absolute beginner?
I don't know about absolute - I used to write scripts to automate my minecraft farming lol
i see
used a computer every day since I was 8yrs old, but no, never learned javascript before
so where are yu now
i mean what is your technical or coding skills
I'm just waiting for the beta to finish before I get my front-end certificate, thinking about applying for a developer job over the summer
good luck with that
Thanks :)