Wednesday, January 31, 2024

Day 1 || Introduction of Html || Element || Structure of HTML || Full stack web development

 HTML Topics

Day 1 :

1. Introduction of Html:

        Who has invented HTML?

            - Sir Tim Berners-Lee

        https://home.web.cern.ch/science/computing/birth-web

    

    Growth of HTML:



















2. Element:













 Nested tags :

<p> Welcome
    <h4> Hema
        <h1>Coding School</h1>
    </h4>
</p>


3. Structure of HTML  :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hema coding school</h1>
   
</body>
</html>


Task:

1. Complete VS code installation

Interview Questions:

1. What is the purpose of the <!DOCTYPE html> declaration in an HTML document?

2. Describe the purpose of the <meta charset="UTF-8"> tag in an HTML document?

3. Explain the importance of the opening and closing tags in HTML?






at 1 comment:

Wednesday, January 17, 2024

Day 29 || Mongoose ODM for Node.js || Connect || Schema || Model || Connection of Front-End + Back-End + Data Base || Connection of React.js + Node.js + MongoDB

 MongoDB Topics

Day 29:

  • Mongoose ODM for Node.js
    • Connect
    • Schema
    • Model
  • Connection of Front-End + Back-End + Data Base
    • React.js + Node.js + MongoDB

Mongoose ODM for Node.js : 

Mongoose.js:

const mongoose = require('mongoose');
mongoose.connect("mongodb://localhost:27017/myDataBase",{
    useNewUrlParser: true,
    useUnifiedTopology: true,
})

const userSchema = new mongoose.Schema({
    username: String,
    email: String,
    password: String
})

const User = mongoose.model('User',userSchema)

const newUser = new User({
    username:"Hema",
    email:"hema@gmail.com",
    password: "123"
})

newUser.save().then((user)=>{
    console.log(user)
}).catch((err)=>{
    console.log(err)
})

User.updateOne({username:"Hema"},{password:"hema@123"}).then((result)=>{
console.log(result)
})


Connection of Front-End + Back-End + Data Base:

server.js:

const mongoose = require('mongoose');
const express = require('express');
const cors = require('cors')
const app = express();
const bodyParser = require("body-parser");
app.use(bodyParser.json())
app.use(cors())
app.post("/submitFormData", (req,res)=>{
    const formData = req.body;
    const artFormData = new ArtForm({
        name:formData.name,
        age:formData.age,
        artworkDescription:formData.artworkDescription
    })
    artFormData.save().then((result)=>{
        console.log(result)
        res.status(200).json({ message: "Form submitted successfully!" });
    })

})
 
mongoose.connect("mongodb://localhost:27017/myDataBase",{
    useNewUrlParser: true,
    useUnifiedTopology: true,
})

const ArtSchema = new mongoose.Schema({
    name:String,
    age:String,
    artworkDescription:String
})

const ArtForm = mongoose.model("ArtForm", ArtSchema)

// const newArtForm = ArtForm({
//     name:"Mahesh",
//     age:"23",
//     artworkDescription:"Nice work"
// })

// newArtForm.save()
const PORT = 3001

app.listen(PORT,()=>{
    console.log(`Server is running on port ${PORT}`)
})

ArtCompetitionForm.js:

fetch("http://localhost:3001/submitFormData",{
      method:"POST",
      headers:{
        "Content-Type" : "application/json"
      },
      body:JSON.stringify(formData)
    }).then((result)=>{
      console.log(result,"Form submitted successfully!")
    }).catch((err)=>{
      console.log(err)
    })


Interview Questions: 

1. How do you connect to a MongoDB database using Mongoose?

2. How do you create a Mongoose Schema?

3. What is a Mongoose Model?

4. How do you establish a connection between Node.js and MongoDB in a MERN stack application?

5. How can you handle CORS issues when connecting a React.js frontend to a Node.js backend?



at No comments:

Monday, January 15, 2024

Day 28 || Introduction to MongoDB || Setting up MongoDB || CRUD operations with MongoDB

MongoDB Topics

Day 28:

  •  Introduction to MongoDB
  •  Setting up MongoDB
  •  CRUD operations with MongoDB


 Introduction to MongoDB:















Setting up MongoDB:


















CRUD operations with MongoDB:













To read:
show databases
show collections

Create collection:
use HemaDatabase
db.createCollection('HemaCodingSchool')
db.HemaCodingSchool.insertOne({ name: 'Mahesh', role: 'Student'})

