javascript Archives - ziontutorial.com 👽

Create Stunning User Interfaces with These Top 30 React UI libraries

React is a popular JavaScript library for building user interfaces. Its flexibility, performance, and ease of use have made it a go-to choice for developers looking to create complex, dynamic applications. With the help of the extensive library ecosystem, developers can quickly and easily build out the user interface of their React applications without having to start from scratch. In this article, we will explore the top 30 React libraries that can be used to enhance the UI of your application. These libraries include a variety of tools for building everything from navigation menus and modals to calendars and image croppers. Whether you are just starting out with React or looking to take your skills to the next level, these libraries will help you build powerful, beautiful, and responsive user interfaces.

Lists Of React UI libraries

React Router: React Router is a popular routing library for React that allows you to handle navigation and routing in your web application. Link: https://reactrouter.com/
React Redux: Redux is a predictable state container for JavaScript apps. React Redux is the official React binding for Redux. Link: https://react-redux.js.org/
Material-UI: MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. https://mui.com/

React Bootstrap: React Bootstrap is a popular UI library that provides a set of reusable components for building responsive and mobile-first web applications. Link: https://react-bootstrap.github.io/
Ant Design: Ant Design is a comprehensive UI library that provides a wide range of components for building high-quality web applications. Link: https://ant.design/
Styled Components: Styled Components is a popular library for styling React components with CSS. It allows you to write CSS directly in your JavaScript code. Link: https://styled-components.com/
React Select: React Select is a flexible and easy-to-use library for building select inputs in React. It provides a range of features such as search, async loading, and multi-select. Link: https://react-select.com/home
React Toastify: React Toastify is a simple and customizable toast library for React that provides a range of notification styles such as success, warning, and error. Link: https://github.com/fkhadra/react-toastify
React Virtualized: React Virtualized is a library for efficiently rendering large lists and tables in React. It provides a set of components such as List, Table, and Grid that can handle thousands of rows with ease. Link: https://bvaughn.github.io/react-virtualized/#/components/List
React DnD: React DnD is a drag and drop library for React that allows you to build complex drag and drop interfaces with ease. Link: https://react-dnd.github.io/react-dnd/about
React Icons: React Icons is a library of popular icons such as Font Awesome, Material Design, and Feather Icons that can be easily used in React projects. Link: https://react-icons.github.io/react-icons/
React Query: React Query is a powerful and flexible library for managing and caching server state in React applications. It provides a range of features such as pagination, caching, and refetching. Link: https://react-query.tanstack.com/
React Hook Form: React Hook Form is a lightweight and flexible form library for React that uses hooks to manage form state. It provides a range of features such as validation, error messages, and submission handling. Link: https://react-hook-form.com/
React Helmet: React Helmet is a library for managing the head section of your React app. It allows you to dynamically set the title, meta tags, and other important information. Link: https://github.com/nfl/react-helmet
React Table: React Table is a library for building advanced tables and data grids in React. It provides a range of features such as sorting, filtering, and pagination. Link: https://react-table.tanstack.com/
React Query Builder: React Query Builder is a library for building complex and dynamic queries in React. It provides a range of features such as drag and drop interface, validation, and query generation. Link: https://github.com/ukrbublik/react-awesome-query-builder
React Image Gallery: React Image Gallery is a flexible and customizable library for building responsive image galleries in React. It provides a range of features such as lazy loading, zoom, and fullscreen mode. Link: https://www.npmjs.com/package/react-image-gallery
React Date Picker: React Date Picker is a library for building flexible and customizable date pickers in React. It provides a range of features such as range selection, disabled dates, and internationalization. Link: https://reactdatepicker.com/
React Modal: React Modal is a library for building modal dialogs in React
React Big Calendar: React Big Calendar is a popular library for building interactive calendars in React. It provides a range of features such as drag and drop events, date selection, and customizable views. Link: https://jquense.github.io/react-big-calendar/examples/index.html
React Masonry: React Masonry is a library for building dynamic and responsive masonry layouts in React. It provides a simple and easy-to-use interface for creating grids of varying sizes and styles. Link: https://github.com/eiriklv/react-masonry
React Color: React Color is a library for building customizable color pickers in React. It provides a range of features such as swatches, saturation, and hue controls. Link: https://casesandberg.github.io/react-color/
React Slick: React Slick is a popular library for building responsive and customizable carousel components in React. It provides a range of features such as autoplay, infinite scrolling, and variable widths. Link: https://react-slick.neostack.com/
React Beautiful Dnd: React Beautiful Dnd is a drag and drop library for React that provides a simple and easy-to-use interface for building advanced drag and drop components. Link: https://github.com/atlassian/react-beautiful-dnd
React Content Loader: React Content Loader is a library for building customizable placeholder loading animations in React. It provides a range of pre-built animations that can be easily customized to fit your project. Link: https://skeletonreact.com/
React Leaflet: React Leaflet is a library for building interactive maps in React using Leaflet. It provides a range of features such as zoom, pan, and markers. Link: https://react-leaflet.js.org/
React Image Cropper: React Image Cropper is a library for building image croppers in React. It provides a range of features such as zoom, rotation, and aspect ratio control. Link: https://github.com/DominicTobias/react-image-crop
React Elastic Carousel: React Elastic Carousel is a library for building dynamic and flexible carousels in React. It provides a range of features such as elastic scrolling, lazy loading, and customizable options. Link: https://www.npmjs.com/package/react-elastic-carousel
React Native Web: React Native Web is a library that allows you to use React Native components in web applications. It provides a range of features such as platform-specific code, performance optimizations, and code sharing between web and mobile platforms. Link: https://necolas.github.io/react-native-web/docs/
React Swipeable: React Swipeable is a library for building swipeable components in React. It provides a range of features such as touch and mouse support, direction detection, and velocity calculation. Link: https://github.com/FormidableLabs/react-swipeable

