DEV Community: anderu

Learn to build responsive website from Kevin Powell!

anderu — Thu, 11 Jan 2024 10:33:58 +0000

@kevinpowell Youtube Tutorial - Build a responsive website with HTML & CSS
Frontend Mentor Landing Page

Had been go thru Scrimba's The Frontend Developer Career Path Module 5 solo project to build responsive website but understand of theory only is not enough! So i found Kevin video and it is good!

I am halfway of this tutorial but I just want to share a few thing that put a lightbulb above my head.

:root{
 --color-setup
 --font-family-setup
 --font-weight-setup
 --font-size-setup
}

/* CSS RESET */

/* General styling */

/* Button */

/* Navigation */

/* Utility classes */
}

First is the setup of the CSS file. Setting of the initial setup is something I learn and I think it make life easier! Setup the root and then link to utility classes. So we can add the class on element when working on html to match the design.

Then the use of @media (max-width: 50em) for small screen size design. Focus to work on mobile design first, afterward only shift to desktop version.

On Javascript, use .setAttribute() and .toggleAttribute() method to add data-* attribute on element for CSS design such as click on the hamburger icon and popup of the navigation menu.

The tutorial show how Kevin's planning and process to build up the website. It is something I think I need to learn more from expert.

Thanks for your time to finish read about my post. Feel free to share your idea and thought! 😸

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
};

const {first, second, third, forth} = life

function capital(word) {
  return word[0].toUpperCase() + word.slice(1)
}

console.log(`${capital(first)}, ${capital(second)}, ${capital(third)}, ${capital(forth)}!`);

Andrew Tan

Today I learn about CSS Grid

anderu — Tue, 09 Jan 2024 12:20:18 +0000

Today I learn about CSS Grib.

.container {
    display: grid;
}

To use the grid, first need to declare display: grid; on the parent element.

.container {
  display: grid;
  grid-template-rows: 50px 200px;
  grid-template-columns: 100px 200px;
  // Or shorthand
  grid-template: 50px 200px / 100px 200px;
}

Then we can set the columns and rows for the grid. Example above show that we create a grid with 2 x 2. Where the

Grid A is 100px * 50px
Grid B is 200px * 50px
Grid C is 100px * 200px
Grid D is 200px * 200px

.item {
  background-color: blue;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  // Or shorthand
  grid-row: 1/3;
  grid-column: 2/3
}

To place the grid item on the parent's grid, we can use grid-column-start, grid-column-end, grid-row-start and grid-row-end. Example here show that we set the item to locate at row number 1 to row number 3 and column number 2 to column number 3.

.container {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  // Or shorthand
  gap: 20px
}

If we want to create some gap between the grid then we can use grid-column-gap for gap between column only. grid-row-gap for gap between row only. Or gap for both row and column.

.container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 200px 50px;
    grid-template-areas: 
      'header header header'
      'content content ....'
      'footer footer footer';
}

.header {
    background-color: blue;
    grid-area: header;
}

.content {
    background-color: yellow;
    grid-area: content;
}

.footer {
  background-color: red;
  grid-area: footer;
}

Another great thing about CSS Grid is the grid-template-areas as you can see example above how easy it is the setup the section according to the arrangement we set on the grid-template-areas then we only set which area to take for the section without the use of grid-row and grid-column. The first row is header header header, second row is container container .... the .... is use to represent empty space, one . only also can be use. Then last row is footer footer footer. Easy way to arrange the content.

Thanks for your time to finish read about my post. Feel free to share your idea and thought! 😸

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
};

const {first, second, third, forth} = life

function capital(word) {
  return word[0].toUpperCase() + word.slice(1)
}

console.log(`${capital(first)}, ${capital(second)}, ${capital(third)}, ${capital(forth)}!`);

Andrew Tan

px, em, rem and percentage in Responsive Design

anderu — Mon, 08 Jan 2024 09:08:32 +0000

It is encourage to build website on 'mobile-first' design to optimize the experience of mobile user! To do that we can write base CSS with mobile design first then only use media queries to adjust the layout for wider screens.

There are 4 type of unit we used to adjust the size of element:

Pixels (px): Absolute units that always appear the same size on screen.
em: Relative unit that 1em is equal to the parent element's font-size value. Example if the paragraph have font-size: 20px then if we set the margin-left: 1.5em is equal to 30px of margin-left.
rem: Relative unit that 1rem is always relative to the root element. Example html have font-size: 16px by default, so 1rem = 16px.
Percentage (%): Relative value that % is based on the value of its parent element. Example main have width of 720px, then if we set the child div element width: 80% is equal to 576px.