-------------------------------------------
Create: 
db.HemaCodingSchool.insertOne(
{ name: 'Mahesh', role: 'Student' }
)
-------------------------------------------
Read:
db.HemaCodingSchool.find({})
-------------------------------------------
Update:
db.HemaCodingSchool.updateOne(
{ name: 'Mahesh'}, {$set:{ role: 'Emloyee'}} 
)
-------------------------------------------
Delete:
db.HemaCodingSchool.deleteOne({name: 'Mahesh'})

==============================================
Create Many: 

db.HemaCodingSchool.insertMany([
  { name: 'Hema', role: 'Organizer' },
  { name: 'Mahesh', role: 'Employee' },
  { name: 'Maruthi', role: 'Student' }
])

------------------------------------------------------
Update Many:

db.HemaCodingSchool.updateMany(
  { name: { $in: ['Hema', 'Mahesh', 'Maruthi'] } },
  { $set: { role: 'NewRole' } }
)

---------------------------------------------
Delete Many:

db.HemaCodingSchool.deleteMany(
  { name: { $in: ['Hema', 'Mahesh', 'Maruthi'] } }
)


Interview Questions: 

1. What is a Collection in MongoDB?

2. How do you insert a document in MongoDB?

3. Explain the $set operator in MongoDB?

at No comments:

Sunday, January 14, 2024

Day 27 || Express js || Express Framework || Get method in Express || Post Method in Express

 Node.js Topics

Day 27:

  • Express Framework
    • Get
    • Post
Express.js

const express = require('express');
const callingData = require('./Data.js')
const app = express()
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))
app.get('/',(req,res)=>{
res.send("Hello, Hema coding school");
})
app.get('/about',(req,res)=>{
    res.send("About , Hema coding school")
})
app.get('/item',(req,res)=>{
    res.send(`
    <h1>Hema Codning School</h1>
    <h2>${callingData[0].id}</h2>
    <h2>${callingData[0].name}</h2>
    <h2>${callingData[1].id}</h2>
    <h2>${callingData[1].name}</h2>
    <h2>${callingData[2].id}</h2>
    <h2>${callingData[2].name}</h2>
    `)
})

app.post('/api',(req,res)=>{
    newData={
        id:req.body.id,
        name: req.body.name
    }
    callingData.push(newData)
    res.json(callingData)
})
const PORT = 3000;
const HOSTNAME = "127.0.0.1";
const BACKLOG = 551;

app.listen(PORT, HOSTNAME, BACKLOG,()=>{
    console.log(`Server is running at http://${HOSTNAME}:${PORT}`)
})


Data.js

const items = [
    {
      id: 1,
      name: "Hema",
    },
    {
      id: 2,
      name: "Mahesh",
    }
   
  ];

  module.exports = items


Interview Questions:

1. How does routing work in Express.js?

2. What is middleware in Express and how is it used in the context of a GET request?

3. How do you handle a POST request in Express?






at No comments:

Friday, January 12, 2024

Day 26 || Introduction to Node.js || Operating System Module || File System Module || HTTP Module in node.js

Node.js Topics

Day 26:

  • Introduction to Node.js
  • Operating System Module
  • File System Module
  • HTTP Module
    • Create Server
App.js

function sayHello(){
    return "Welcome to Hema coding School"
}
// module.exports= sayHello;
School = {
   name:"Hema",
   role:"Student"
}
module.exports = {sayHello, School}


Index.js

const myCall = require('./App.js');
console.log(myCall.sayHello())
console.log(myCall.School)

const os = require("os")
console.log(os.freemem())
console.log(os.totalmem())

const fs = require('fs');
// (file, data, [optional], callback)
fs.writeFile("output", "Welcome to hema coding School", "utf-8", (error)=>{
    if(error){
        console.log(error)
    }
    else{
        console.log("file has created successfully")
    }
})
// path, [optional], callback
fs.readFile("./output","utf-8",(error,data)=>{
    if(error){
        console.log(error)
    }
    else{
        console.log(data)
    }
})

const http = require('http');
const server = http.createServer((req,res)=>{
    res.writeHead(200,{"Content-Type": "text/plain"})
    res.end("Welocme hema coding school")
})
// PORT, HOSTNAME, BACKLOG, CALLBACK
const PORT = 3000;
const HOSTNAME = "127.0.0.1";
const BACKLOG = 551;
const CALLBACK = ()=>{
    console.log(`Server has started http://${HOSTNAME}:${PORT}`)
}
server.listen(PORT, HOSTNAME, BACKLOG, CALLBACK);


Interview Questions:

1. Explain the key features of Node.js?

2. What is the purpose of the Operating System Module in Node.js?

3. What is the role of the fs.createReadStream and fs.createWriteStream methods?

4. Explain the process of creating an HTTP server in Node.js?


at No comments:

Sunday, January 7, 2024

Day 25 || React Router || Router in React || Routes in React || Route in React || Link in React

 React.js Topics