Conclusion

React’s popularity continues to grow, thanks to its flexibility, performance, and ease of use. With the vast array of libraries available, developers can easily create dynamic and engaging user interfaces. In this article, we have explored the top 30 React UI libraries that can be used to enhance the UI of your application. From navigation menus and modals to calendars and image croppers, these libraries offer a wide range of tools to help you build powerful, beautiful, and responsive user interfaces. By taking advantage of these libraries, developers can streamline their development process, reduce their workload, and create more compelling applications. We hope this list of libraries will inspire you to create beautiful and functional UIs in your React applications.

People are also reading:

Blob Maker Step By Step Using HTML, CSS & JavaScript

By ziontutorial

On December 28, 2022

In How To, web design

Blob Maker Using HTML, CSS, and JavaScript: Step by Step

Greetings to everybody. I’m glad you’re here for today’s instruction on ziontutorial. We’ll discover Blob Maker Step By Step Using HTML, CSS & JavaScript, which is a pie-shaped design. All we have to do is provide the height and width, and the program will provide the syntax needed to add that shape to the project’s CSS code. To finish this project, we’ll utilize HTML, CSS, and JavaScript in today’s session.

In order to build Blob Maker, we will need to arrange the list using a few HTML (Hypertext Markup Language) characteristics and components.

Then, using CSS (Cascading Stylesheets), we can style or design the Blob Maker project with the proper padding and alignment.

In order to make the Blob Maker project responsive from the user’s perspective, we will finally use JS (JavaScript).

With source code accessible for you to copy and paste into your own project, we give Blob Maker Step By Step Using HTML, CSS, & JavaScript projects using CSS.

Hopefully, you now have a general idea of the project.

HTML Code

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blob Maker | ziotutorial</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
    <
</head>
<body>
    <div class="wrapper">
        <div class="output">
            <div id="blob"></div>
        </div>
        <div class="dimensions">
            <div>
                <label for="blob-height">
                    Height
                </label>
                <input type="number" value="200" id="blob-height">
            </div>
            <div>
                <label for="blob-width">
                    Width
                </label>
                <input type="number" value="200" id="blob-width">
            </div>
        </div>
        <div class="sliders">
            <input type="range" value="30">
            <input type="range" value="80">
            <input type="range" value="60">
            <input type="range" value="40">
        </div>
        <input type="text" id="css-code" readonly>
        <button id="copy">Copy</button>
    </div>
    <!--Script-->
    <script src="app.js"></script>
</body>
</html>

As you can see in the preceding code, we have used all essential components and attributes in order to create the framework of the Blob Maker project. Please share the CSS code for the styling and tag alignment.

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    font-family: "Roboto Mono",monospace;
    font-weight: 400;
    color: #010120;
}
body{
    background-color: #ffffff;
    background-image: url(./bg.png );
   
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
}
.wrapper{
    background-color: #ffffff;
    width: 45%;
    min-width: 550px;
    padding: 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
}
.output{
    background-color: #eef3f8;
    width: 100%;
    min-height: 250px;
    padding: 20px 0;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    display: grid;
    place-items: center;
}
#blob{
    height: 300px;
    width: 300px;
    background: rgb(94,92,122);
