My React Digital Garden
What is new in My Digital Garden Last Month — (in Sep 2021)
I decided to build a digital garden in the previous month. And I am very excited to add some demos(plants) to my garden. Some of the developments which I have made;
1. Simple Calculator
Here you will find a quick demonstration. This is a sample Simple Calculator application. It consists of a screen and several buttons. These buttons have different functions, and they can be grouped as the following.
- Numbers (1, 2, 3, 4, …)
- Operators (+, -, *, /, %)
- Command (=, AC)
Pressing these buttons allows you to make many simple calculations including addition, subtraction, division, multiplication, etc.
2. Dark/Light Theme
Here you will find a quick demonstration. This is a sample Dark Theme (Mode) application. The Dark Theme is an appearance setting created to ensure a more comfortable view of the screen in low-light environments. It is possible to switch to the dark theme when required quickly. The content will be made to stand out on the darker background.
3. Responsive Typography
Here you will find a quick demonstration. This is a sample Responsive Typography application.
Responsive Typography is the design of writing on any website. It allows the adaptation of the website content to the size of any tablet, laptop, desktop, and mobile device. In this way, the writing can always be completely readable. One of the Media Query, Viewport Calculation, and Fluid Calc options can be used to apply Responsive Typography, or a non-responsive setting may be preferred.
4. Option Selector
Here you will find a quick demonstration. This is a sample Option Selector application. An Option Selector allows the user to choose from a list offered such as a Checkbox, a Toggle Button or a Combobox, etc.
In this version, We ask the user “How do you feel today?” based on the option selected, the related part of the answer changes accordingly.
5. Sign in Mechanics
Here you will find a quick demonstration. This is a sample Sign in (Login) Page application.
A Sign in Page is a page enabling access to a part of a website or an entire website. It asks you to enter your credentials such as username and password for identification and authentication.
This application provides the result pages that appear when several username and password combinations are entered. These include the
- Default (No credentials entered),
- Fetching (Waiting for Response),
- Server Error (Problem on Server),
- Auth Successful (Login Successful), and
- Auth Failed (Login Failed, Check username, password) pages.
6. Signup Mechanics
Here you will find a quick demonstration. This is a sample Signup Page application.
A Signup Page is a page where the visitor of a website or application can register to gain access to the related website or system. Using the signup form on this page, a username, password, and e-mail address are requested, for the Sign in the authentication process.
7. Google reCaptcha
Here you will find a quick demonstration. This is a sample Google reCAPTCHA application.
It is a verification component checking whether you are a real user or a robot. In other words, it is a Turing test. It helps the detection of abusive traffic and therefore protects the website against spam and abuse.
8. Frontend LibraryTags
Here you will find the Open-Source React Component Library Tags. You can utilize these Libraries in the development process. They include AceEditor, AutoSizer, React Dnd, Material UI, Redux, etc. Clicking on these tags directs you to the related web pages.
9. LogViewer Tests
Here you will find a quick demonstration. This is a sample Log Viewer application. It is used to view log files. The logs are important outputs for developers to understand how the code works, how it flows, is there any errors or problems in the code.
It is possible to apply many filters and functions on the log file based on your requirements.
- These include the Local/Remote filter showing on logs
- the Select function enables you to make a selection among the results,
- the Search function shows the results containing the keyword entered,
- the Case Insensitive Search function,
- the Highlight function brings out the requested results with a different color, and the Scroll function takes the display to the related results, etc.
10. Colorful Buttons
Here you will find a quick demonstration. This is a sample Colorful Button application.
It allows the creation of random dynamic colorful buttons that generate varying titles. It is possible to create a new dynamic button with a different color. Clicking the dynamic colorful buttons generate titles with assorted colors in connection with the titles of the dynamic buttons.
11. Draggable Sidebar
Here you will find a quick demonstration. This is a sample Draggable Sidebar application.
It both provides the related functions, buttons, results, etc., and allows for full-screen usage when required. It is possible to drag and obtain a sidebar at any width desired.
12. CSS Units
Here you will find a quick demonstration. This is a sample CSS Units application.
It provides the functioning mechanism of the CSS Units. The box width and height are represented in pixels (px). The font size of the HTML element (rem) can be increased or decreased, and the font size of the element (the box here) can be increased or decreased.
13. Dynamic Route
Here you will find a quick demonstration. This is a sample No Code Dynamic Routing application.
It allows you to learn how to generate pages and paths. Using this application, you can generate a new page and define its route on the fly. Clicking on the Accept button creates a path and title according to the data entered. It is also possible to clear any page ID and page title and delete any generated page from the Page List.
14. Percent Stacked Bar
Here you will find a quick demonstration. This is a sample (horizontal) Percent Stacked Bar application.
It is a simple bar chart created in a stacked structure. It's design allows to display the values of individual parts of the groups across the categories and to compare the contribution of each value to the total. This application is developed via CSS without the need for using a Chart Library or for rendering it as SVG. This makes it possible to use and style the table within the columns.
15. Simple Page Layout
Here you will find a quick demonstration. This is a sample Simple Page Layout application.
It allows the creation of a header part and a content part as a page's basic structure. The Header part contains the title, main navigation, and configuration buttons. The Content part contains the main information text.
16. Demo&Info Page Layout
Here you will find a quick demonstration. This is a sample Demo-Info Page Layout application.
It allows the creation of a header part, a demo part, and an info part. The Header part contains the title, main navigation, and configuration buttons. The Demo part is the actual context of the UI domain. And the Info part contains extra information and controls for testing the demo part.
17. SideMenu Layout
Here you will find a quick demonstration. This is a sample Side Menu Layout application.
Clicking on the side menu buttons provides the related content. These buttons may include the Admin Page, History, Dashboard, Feedback, List Selection, Task Management, Scheduling, Gantt Chart buttons, etc.
Let’s continue reading 😃
You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share
