diff --git a/company.js b/company.js index 8b13789..41639bc 100644 --- a/company.js +++ b/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 :

+ Name: ${employee.name}

+ Department: ${employeeType.value} `; + salaryInfo.innerHTML = `Salary Info :

+ Salary : ${employee.salary} $

+ Annual Salary: ${employee.calculateAnnualSalary()} $

+ 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 :

+ Name: ${manager.name}

+ Department: ${employeeType.value}

+ Manager of : ${manager.department}`; + salaryInfo.innerHTML = `Salary Info :

+ Salary : ${manager.salary} $

+ Annual Salary: ${totalSalary} $

+ 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 :

+ Name: ${engineer.name}

+ Department: ${employeeType.value}

+ Manager of: ${engineer.department}`; + salaryInfo.innerHTML = `Salary Info :

+ Salary : ${engineer.salary} $

+ Annual Salary: ${totalSalary} $

+ 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"; + +}); diff --git a/image/employee.png b/image/employee.png new file mode 100644 index 0000000..7f04bcb Binary files /dev/null and b/image/employee.png differ diff --git a/image/engineer.png b/image/engineer.png new file mode 100644 index 0000000..f48098d Binary files /dev/null and b/image/engineer.png differ diff --git a/image/manager.png b/image/manager.png new file mode 100644 index 0000000..426f718 Binary files /dev/null and b/image/manager.png differ diff --git a/index.html b/index.html index b0ff8bc..eae5d1a 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,17 @@ +

Company System

Employee Details

- + - + - +
-
+

Results

-
diff --git a/style.css b/style.css index af7e803..7b8b0f6 100644 --- a/style.css +++ b/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; +}