Day 7 (30 Days of Code)

6 July 2023

Today was mostly dedicated to learning concepts of React. I also solved 2 Leetcode problems as my daily routine.

What did I learn?

• Event Handling in React

• React forms

• Spread operator

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [headingText, setHeading] = useState("");

///////          EVENT HANDLING           ///////////////

  function handleChange(event) {
    console.log(event.target.value);
    setName(event.target.value);
  }

  function handleClick(event) {
    setHeading(name);

    event.preventDefault();
  }

  return (
    <div className="container">
      <h1>Hello {headingText}</h1>

///////////////           FORMS            //////////////

      <form onSubmit={handleClick}>
        <input
          onChange={handleChange}
          type="text"
          placeholder="What's your name?"
          value={name}
        />
        <button type="submit">Submit</button>
      </form>

    </div>
  );
}

export default App;

import React, { useState } from "react";

function App() {
  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });

  function handleChange(event) {
    const { name, value } = event.target;

    setContact(prevValue => {
      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName,
          email: prevValue.email
        };
      } else if (name === "lName") {
        return {
          fName: prevValue.fName,
          lName: value,
          email: prevValue.email
        };
      } else if (name === "email") {
        return {
          fName: prevValue.fName,
          lName: prevValue.lName,
          email: value
        };
      }
    });
  }

  return (
    <div className="container">
      <h1>
        Hello {contact.fName} {contact.lName}
      </h1>
      <p>{contact.email}</p>
      <form>
        <input
          onChange={handleChange}
          value={contact.fName}
          name="fName"
          placeholder="First Name"
        />
        <input
          onChange={handleChange}
          value={contact.lName}
          name="lName"
          placeholder="Last Name"
        />
        <input
          onChange={handleChange}
          value={contact.email}
          name="email"
          placeholder="Email"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

import React, { useState } from "react";

function App() {
  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);

  function handleChange(event) {
    const newValue = event.target.value;
    setInputText(newValue);
  }
////////////////         SPREAD OPERATOR          //////////

  function addItem() {
    setItems(prevItems => {
      return [...prevItems, inputText]; // USE OF SPEAD OPERATOR 
    });
    setInputText("");
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input onChange={handleChange} type="text" value={inputText} />
        <button onClick={addItem}>
          <span>Add</span>
        </button>
      </div>
      <div>
        <ul>
          {items.map(todoItem => (
            <li>{todoItem}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

Before:

After:

DSA for the day:

• Single Number

My approach: First I simply used Hashmap for my solution but it was given that the code should take constant time complexity.

1. Using Hashmap :

• Time complexity [O(n)]

• Space complexity [O(n)]

class Solution {
public:
    int singleNumber(vector<int>& nums) {
        unordered_map<int,int> map;
        vector<int> output;

        for(int i=0;i<nums.size();i++){
            if(map.count(nums[i])>0){
                map[nums[i]]++;
                continue;
            }
            map[nums[i]] = 1;
            output.push_back(nums[i]);
        }

        for(int i=0;i<output.size();i++){
            if(map[output[i]]==1){
                return output[i];
            }
        }
        return output[0];
    }
};

2. Using an XOR operator:

class Solution {
public:
    int singleNumber(vector<int>& nums) {

// [2,3,1,6,3,6,2]
//  2^3^1^6^3^6^2 = 0^1 = 1

        int count = 0;
        int i = 0;

        while(i<nums.size()){
            count^=nums[i];
            i++;
        }
        return count;
    }
};

• Linked List Cycle

My approach:

I used two pointer method to solve the question.

class Solution {
public:
    bool hasCycle(ListNode *head) {
        if(head==NULL || head->next==NULL){
            return false;
        }

        ListNode* slow = head;
        ListNode* fast = head;

        while(slow!=NULL && fast!=NULL){
            if(fast->next!=NULL){
                fast = fast->next->next;
            }else{
                return false;
            }
            slow = slow->next;
            if(fast==slow){
                return true;
            }
        }
        return false;
    }
};