Which is the best to use? It depend:

px: Pixel is suggest to use on max-width element. Example of div max-width is set to 720px and no matter how big the screen is the max-width still fix on 720px.
em: EM is suggest to use on margin and padding. The margin and padding will then scale based on the element's current font size.
rem: REM is suggest to use on font-sizes element so that there is no compounding issue from em and the font size is known because based on root element which is 16px.
%: Percentage is suggest to use on width especially container and image for size flexibility based on parent element.
Beside the unit suggest above there is unitless number values too. Example of line height property which can be set to value 1 only. 1.5 is suggest to set on line height which is 1.5 times the font-size especially on paragraph.

Another thing to highlight is common breakpoints for responsive design which is:

480px
768px
1024px
1280px

Thanks for your time to finish read about my post. Feel free to share your idea and thought! 😸

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
};

const {first, second, third, forth} = life

function capital(word) {
  return word[0].toUpperCase() + word.slice(1)
}

console.log(`${capital(first)}, ${capital(second)}, ${capital(third)}, ${capital(forth)}!`);

Andrew Tan

Scrimba Solo Project - Restaurant Ordering App (Part 2)

anderu — Sun, 07 Jan 2024 02:43:34 +0000

Link to part 1
Github
Netlify

Continue on part 2 for this project, I not sure why i can't deploy the page on github so i have to push it to Netlify.

  const handleInput = function () {
    let inputValue = this.value;

    if (this.id === 'card-num') {
      if (inputValue.length > 16) {
        inputValue = inputValue.slice(0, 16);
      }
    } else if (this.id === 'cvv-num') {
      if (inputValue.length > 3) {
        inputValue = inputValue.slice(0, 3);
      }
    }

    this.value = inputValue;
  };

  inputNumber.addEventListener('input', handleInput);
  inputCvv.addEventListener('input', handleInput);

After select for the item, user will click on 'Complete Order' and a popup card will ask for card detail. I use handleInput() function to set the limit of the card number to 16 digit and CVV to 3 digit.

After that user will click on 'pay' button and a thank you message will show.

function starRating() {
  const stars = document.querySelectorAll('.star');
  const output = document.querySelector('#output');

  function gfg(n) {
    remove();
    let cls = '';
    for (let i = 0; i < n; i++) {
      if (n == 1) cls = 'one';
      else if (n == 2) cls = 'two';
      else if (n == 3) cls = 'three';
      else if (n == 4) cls = 'four';
      else if (n == 5) cls = 'five';
      stars[i].className = 'star ' + cls;
    }
    output.textContent = 'Rating is: ' + n + '/5';
  }
  function remove() {
    let i = 0;
    while (i < 5) {
      stars[i].className = 'star';
      i++;
    }
  }

  stars.forEach((star, index) => {
    star.addEventListener('click', () => {
      gfg(index + 1);
    });
  });
}

function createStar(index) {
  const star = document.createElement('span');
  star.classList.add('star');
  star.textContent = '★';
  return star;
}

I get the rating function from geeksforgeeks and the star color change based on user click, example 5 star is green color while 1 star is red color.

Screenshot above show the github issue, please let me know if you know what is the main cause and thank you for reading until this part.

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
};

const {first, second, third, forth} = life

function capital(word) {
  return word[0].toUpperCase() + word.slice(1)
}

console.log(`${capital(first)}, ${capital(second)}, ${capital(third)}, ${capital(forth)}!`);

Andrew Tan

Scrimba Solo Project - Restaurant Ordering App (Part 1)

anderu — Thu, 04 Jan 2024 10:24:26 +0000

Today i working on the solo project of restaurant ordering app as part of the 'Essential JavaScript Concept' chapter's exercise on Scrimba.
The whole page is create by JavaScript. header part is hard code and appendChild into web. Then the menu part is iterate thru menuArray as shown below and render out into page.

// data.js
export const menuArray = [
  {
    name: 'Pizza',
    ingredients: ['pepperoni', 'mushrom', 'mozarella'],
    id: 0,
    price: 14,
    image: 'image/pizza.png',
  },
  {
    name: 'Hamburger',
    ingredients: ['beef', 'cheese', 'lettuce'],
    price: 12,
    image: 'image/burger.png',
    id: 1,
  },
  {
    name: 'Beer',
    ingredients: ['grain, hops, yeast, water'],
    price: 12,
    image: 'image/beer.png',
    id: 2,
  },
];

