Notes: Twimba - A Twitter Clone

textarea: A multiline input field

<textarea 
    placeholder="Ask me anything!" 
    id="chat-input"></textarea>

<!-- CSS -->
textarea{
    width: 239px;
    height: 50px;
    margin: 0px;
    padding: 5px;
    resize: none; // to stop users from resizing it.
}

forEach - A method for iterating over arrays

const characters = [
    {
        title: 'Ninja',
        emoji: '🥷',
        powers: ['agility', 'stealth', 'aggression'],
    },
    {
        title: 'Sorcerer',
        emoji: '🧙',
        powers: ['magic', 'invisibility', 'necromancy'],
    },
    { 
        title: 'Ogre',
        emoji: '👹',
        powers: ['power', 'stamina', 'shapeshifting'],
    },  
    { 
        title: 'Unicorn',
        emoji: '🦄',
        powers: [ 'flight', 'power', 'purity'],
    }
]

characters.forEach(function(character,index){
    console.log(index, character.title)
})

CDN - Content Delivery Network

It is a remote service that provides assets to web applications eg functions, styles, and icons... It provides a snippet of code that will bring the asset into our application.

We are using Font Awesome CDN to get some icons for this project. Access the cdn from https://cdnjs.com/libraries/font-awesome

Data Attributes: Storing extra information in HTML elements

There are built-in attributes and there can be custom attributes. The built-in attributes for img tag we have used so far have been class or id. There can be custom attributes that we can add ourselves. The syntax is data-* where * can be any name.

        <div class="img-container">
            <img src="dino2.jpeg"
             alt="Man in front of dinosaur"
             id="image-1">
            <div class="social-icons-container">
                <i class="fa-solid fa-heart"></i>
                <i class="fa-solid fa-share" data-share="image-1"></i>
            </div>
        </div>

How to get access to this element?

If you look at the dev tools at the event object, the data variable can be found at event -> target -> dataset

The same can be accessed programmatically in the following way:

document.addEventListener('click', function(e) {
    console.log(e.target.dataset.share)
})

Note: When you use uppercase letters when naming data attributes in HTML! Javascript internally converts that to lowercase letters eg data-shareIcon in HTML will be converted to shareicon while referring in JS. When you use data-share-icon in HTML, it is referred to as shareIcon in JavaScript.

Conditionally Render CSS

Changing the color only if the tweet has been liked.

        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>`

UUID - Universally Unique Identifiers

A string of 36 characters, is used to uniquely identify data. It is highly likely to be globally unique. Version 4 UUID is a current "go to" UUID for most situations. It has randomly generated characters. The CDN build for UUID can be found at https://github.com/uuidjs/uuid#cdn-builds

import { v4 as uuidv4 } from 'https://jspm.dev/uuid';
console.log(uuidv4()); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

The concepts applied to create Twimba - Twitter Clone

https://github.com/hennasingh/Twimba