sol the task with ui/ux

company.js

@@ -1 +1,173 @@
+const employeeName = document.getElementById("employeeName");
+const employeeSalary = document.getElementById("employeeSalary");
+const employeeType = document.getElementById("employeeType");
+const managerDepartment = document.getElementById("managerDepartment");
+const engineerExperience = document.getElementById("engineerExperience");
+const managerDepartmentLabel = document.getElementById(
+  "managerDepartmentLabel"
+);
+const engineerExperienceLabel = document.getElementById(
+  "engineerExperienceLabel"
+);
+const employeeForm = document.getElementById("employeeForm");
+const submitButton = document.getElementById("submit");
+const results = document.querySelector(".results");
 
+////////////////////
+class Employee {
+  constructor(name, salary) {
+    this.name = name;
+    this.salary = salary;
+  }
+  calculateAnnualSalary() {
+    return this.salary * 12;
+  }
+}
+class Manager extends Employee {
+  constructor(name, salary, department) {
+    super(name, salary);
+    this.department = department;
+  }
+  calculateAnnualSalary() {
+    const baseSalary = super.calculateAnnualSalary();
+    const bonus = baseSalary * 0.1;
+    const totalSalary = Math.floor(baseSalary) + Math.floor(bonus);
+    return { totalSalary, bonus };
+  }
+}
+class Engineer extends Employee {
+  constructor(name, salary, department, experienceYears) {
+    super(name, salary);
+    this.department = department;
+    this.experienceYears = experienceYears;
+  }
+  calculateAnnualSalary() {
+    if (this.experienceYears >= 5) {
+      const baseSalary = super.calculateAnnualSalary();
+      const bonus = baseSalary * 0.1;
+      const totalSalary = baseSalary + Math.floor(bonus);
+      return { totalSalary, bonus };
+    } else {
+      const baseSalary = super.calculateAnnualSalary();
+      const bonus = 0;
+      const totalSalary = baseSalary + Math.floor(bonus);
+      return { totalSalary, bonus };
+    }
+  }
+}
+
+employeeType.addEventListener("change", (e) => {
+  if (employeeType.value === "employee") {
+    managerDepartment.style.display = "none";
+    managerDepartmentLabel.style.display = "none";
+    engineerExperience.style.display = "none";
+    engineerExperienceLabel.style.display = "none";
+    return;
+  }
+  if (employeeType.value === "manager") {
+    managerDepartment.style.display = "block";
+    managerDepartmentLabel.style.display = "block";
+    engineerExperience.style.display = "none";
+    engineerExperienceLabel.style.display = "none";
+    return;
+  }
+  if (employeeType.value === "engineer") {
+    managerDepartment.style.display = "block";
+    managerDepartmentLabel.style.display = "block";
+    engineerExperience.style.display = "block";
+    engineerExperienceLabel.style.display = "block";
+  }
+});
+submitButton.addEventListener("click", (e) => {
+  e.preventDefault();
+  const mainDiv = document.createElement("div");
+  const employeeAndSalaryDiv = document.createElement("div");
+  const employeeDiv = document.createElement("div");
+  const salaryDiv = document.createElement("div");
+  const employeeImg = document.createElement("img");
+  const employeeInfo = document.createElement("p");
+  const salaryInfo = document.createElement("p");
+  mainDiv.classList.add("employee-card");
+  employeeAndSalaryDiv.classList.add("employeeAndSalaryDiv");
+  salaryDiv.classList.add("salaryDiv");
+  employeeDiv.classList.add("employeeDiv");
+  //////////////
+  if (employeeType.value === "employee") {
+    const employee = new Employee(employeeName.value, employeeSalary.value);
+    employeeInfo.innerHTML = `Employee Info : <br> <br>
+    Name: ${employee.name}<br> <br>
+    Department: ${employeeType.value} `;
+    salaryInfo.innerHTML = `Salary Info : <br><br>
+    Salary : ${employee.salary} $<br><br>
+    Annual Salary: ${employee.calculateAnnualSalary()} $<br><br>
+    Bonus: 0 $`;
+    employeeImg.src = "/image/employee.png";
+    employeeDiv.appendChild(employeeInfo);
+    salaryDiv.appendChild(salaryInfo);
+    employeeAndSalaryDiv.appendChild(employeeDiv);
+    employeeAndSalaryDiv.appendChild(salaryDiv);
+    mainDiv.appendChild(employeeImg);
+    mainDiv.appendChild(employeeAndSalaryDiv);
+    results.appendChild(mainDiv);
+  }
+  if (employeeType.value === "manager") {
+    const manager = new Manager(
+      employeeName.value,
+      employeeSalary.value,
+      managerDepartment.value
+    );
+    const { totalSalary, bonus } = manager.calculateAnnualSalary();
+    console.log(manager.calculateAnnualSalary().bonus);
+    employeeInfo.innerHTML = `Employee Info : <br><br> 
+    Name: ${manager.name}<br> <br>
+    Department: ${employeeType.value} <br><br>
+    Manager of : ${manager.department}`;
+    salaryInfo.innerHTML = `Salary Info : <br> <br>
+    Salary : ${manager.salary} $<br> <br>
+    Annual Salary: ${totalSalary} $<br><br>
+    Annual Bonus: ${bonus} $`;
+    employeeImg.src = "/image/manager.png";
+
+    employeeDiv.appendChild(employeeInfo);
+    salaryDiv.appendChild(salaryInfo);
+    employeeAndSalaryDiv.appendChild(employeeDiv);
+    employeeAndSalaryDiv.appendChild(salaryDiv);
+    mainDiv.appendChild(employeeImg);
+    mainDiv.appendChild(employeeAndSalaryDiv);
+    results.appendChild(mainDiv);
+  }
+  if (employeeType.value === "engineer") {
+    const engineer = new Engineer(
+      employeeName.value,
+      employeeSalary.value,
+      managerDepartment.value,
+      engineerExperience.value
+    );
+    const { totalSalary, bonus } = engineer.calculateAnnualSalary();
+    employeeInfo.innerHTML = `Employee Info : <br> <br>
+    Name: ${engineer.name}<br> <br>
+    Department: ${employeeType.value} <br><br>
+    Manager of: ${engineer.department}`;
+    salaryInfo.innerHTML = `Salary Info : <br> <br>
+    Salary : ${engineer.salary} $<br> <br>
+    Annual Salary: ${totalSalary} $<br><br>
+    Annual Bonus: ${bonus} $`;
+    employeeImg.src = "/image/engineer.png";
+
+    employeeDiv.appendChild(employeeInfo);
+    salaryDiv.appendChild(salaryInfo);
+    employeeAndSalaryDiv.appendChild(employeeDiv);
+    employeeAndSalaryDiv.appendChild(salaryDiv);
+    mainDiv.appendChild(employeeImg);
+    mainDiv.appendChild(employeeAndSalaryDiv);
+    results.appendChild(mainDiv);
+  }
+});
+const darkModeToggle = document.getElementById("darkModeToggle");
+const body = document.body;
+
+darkModeToggle.addEventListener("click", () => {
+  body.classList.toggle("dark");
+  body.style.transition = "0.5s";
+
+});

