James Rinella

finally, after some food poisoning, im close to finishing but im not sure why when i hit enter, it works to shift to a new line but also outputs the word "enter", same with the word "backspace" but whats wrong with my code that its not deleting my last element child? https://codepen.io/Jaboc/pen/JjqeBPd

New comment 3d ago

James Rinella

1 like • 5d

Basically what he said.. if you move the h1.innerText += e.key into each of the if blocks instead then it doesn't print the enter,backspace,etc. Then you will have to remove the last char from h1.innerText when backspace is pressed instead. But yeah I'd almost rethink the approach.. what if i pushed enter, the <br> is added, then i push backspace and there's no text to remove from h1.innerText?

Ryan Pickard

7d ago

Help

Two Questions

Hey everyone, if you could, take a look at this code. Looking at lines 61 & 84 Question 1: Why can't I get this icon (isVerified) to disappear? The function says if isVerified === false, add a class that should hide the svg, but it isn't working. Question 2: I am trying to get replies count to populate, but it is showing as undefined -- what's up with this? Any help would be great, thanks! https://codepen.io/Ryan-Pickard/pen/BaeVRPE?editors=1011

New comment 7d ago

James Rinella

0 likes • 7d

1: take out the period when adding 'verifyHide' class. Also I don't believe adding a class to an element returns anything so should look like this. //question 1 function verify(x) { if (!x) isVerified.classList.add('verifyHide') } 2: change it to query the replies.views like this. //question 2 icon4.innerHTML = `<span id = 'icon4'class='icon'><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" /> </svg> ${tweet.replies.views}`

James Rinella

0 likes • 7d

@Ryan Pickard ah yeah my bad it's late. Are you allowed to modify the tweet obj? The replies can be put in an array then you can use the tweet.replies.length that you had before: replies: [{ user: { displayName: faker.person.fullName(), username: faker.internet.displayName(), profilePic: faker.image.avatar(), datePosted: faker.date.recent().toString().slice(0,10) }, post: { text: faker.lorem.sentence() }, likes: faker.number.int(5000), shares: faker.number.int(5000), views: faker.number.int(5000) }] };

James Rinella

11d ago

Help

Apple clone - blur effect on main nav hover

Hey pros, any hints on how to achieve this blur effect when hovering on a main nav item? My approach right now would be add an ::after element to my dropdown and blur the background on that but it seems like overkill.. but I'm not finding much on how to blur all the elements behind it. Not sure if anyone was able to achieve it. Thanks https://codepen.io/James-R-the-sans/pen/zYQPByo?editors=1100

New comment 9d ago

Apple clone - blur effect on main nav hover

James Rinella

0 likes • 10d

@Mioara Cenusa Yep I considered it but saw it wasn't supported in safari

James Rinella

1 like • 10d

Got closer by using ::after element on the hovered list item with the backdrop-filter that covers the entire screen. The dropdown then sits on top of the blur overlay via z-index... but it's still not the same as the live site. Think I need to rethink the whole dropdown animation instead of setting a negative top value to hide it initially.. 😞