background: linear-gradient(90deg, rgba(94,92,122,1) 0%, rgba(9,9,121,1) 42%, rgba(0,212,255,1) 100%);
    box-shadow: 15px 20px 30px rgba(0,0,0,0.15);
}
.dimensions{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 20px 0 40px 0;
}
label{
    font-weight: 500;
}
input[type="number"]{
    height: 40px;
    width: 80px;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #a0a0b0;
    border-radius: 3px;
}
input[type="number"]:focus{
    background-color: #f1f5fa;
    border-color: #025eaa;
    color: #025eaa;
}
.sliders{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
input[type="text"]{
    width: 82%;
    margin-top: 50px;
    padding: 10px;
    font-size: 12px;
    border: none;
    background-color: #f1eff9;
    border-radius: 3px;
}
button{
    width: 12%;
    margin-left: 4%;
    padding: 10px 0;
    background-color: #0075ff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
}

Now let’s code the JavaScript part to make it responsive.

let outputCode = document.getElementById("css-code");

let sliders = document.querySelectorAll("input[type='range']");
sliders.forEach(function(slider){
    slider.addEventListener("input",createBlob);
});

let inputs = document.querySelectorAll("input[type='number']");
inputs.forEach(function(inp){
    inp.addEventListener("change",createBlob);
});

function createBlob(){
    let radiusOne = sliders[0].value;
    let radiusTwo = sliders[1].value;
    let radiusThree = sliders[2].value;
    let radiusFour = sliders[3].value;

    let blobHeight = inputs[0].value;
    let blobWidth = inputs[1].value;

    let borderRadius = `${radiusOne}% ${100 - radiusOne}% ${100 - radiusThree}% ${radiusThree}% / ${radiusFour}% ${radiusTwo}% ${100 - radiusTwo}% ${100 - radiusFour}%`;

    document.getElementById("blob").style.cssText = `border-radius: ${borderRadius}; height: ${blobHeight}px; width: ${blobWidth}px`;

    outputCode.value = `border-radius: ${borderRadius};`
}

document.getElementById("copy").addEventListener("click", function(){
    outputCode.select();
    document.execCommand('copy');
    alert('Code Copied');
});

createBlob();

Conclusion

Using HTML, CSS, and JavaScript, we were able to develop our Blob Maker (Source Code) I will mention in the given below. in this tutorial we have cover Blob Maker Step By Step Using HTML, CSS & JavaScript. Hope you enjoy this tutorial

If you think this blog is useful, always visit ziontutorial by searching on Google to locate Source Codes, and follow us on social platforms also

Happy learning and thanks for visiting!

Thank You And Happy Learning!!!

Code Idea – codingartist

People are also reading:

Building a Simple interest calculator using React Hooks

By ziontutorial

On October 28, 2022

In React Js

Are you starting with React? I will be Building a Simple interest calculator using React Hooks. You can use this simple interest calculator for your personal project and host many calculators like this.

What are we building? ?

we are going to make very basic simple interest calculator using react hooks. Basically, that will take user input and also we going to build a form and display the result along the way. Additionally, I wanted to show off the React hooks API, which lets function components use lifecycle methods and have a state behind the scenes. The sole method for managing state in earlier iterations of React was through class components. This results in a significantly improved development experience.

Design Assets Link? ?

Download: Link

YouTube Tutorial

Shall we start? ?

Section 1 – Create-React-App
Section 2 – Add some CSS ( App.css )
Section 3 – Add Logic and state ( App .js )
Section 4 – Conclusion

Section 1

We don’t need anything complicated to make this project so we’ll use the boilerplate Create-React-App gives us. To create the project, navigate to a directory of your choice and type:

npx create-react-app simple_interest_calculator

You may access the project after create-react-app has finished executing.

cd simple_interest_calculator

To launch the project in Visual Code (or any editor of your choice):

code .

Let’s install Material UI is a library of React UI components that implements Google’s Material Design. So that we can use their components. By following this doc here I am using npm you can use either yarn too for installing this

npm install @mui/material @emotion/react @emotion/styled

Section 2 ( App.css )

The emphasis of this tutorial won’t be on styling, so feel free to add additional styling or copy this CSS into your App.css if you’d like. You may also see examples of how I used my classes on my GitHub repository.

src/App.css

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #0e0e0e;
}