The next part is to use addEventLister on page to detect the add item button and then add the item into 'your order' section. And setup the light grey color of remove button to remove the list item.
Then i stuck on how to calculate the total price and print on the total price part. At first I try to create an empty array, so every time user click on the add button, the item object will add into the empty array then only i do the calculation by .reduce() method.

function calculateTotalPrice() {
  const totalPriceElement = document.querySelector('#total-price');
  const orderItemPrices = document.querySelectorAll('.order-item-price');

  let total = 0;
  orderItemPrices.forEach((price) => {
    total += parseFloat(price.textContent.replace('$', ''));
  });

  totalPriceElement.textContent = `$${total.toFixed(2)}`;
}

But then i only realize actually i can straight got thru all item price with document.querySelectorAll('.order-item-price') and then total up the price. Problem solve! Tomorrow will continue on this project.

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
}

const {first, second, third, forth} = life

console.log(`${first[0].toUpperCase() + first.slice(1)}, ${second[0].toUpperCase() + second.slice(1)}, ${third[0].toUpperCase() + third.slice(1)}, ${forth[0].toUpperCase() + forth.slice(1)}!`)

Andrew Tan

Today I done a small JS challenge

anderu — Wed, 03 Jan 2024 12:10:57 +0000

// /properties/propertyForSaleArr.js data

const propertyForSaleArr = [
    {
        propertyLocation: 'Kensington, London',
        priceGBP: 890000,
        roomsM2: [14, 18, 14, 10, 6],
        comment: 'Highly desirable location in stunning scenery!',
        image: 'cottage.jpg'
    },
    {
        propertyLocation: 'Wirral, Liverpool',
        priceGBP: 650000,
        roomsM2: [18, 16, 15, 14, 17, 19, 9, 8],
        comment: 'Astonishing view with a modern finish!',
        image: 'desres.jpg'
    },
    {
        propertyLocation: 'Beach, Brighton',
        priceGBP: 420000,
        roomsM2: [5],
        comment: 'Beautiful interior and a spacious room.',
        image: 'hut.jpg'
    },
    {
        propertyLocation: 'Highlands, Scotland',
        priceGBP: 550000,
        roomsM2: [6, 12, 11, 5],
        comment: 'Lots of potential, snug, a must see!',
        image: 'shed.jpg'
    }
]

export default propertyForSaleArr

// /properties/placeholderPropertyObj.js data

const placeholderPropertyObj = {
    propertyLocation: '1 Joe Bloggs street',
    priceGBP: 100000,
    roomsM2: [16, 12, 6, 11, 5],
    comment: 'This is the description',
    image: 'placeholder.jpg'
}

export default placeholderPropertyObj

// index.js code

import propertyForSaleArr from '/properties/propertyForSaleArr'
import placeholderPropertyObj from '/properties/placeholderPropertyObj'

function getPropertyHtml(propertyArr = [placeholderPropertyObj]) {
    return propertyArr.map(property => {
        const { propertyLocation, priceGBP, roomsM2, comment, image} = property
        const totalRoomSizeM2 = roomsM2.reduce((total, current) => total + current)
        return `
            <section class="card">
                <img src="/images/${image}">
                <div class="card-right">
                    <h2>${propertyLocation}</h2>
                    <h3>${priceGBP}</h3>
                    <p>${comment}</p>
                    <h3>${totalRoomSizeM2} m&sup2;</h3>
                </div>
            </section>` 
    }).join('')
}

document.getElementById('container').innerHTML = getPropertyHtml(propertyForSaleArr)

In this challenge, getPropertyHtml function will take an array parameter and the default parameter is [placeholderPropertyObj].
In the function I use .map() method to iterate the array of object and object keys is set on const { propertyLocation, priceGBP, roomsM2, comment, image} = property.
.reduce() method is use to calculate the total room size in meter square.
Then function will return the information in the html boilerplate to render out the image as shown on the top of this post. Lastly, .join() method use to remove the comma at the end of the post.

- Beside that, there are few learning of the day:

const score = 50

// Do this
const mark = score < 51 ? 'You get C!' 
    : score < 80 ? 'You get B!' 
    : 'You get A!'

console.log(mark)

// Instead of this
let mark = ''

if (score < 51) {
    mark = 'You get C!'
}
else if(score < 80) {
    mark = 'You get B!'
}
else {
    mark = 'You get A!'
}

First is ternary operator, return value if the first condition before ? is true else check second condition until the end.