index.html

@@ -7,15 +7,17 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <button id="darkModeToggle"><span id="darkModeIcon">🌙</span></button>
     <h1>Company System</h1>
     <form id="employeeForm">
         <h2>Employee Details</h2>
         <label for="employeeName">Name:</label>
-        <input type="text" id="employeeName" required>
+        <input type="text" id="employeeName"  placeholder="EMPLOYEE NAME" required>
         <label for="employeeSalary">Salary:</label>
-        <input type="number" id="employeeSalary" required>
+        <input type="number" id="employeeSalary" placeholder="EMPLOYEE SALARY" required>
         <label for="employeeType">Employee Type:</label>
         <select id="employeeType">
+            <option>Select</option>
             <option value="employee">Employee</option>
             <option value="manager">Manager</option>
             <option value="engineer">Engineer</option>
@@ -24,11 +26,10 @@ <h2>Employee Details</h2>
         <input type="text" id="managerDepartment" required>
         <label for="engineerExperience" id="engineerExperienceLabel">Experience Years:</label>
         <input type="number" id="engineerExperience" required>
-        <button type="submit">Add Employee</button>
+        <button type="submit" id="submit">Add Employee</button>
     </form>
-    <div id=" results">
+    <div class="results">
         <h2>Results</h2>
-        <div id="employeeResults"></div>
     </div>
     <script src="company.js"></script>
 </body>

style.css

@@ -6,7 +6,29 @@ body {
   justify-items: center;
   align-items: center;
 }
+.dark {
+  background-color: #333;
+  color: #fff;
+}
 
+.dark .results {
+  background-color: #333; /* Dark background color */
+  color: white;
+  transition: background-color 0.5s;}
+#darkModeToggle {
+  position: fixed;
+  width: fit-content;
+  font-size: 4rem;
+  border: none;
+  cursor: pointer;
+  position: fixed;
+  top: 20px;
+  right: 10px;
+  background-color: transparent;
+}
+#darkModeToggle:hover {
+  color: #999;
+}
 h1 {
   text-align: center;
 }
@@ -17,7 +39,12 @@ form {
   padding: 10px;
   margin-bottom: 20px;
 }
-
+#employeeForm {
+  border: 1px solid #ccc;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 10px;
+}
 label {
   display: block;
   margin-bottom: 5px;
@@ -50,12 +77,49 @@ button:hover {
   background-color: #0056b3;
 }
 
-#results {
-  border: 1px solid #ccc;
+.results {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
   padding: 10px;
+  text-align: center;
+  font-size: 1.2rem;
+  color: #333;
+  border-radius: 20px;
+  background-color: #fff; /* Dark background color */
+  transition: background-color 0.5s;
 }
 
 #results h2 {
   margin-bottom: 10px;
   display: none;
 }
+.employee-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid #ccc;
+  margin: 20px 0;
+  border-radius: 20px;
+}
+.employeeAndSalaryDiv {
+  display: flex;
+  justify-content: space-between;
+}
+.salaryDiv {
+  text-align: left;
+  border-left: 1px solid;
+  padding-left: 10px;
+}
+.employeeDiv {
+  text-align: left;
+  padding-right: 10px;
+}
+img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  padding-right: 20px;
+}