.container {
  /* box-shadow: 0px 0px 12px rgb(255, 255, 255); */
  background-color: #FAF9FA;
  width: 519px;
  /* height: 672px; */
  border-radius: 8px;
  padding: 3rem;
}
.heading_text
{
  font-size: 10px;
  font-weight: 400;
}
.heading_two
{
  padding-top: 5px;
}
.total_amount_card
{
  width: 445px;
  height: 138px;
  background-color: #D6FF58;
  margin-top: 22px;
  
}
.card_text {
  padding-top: 40px;
}
.total_amount_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
}
.total_amount_para {
  text-align: center;
  font-size: 12px;
  padding-top: 5px;
  color: #4B4B4B;
}
.input_area
{
  margin-top: 40px;
}

.input_field
{
  margin-top: 30px;
  width: 445px;
}
#outlined-basic {
  width: 410px;
}

.button_collection
{
  margin-top: 61px;
  margin-bottom: 1rem;
}
.btn_one {
  background-color: #1F1F1F;
  width: 200px;
  height: 75px;

}

Section 3 ( App .js )

Let’s make our form using material UI in app.js. Here we will make all your logic here .

import './App.css';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {useState} from 'react'

function App() {

  const [num1,setNum1] = useState(0);
  const [num2,setNum2] = useState(0);
  const [num3,setNum3] = useState(0);
  const [Add,setAdd] = useState("");

  const calcSum = (e) => {
    e.preventDefault()
    console.log(e);

    if(num1===0 || num2===0 || num3===0)
      {
        alert("please enter a valid weight and height")
      }
      
      else
      {
        let Add = parseInt(num1)*parseInt(num2)*parseInt(num3)/100;
        console.log(typeof(Add));
        setAdd(parseInt(Add))
      }

  }

  const handleClick = (e) => {
    setAdd(0);
    window.location.reload();

  }

  return (
    <>
    <Box
      component="form"
      sx={{
        '& > :not(style)': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    ></Box>

    
   
    
    <div className="app">
      
      <div className='container'>
        <div className='heading_text'>
          <h1 className='heading_one'>Simple Calculator</h1>
          <p className='heading_two'>Calculate your simple interest Easily</p>
        </div>
        <div className='total_amount_card'>
          <div className='card_text '>
          <h3 className='total_amount_heading'>₹ {Add}</h3>
          <p className='total_amount_para'>Total simple interest</p>
          </div>
        </div>
        <form onSubmit={calcSum}>

        <div className='input_area'>
            <div className='input_field'>
            <TextField type="number" value={num1 || ""} onChange={(e) => setNum1(e.target.value)} id="outlined-basic" label="₹ Principal amount" variant="outlined" />
            </div>
            <div className='input_field'>
            <TextField type="number" value={num2 || ""} onChange={(e) => setNum2(e.target.value)} id="outlined-basic" label="Rate of interest (p.a) %" variant="outlined" />
            </div>
            <div className='input_field'>
            <TextField  type="number" value={num3 || ""} onChange={(e) => setNum3(e.target.value)} id="outlined-basic" label="Time period ( Yr )" variant="outlined" />
            </div>
        </div>
        <div className='button_collection'>
          <Stack spacing={2} direction="row">       
          <Button type='submit' className='btn_one' style={{backgroundColor: 'black'}} variant="contained">Calculate</Button>
          <Button className='btn_one'  onClick={handleClick}  variant="outlined">Reset</Button>
          </Stack>
        </div>
        </form>

      </div>      
    </div>
    </>
  );
}

export default App;

Section 4 ( Conclusion )

We did it! 😀 Now you can make any calculator for your next project. It works on mobile too! I hope you like Building a Simple interest calculator using React Hooks. for such projects do visits and comment on which project should I cover next.

Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project

Happy coding!

People are also reading:

How to make Simple Interest Calculator in Javascript | Html Simple Interest Calculator for beginners

By ziontutorial

On April 23, 2022

In Blog, web design

Simple Interest Calculator in JavaScript

In this tutorial, we will make a very simple javascript Simple interest calculator using HTML CSS and javascript. If you are a beginner then this tutorial is the best for you what you will learn from this tutorial is .

Note: Make sure you have downloaded the Assests and files for this project Here Link

Planing

since we will be building to make this simple interest calculator. You will learn lots of this which will give a great knowledge about DOM manipulation. I will all the list which you will learn during making or following this tutorial.

We will learn how to center a container .
we will learn how to deal with formula to implement our simple inerest in javascript
how to get user input .
how to save and manipulate to given specipic place of your output .
And many other things which is related with our styling part that will give you an great idea about dom manipulation and some basic element .

To start off we will draw a basic idea of our application which we are be building for this application either you can refer to your notebook or an online software tool Like Figma,Adobe xd, or something else from the marketplace.

It’s not about color staying the elements it’s just a layout refining where you will learn about components of our application .

The Html

Lets start with HTML syntax for the application so that we can define our elements of inputs paragraphs and so on then we will move in javascript and CSS part to make our application working .

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <h2>Simple Interest</h2>
    
    
  <input type="number" id="principal" placeholder="Principal">
    
    
    <input type="number" id="rate" placeholder="Rate Of Interest">

  
    <input type="number" id="time"placeholder="Time in years">
    
    <div class="result">
      <p>Interest: <span id="interest"></span><br></p> 
      <p>Total Interest: <span id="plus"></span></p>
    </div>
    
    <button id="btn" class="button-56" role="button">Submit</button>
  </div>

</body>

</html>

Our basic elements are ready let’s move into our styling part where we will learn about how to make our applications looks awesome with our CSS and js for the workability part. Let’s move to our javascript which gives our application winds to calculate our simple interest by using simple logic formula .

The Javascript

<!--Script-->
  <script>
  
  /*Simple Interest Formula = 
  p*r*t/100*/
    
    btn.addEventListener("click", () => {
        /*Get input values to the variables */
      let p = parseInt(document.getElementById('principal').value);
      let r = document.getElementById('rate').value;
      let t = document.getElementById('time').value;
      let btn = document.getElementById('btn');
      
      var interest = (p*r*t)/100;
      
      document.getElementById('interest').innerHTML = interest;
      
      var plusInterest = p + interest;
      document.getElementById('plus').innerHTML = plusInterest;
      
    })
    
  </script>

Since we have already done our javascript part lets jump to our styling part so that our app looks amazing and beautiful.

The CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #3E00AC;
  font-family: 'Poppins', sans-serif;
}

.container{
  width: 550px;
  height: 750px;  
  display: grid;
  place-items: center;
  background: #edf1f4;
  border-radius: 10px;
  border: 3px solid rgb(0, 0, 0);
  
}

.container h2 {
  
  padding-top: 15px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #464646;

  
}

.container span{
  font-weight: 700;
}

.container .result{
  color: #9E9E9E;
  width: 440px;
}

.container input{
  width: 440px;
  height: 80px;
  background: #edf1f4;
  inset: -5px -5px 5px #fff;
  border-radius: 5px;
  border: 1px solid black;
  outline: none;
  font-size: 20px;
  padding: 24px;
}

p {
  color: #3E00AC;
  font-size: 17px;
  padding: 10px;
}



#interest {
  font-size: 20px;
  padding-left: 1rem;
}
#plus {
  font-size: 20px;
  padding-left: 1rem;
}