function menuOfTheDay(restaurantName, ...menuItems) {
  menuItems.forEach((item) => console.log(`Today menu at restaurant ${restaurantName} is ${item}`))
}
menuOfTheDay('Good Food', 'Fried Chicken', 'Steam Fish', 'ABC Soup')
>>> Today menu at restaurant Good Food is Fried Chicken
>>> Today menu at restaurant Good Food is Steam Fish
>>> Today menu at restaurant Good Food is ABC Soup

Second is rest parameter (...rest) which is useful to catch the rest of the arguments and return in an array. But the rest parameter must be the last parameter.

const a = [1,2,3]
const b = [4,5,6]
const c = [...a, ...b]
console.log(c)
>> [1, 2, 3, 4, 5, 6]

Third is spread operator ...array can be use to expand and joining arrays.

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
}

const {first, second, third, forth} = life

console.log(`${first[0].toUpperCase() + first.slice(1)}, ${second[0].toUpperCase() + second.slice(1)}, ${third[0].toUpperCase() + third.slice(1)}, ${forth[0].toUpperCase() + forth.slice(1)}!`)

Andrew Tan

Today my learning on Scrimba JS Mini Project

anderu — Tue, 02 Jan 2024 10:55:46 +0000

const car = {
  brand: 'Toyota',
  year: 2023,
  model: 'GR Supra',
  price: 645000,
}

// Do this
const {brand, year, model, price} = car

// Instead of this
const brand = car.brand
const year = car.year
const model = car.model
const price = car.price

Object Destructuring - Usually when we try to get data from an object, we will use object.key. If there was a lot of key to retrieve the data, we can get it by using const {key, key, key, ...} = object.

const kgArr = [70, 65, 87, 90]
const kgToPound = 2.205

const convertToPound = (arr) => arr.map( (kg) => (kg * kgToPound).toFixed(2) )

convertToPound(kgArr) 

>> ['154.35', '143.33', '191.84', '198.45']

The .map() method - map method will iterates over the list, transform the list item and lastly return the list.

const alphabet = ['a', 'b', 'c', 'd']

alphabet.join(' ')
>> 'a b c d' // join with space between

alphabet.join(', ')
>> 'a, b, c, d' // join with a comma and space

The .join() method - join method will concatenates item in the array into string but we can choose the way to combine the array.

const input = document.getElementById('input')
const addButton = document.getElementById('add-btn')
const list = document.getElementById('list')

// Do this
addButton.addEventListener('click', ()=> {
  const div = document.createElement('div')
  div.textContent = input.value
  list.appendChild(div)
  input.value = ''
})

// Instead of this
addButton.addEventListener('click', ()=> {
  list.innerHTML += 
    `
    <div>${input.value}</div>
    `
  input.value = ''
})

The danger of innerHTML - example above show when user type something in the input area and click on the button then any value will add into the list. But imagine a bad guy type something like <a href="https://scam.com">Congratulation you win an iphone!</a> and this code work if we use the innerHTML method!

const rainfallByWeek = [10.8, 7.1, 15.3, 32.4, 2, 3.4, 22.5]

const totalRainfall = rainfallByWeek.reduce((total, currentData) => total + currentData)

const averageRainfall = (totalRainfall / 7).toFixed(2)

averageRainfall
>> 13.36

The .reduce() method - reduce method return one value only. It work like this:
rainfallByWeek.reduce((total, currentData) => total + currentData) in this method the total is first value from list = 10.8 and currentData is second value from list = 7.1

Then 10.8 + 7.1 = 17.9, so
total = 17.9
currentData = 15.3
Then 17.9 + 15.3 = 33.2, so
total = 33.2
currentData = 32.4
As the result I am looking is => total + currentData so reduce method will add up all the list number and return the total = 93.5

This is today sharing, tomorrow I will continue on the exercise to use all the thing I learn today.

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
}

const {first, second, third, forth} = life

console.log(`${first[0].toUpperCase() + first.slice(1)}, ${second[0].toUpperCase() + second.slice(1)}, ${third[0].toUpperCase() + third.slice(1)}, ${forth[0].toUpperCase() + forth.slice(1)}!`)

Andrew Tan

Today i learn to build a lite version of Twitter - Twimba

anderu — Mon, 01 Jan 2024 09:53:24 +0000

This project tutorial from Scrimba teach to use the data attribute so the 'reply', 'like' and 'retweet' to conditionally render the button styles according to post's uuid.