Day 25:

  • React Router
    • Router
    • Routes
    • Route
    • Link

React Router:












App.js:

import HouseComponent from "./Components/HouseComponent";
import MarketComponent from "./Components/MarketComponent";
import ArtCompetitionForm from "./Components/ArtCompetition";
import Playground from "./Components/Playground";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
} from "react-router-dom";
import './App.css'
function App() {
  return (
   
    <Router>
      <div className="app-container">
        <div className="sidebar">
      <Link to ="/" className="sidebar-btn">Home</Link>
      <Link to="/deliveryService" className="sidebar-btn">Delivery Service</Link>
      <Link to="/artCompetition" className="sidebar-btn">Art Competition</Link>
      <Link to="/playground" className="sidebar-btn">Play Ground</Link>
      </div>
      <Routes>
          <Route path="/" element={<HouseComponent />}/>
          <Route path="/deliveryService" element={ <MarketComponent />}/>
          <Route path="/artCompetition" element={<ArtCompetitionForm />} />
          <Route path="/playground" element={<Playground />} />
        </Routes>
        </div>
    </Router>
  );
}

export default App;



App.css

.app-container {
  display: flex;
}

.sidebar{
    background-color: #202020;
    padding: 20px;
    flex: 0 0 240px;
}
.sidebar-btn{
    color: white;
    display: block;
    padding: 10px;
    text-decoration: none;
}
.sidebar-btn:hover{
    background-color:gray;
    border-radius: 5px;
    color:red
}


Interview Questions:

1. What is React Router, and why is it used in React applications?

2. Explain the significance of the Link component in React Router. How is it different from an anchor (<a>) tag?

3. What is the purpose of the exact prop in the Route component?




at No comments:

Saturday, January 6, 2024

Day 24 || useState in React || useEffect in React || React hooks

React.js Topics

Day 24:

  • React Hooks
    • useState()
    • useEffect()

useState():

  Playground.js

import { useState } from "react";
import "./Playground.css";
const Playground = () => {
  const [gameScore, setGameScore] = useState(0);
  const [artistName, setArtistName] = useState("Mahesh")
  const handleIncrement = () => {
    setGameScore(gameScore + 1);
  };
  const handleDecrement = () => {
    if (gameScore > 0) {
      setGameScore(gameScore - 1);
    }
  };
  const handleChangeName = (e)=>{
    setArtistName(e.target.value)
  }
  return (
    <div className="playground-container">
      <h1>Playground : Art Competition</h1>
      <h3>Artist Name: <span> {artistName}</span></h3>
      <h3>Game Score: <span>{gameScore}</span></h3>
      <div>
        <input type="text" onChange={handleChangeName}/>
        <button onClick={handleIncrement}>Increase Score</button>
        <button onClick={handleDecrement}>Decrease Score</button>
      </div>
    </div>
  );
};
export default Playground;


  Playground.css

.playground-container {
  background: url("https://images.unsplash.com/photo-1604921827342-b4bc94df162c?q=80&w=1933&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: 100% 100%;
  height: 100vh;
  text-align: center;
  border-radius: 5px;
  margin: 10px;
}
.playground-container span{
    color: red;
}
.playground-container input{
    padding: 10px;
    border-radius: 5px;
    border: none;
}
.playground-container button {
    padding: 10px;
    background-color: rgb(104, 119, 219);
    color: white;
    border-radius: 5px;
    border: none;
    margin: 5px;
}


useEffect():

DataFetchingApi.js

import { useEffect, useState } from "react";
const DataFetchingApi = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => {
        return response.json();
      })
      .then((json) => {
        console.log(json);
        return setData(json);
      });
  }, []);

  return (
    <div>
      Data Fetching Api
      <div>{data.map((item)=>{
        console.log(item.title);
       return(<li>{item.title}</li>)
      })}</div>
    </div>
  );
};
export default DataFetchingApi;


Interview Questions:

1. What is a React Hook?

2. What is the purpose of the second element returned by useState?

3. How do you update state in a functional component?

4. Explain the purpose of the dependency array in useEffect?

5. What are common use cases for useEffect?


at No comments:

Friday, January 5, 2024

Day 23 ||Event handling in React ||Form in React

 React.js Topics

