Flare Study

Learn and Grow

Track T1 Fresco play code free

On March 30, 2024 by YTLNH   No comments

Learning app mern stack

App.js

import React, { Component } from "react";

import "./App.css";


class Home extends Component {

  BASE_URL = "http://localhost:8001/courses";

  state = {

    show: false,

    data: [],

    rating: 1,

  };

  componentDidMount = () => {

    // Write your code here

    this.handleGetData();

  };


  handleGetData = async () => {

    // Write your code here

    const res = await fetch(this.BASE_URL + "/get");

    this.setState({ data: await res.json() });

  };


  handleApply = async (id) => {

    // Write your code here

    const res = await fetch(this.BASE_URL + "/enroll/" + id, {

      method: "post",

      headers: { "Content-Type": "application/json" },

    });

    const data = await res.json();

    alert(data.message);

    this.handleGetData();

  };


  handleRating = (e) => {

    // Write your code here

    this.setState({ rating: e.target.value });

  };


  handleAddRating = async (id) => {

    // Write your code here

    const res = await fetch(this.BASE_URL + "/rating/" + id, {

      method: "PATCH",

      headers: {

        "Content-Type": "application/json",

      },

      body: JSON.stringify({ rating: this.state.rating }),

    });

    const { error } = await res.json();

    error && alert(error);

    this.handleGetData();

  };


  handleDrop = async (id) => {

    // Write your code here

    const res = await fetch(this.BASE_URL + "/drop/" + id, {

      method: "DELETE",

      headers: { "Content-Type": "application/json" },

    });

    const data = await res.json();

    alert(data.message);

    this.handleGetData();

  };


  render() {

    return (

      <div className="home">

        <header>

          <h2>ABC Learning</h2>

        </header>

        {/* write your code here */}

        <div className="cardContainer">

          {this.state.data.map((course) => {

            const {

              _id,

              courseName,

              courseDept,

              description,

              isApplied,

              isRated,

              duration,

              noOfRatings,

              rating,

            } = course;

            return (

              <div className="card" key={_id}>

                <ul>

                  <div className="header">

                    <li>{courseName}</li>

                    <li>{courseDept}</li>

                    <li>{description}</li>

                    {isApplied ? (

                      <li>

                        {!isRated && (

                          <li>

                            Rate:

                            <select

                              className="rating"

                              name="rating"

                              onChange={this.handleRating}

                            >

                              <option>1</option>

                              <option>2</option>

                              <option>3</option>

                              <option>4</option>

                              <option>5</option>

                            </select>

                            <button

                              className="rate"

                              onClick={() => {

                                this.handleAddRating(_id);

                              }}

                            >

                              Add

                            </button>

                          </li>

                        )}

                        <button

                          className="drop"

                          onClick={() => {

                            this.handleDrop(_id);

                          }}

                        >

                          Drop Course

                        </button>

                      </li>

                    ) : (

                      <li>

                        <button

                          className="btn"

                          onClick={() => {

                            this.handleApply(_id);

                          }}

                        >

                          Apply

                        </button>

                      </li>

                    )}

                  </div>

                  <div className="footer">

                    <li>

                      {duration} hrs . {noOfRatings} Ratings . {rating}/5

                    </li>

                  </div>

                </ul>

              </div>

            );

          })}

        </div>

      </div>

    );

  }

}


export default Home;

Users.js

const express = require("express");

const Course = require("../mongoose/models/courses");


//setting up the student router

const usersRouter = express.Router();


//write your code here


usersRouter.post('/courses/enroll/:id', async (req, res, next) => {

    const id = req.params.id;

    const course = await Course.findById(id);

    try {

        if (course.isApplied) {

            return res.status(403).send({

                "message": "You have already applied for this course"

            })

        }

        course.isApplied = true;

        await course.save();

        return res.send({

            "message": "You have successfully enrolled for the course"

        });

    } catch (err) {

        res.sendStatus(400)

    }

})



usersRouter.delete('/courses/drop/:id', async (req, res, next) => {

    const id = req.params.id;

    const course = await Course.findById(id);

    try {

        if (!course.isApplied) {

            return res.status(403).send({

                "error": "You have not enrolled for this course"

            })

        }

        course.isApplied = false;

        await course.save();

        return res.send({

            "message": "You have dropped the course"

        });

    } catch (err) {

        res.sendStatus(400)

    }

})


