DEV Community: Graham Fleming

PROJECT - Random Color Generator

Graham Fleming — Sat, 20 Aug 2022 18:29:14 +0000

Applications that have a client side facing front end can allow developers to create user interfaces that can be used to interact with different parts of your application. The process of taking input data and using this information to dictate parameters in the code.

We can first start by creating a variable with an array of possible characters, this array will be used to generate a HEX color code to be used in our CSS.

// Initialize Random HEX Color Code
const hexColorCode = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f" ];

In order to manipulate the CSS we need to select the different elements that we want to change, we can use the window object to select the different Elements by passing in each of their IDs.

// Initialize All Required DOM Elements
const mainSection = document.getElementById("mainSection");
const pickColor = document.getElementById("pickColor");
const pickButton = document.getElementById("pickButton");
// const copyButton = document.getElementById("copyButton");

To construct our HEX value for our color we can use a for loop to cycle through the hexColorCode array randomizing the selections until 6 characters are selected.

// Initialize the Random HEX Color Picker
pickButton.addEventListener("click", () => {
  let hexColorName = "#";
  for (let i = 0; i < 6; i++) {
    hexColorName += hexColorCode[getRandomArray()];
  }
  pickColor.style.color = hexColorName;
  pickColor.textContent = hexColorName;
  mainSection.style.backgroundColor = hexColorName;
});

const getRandomArray = () => {
  return Math.floor(Math.random() * hexColorCode.length);
};

Pressing the button repeatedly will genereate new HEX color codes from the array, and than applying it to the elements on our page to change the CSS color.

FULL CODE

// Initialize Random HEX Color Code
const hexColorCode = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f" ];

// Initialize All Required DOM Elements
const mainSection = document.getElementById("mainSection");
const pickColor = document.getElementById("pickColor");
const pickButton = document.getElementById("pickButton");
// const copyButton = document.getElementById("copyButton");

// Initialize the Random HEX Color Picker
pickButton.addEventListener("click", () => {
  let hexColorName = "#";
  for (let i = 0; i < 6; i++) {
    hexColorName += hexColorCode[getRandomArray()];
  }
  pickColor.style.color = hexColorName;
  pickColor.textContent = hexColorName;
  mainSection.style.backgroundColor = hexColorName;
});

const getRandomArray = () => {
  return Math.floor(Math.random() * hexColorCode.length);
};

How to call an API with fetch()

Graham Fleming — Sat, 20 Aug 2022 18:22:34 +0000

The Fetch API provides an interface for fetching resources using the Request and Response objects, allowing them to be used anywhere that might require you to generate a response programmatically. For making a request and fetching a resource, use the fetch() method.

First, we would need to define that we are using the fetch() method and pass in the URL as a parameter.

fetch("YOUR_URL")

After the URL is passed in, the .then() method will give you the ability to work with the data object that is returned. Use the data response to work with the data that is returned from the call.

    .then(response => {
        // handle the response
        console.log(data);
    })

In the case of errors, using the .catch() method we are able to see the output in our console, and handle any errors that are incoming during the fetch() call.

    .catch(error => {
        // handle the error
        console.log(error );
    });

With the basics of calling an API and dealing with the data response you can use this information to expand on the different types of data that you can work with, adding more functionality and automation to your applications.

fetch("YOUR_URL")
    .then(response => {
        // handle the response
        console.log(data);
    })
    .catch(error => {
        // handle the error
        console.log(error );
    });

NVIDIA Unveils Next-Gen Automotive DRIVE Hyperion 9 And A New DRIVE Map Platform

Graham Fleming — Thu, 14 Apr 2022 19:49:17 +0000

At this week's GTC conference, NVIDIA announced the commencement of manufacturing of its NVIDIA DRIVE Orin autonomous car computer, highlighted new automakers using the NVIDIA DRIVE platform, and revealed the next version of its NVIDIA DRIVE Hyperion architecture.

According to NVIDIA, the DRIVE Orin system-on-a-chip has been used by more than 25 car manufacturers (SoC). They'll start introducing software-defined automobiles this year, based on the centralised AI computing platform.

BYD and Lucid Group revealed at GTC that their next-generation fleets will use NVIDIA DRIVE. Beginning in early 2023, BYD will begin selling next-generation NEVs based on the DRIVE Hyperion software-defined platform. DRIVE Orin will be used by these fleets to provide intelligent driving, parking, and other features.

NVIDIA DRIVE is at the heart of Lucid's DreamDrive Pro sophisticated driver-assistance technology. The NVIDIA centralised computation architecture is incorporated with every Lucid Air sedans' ADAS systems. According to the business, DreamDrive Pro is built to develop in capabilities with over-the-air software upgrades and future-ready technology already installed in the car.

NEV companies like as NIO, Li Auto, XPeng, SAIC's IM Motors and R Auto Brands, JiDU, Human Horizons, VinFast, WM Motor, and others are creating software-defined fleets on DRIVE, in addition to BYD and Lucid.

Huang also unveiled the next-generation of the DRIVE Hyperion architecture, which will be based on the Atlan computer and will begin shipping in 2026, during his GTC speech. The next-generation platform, according to NVIDIA, will improve sensor data processing performance and expand the operational areas of complete self-driving vehicles. The sensor suite on the DRIVE Hyperion 9 will have 14 cameras, nine radars, three lidars, and 20 ultrasonics.