/* CSS */
.button-56 { width: 400px;
  height: 200px;
  align-items: center;
  background-color: #adffc8;
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: rgb(26, 26, 26);
  cursor: pointer;
  display: flex;
  font-family: Inter,sans-serif;
  font-size: 16px;
  height: 68px;
  justify-content: center;
  line-height: 24px;
  max-width: 100%;
  padding: 85rem 25rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-bottom: 1rem;
}

.button-56:after {
  background-color: #111;
  border-radius: 8px;
  content: "";
  display: block;
  height: 48px;
  left: 0;
  width: 100%;
  position: absolute;
  top: -2px;
  transform: translate(8px, 8px);
  transition: transform .2s ease-out;
  z-index: -1;
}

.button-56:hover:after {
  transform: translate(0, 0);
}

.button-56:active {
  background-color: #ffdeda;
  outline: 0;
}

.button-56:hover {
  outline: 0;
}

@media (min-width: 768px) {
  .button-56 {
    padding: 0 40px;
  }
}

After following the whole code of HTML CSS and javascript you will get this kind of interface mention in blow .

Congratulations! You’ve created a fully functional and styled app. Hopefully, you’ve learned a something new during the whole process! Do comment in the comment box for any suggestion and query .

Downloading Files

4 KB

Conclusion

