Å Marlon G
Å Marlon G
PostsComments
KPCKevin Powell - Community
Created by Å Marlon G on 5/30/2024 in #front-end
Chrome vs. Firefox 😳
No description
6 replies
KPCKevin Powell - Community
Created by Å Marlon G on 5/22/2024 in #front-end
... center div 😡
This feels like newbie shit, but I don't understand why my H1 is not centering within row 2 and column 2? I've done all the place-items/content/self, justify, align, text-align on both the Header and the H1. Nothing is happening. Repo https://github.com/AMarlonG/Rondo-prototype/blob/main/index.html Live test site https://amarlong.github.io/Rondo-prototype/
20 replies
KPCKevin Powell - Community
Created by Å Marlon G on 4/26/2024 in #front-end
Flexbox column swap without media or container querie.
No description
3 replies
KPCKevin Powell - Community
Created by Å Marlon G on 4/25/2024 in #front-end
Responsive columns
Hi, I thought I could quite easily make a layout where I have two columns in a grid, whereby the first column (which is wider) would shrink at a slower rate than the second column, and when there was no room left for the second column, it would just pop underneath. Basically this responsive layout, but with different rates of shrinking for the columns: https://codepen.io/amarlong/pen/WNyaQOJ I have a feeling this is very easy, but I'm not conceptually understanding what I need to write. Here's the repo: https://github.com/AMarlonG/Rondo-prototype
7 replies
KPCKevin Powell - Community
Created by Å Marlon G on 2/26/2024 in #front-end
Is <time> used?
Hi! Just wandering if <time> is used at all? So many websites have some sort of time data, but I've never seen the time tag used on them. Is there a reason for this?
18 replies
KPCKevin Powell - Community
Created by Å Marlon G on 2/10/2024 in #front-end
Cancelling out @media in Wordpress template
Hi! So this is a real nut for me .... I've been asked by my employer to build a schedule and add it to an existing wordpress template. I tried to use WP plugins, but nothing gave me the horisontal scroll I desired. So I made this template for each day: https://github.com/AMarlonG/Ice-Hot-kode Now comes the crux. I've build this with the responsive code line width: min(120ch, 100% - 4rem);, which is my preferred option. But this WP template has many different @media breakpoints which is overriding this. I think it is .main > .containerwhich has all the @media queries (there is another .container for the header and nav tag. I don't wanna change their width). This is the Wordpress page I want to zero out the media queries. The HTML was added using an html block in the WP CMS. https://www.icehotnordicdance.com/thursday-15th-schedule/ I've tried selecting each of the break points and adding both 0 or the width: min(120ch, 100% - 4rem);, but I'm not getting it to work.
14 replies
KPCKevin Powell - Community
Created by Å Marlon G on 2/10/2024 in #front-end
Height iframe
Hi! First time using iframes. Why does it have vertical scrolling? https://github.com/AMarlonG/Ice-Hot-kode/blob/main/Saturday/index.html Tried adding height, changing width to max-width, etc. But cant get it to look like this: https://www.yr.no/en/content/1-72837/card.html
10 replies
KPCKevin Powell - Community
Created by Å Marlon G on 2/8/2024 in #front-end
How to choose specific element
Hi! In this code I want to select the first <p> in both, but with different color. In the one with class:"schedule-item ice-spice" I want the first <p> to be blue, in the second, with class="schedule-item performance" I want the first <p> to be red. I've lost my ways. I want to avoid using :has()since I know many will use an older phone. When I use p:first-child the entire schedule-item changes color, and not just the first <p>. A bit lost now ... 
<div class="schedule">
          <div class="schedule-item ice-spice">
            <p>Ice Spice</p>
            <span>07:00 – 08:30</span>
            <h4>Sauna</h4>
            <p>Sukkerbiten</p>
          </div>
        </div>

<div class="schedule">
          <div class="schedule-item performance">
            <p>Performance</p>
            <span>16:00 – 17:20</span>
            <h4>Harald Beharie</h4>
            <h5>Batty Bwoy</h5>
            <p>Dansens Hus</p>
            <span class="bus">
                <p>17:25 – Bus to Aviaja Dance, SILA</p>
            </span>
          </div>
        </div>
<div class="schedule">
          <div class="schedule-item ice-spice">
            <p>Ice Spice</p>
            <span>07:00 – 08:30</span>
            <h4>Sauna</h4>
            <p>Sukkerbiten</p>
          </div>
        </div>

<div class="schedule">
          <div class="schedule-item performance">
            <p>Performance</p>
            <span>16:00 – 17:20</span>
            <h4>Harald Beharie</h4>
            <h5>Batty Bwoy</h5>
            <p>Dansens Hus</p>
            <span class="bus">
                <p>17:25 – Bus to Aviaja Dance, SILA</p>
            </span>
          </div>
        </div>
4 replies
KPCKevin Powell - Community
Created by Å Marlon G on 10/26/2023 in #front-end
Calculating the salary based on salary – JS
// Utregning av ansiennitet
function activeYears(year) {
  const currentYear = new Date().getFullYear();
  const yearsSince = currentYear - year;
  return yearsSince;
}
// Finn lønnstrinn og lønn basert på ansiennitet
function salaryEmployee(year) {
  const yearsSince = activeYears(year);
  let level;
  let salary;

  if (yearsSince >= 0 && yearsSince < 2) return { level: 12, salary: 503118 };
  if (yearsSince >= 2 && yearsSince < 4) return { level: 14, salary: 514020 };
  if (yearsSince >= 4 && yearsSince < 6) return { level: 16, salary: 526214 };
  if (yearsSince >= 6 && yearsSince < 8) return { level: 18, salary: 536828 };
  if (yearsSince >= 8 && yearsSince < 10) return { level: 20, salary: 549884 };
  if (yearsSince >= 10 && yearsSince < 12) return { level: 22, salary: 564086 };
  if (yearsSince >= 12 && yearsSince < 14) return { level: 24, salary: 578861 };
  if (yearsSince >= 14 && yearsSince < 16) return { level: 29, salary: 622194 };
  if (yearsSince >= 16 && yearsSince < 18) return { level: 30, salary: 630515 };
  if (yearsSince >= 18 && yearsSince < 20) return { level: 32, salary: 648016 };
  if (yearsSince >= 20 && yearsSince < Infinity)
    return { level: 34, salary: 666234 };
}

console.log(salaryEmployee(2014));
// Utregning av ansiennitet
function activeYears(year) {
  const currentYear = new Date().getFullYear();
  const yearsSince = currentYear - year;
  return yearsSince;
}
// Finn lønnstrinn og lønn basert på ansiennitet
function salaryEmployee(year) {
  const yearsSince = activeYears(year);
  let level;
  let salary;

  if (yearsSince >= 0 && yearsSince < 2) return { level: 12, salary: 503118 };
  if (yearsSince >= 2 && yearsSince < 4) return { level: 14, salary: 514020 };
  if (yearsSince >= 4 && yearsSince < 6) return { level: 16, salary: 526214 };
  if (yearsSince >= 6 && yearsSince < 8) return { level: 18, salary: 536828 };
  if (yearsSince >= 8 && yearsSince < 10) return { level: 20, salary: 549884 };
  if (yearsSince >= 10 && yearsSince < 12) return { level: 22, salary: 564086 };
  if (yearsSince >= 12 && yearsSince < 14) return { level: 24, salary: 578861 };
  if (yearsSince >= 14 && yearsSince < 16) return { level: 29, salary: 622194 };
  if (yearsSince >= 16 && yearsSince < 18) return { level: 30, salary: 630515 };
  if (yearsSince >= 18 && yearsSince < 20) return { level: 32, salary: 648016 };
  if (yearsSince >= 20 && yearsSince < Infinity)
    return { level: 34, salary: 666234 };
}

console.log(salaryEmployee(2014));
In this calculation, which logs { level: 20, salary: 549884 }, how can you get the amount from salary, 549884 and times it with 38,6%? Basically: salary * 1,368 ... To be clear: how do I draw out the salary amount to use in further calculations ...
7 replies
KPCKevin Powell - Community
Created by Å Marlon G on 8/8/2023 in #front-end
Finding element in the dev tools
Hello! I can't fint the header text on this website, the first text lying across the video. Using the dev tools I can't seem to pick the text specifically, just the container (<figure class="featured-media">). How can I understand what this element is? www.tekstlab.com
15 replies
KPCKevin Powell - Community
Created by Å Marlon G on 7/17/2023 in #front-end
Disconnect between attribute and CSS selector – styles are not implemented as expected.
I just got some amazing help to add an id attribute to an elelement in a react component, but now that I want to add some styling the selector doesn't seem to affect the element: I'm using this video as inspiration, and want the header element to fade out when it gets id scrolling added on scrolling. https://www.youtube.com/watch?v=V-CBdlfCPic React component: https://github.com/AMarlonG/Website/blob/main/web-app/PageComponents/FrontPage.tsx CSS modules file: https://github.com/AMarlonG/Website/blob/main/web-app/PageComponents/frontPage.module.css The element in question is the header within mainInfo > mainInfoContent, which gets id="scrolling" when page scrolls. No blue border is being added when I scroll. Which is weird to me ...
6 replies
KPCKevin Powell - Community
Created by Å Marlon G on 7/17/2023 in #front-end
Adding id to element on scroll using react hooks useInView and useID in nextjs.13
Right ... so the title might be a bit daunting, but I think this is actually just some plain JS at the end of it. But I'm stuck here now ... In this code you see two react hooks, useInView and useID, being used to listen for scroll behaviour and adding an id to an element: 
import { useInView } from 'react-intersection-observer';
import { useId } from 'react';

export const FrontPage = () => {
  // Intersection observer hook
  const { ref: myRef, inView: elementIsVisible } = useInView();
  console.log('elementIsVisible', elementIsVisible);

  const newId = useId();

  return (
    <>
      <section className={styles.mainInfo}>
        <div id={newId} className={styles.mainInfoContent}>
          <HeadingOne content='Magefølelsen' />

          <HeadingTwo content='Kommunikasjon & design' />

          <EmailAddress content='[email protected]' />
        </div>
      </section>

      <section className={styles.shallWeWorkTogether}>
        <div className={styles.shallWeTitle}>
          <HeadingThree content='Skal vi jobbe sammen?' />
        </div>

        <div className={styles.shallWeContent} ref={myRef}>
          <div>
            <BodyText
              content='Er du enig i at for å kunne lage en fortelling og et design må man
            ha en god idé og historie?'
            />
            <NoddingWoman />
          </div>
import { useInView } from 'react-intersection-observer';
import { useId } from 'react';

export const FrontPage = () => {
  // Intersection observer hook
  const { ref: myRef, inView: elementIsVisible } = useInView();
  console.log('elementIsVisible', elementIsVisible);

  const newId = useId();

  return (
    <>
      <section className={styles.mainInfo}>
        <div id={newId} className={styles.mainInfoContent}>
          <HeadingOne content='Magefølelsen' />

          <HeadingTwo content='Kommunikasjon & design' />

          <EmailAddress content='[email protected]' />
        </div>
      </section>

      <section className={styles.shallWeWorkTogether}>
        <div className={styles.shallWeTitle}>
          <HeadingThree content='Skal vi jobbe sammen?' />
        </div>

        <div className={styles.shallWeContent} ref={myRef}>
          <div>
            <BodyText
              content='Er du enig i at for å kunne lage en fortelling og et design må man
            ha en god idé og historie?'
            />
            <NoddingWoman />
          </div>
... this is not all of the code. The entire react component can be seen here: https://github.com/AMarlonG/Website/blob/main/web-app/PageComponents/FrontPage.tsx
20 replies
KPCKevin Powell - Community
Created by Å Marlon G on 7/14/2023 in #front-end
A tag href with props
Hi! I wanna insert a prop into the mailto href in an a tag, but I'm not understanding how to split the mailto:from the prop content. Child component: 
type EmailAddress = {
  content: string;
};

export const EmailAddress = (props: EmailAddress) => {
  return (
    <>
      //This is where I have the issue ...
      <a href="mailto:"{props.content}>{props.content}</a>
    </>
  );
};
type EmailAddress = {
  content: string;
};

export const EmailAddress = (props: EmailAddress) => {
  return (
    <>
      //This is where I have the issue ...
      <a href="mailto:"{props.content}>{props.content}</a>
    </>
  );
};
Parent component: 
export const Test = () => {
  return (
    <>
      // This is the content I want to be inserted
      <EmailAddress content="[email protected]" />
    </>
  );
};
export const Test = () => {
  return (
    <>
      // This is the content I want to be inserted
      <EmailAddress content="[email protected]" />
    </>
  );
};
The final link should, when hovered, give the value mailto:[email protected]
3 replies
KPCKevin Powell - Community
Created by Å Marlon G on 7/14/2023 in #front-end
Custom headings (h1, h2, etc ...)
Hello! When building a component (I'm using React in Next), I want to build a component with plain text, but I wanna be able to change the heading order based on which page it is on. Example text: "I'm a subtitle" Homepage: I want this to be a h3 About page: I want it it o be a h1 How is this done, and is there any issues with this I haven't thought about? When I google this the only thing I get is headers, which is not the issue here ...
7 replies
KPCKevin Powell - Community
Created by Å Marlon G on 7/3/2023 in #front-end
Writing code convention JS / React?
Hi, again! In the quest to understand syntax better, a quick question. In the example underneath, from codecademy, the function calculating the prime number is underneath the counter function reusing the prime function. In my mind it would make more sense to place the prime function above the counter function since counter uses prime. So why is it underneath? Is this a JS / React convention? 
import React, { useState, useEffect } from 'react';

export const Counter = () => {

    const [counter, setCounter] = useState(0);

    useEffect(() => {
        if (isPrime(counter)) {
            document.body.style.backgroundImage = 'linear-gradient(to right, coral, teal)';
        } else {
            document.body.style.backgroundImage = "";
        }
    }, [counter]);

    return (
        <div>
            <h2>Count: {counter}</h2>
            <button onClick={() => setCounter(counter + 1)}>Click Me!</button>
        </div>
    );
};


const isPrime = (num) => {
    const squareRoot = Math.sqrt(num)
    for (let i = 2; i <= squareRoot; i++) {
        if (num % i === 0) {
            return false;
        }
    }
    return num > 1;
};
import React, { useState, useEffect } from 'react';

export const Counter = () => {

    const [counter, setCounter] = useState(0);

    useEffect(() => {
        if (isPrime(counter)) {
            document.body.style.backgroundImage = 'linear-gradient(to right, coral, teal)';
        } else {
            document.body.style.backgroundImage = "";
        }
    }, [counter]);

    return (
        <div>
            <h2>Count: {counter}</h2>
            <button onClick={() => setCounter(counter + 1)}>Click Me!</button>
        </div>
    );
};


const isPrime = (num) => {
    const squareRoot = Math.sqrt(num)
    for (let i = 2; i <= squareRoot; i++) {
        if (num % i === 0) {
            return false;
        }
    }
    return num > 1;
};
7 replies
KPCKevin Powell - Community
Created by Å Marlon G on 6/24/2023 in #front-end
State setters for newbie ...
Hi! Again, this is taken from codecademys react intro course. I have the same issue as usual – reading syntax. This code snippet is simplified as follows: 
const handleChange = (event) => {
    const newEmail = event.target.value;
    setEmail(newEmail);
}

const handleChange = (event) => setEmail(event.target.value);

const handleChange = ({ target }) => setEmail(target.value);
const handleChange = (event) => {
    const newEmail = event.target.value;
    setEmail(newEmail);
}

const handleChange = (event) => setEmail(event.target.value);

const handleChange = ({ target }) => setEmail(target.value);
1. Why is there curly brackets around target in the last restructuring, but not around event in the second restructuring. What is the curly brackets doing ...? 2. What happened to event in the last restructuring?
15 replies
KPCKevin Powell - Community
Created by Å Marlon G on 6/16/2023 in #front-end
JS in JSX for newbie
Hello! What is the square brackets in the const img doing here: 
import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
function coinToss() {
    // Randomly return either 'heads' or 'tails'.
    return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
    kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
    doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};

const img = <img
    src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']}
/>;

root.render(img); 
import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
function coinToss() {
    // Randomly return either 'heads' or 'tails'.
    return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
    kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
    doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};

const img = <img
    src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']}
/>;

root.render(img);
Are they allowing for the ternary function to choose the pics property and connecting them to coinToss() in an array?
26 replies
KPCKevin Powell - Community
Created by Å Marlon G on 6/10/2023 in #front-end
Finding correct tax bracket with iteration
Hello! taxBracket is finding the tax payed for each step of the tax bracket (stepOne, stepTwo, etc ...) What I want to do is find if myIncome is: --- higher than low and equal to high, if so, return the full sum --- higher than low, but lower than high, if so subtract low from myIncome and multiply with tax to find a new sum --- lower than low, ignore the bracket I'v tried all day with for loops, if...else statements, but I don't understand what to use to calculate all of those three conditions ... 
const myIncome = 650000;

const taxBracket = (low, high, tax) => {
    return {
        low,
        high,
        tax,
        sum() {
            return (this.high - this.low) * this.tax;
        }
    }

};

const stepOne = taxBracket(198350, 279150, 0.017);
const stepTwo = taxBracket(279150, 642590, 0.04);
const stepThree = taxBracket(642590, 926800, 0.134);
const stepFour = taxBracket(926800, 1500000, 0.164);
const stepFive = taxBracket(1500000, Infinity, 0.174);
const myIncome = 650000;

const taxBracket = (low, high, tax) => {
    return {
        low,
        high,
        tax,
        sum() {
            return (this.high - this.low) * this.tax;
        }
    }

};

const stepOne = taxBracket(198350, 279150, 0.017);
const stepTwo = taxBracket(279150, 642590, 0.04);
const stepThree = taxBracket(642590, 926800, 0.134);
const stepFour = taxBracket(926800, 1500000, 0.164);
const stepFive = taxBracket(1500000, Infinity, 0.174);
13 replies
KPCKevin Powell - Community
Created by Å Marlon G on 6/9/2023 in #front-end
Vacation pay calculator – JS
Hi folks! I'm a bit stuck, and not really sure how to google this issue ... When running the script in this repo I get a NaN when calculating vacationPay at the end ... I understand that something is not defined, but I don't understand what that is ... https://github.com/AMarlonG/JavaScript/blob/main/Projects/calculator.js
11 replies
KPCKevin Powell - Community
Created by Å Marlon G on 6/8/2023 in #front-end
Following Kevin's advice as best as one can ... how well do you need to understand vanilla JS?
So Kevin put out this video (https://www.youtube.com/watch?v=HuI4fDxDM0g), and it was a nice reminder that having commited to the "boring" route of become a web dev he endorsed the choice I made of sticking to my guns and finishing codecademys JS courses, plus filling in gaps with javascript.info, Kyle in Web Dev Simp., etc. But then it hit me from watching this video – how well do you need to know vanilla stuff before you go on to react, next.js, etc? Because I now know some very basic JS structure, and with the help of the resources I've mentioned and the power of googleing I could probably build very basic stuff with JS, like a calculator, etc. Objects are important, functions are important, having done the JS course first, I really felt like TypeScript is something I can see as a good tool (and actually felt easy to understand), but what I don't understand is how well should I understand when I should use classes instead of basic objects? When do I build a function from scratch and when is it better to use specific methods? And having googled this issues I don't really find any good resources. As a specific example: Now I can read a JS file and understand the different tools and steps (this is an object, and this method is using this property, etc.), but I could never build one from scratch myself. So if I wanted to build an ecommerce web app I could not write that code myself, but I would be able to decipher an ecommerce program someone else has build. So – is it know that I jump over to understanding React and other libraries, frameworks, etc., and start chippin away on them, or are there any good resoruces to kind of close the gap between really basic vanilla JS knowledge, and real life application building? This could also be a question for the back-end channel, but here it goes for now.
16 replies