How can I build a time that changes every second on React.js?!

Almuhannad_01 — Sat, 03 Sep 2022 11:11:21 +0000

--> The technicals which will use in this program (React.js, React Hooks - useState).

The program..
1) add:

import React, {useState} from "react";

2) add function which name the same for the file e.g// App

function App() {

setInterval(sayHi, 1000) --> This function prints sayHi every second, but you will add setInterval(updatetime, 1000);

const now = new Date(); --> This is the object for the Date. For example// you can get the hour when you write const now = new Date ().getHours();, but here you want full-time (( hour: min: sec AM/PM )) for that, will use:
const now = new Date().toLocaleTimeString();

3) add hooks:



const [time,setTime] = useState(now);

4) update function time:



function updatetime() {
    const newtime = new Date().toLocaleTimeString();
    setTime(newtime);
  }

5) Program output to the user:



return(
    <div>
      <h1>{time}</h1>
    </div>
);

Final file will be 🎈:

😍
Thank you..

Basic concepts of programming

Almuhannad_01 — Sun, 28 Nov 2021 11:53:57 +0000

Basic concepts of programming:

. Program: A Program is a set of instructions written in a Programming language for solving a problem.

Types of Programming Languages: There are two types of Programming
languages.

Low level Languages (Examples: Machine language and Assembly language)

High level Languages (Examples: C, C++, C#, Java, Perl, Python etc.)

. Machine Language: Machine language programs consist of 0s and 1s.
For example: 00111011 11011111 10110110
They are machine dependent.
It is difficult for us to write programs in machine language.

. Assembly language: Assembly language programs are made up of mnemonics or symbols.
For example, ADD A, B. We cannot use operator symbol like + for addition.
They are CPU dependent.

. High level languages: High level language programs are made up of statements. These statements are formed by using the Syntax (Grammar) of a High level programming language.
For example, SUM = A + B.
It is easy for us to write programs in High level languages.
They are machine independent.

Computers can execute only Machine language programs directly.
Therefore, we need something to translate programs written in High level language or Assembly language to Machine language.

Assembler: It is a program which will translate Assembly language programs to Machine language.

Compiler: It is a program which will translate a High level language program to Machine language.

Interpreter: It is a program which will translate and execute a High level language program one statement at a time.

Source Program : It is a High level language program or Assembly language program given to the Compiler or Assembler as Input.

Object Program : It is a Machine language program generated by the Compiler or Assembler as Output.

Algorithm : It is a step by step procedure written in our own language for solving the problem.

Flow Chart : It is a pictorial representation of steps for solving the problem.

** Flow Chart to convert temperature from degrees Centigrade to Fahrenheit.

. Algorithm to convert temperature from degrees Centigrade to Fahrenheit.
Step 1: Accept Cent
Step 2 : Fahr = Cent * 180/100 + 32
Step 3: Display the value of Fahr.
End of Algorithm.

** Python Program to convert temperature from degrees Centigrade to Fahrenheit.

cent=float (input("Enter temperature in centigrade: "))
fahr=cent * 180/100 + 32
print ("\nThe temperature in Fahrenheit is ", fahr)

Explanation: The temperature in degrees centigrade is accepted from the key board by using the (input) function and stored in a memory location named (cent). A formula is used to convert it to Fahrenheit and stored in the memory location (fahr). The content of memory location (fahr) is displayed on the screen using the (print) function.

Python is a general-purpose, interpreted, high level programming language.
It’s very popular and easy to learn.
It was initially designed by Guido van Rossum in 1991 and developed by Python software foundation.

Integrated development environment (IDE) is used to enter, edit, run and debug programs.

. Variable names: These are the names of the memory locations whose contents can change during the execution of a program.
A variable will have a name, type and value.
Basic data types in python: int, float, str, bool

.Assignment Statement: It is used to give a value to a variable.
In algorithms and Flowcharts < can be used for assignment.
In python programs the assignment operator is =
The general form of assignment statement is
Variable name < expression
Example : c < a + b
In python it’s
Variable name = expression
Example: c = a + b

.. Thank you for reading,
Almuhannad

DEV Community: Almuhannad_01

How can I build a time that changes every second on React.js?!

Basic concepts of programming