document.addEventListener('click', function(e){
    if(e.target.dataset.like){
       handleLikeClick(e.target.dataset.like) 
    }
    else if(e.target.dataset.retweet){
        handleRetweetClick(e.target.dataset.retweet)
    }
    else if(e.target.dataset.reply){
        handleReplyClick(e.target.dataset.reply)
    }
    else if(e.target.id === 'tweet-btn'){
        handleTweetBtnClick()
    }
})

The combine of all button in document.addEventListener can gather all button to act accordingly to own function.

function handleTweetBtnClick(){
    const tweetInput = document.getElementById('tweet-input')

    if(tweetInput.value){
        tweetsData.unshift({
            handle: `@Scrimba`,
            profilePic: `images/scrimbalogo.png`,
            likes: 0,
            retweets: 0,
            tweetText: tweetInput.value,
            replies: [],
            isLiked: false,
            isRetweeted: false,
            uuid: uuidv4()
        })
    render()
    tweetInput.value = ''
    }
}

User can tweet anything and handleTweetBtnClick() will form the data in object and push into database then only render out the tweet.

let likeIconClass = ''

        if (tweet.isLiked){
            likeIconClass = 'liked'
        }

<span class="tweet-detail">
                    <i class="fa-solid fa-heart 
                    ${likeIconClass}"
                    data-like="${tweet.uuid}"
                    ></i>
                    ${tweet.likes}
                </span>

In the render function the part I want to highlight is the use of data-'attribute', example above show the 'like' button use the data-like and then condition is set up to check if the tweet.isLiked button clicked then 'liked' class will be add into ${likeIconClass} and like button will turn into red color.

import { v4 as uuidv4 } from 'https://jspm.dev/uuid';
console.log(uuidv4())

Another thing to highlight is the use of CDNs example here is the UUID version 4. Just call the function of uuidv4() then we can get uuid accordingly which is easy to use and helpful.

Eat, sleep, code, repeat!
Andrew Tan

JS to style radio button list

anderu — Sun, 31 Dec 2023 23:12:23 +0000

Today I learn to create meme picker from Scrimba. User can pick a cat emotion from the 'select your current emotion' list and optional choose 'animated GIFs only' then a random cat meme will show up.
The part I want to highlight from this tutorial is where it style the radio button with the use of 'change' event and getElementsByClassName.

emotionRadios.addEventListener('change', highlightCheckedOption)

function highlightCheckedOption(e){
    const radios = document.getElementsByClassName('radio')
    for (let radio of radios){
        radio.classList.remove('highlight')
    }
    document.getElementById(e.target.id).parentElement.classList.add('highlight')
}

First, the 'emotionRadios' div which hold all radios button list addEventListener for 'change'.
Then we select all radio button with document.getElementsByClassName('radio') which provide list of array of radio button.
for of method use to loop thru the radio button and remove class of 'highlight'.

radioItems += `
        <div class="radio">
            <label for="${emotion}">${emotion}</label>
            <input
            type="radio"
            id="${emotion}"
            value="${emotion}"
            name="emotions"
            >
        </div>`

Above show the radio button HTML code to create a radio button. When the radio button is click, we want to add class of 'highlight' to the 'radio' div. So we use document.getElementById(e.target.id).parentElement.classList.add('highlight') .

function getMatchingCatsArray(){     
    if(document.querySelector('input[type="radio"]:checked')){
        const selectedEmotion = document.querySelector('input[type="radio"]:checked').value
        const isGif = gifsOnlyOption.checked

        const matchingCatsArray = catsData.filter(function(cat){

            if(isGif){
                return cat.emotionTags.includes(selectedEmotion) && cat.isGif
            }
            else{
                return cat.emotionTags.includes(selectedEmotion)
            }            
        })
        return matchingCatsArray 
    }  
}

Beside this, the tutorial also show the use of powerful querySelector which can be to use to select #id, .class and 'element' like const selectedEmotion = document.querySelector('input[type="radio"]:checked').value.
filter and includes method is useful to filter the data and loop thru the array of object and then includes will check the exact value in the list of item or object value and lastly provide the match value object list only.

Eat, sleep, code, repeat!
Andrew Tan

The easy way to get unique values in array of array Javascript

anderu — Sat, 30 Dec 2023 00:30:22 +0000

const catsData = [
    {
        emotionTags: ["moody"],
        isGif: false,
        image: "angry.jpeg",
        alt: "A cat looking moody",
    },
    {
        emotionTags: ["moody", "insomniac"],
        isGif: false,
        image: "angry2.jpeg",
        alt: "A cat looking moody",
    },
    ...........]

