Chris Achinga

Creating A Weather Search App in Vanilla JavaScript

This post covers creating a simple weather search application using plain JavaScript, HTML, and CSS. Demo and Source Code The project demo is live on codesandbox, and the source code is available on GitHub. %[https://codesandbox.io/embed/weather-robot-phase-1-lzt9z9?fontsize=14&hidenavigation=1&theme=dark] Prerequisites Openweathermap API Keys JavaScript Fetch API and DOM Manipulation Basic HTML and CSS Creating the HTML and CSS Files Create a new file (index.html) and add the following: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Weather Robot</title> <link rel="stylesheet" href="./weatherRobot.css" /> </head> <body> <section class="section-head"> <div class="container"> <h1 class="heading">Weather Robot</h1> <form> <input type="text" placeholder="Search for a city" autofocus /> <button type="submit">GET WEATHER</button> <span class="msg"></span> </form> </div> </section> <section class="city-array"> <div class="container"> <ul class="cities"></ul> </div> </section> <script src="./weatherRobot.js"></script> </body> </html> Create separate files for the styles and JavaScript. Inside the CSS file, add the following: ...

Using JavaScript in JupyterLab

TL;DR This post will take you through installing JupyterLabs and how to add a NodeJS kernel to it in Ubuntu. Installing JupyterLabs For a better experience, you should install Jupyter Lab inside a virtual environment. sudo apt install python3-venv After the installation is complete, create a new environment: python3 -m venv jlab Note that you can replace the jlab with any name of your choice. Now activate the environment: ...

State Management in React

A state is the current data passed in React components. State management in React enables you to dynamically update data in Components. This post will take you through creating an initial state and an event to trigger a state update in Reactjs. Prerequisites: NodeJS Installed Knowledge of React Source Code and Demo GitHub Repo Link Creating A New React App: # create a new react app npx create-react-app state-management-demo # move into the new app's directory cd state management-demo # start the app to see if everything is okay npm start For the Demo, clean the App.js to have the following: ...

How to add Cloudinary to Strapi CMS for Image/Video uploads

Strapi is an open-source Headless CMS. TL;DR: The demo source code to this article can be found on GitHub. To get started, you need to have the following on your computer: NodeJS v14 + Cloudinary Account Creating a Strapi Project To create a new strapi project, run the following: npx create-strapi-app@latest my-project --quickstart After a successful installation, Strapi will automatically open a new browser for you to create a local account: ...

How to set up Rust and NEAR for Blockchain/Web3 Development

Near protocol is a decentralized application platform that gives developer-friendly features to build and develop smart contracts. Near offers the platform to build smart contracts in Rust and deploy them. By default, Near supports Rust and AssemblyScript. Rust is recommended for its greater developer experience when it comes to memory allocation and a minimal runtime, among other great reasons. Installing Rust (Ubuntu/Linux) To install Rust, follow the steps below: Install Curl If you don’t have curl installed, use the scripts below: ...

How To Create A Layout Component: React

When creating a react application/website, most of the pages would be sharing the same content all over. For example the navigation bar and page footer. Instead of importing each component in every page to be rendered, it is much easier and faster to just create a layout component. This post will cover how to create a react app using Layout Components. Live demo: https://hjpx0v.csb.app/ Source Code to the demo: https://github.com/achingachris/react-layout-demo Here is how to do it: ...

Using Postman Like a Pro!

Postman is an API testing platform. You can use postman web platform: or the desktop application for testing your APIs. Postman can be used to test all API requests: get/put/create/delete If you are new to Postman, I’d suggest you go through their Bootcamp: https://web.postman.co/bootcamp I will be using the desktop application for the demos, they’re no big differences from using the web version of Postman. What this article covers: Creating collections Adding requests Creating environments and Variables Creating Collections: In Postman, collections are folders where you put all APIs with similar descriptions or projects together. It is a pretty neat way to organize your APIs for testing. ...

How To Create a Payment Form on WordPress using Flutterwave

Making payments online should be seamless and less frustrating. I conquered my fear and tested out Flutterwave and I was really impressed. Here is how to create a simple payment form using Flutterwave and WordPress. What you’ll need Xampp WordPress Flutterwave Account (Test Mode/Live) To get started with WordPress in your local development environment, here is a step by step guide: How To Install WordPress in Windows Creating Flutterwave Account Create a flutterwave account. Go to settings, and under the API tab, you’ll get your API keys. ...

How To Install WordPress in Windows

WordPress is a popular, open-source content management system (CMS) allowing users to create, edit, and manage websites and blogs quickly. WordPress is known for its user-friendly interface, extensive customization options, and vast plugins and themes, enabling users to add functionality and design elements to their websites without needing extensive coding knowledge. The platform is used for various websites, including personal blogs, business websites, e-commerce sites, online portfolios, and more. There are two main versions of WordPress: ...

Deploying NextJS on Netlify - Starter Template

Deploying NextJS to production By default, NextJS applications are easily deployable on Vercel with zero configurations. That doesn’t mean you shouldn’t explore what other platforms have to offer. To deploy a NextJS application, simply follow the steps below. If you want to start straight up without the hustle, use the button below: Create a Netlify Account On your browser, go to https://app.netlify.com/signup to create your Netlify account. ...