Hope you like this article ? Did you enjoy How to make Simple Interest Calculator in Javascript? Let me know in the comment box. Finally, we learn to enjoy and try it on our own.

Happy Coding! ?

People are also reading:

Home analog_clock Javascript Analog Clock Tutorial For Beginners

JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design

By ziontutorial

On October 24, 2021

In How To

JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design

In this article we will design a very beautiful Neumorphism Working Analog Clock UI Design . Here i have explain in a very informative way how you can made it . If you are a beginner then this tutorial will help you completely.

If you have very basic knowledge of html css and JavaScript then you can make this project very easily . So without without wasting any time lets look a working demo of this project . In a analog clock there are three hands thats indicate hours , minutes and seconds . Also i have provide the source code of this project so that you can use in your own work .

Hopefully the above demo fully will help you to understand the output of this project. This clock is basically fetch the data of your current device . First it will receive the current time from your device and then fetching data time and it will converted to degree and other hand will continuously rotating . It will updating continuously every seconds.

In the above example we use Neumorphism for designing this analog clock lets understand what is neumorphism design to design above clock .

What is Neumorphism design ?

“Neumorphism” is a new slang term in design circles — co-created by. — which essentially crosses the words “new” and “skeuomorphism”. Essentially, it’s a new, minimal way to design with a soft, extruded plastic look. It’s almost as if the interface has been vacuum-formed.

Hope you understand the meaning of neumorphism design lets start our working source code for this project.

Step 1: Basic design of webpage with HTML

Below i have used the basic HTML code to design the webpage . i have used four classes for minute hand and hour hand and last which is second hand of analog clock . For designing the back ground i have used very simple code to design shapes .

<!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">
   <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <title>The Best clocking system using css</title>
</head>
<body>

    <div class="container">
        <div class="background">
            <div class="shape"></div>
            <div class="shape"></div>
        </div>
        <div class="clock">
            <div class="hour hand" id="hour"></div>
            <div class="minute hand" id="minute"></div>
            <div class="seconds hand" id="seconds"></div>
        </div>
    </div>

Step 3: Basic design of webpage with CSS

Below i have used some amout of css to design webpage of this clock . i have used background color for the web page is background-color: #080710;

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #080710;
}

Step 4: Lets design the shape of the clock and background design .

Javascript Analog Clock Tutorial For Beginners

.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 240px;
    width: 240px;
    position: absolute;
    border-radius: 50%;
}

.shape:first-child{
    background: linear-gradient(
        #84fab0,
        #8fd3f4
    );
    left: -90px;
    top: -20px;
}

.shape:last-child{
    background: linear-gradient(
        to right,
        #e6b980,
        #eacda3
    );
    right: -70px;
    bottom: -60px;
}

Step 5: Lets design the clock and clock hands

.clock
{
    box-sizing: content-box;
    background-color: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    height: 320px;
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 15px solid rgba(255,255,255,0.07);
    box-shadow: 15px 15px 35px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.4);

}

img{
    position: relative;
}

.hand{
    position: absolute;
    
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 5px;
    transform-origin: bottom;
}
.hour{
    height: 60px;
    width: 8px;
    top: 100px;
	background-color: #ffffff;
}

.minute{
    height: 80px;
    width: 5px;
    top: 80px;
	background-color: #84fab0;
}

.seconds{
    height: 90px;
    width: 3px;
    top: 70px;
    background-color: #f8fc30;
}

Step 6: Lets make our Clock work with javascript .

Now I have taken time from the device using New Date(). NewDate is a JavaScript method that helps to take the current time from the device.
Similarly, using getHours () getMinutes () getSeconds () we have taken the time of hours, minutes, and seconds, respectively. Then the time taken is saved between hh mm and ss.

  let hour = document.getElementById("hour");
        let minute = document.getElementById("minute");
        let seconds = document.getElementById("seconds");

        let set_clock = setInterval(() => {

            let date_now = new Date();
            let hr = date_now.getHours();
            let min = date_now.getMinutes();
            let sec = date_now.getSeconds();

            let calc_hr = (hr * 30) + (min / 2);
            let calc_min = (min * 6) + (sec / 10);
            let calc_sec = sec * 6  ;

            hour.style.transform = `rotate(${calc_hr}deg)`;
            minute.style.transform = `rotate(${calc_min}deg)`;
            seconds.style.transform = `rotate(${calc_sec}deg)`;

        }, 1000);