Today I learn an easy method to get unique values in array of array. The catsData above show there is an array of object and i want to get the object.emotionTags data.

function getEmotionsArray(cats){
    const emotionsArray = [];
    for (let cat of cats) {
       emotionsArray.push(cat.emotionTags)
    }
    let flattenArr = emotionsArray.flat()
    return [...new Set(flattenArr)]
}

I setup getEmotionsArray(cats) function

I set and empty array emotionsArray.
I use for of method to loop thru the cats data and then push emotionTags array into emotionsArray.

[["moody"], ["moody", "insomniac"], ["moody"], ["confused", "sad"],.....]

The emotionsArray will have array of array.

["moody", "moody", "insomniac", "moody", "confused", "sad",...]

Then I use Array.prototype.flat() method to flatten emotionsArray.

["moody", "insomniac", "confused", "sad", "dominant", "happy", "relaxed", "hungry", "scared"]

To get the unique values in the array simply use [...new Set(flattenArr)].

Eat, sleep, code, repeat!
Andrew Tan

Today i build annoying popup form from Scrimba

anderu — Fri, 29 Dec 2023 10:24:45 +0000

This is how the popup form look like.

setTimeout(function(){
    modal.style.display = 'inline'
}, 1500)

Firstly, I set the display: none and then use setTimeout 1.5 second and the form will popup

consentForm.addEventListener('submit', function(e){
    e.preventDefault()

    const consentFormData = new FormData(consentForm)
    const fullName = consentFormData.get('fullName')

    modalText.innerHTML = `
    <div class="modal-inner-loading">
        <img src="images/loading.svg" class="loading">
        <p id="upload-text">Uploading your data to the dark web...</p>
    </div>` 

    setTimeout(function(){
        document.getElementById('upload-text').innerText = `
        Making the sale...`
    }, 1500)


    setTimeout(function(){
        document.getElementById('modal-inner').innerHTML = `
        <h2>Thanks <span class="modal-display-name">${fullName}</span>, you sucker! </h2>
        <p>We just sold the rights to your eternal soul.</p>
        <div class="idiot-gif">
            <img src="images/pirate.gif">
        </div>
    `
    modalCloseBtn.disabled = false
    }, 3000)

})

Then the user MUST write down their name and email as i set the closed button disable status. The disable status will turn into false after user submit the form.

declineBtn.addEventListener('mouseenter', function(){
    modalChoiceBtns.classList.toggle('modal-btns-reverse')
})

The 'Decline' button also can't work as i addEventListener mouse over action on the 'Decline' button. The 'modal-btns-reverse' class which is flex-direction: row-reverse will shift the 'Accept' and 'Decline' button position with the use of classList.toggle('className'). So user have no choice but have to click 'Accept' button to submit the form.

Status 1 after submit

Status 2 after submit

Status 3 after submit

The use of setTimeout method change the status of the form by modify the innerText and innerHTML. Then the last status also took the form data of 'fullName' with the use of FormData.Get() method and then the closed button work again.

Eat, sleep, code, repeat!
Andrew Tan

The use of 'margin: auto' on flex children and 'position: relative, absolute, fixed'

anderu — Fri, 29 Dec 2023 03:37:45 +0000

We can position a child item in the container with the use of

.parent-element {
    display: flex;
    justify-content: center;
    align-items: center;
}

// Another option
.parent-element {
    display: flex;
}

.child-element{
    margin: auto;
}

But the use of margin on flex children element can done more than just center the item, you can refer to the image below to check where you can position your item:

Position absolute and relative is useful when you want to allocation an element in the parent element
As example show on the image above, to make the 'Exclusive' word locate at the top left, we can code as below

.parent-element {
    position: relative;
}

.child-element {
    position: absolute;
    top: 0;
    left: 0;
}

If we did not use the position: relative on parent-element the the 'Exclusive' word will allocate on the top left of the window. There are top, right,bottom, left method to use to position the absolute element around the parent-element.

If we want to position an element on a fixed location in the window like the chat button on the picture above even we scroll up and down then we can use

.element {
    position: fixed;
    bottom: 0;
    right: 0;
}

This code will 'fixed' the element on the bottom right of the window all the time.

Fun Fact: There are extra space below the image because Images created with img tag by default has display: inline property. To fix this, simply code

.image {
  display: block;
}

This is today sharing, please feel free to share your thoughts, ideas, or corrections if I have presented any inaccurate information.

Eat, sleep, code, repeat!
Andrew Tan