usersRouter.get('/courses/get', async (req, res, next) => {

    const courses = await Course.find();

    return res.send(courses);


})


usersRouter.patch('/courses/rating/:id', async (req, res, next) => {

    const id = req.params.id;

    try {

        const course = await Course.findById(id);

        const { isApplied, isRated, noOfRatings, rating } = course

        if (!isApplied) {

            return res.status(403).send({

                "error": "You have not enrolled for this course"

            })

        }

        if (isRated) {

            return res.status(403).send({

                "error": "You have already rated this course"

            })

        }

        const newRating = req.body.rating;

        if (!newRating) {

            return res.sendStatus(400);

        }

        const resNoOfRatings = noOfRatings + 1;

        const resRating = (((rating || 0) * noOfRatings + newRating) / resNoOfRatings).toFixed(1);

        course.rating = resRating;

        course.noOfRatings = resNoOfRatings;

        course.isRated = true;

        await course.save();

        res.send({

            "message": "You have rated this course"

        })

    }

    catch {

        res.sendStatus(400);

    }


})

module.exports = usersRouter;

 

CCBP Nxtwave Interview Assignment Code | You Know the Works Assignment Code | Simple HTML Assignment

On April 22, 2023 by YTLNH   No comments

CCBP Nxtwave Interview Assignment Code | You Know the Works Assignment Code |

 Simple HTML Assignment

Index File: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>You Know the Works Assignment</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container py-5">
    <div class="row pt-5 border-bottom border-dark">
      <div class="col-12 col-md-2 mb-5">
            <div>
                <div class="mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                  </svg></div>
                  <div>
                    PROFILE
                  </div>
            </div>

        </div>
        <div class="col-12 col-md-5 border-right">
            <div>
                <h1>Giacobbe Valter</h1>
                <p>Developer</p>
            </div>
        </div>
        <div class="col-12 col-md-5">
<div>
    <p>Address: 174, Ttksalai, Alwarpet</p>
    <p>Phone: +(91) 9634991221</p>
    <p>Website: crateinslokt.net</p>
</div>
        </div>
  </div>
  <div class="row pt-5 border-bottom border-dark">
    <div class="col-12 col-md-2 mb-5">
          <div>
              <div class="mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-person-workspace" viewBox="0 0 16 16">
                    <path d="M4 16s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H4Zm4-5.95a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
                    <path d="M2 1a2 2 0 0 0-2 2v9.5A1.5 1.5 0 0 0 1.5 14h.653a5.373 5.373 0 0 1 1.066-2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9h-2.219c.554.654.89 1.373 1.066 2h.653a1.5 1.5 0 0 0 1.5-1.5V3a2 2 0 0 0-2-2H2Z"/>
                  </svg>
            </div>
                <div>
                  Work
                </div>
          </div>

      </div>

      <div class="col-12 col-md-10">
<div class="d-flex work-exp mb-3">
  <div class="me-5">
    2022-Present
  </div>
  <div>
    <div>
        <b>    BornSites Infotech - Developer
        </b>
    </div>
    <p>Worked on Theme Development</p>

  </div>

</div>
<div class="d-flex work-exp mb-3">
    <div  class="me-5">
      2022-Present
    </div>
    <div>
        <div>
            <b>      SuperclusterPi - Developer
            </b>
        </div>
        <p>Worked on Company Store Pagespeed Optimization Process</p>

    </div>
  </div>
  <div class="d-flex work-exp mb-3">
    <div class="me-5">
      2022-Present
    </div>
    <div>
        <div>
            <b>      BornSites Infotech -  Developer
            </b>
        </div>
        <p>Worked for Cutom Sections Development</p>

    </div>
  </div>
      </div>
</div>
<div class="row border-bottom border-dark">
    <div class="col-12 col-md-2 margin-desktop">
          <div>
              <div class="mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-journal-check" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                    <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                    <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                  </svg>
            </div>
                <div>
                  Skills & Awards
                </div>
          </div>

      </div>
      <div class="col-12 col-md-5 border-right">
          <div class="margin-desktop">
              <div class="d-flex justify-content-between mb-3">
                <div>HTML</div>
              <div class="skills-svg"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg></div>
              </div>
              <div class="d-flex justify-content-between mb-3">
                <div>Javascript</div>
              <div class="skills-svg"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg></div>
              </div>
              <div class="d-flex justify-content-between mb-3">
                <div>React</div>
              <div class="skills-svg"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg></div>
              </div>
              <div class="d-flex justify-content-between mb-3">
                <div>Liquid</div>
              <div class="skills-svg"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
                <circle cx="8" cy="8" r="8"/>
              </svg></div>
              </div>
          </div>
      </div>
      <div class="col-12 col-md-5">
