https://www.youtube.com/watch?v=CnprxD_sJFE
<-- part 1 looks soo easy
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
arr
- something like if (Array.isArray(arr[0]))
[[4]]
which recurses to [4]
whichfunction 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;
}
}
arr
param is :)
@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
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
Array.isArray
[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
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 :)
@jefflung
I can learn from this
You got the answer in there :)
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()
a
declared in your console. Don't ask me why
@jefflung not at all :)
When you said that:
I can learn from this
You were pretty close: this
this
is some crazy stuff
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
})
this.arr.map( el => {
// arrow function don't bind this
console.log(this) // the class instance
});
@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
:)
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
var a = ~~((event.clientY - c.getBoundingClientRect().top) / 40);
val>>0
.
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>
```
<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>
<html>
<head>
<style>
body{background-color:green; height: 50px;}
</style>
</head>
<body>
<div>im a div</div>
</body>
</html>
div
to set height of 50px?
div {background-color:green; height: 50px;}
{
"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"
}
}
module.exports = {
"parser": 'babel-eslint',
"rules": {}
};
root
isnt the exact name but its an easy concept to understand
width
as well?
<meta name="viewport" content="width=device-width">
?
.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;
}
col-md-12 content-area
background-size: cover;
@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;
}
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;
}
<!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>
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
Log in
& Create an account
- no search
...
search
icon activating new elements from top
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?
smooth
or to the original
i think your looking for smooth fade in/out?
...employ both visibility and opacity style attributes.
background
instead of background-img
if you're specifying more than just the image path.
background: url("./Images/showcase.jpg") no-repeat 0 -400px;
background-img: url("./Images/showcase.jpg") no-repeat 0 -400px;