Hopefully this tutorial has help you to understand the concept of how to design the neumorphism design using HTML CSS and Javascript . I have design many more design using HTML CSS and Javascript lets check out our channel ziontutorial.

How To Create Sign Up Form In HTML and CSS

By ziontutorial

On May 7, 2021

In How To

Last week i have been design a UI in adobe xd and wan to code that login ui .So today we are going to code or learn with a source code How To Create Minimal Sign Up Form In HTML and CSS | Make Sign Up Form Design . A login form with Html CSS and JavaScript .

The HTML

As you can see the output result above . The markup is quite simple . image some texts input boxes , buttons and list of your skills . So here we complete first step How To Create Login Form In HTML and CSS

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <section>
        <div class="container">
            <div class="user singinBx">
                <div class="imgBx"><img src="1.jpg" width="400px" height="400px" alt=""></div>
                <div class="formBx">
                    <form action="">
                        <h2>Sign In</h2>
                        <input type="text" name="" placeholder="Username">
                        <input type="password" name="" placeholder="Password">
                        <input type="Submit" name="" value="Login">
                        <p class="signup">Don't have an account ?<a href="#" onclick="toggleForm();">Sign Up</a></p>
                    </form> 
                </div>
            </div>
        </div>
    </section>
</body>
</html>

I took the image from the Pixabay please visit this site and search for minimal images and pickup from one of them . Thats all about markup lets move to css part where our actual styling of the login page start .

The CSS

There are some basic styling we have to apply for hole body of the document mainly we select hole body of the document by selecting * and to the other component . Just copy all the CSS source code and use it in your project .

Here is the CSS Code :

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

section
{
    position: relative;
    min-height: 100vh;
    background: #b9b9b9;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

section .container 
{
    position: relative;
    width: 800px;
    height: 500px;
    background: #fff;
    box-shadow: 0 15px 50px rgb(0 0 0 / 10%);
    overflow: hidden;
    left: 200px;
    top: 80px;

}


section .container .user
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

section .container .user .imgBx
{
    position: relative;
    width: 50%;
    height: 100%;
    background: #fff;
    transition: 0.5s ;
}

section .container .user .imgBx img 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section .container .user .formBx
{
    position: relative;
    width: 50%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    transform: 0.5s;
}

section .container .user .formBx form h2 
{
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    color: #555;
}

section .container .user .formBx form input
{
    position: relative;
    width: 100%;
    padding: 10px;
    background: #f5f5f5;
    color: #333;
    border: none;
    outline: none;
    box-shadow: none;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 300;   
}

section .container .user .formBx form input[type="submit"]
{
    max-width: 100px;
    background: #677eff;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: 0.5s;
}

section .container .user .formBx form .signup
{
    position: relative;
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;
    text-transform: uppercase;
    font-weight: 300;
}

section .container .user .formBx form .signup a 
{
    font-weight: 600;
    text-decoration: none;
    color: #677eff;
}

section .container .signupBx
{
    pointer-events: none;
}

Conclusion

As you could see it was a pretty straightforward component to create, and also it looks very awesome ! . I will definitely do this in the future as it is a lot of fun again for sign in ! ? Did you enjoy this type of article? Let me know on on the comment box. Finally we learn How To Create Login Form In HTML and CSS enjoy and try it your own .

Happy Coding! ?

People are also reading:

Tech That Matters

Tag: javascript

Create Stunning User Interfaces with These Top 30 React UI libraries

Lists Of React UI libraries

Conclusion

Blob Maker Step By Step Using HTML, CSS & JavaScript

Blob Maker Using HTML, CSS, and JavaScript: Step by Step

HTML Code

CSS Code

Conclusion

Building a Simple interest calculator using React Hooks

What are we building? ?

YouTube Tutorial

Shall we start? ?

Section 1

Section 2 ( App.css )

Section 3 ( App .js )

Section 4 ( Conclusion )

How to make Simple Interest Calculator in Javascript | Html Simple Interest Calculator for beginners

Note: Make sure you have downloaded the Assests and files for this project Here Link

Planing

The Html

The Javascript

The CSS

Downloading Files

Conclusion

JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design

What is Neumorphism design ?

Step 1: Basic design of webpage with HTML

Step 3: Basic design of webpage with CSS

Step 4: Lets design the shape of the clock and background design .

Step 5: Lets design the clock and clock hands

Step 6: Lets make our Clock work with javascript .