<div class="margin-desktop">
    <div class="d-flex work-exp mb-3">
        <div class="me-5">
          2022
        </div>
        <div>
          <div>
              <b>    Best Developer Award
              </b>
          </div>
          <p>Theme Development</p>
      
        </div>
      
      </div>
      <div class="d-flex work-exp mb-3">
        <div class="me-5">
          2021
        </div>
        <div>
          <div>
              <b>Best Developer Award
              </b>
          </div>
          <p>Development</p>
      
        </div>
      
      </div>
</div>

      </div>
</div>
<div class="row pt-5 border-bottom border-dark">
    <div class="col-12 col-md-2 mb-5">
          <div>
              <div class="mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16">
                    <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>
                  </svg>
            </div>
                <div>
                  Interests
                </div>
          </div>

      </div>

      <div class="col-12 col-md-10 d-flex justify-content-between">
<div>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-tv" viewBox="0 0 16 16">
            <path d="M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zM13.991 3l.024.001a1.46 1.46 0 0 1 .538.143.757.757 0 0 1 .302.254c.067.1.145.277.145.602v5.991l-.001.024a1.464 1.464 0 0 1-.143.538.758.758 0 0 1-.254.302c-.1.067-.277.145-.602.145H2.009l-.024-.001a1.464 1.464 0 0 1-.538-.143.758.758 0 0 1-.302-.254C1.078 10.502 1 10.325 1 10V4.009l.001-.024a1.46 1.46 0 0 1 .143-.538.758.758 0 0 1 .254-.302C1.498 3.078 1.675 3 2 3h11.991zM14 2H2C0 2 0 4 0 4v6c0 2 2 2 2 2h12c2 0 2-2 2-2V4c0-2-2-2-2-2z"/>
          </svg>
    </div>
    <p>Internet</p>
</div>
<div>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
          </svg>
    </div>
    <p>Sketching</p>
</div>
<div>
    <div><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-film" viewBox="0 0 16 16">
        <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
      </svg></div>
    <p>Movies</p>
</div>
<div>
    <div><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-file-music" viewBox="0 0 16 16">
        <path d="M10.304 3.13a1 1 0 0 1 1.196.98v1.8l-2.5.5v5.09c0 .495-.301.883-.662 1.123C7.974 12.866 7.499 13 7 13c-.5 0-.974-.134-1.338-.377-.36-.24-.662-.628-.662-1.123s.301-.883.662-1.123C6.026 10.134 6.501 10 7 10c.356 0 .7.068 1 .196V4.41a1 1 0 0 1 .804-.98l1.5-.3z"/>
        <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
      </svg></div>
    <p>Music</p>
</div>
      </div>
</div>
<div class="row pt-5 border-bottom border-dark">
    <div class="col-12 col-md-2 mb-5">
          <div>
              <div class="mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
                    <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                  </svg>
            </div>
                <div>
                  Work
                </div>
          </div>

      </div>

      <div class="col-12 col-md-10">
<div class="d-flex work-exp mb-3">
  <div class="me-5">
    2010-14
  </div>
  <div>
    <div>
        <b>    MDN college
        </b>
    </div>
    <p>BTech, Computer Science</p>
  </div>
</div>
<div class="d-flex work-exp mb-3">
    <div  class="me-5">
      2016-19
    </div>
    <div>
        <div>
            <b> Khodo University
            </b>
        </div>
        <p>Bsc, Computer Science</p>
    </div>
  </div>

      </div>
</div>

    
</div>
</body>
</html>

CSS File:

body{
    background-color: #a699db;
    color: #2A2A63;
}
.work-exp{
    flex-direction: column;
}
.margin-desktop{
    margin: 20px 0;
}
.skills-svg svg{
    margin: 0 10px;
}

@media(min-width:768px){
    .work-exp{
        flex-direction: row;
    }
    .border-right{
        border-right: 1px solid rgb(255, 252, 252);
    }
    .margin-desktop{
        margin: 40px 0;
    }
}