Coding

Training hw

Biswas Parajuli Jun 11, 2026 80 views 0 downloads

BCA Second-sem React js

About this Note

A simple basic demo of exporting different JavaScript files and importing them into a single file.

Content

Create This File

Create a project folder named app.

Inside the app folder, create a folder named js.

Inside the js folder, create a file named main.js.

Inside the js folder, create a file named student.js.

Inside the js folder, create a file named teacher.js.

Inside the js folder, create a file named college.js.

In the root of the app folder, create a file named index.html.

college.js

export function bca() {
  let college = document.getElementById("college").innerHTML = `
    <h1> Divya Gyan College. </h1>
    <small> This is practice of coding. </small>
  `
}

main.js

import {bca} from "./college.js";
import reactJs from "./teacher.js";
import {javascript} from "./student.js"

bca();
javascript();
reactJs();

student.js

export function javascript(){
  let student = document.getElementById("student").innerHTML = `
  <h3> Students are learning javaScript course. </h3>
  `
}

teacher.js

function reactJs(){
  let teacher = document.getElementById("teacher").innerHTML = `
  <p> I am teacher. I am teaching about React.js </p>
  `
}

export default reactJs;

index.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Before react</title>
</head>
<style>
  * {
    font-family: Arial, Helvetica, sans-serif;
  }

  main {
    max-width: 300px;
    box-shadow: 2px 2px 7px gray;
    padding: 1rem;
    border-radius: 10px;
    margin: auto;
  }

  div {
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: 20px;
  }

  h1{
    margin: 0px;
  }
  small{
    background: rgb(0, 72, 255);
    color: white;
    padding: 2px;
  }

  #college {
    background-color: #a6ffa3;
    text-align: center;
  }

  #teacher {
    background-color: #ffbdbd;
  }

  #student {
    background-color: #ddffdd;
  }
</style>

<body>
  <main>

    <div id="college"></div>
    <div id="teacher"></div>
    <div id="student"></div>
  </main>

  <script type="module" src="./js/main.js"></script>
</body>

</html>