Day 23:

  • Event Handling
  • Form and form validation
    Form and form validation:

    ArtCompetitionForm.js

    import './ArtCompetitionForm.css';
    const ArtCompetitionForm = () => {
      const handleSubmit = (event) => {
        const formData = {
          name: event.target.name.value,
          age: event.target.age.value,
          artworkDescription: event.target.artworkDescription.value,
        };
        console.log(formData)
        // alert("Clicked");
        event.preventDefault();
        event.target.name.value="";
        event.target.age.value="";
        event.target.artworkDescription.value ="";
      };
      //    const handleChange = (event)=>{
      //     console.log(event.target.value, "ID")
      //    }
      return (
        <div className="art-competition-form-container">
          <h1>Art Competition Form</h1>
          <form onSubmit={handleSubmit}>
            <label>Name: </label>
            <input type="text" name="name" required/>
            <label>Age: </label>
            <input type="number" name="age" required/>
            <label>Artwork Description: </label>
            <textarea name="artworkDescription" required/>
            <button type="submit">Submit</button>
          </form>
        </div>
      );
    };

    export default ArtCompetitionForm;




    ArtCompetitionForm.css

    .art-competition-form-container {
      background: url("https://images.unsplash.com/photo-1510935813936-763eb6fbc613?q=80&w=1778&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
      background-size:100% 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    .art-competition-form-container h1, label{
        display: block;
        margin: 5px;
    }
    .art-competition-form-container input,textarea{
        padding: 10px;
        width: 100%;
        border-radius: 5px;
        border: none;
    }
    .art-competition-form-container button[type="submit"]{
        width: 100%;
        background-color: blue;
        padding: 8px;
        color: white;
        border-radius: 5px;
        border: none;
        margin: 5px;
    }
    .art-competition-form-container button[type="submit"]:hover{
        background-color: green;
        cursor: pointer;
    }


    Interview Questions: 

    1. Explain the concept of event handling in React?
    2. What is the purpose of the onChange event in React? Provide an example.
    3. What is the purpose of the e.preventDefault() method in a React form?





    at No comments:

    Thursday, January 4, 2024

    Day 22 || Functional Component in React || Styling in React || Props in React

    React.js Topics

    Day 22:

    • Functional Component
    • Styling in React
    • Props

    Functional Component:

    HouseComponent.js

    import "./HouseComponent.css";
    const HouseComponent = () => {
      return (
        <div className="villageContainer">
          <h1>Color Full Village</h1>
        </div>
      );
    };

    export default HouseComponent;

    Styling in React:

    HouseComponent.css

    .villageContainer {
      color: rgb(240, 231, 231);
      text-align: center;
      background: url("https://w0.peakpx.com/wallpaper/190/244/HD-wallpaper-beautiful-landscape-nature-green-field-sky-village.jpg");
      height: 100vh;
      background-size: cover;
      padding: 100px;
      margin: 10px;
      border-radius: 5px;
    }


    Props:

    DeliveryService.js 

    import "./DeliveryService.css";
    const DeliveryService = ({ item, destination, img }) => {
      return (
        <div className="delivery-service-container">
          <h1>Delivery Details</h1>
          <div>
            <h2>
            {item} items  sending to {destination}
            </h2>
          </div>
          <div className="delivery-service-image">
            <img src={img} alt={item} />
          </div>
        </div>
      );
    };

    export default DeliveryService;


    DeliveryService.css

    .delivery-service-container{
        text-align: center;
        border: 1px solid blue;
        margin: 10px;
        border-radius: 5px;
    }
    .delivery-service-container img{
        width: 60%;
        border-radius: 5px;
    }

    MarketComponent.js

    import DeliveryService from "./DeliveryService.js";
    const MarketComponent = () => {
      return (
        <div>
          <DeliveryService
            item="Groceries"
            destination="Red House"
            img="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          />
          <DeliveryService
            item="Package"
            destination="Blue House"
            img="https://images.unsplash.com/photo-1556229040-2a7bc8a00a3e?auto=format&fit=crop&q=80&w=1930&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          />
          <DeliveryService
            item="Mail"
            destination=" Green House"
            img="https://images.unsplash.com/photo-1528329140527-75853b1e1650?auto=format&fit=crop&q=80&w=1935&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          />
        </div>
      );
    };
    export default MarketComponent;


    App.js

    import HouseComponent from "./Components/HouseComponent";
    import MarketComponent from "./Components/MarketComponent";
    function App() {
      return (
        <div>
          <HouseComponent />
          <MarketComponent />
        </div>
      );
    }

    export default App;

    Index.js

    import React from "react";
    import ReactDOM from "react-dom/client";
    import "./index.css";
    import App from "./App";

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );


    Interview Questions:

    1. What is a functional component in React?

    2. What are the different ways to apply styles in React?

    3. What are props in React?






    at No comments:
    Subscribe to: Posts (Atom)

    Top 10 | JavaScript Coding Interview Question | Beginner Level

                   JavaScript Coding Interview  Q. No. 01/10:  console . log ( "1" + "4" + "1" ) // 141 console . ...