Create responsive login form with HTML & css

chen sokheng — Fri, 02 Apr 2021 12:06:53 +0000

You can check the video tutorial with the link down below.

Cheer, Happy learning.

Pair Programming.

chen sokheng — Fri, 17 Jul 2020 11:54:01 +0000

Who interested to do pair programming with me? leave a comment below. We will working on Twitter clone using react.js and firebase. A little bit about me, I am a junior react developer and I am looking to code with you 🙏.

You can find out more here: https://www.facebook.com/dailywebcoding/videos/3209872492411841

Date: 18/07/2020 at 10:10 AM Indochina Time.

Data Structure: Binary Search with python

chen sokheng — Fri, 26 Jun 2020 09:12:49 +0000

So let's say you want to find the number in a sorted list with a quick and easy.

There are two ways that you can do.

you can go one by one and check if the current element is the target element. suppose if we have 1000000 elements you will do it million times.
Using binary search

with binary search you can find your target element in log2 of N time. Suppose if we have 1000000 elements you will search only 20 times.

So how ?

binary Search

is a logarithmic search.

Time complexity (worse-case)

O(log N)

Noted

Binary search is only work with sorted list.

Code:

arr = [1,2,3,4,5,6,7]
target = 4

def binary_search(arr,target):
    low = 0
    high = len(arr) -1
    while low <= high:
        mid = (high + low) // 2
        guess = arr[mid]
        if target == guess:
           return mid

        if guess > target:
           high = mid
        else:
           low = mid
    return None

Crud operation: React + Firebase Realtime Database

chen sokheng — Sat, 06 Jun 2020 10:44:06 +0000

In this article I am going to build a simple todo to demonstrate how to do crud with React and Firebase Realtime database..
There is a video tutorial as well here is the link: https://youtu.be/v0TKYSkZ2tI

Config firebase

go to firebase
- choose go to console and create a new project
- choose this one

copy this
- choose realtime database
- select test mode
- Install firebase to your project

      npm i firebase

util/firebase.js

import firebase from firebase
const firebaseConfig = {
    apiKey: "AIzaSyCzRUkmetmwFrEqvL-HMZNuWRFq3rUMs-4",
    authDomain: "hello-c7e7a.firebaseapp.com",
    databaseURL: "https://hello-c7e7a.firebaseio.com",
    projectId: "hello-c7e7a",
    storageBucket: "hello-c7e7a.appspot.com",
    messagingSenderId: "1022778008563",
    appId: "1:1022778008563:web:791884b13e82f5a64de886",
    measurementId: "G-QDLR4PBRFR"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics()
export default firebase;

Component

App.js

import React from 'react';
import './App.css';
import Form from './components/Form';
import TodoList from './components/TodoList';

export default function App() {
  return (
    <div className="App">
      <h1>Todo</h1>
      <Form />
      <TodoList />
    </div>
  );
}

Create

components/form.js

import React, { useState } from 'react';
import firebase from '../util/firebase';

export default function Form() {
  const [title, setTitle] = useState('');

  const handleOnChange = (e) => {
    setTitle(e.target.value);
  };
  const createTodo = (){...}
  return (
    <div>
      <input type="text" onChange={handleOnChange} value={title} />
      <button onClick={createTodo}>Add Todo</button>
    </div>
  );
}

This is how we are going to create todo

  const createTodo = () => {
    const todoRef = firebase.database().ref('Todo');
    const todo = {
      title,
      complete: false,
    };

    todoRef.push(todo);
  };

here is our data will look like

Read

components/TodoList.js

import React, { useState, useEffect } from 'react';
import firebase from '../util/firebase';
import Todo from './Todo';

export default function TodoList() {
  const [todoList, setTodoList] = useState();

  useEffect(() => {
    const todoRef = firebase.database().ref('Todo');
    todoRef.on('value', (snapshot) => {
      const todos = snapshot.val();
      const todoList = [];
      for (let id in todos) {
        todoList.push({ id, ...todos[id] });
      }
      setTodoList(todoList);
    });
  }, []);

  return (
    <div>
      {todoList
        ? todoList.map((todo, index) => <Todo todo={todo} key={index} />)
        : ''}
    </div>
  );
}

note here: you use

todoRef.once("value")
// for listen to the data change only one time

todoRef.on("value")
// listen every time data change in todo ref

update and delete

components/Todo.js

import React from 'react';
import firebase from '../util/firebase';
import '../App.css';

export default function Todo({ todo }) {
  return (
    <div>
      <h1 className={todo.complete ? 'complete' : ''}>{todo.title}</h1>
      <button onClick={deleteTodo}>Delete</button>
      <button onClick={completeTodo}>Complete</button>
    </div>
  );
}

update

  const completeTodo = () => {
    const todoRef = firebase.database().ref('Todo').child(todo.id);
    todoRef.update({
      complete: !todo.complete,
    });
  };

delete

  const deleteTodo = () => {
    const todoRef = firebase.database().ref('Todo').child(todo.id);
    todoRef.remove();
  };

Result

code:
https://github.com/Chensokheng/crud-todo-app

Reference

https://firebase.google.com/docs/database/web/start

DEV Community: chen sokheng