Simple photo frame using Html and Css

-
Let's make a classic photo frame for our images using html and css only.

Preview


Source code:

Comments

Post a Comment

Popular posts from this blog

Music app using react

-
Image
Music app using react Description This is a simple music app which uses howler npm package to play local music kept in public directory. React hooks used: useEffect: useEffect is a hook that allows you to perform side effects in functional components. Side effects can include data fetching, subscriptions, or manually changing the DOM. useState: In React, useState is a hook that allows functional components to have state. Before the introduction of hooks, state was only available in class components. useState enables functional components to have local state without needing to convert them to class components. useMemo: In React, useMemo is a hook that memoizes the result of a function so that the function is not re-executed on every render unless its dependencies change. This can help optimize performance by preventing unnecessary calculations or expensive operations. useRef: In React, the useRef hook is use...
Read more

Build a Secretkeeper app and generate QR code for your message

-
Image
Build a Secretkeeper app and generate QR code for your message Summary: Secretkeeper app let you generate a QR code for your text message which you can share and download and when you scan that QR code with scanner you will get the text message. It is a React+Vite+Typescript app which uses  react-qr-code  package for generating QR code. Prerequisites # Basic knowledge of React.js Basic Typescript    Tailwind css   To create vite application with react template follow these commands: Terminal $npx create-vite secretkeeper After that choose React template and then choose typescript and press enter. Now move to secretkeeper directory in terminal or open that folder in terminal directly. Terminal $cd secretkeeper Setup tailwind css...
Read more

Building A Simple AI Chatbot With Web Speech API And Node.js

-
Image
Building A Simple AI Chatbot With Web Speech API And Node.js Summary: The app will listen to the user’s voice and reply with a synthetic voice. Because the Web Speech API is still experimental, the app works only in supported browsers. Browser compatibility of web speech API: To build the web app, we’re going to take three major steps: Use the web speech API's speech recogination to listen to user's voice Send the user’s message to a commercial natural-language-processing API as a text string. Once API.AI returns the response text back, use the SpeechSynthesis interface to give it a synthetic voice PREREQUISITES # Basic knowledge of Node.js and javascript. We are going to use node.js for serverside programming. Socket.Io basics. Setting Up Your Node.Js Application # index.js openai.js public css style.css ...
Read more