griff
griff
Explore posts from servers
KPCKevin Powell - Community
Created by griff on 8/1/2024 in #front-end
Help with responsive navbar menu
No description
4 replies
KPCKevin Powell - Community
Created by griff on 7/30/2024 in #front-end
Which JS show menu approach is more efficient / cleaner to you?
Watching a responsive design full site build because I am TERRIBLE at mobile first and this guys attempt looks sorta verbose to me but I'm not really the person to be talking semantics so I wanted you all to gauge these -- first one will be my approach and the second will be what the guy in the video does:
const burger = document.querySelector(".hamburger");
const nav = document.querySelector(".nav");
const navList = document.querySelector(".nav-list");
const burgerBar = document.querySelectorAll(".hamburger-bar");
const header = document.querySelector(".header")

burger.addEventListener("click", () => {
nav.classList.toggle("active");
navList.classList.toggle("nav-active");
burgerBar.classList.toggle("bar-toggle")
})

function toggleHamburger() {
burgerBar.forEach(burgerBar => burgerBar.classList.toggle('hamburger-bar-toggle'))
}

burger.addEventListener('click', toggleHamburger)
const burger = document.querySelector(".hamburger");
const nav = document.querySelector(".nav");
const navList = document.querySelector(".nav-list");
const burgerBar = document.querySelectorAll(".hamburger-bar");
const header = document.querySelector(".header")

burger.addEventListener("click", () => {
nav.classList.toggle("active");
navList.classList.toggle("nav-active");
burgerBar.classList.toggle("bar-toggle")
})

function toggleHamburger() {
burgerBar.forEach(burgerBar => burgerBar.classList.toggle('hamburger-bar-toggle'))
}

burger.addEventListener('click', toggleHamburger)
Other guy's:
const showMenu = (toggleId, navId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)

if(toggle && nav){
toggle.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
})
}
}
showMenu('nav-toggle','nav-menu')

const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
const navMenu = document.getElementById('nav-menu')
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
const showMenu = (toggleId, navId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)

if(toggle && nav){
toggle.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
})
}
}
showMenu('nav-toggle','nav-menu')

const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
const navMenu = document.getElementById('nav-menu')
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
2 replies
KPCKevin Powell - Community
Created by griff on 5/31/2024 in #front-end
simple discord.js bot question
No description
8 replies
KPCKevin Powell - Community
Created by griff on 5/23/2024 in #ui-ux
opinions on my light mode / dark mode / navy theme?
https://www.figma.com/design/5WUXfdbMRtWWqCMYEaoG2n/web_agency?node-id=65%3A14&t=PZwb6QDc5gfrDgiL-1 I am trying to put together a landing and still kicking around theme ideas and wanted to run this by you all. I honestly like the all black btns in light mode which makes me sort of want to use that over the navy but wanted to get multiple eyes and get criticism overall before I start deving the page itself -- attaching a video demo of what the Value part will be doing in my CTA (super choppy gotta refine it)
2 replies
KPCKevin Powell - Community
Created by griff on 5/20/2024 in #ui-ux
feedback on logo proposals I received?
contacted a logo guy to make some logos for me since I am not great with logos or iconography and got a few submissions, of the submissions there were 4 I sort of liked and wanted to get eyes on these and determine which style may be the best to work with and keep refining with the logo guy. informed the designer I'm looking for a modern / cutting font with a geometric approach to the logo around the name Tristar. https://www.figma.com/design/5WUXfdbMRtWWqCMYEaoG2n/web_agency_branding?node-id=0%3A1&t=At9VKsjR6p6hcEaT-1 I like the top left logo minus the gray, working on a smoother third color to work with if you all have any suggestions please let me know. I like the pop of the top right one but the wordmark would need to be changed to match light mode / dark mode which I'm not entirely a fan of but I do like the logo design a little too Bottom left is fun but I feel like the logo itself doesn't work well without the word mark. I like the bottom right as well because the font is sharp and the logo can work on it's own without the word mark more than the bottom left but I am wondering about the font weight and if it's too heavy
30 replies
KPCKevin Powell - Community
Created by griff on 5/16/2024 in #front-end
how come my scroll watcher's width is set to 100% but doesn't fill 100% of the DOM?
No description
12 replies
KPCKevin Powell - Community
Created by griff on 5/16/2024 in #front-end
what are your opinions on custom cursors?
would you say it's bad overall / depends on use case / can be tasteful / accessible? been styling custom cursors and enjoying it but wondering if my time might be better spent on something else -- also really curious for those with clients if they enjoy the custom cursors or overall how they're received by non technical people / business owners
8 replies
KPCKevin Powell - Community
Created by griff on 5/8/2024 in #front-end
Burger spans not showing up in DOM -- do show up in dev tools
No description
2 replies
KPCKevin Powell - Community
Created by griff on 5/3/2024 in #front-end
keep getting "Uncaught TypeError: Cannot read properties of null (reading 'setAttribute)" error
hi, i am trying to implement a dark/light mode toggle into my code and keep getting this error -- i feel like the dev tools is trying to tell me its running JS before it loads or finds the elements targeted but everything looks right on my end. probably a silly mistake but wanted to get some more eyes on this:
11 replies
KPCKevin Powell - Community
Created by griff on 5/2/2024 in #front-end
Code review for my header / nav please
hi, i am getting into web dev and responsive design and mobile menus have been my bane, making an effort to get better and I was hoping someone could look over my project structure and see if this is a good template to build off of or if its too verbose, as well as look at my styling usage and critique as they see fit! repo: https://github.com/griffnsh/web-starter
38 replies
KPCKevin Powell - Community
Created by griff on 4/25/2024 in #front-end
having trouble wrapping my head around mobile menus
hi all, i really love doing front end work, enjoy really getting into the gritty with SCSS, but my big road block is mobile menu design. I have watched videos from KP of course, and codewithsadee and for whatever reason I just blank when it comes time to implement my own. conceptually I understand that (in a mobile first context) i am structuring the nav items in a container, making an off screen nav and in JS targetting the off screen nav and placing it's zindex above all but scaling out into bigger sizes and implementing it overall on my own without just following someone for whatever reason throws me off. if anyone could advise on how they got comfortable and fluid with making these menus i would greatly appreciate any and all pointers!
8 replies
CC#
Created by griff on 3/8/2024 in #help
Curious for the use case / reasoning for using C# to make a Discord bot
hi, i am new to development, currently getting a foundation in PowerShell and some light C# projects -- i briefly dabbled in front end and used JS to make a discord bot awhile ago and also knew Python was an alternative and wanted to ask what the pro's/con's could be to using C#. i'm interested in C# for .NET overall, but would love to hear more about C# bots. my train of thought, albeit inexperienced and not very nuanced, is Python is a tad bit (pretty) depricated for bots, and discord being an electron app should integrate well with JS. but again, my knowledge is surface level -- excited to hear a well versed take!
14 replies