Build a DIGITAL CLOCK using React in 15 minutes! 🕒

  Рет қаралды 20,718

Bro Code

Bro Code

Күн бұрын

Пікірлер: 45
@BroCodez
@BroCodez Жыл бұрын
import DigitalClock from './DigitalClock.jsx'; function App() { return ( ) } export default App body{ background-image: url(assets/background.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; margin: 0; /* OPTIONAL */ display: flex; justify-content: center; min-height: 100vh; align-items: center; } .clock-container{ backdrop-filter: blur(5px); width: 100vw; padding: 10px 0; } .clock{ color: white; font-size: 6rem; font-weight: bold; font-family: monospace; text-align: center; text-shadow: 3px 3px 5px hsla(0, 0%, 0%, 0.75); } import React, {useState, useEffect} from 'react'; function DigitalClock(){ const [time, setTime] = useState(new Date()); useEffect(() => { const intervalId = setInterval(() => { setTime(new Date()); }, 1000); return () => { clearInterval(intervalId); } }, []); function formatTime(){ let hours = time.getHours(); const minutes = time.getMinutes(); const seconds = time.getSeconds(); const meridiem = hours >= 12 ? "PM" : "AM"; hours = hours % 12 || 12; return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)} ${meridiem}`; } function padZero(number){ return (number < 10 ? "0" : "") + number; } return( {formatTime()} ); } export default DigitalClock;
@-ECE-RaviShankar
@-ECE-RaviShankar Жыл бұрын
First comment.............yeah big fan from india, can you please tell when this series is completed.
@reiayanami1441
@reiayanami1441 Жыл бұрын
we need a full course of react, please bro. love your videos from italy
@BroCodez
@BroCodez Жыл бұрын
Coming soon!
@MrBaninations
@MrBaninations Жыл бұрын
Broo@@BroCodez​, It will also include Redux, right? You're the best Teacher out here
@greengoatsh1t888
@greengoatsh1t888 Жыл бұрын
@@BroCodez 🔥🔥🔥
@salad333
@salad333 Жыл бұрын
@@BroCodez please do, i'm still struggling how to install React in Visual Studio code 😑😐
@tasneemayham974
@tasneemayham974 Жыл бұрын
Yes!!! PLEASEEE!!! i RUN AWAY WHENEVER I SEE REACT!! WE NEED YOU BRUHHH!!!
@BishanTamang-rk5ji
@BishanTamang-rk5ji Жыл бұрын
Make java 2024 plz....Big fan love from Nepal
@ITBIENVENU
@ITBIENVENU 2 ай бұрын
thanks bro code, you remind me more css 🤣🤣, i'm your big fan from rwanda
@DomingoMateo-e8t
@DomingoMateo-e8t Жыл бұрын
Im beginner but this is awesome!!! Im learning to much!! Thkssssss
@Albert_Hall
@Albert_Hall 8 ай бұрын
Great great Thank you With gratefulness from Caucasus
@Thaisann-f3l
@Thaisann-f3l Жыл бұрын
I really like your video Bro Code. I try to learn about your video until the end
@alfaorionis69
@alfaorionis69 2 ай бұрын
thank you Bro, your tut orial is very instructive
@KristiKoroveshi-i9s
@KristiKoroveshi-i9s Жыл бұрын
How did you make the css work without importing it on the jsx ?
@-ECE-RaviShankar
@-ECE-RaviShankar Жыл бұрын
First comment.............yeah big fan from india, can you please tell when this series is completed.
@BroCodez
@BroCodez Жыл бұрын
Early February is my goal
@-ECE-RaviShankar
@-ECE-RaviShankar Жыл бұрын
Ok , I am following your JS Full course of 2024 and omg it is just like a wow...@@BroCodez
@talhakhan4684
@talhakhan4684 7 ай бұрын
@@BroCodez Hi bro, do you have any plans to make videos on react-router-dom and redux-toolkit?
@alivejack
@alivejack 3 ай бұрын
0:56 defauly 😂😂❤
@andromilk2634
@andromilk2634 10 ай бұрын
Is there a reason you started hours with "let" but for the other units of time you used "const" instead?
@josea8320
@josea8320 Жыл бұрын
Genial, saludos desde Perú!
@yukicheniwla
@yukicheniwla Жыл бұрын
please explain for us laravel, ur the best bro, me and my friends we're learning a lot from u thanks for help us , from morocco
@KingOfMadnesss
@KingOfMadnesss Жыл бұрын
After you complete your react full course, you should do an SFML full course
@Aryan-de9jw
@Aryan-de9jw Жыл бұрын
I would really love to see that. 😊
@Aryan-de9jw
@Aryan-de9jw Жыл бұрын
oh! and maybe a graphics programming tutorial as well.
@fieryscorpion
@fieryscorpion Жыл бұрын
What is SFML?
@KingOfMadnesss
@KingOfMadnesss Жыл бұрын
@@fieryscorpion A C++ library. You can build 2D and 3D softwares using it. With just C++, you can only build console applications
@_amonimus_
@_amonimus_ Жыл бұрын
how many programing languages do you know
@millad90s
@millad90s 9 ай бұрын
could you please share the code in github or ... ? thank you
@hydrogennetwork
@hydrogennetwork Жыл бұрын
can you teach java spring please?
@otabekmadaminov-z2i
@otabekmadaminov-z2i 3 ай бұрын
Thank you bro
@angtran4119
@angtran4119 Жыл бұрын
oh thank you so much
@diamondemerald6271
@diamondemerald6271 Жыл бұрын
Pls do a cmd course
@AbhayRajKarun
@AbhayRajKarun Жыл бұрын
I am surprised it's at 100 views even after 26 minutes Crazy !
@Nurhussein2023
@Nurhussein2023 Жыл бұрын
great
@vigneshsainallamothu4117
@vigneshsainallamothu4117 Жыл бұрын
bro code for main.jsx file
@mk-vg1mx
@mk-vg1mx 5 ай бұрын
thanks a lot
@chorkaniitv3386
@chorkaniitv3386 Жыл бұрын
Make android studio with java plz ..? I can't wait
@rawa97775
@rawa97775 Жыл бұрын
Please tutorial for discord bot for python please bro❤
@tharinduminiruwan7842
@tharinduminiruwan7842 Жыл бұрын
@diamondemerald6271
@diamondemerald6271 Жыл бұрын
Next full course is CMD
@hollycow8171
@hollycow8171 11 ай бұрын
return (number < 10 ? "0" : "") + number; CAN YOU ALSO REPLACE IT WITH return (number < 10 ? `0${number}` : number);
@stylosuf1394
@stylosuf1394 Жыл бұрын
Python flet please 2024....
React useContext() hook introduction 🧗‍♂️
11:37
Bro Code
Рет қаралды 43 М.
Build a Stopwatch using React in 20 minutes! ⏱
20:01
Bro Code
Рет қаралды 42 М.
It’s all not real
00:15
V.A. show / Магика
Рет қаралды 20 МЛН
Beat Ronaldo, Win $1,000,000
22:45
MrBeast
Рет қаралды 158 МЛН
Build this JS calculator in 15 minutes! 🖩
15:20
Bro Code
Рет қаралды 724 М.
Netflix Removed React?
20:36
Theo - t3․gg
Рет қаралды 22 М.
How to render LISTS in React 📃
26:40
Bro Code
Рет қаралды 41 М.
Can You Beat Minecraft From One Grass Block?
35:27
Beppo
Рет қаралды 6 МЛН
React useEffect() hook introduction 🌟
19:52
Bro Code
Рет қаралды 36 М.
Learn CSS BOX MODEL - With Real World Examples
17:45
Slaying The Dragon
Рет қаралды 155 М.
A new way to generate worlds (stitched WFC)
10:51
Watt
Рет қаралды 553 М.
Build this React To-Do List app in 20 minutes! ☝
22:35
Bro Code
Рет қаралды 78 М.
Learn React Click Events 👆
12:21
Bro Code
Рет қаралды 28 М.
It’s all not real
00:15
V.A. show / Магика
Рет қаралды 20 МЛН