├── README.md ├── index.css ├── index.html └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # Masai_Evaluation_Report 2 | In Masai School every Monday there is an evaluation and we get a score and is converted out of 10 and according to that students unit movement is decided will student get unit movement or Async. 3 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | div { 2 | display: flex; 3 | justify-content: space-around; 4 | } 5 | form { 6 | margin: 0 auto; 7 | margin-top: 50px; 8 | width: 30%; 9 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 10 | padding: 30px; 11 | } 12 | 13 | label { 14 | font-size: 20px; 15 | } 16 | 17 | table { 18 | font-family: Arial, Helvetica, sans-serif; 19 | border-collapse: collapse; 20 | width: 60%; 21 | margin: auto; 22 | margin-top: 50px; 23 | text-align: center; 24 | } 25 | 26 | table td, 27 | table th { 28 | border: 1px solid #ddd; 29 | padding: 8px; 30 | text-align: center; 31 | } 32 | 33 | table tr:nth-child(even) { 34 | background-color: #8caacf; 35 | } 36 | 37 | table tr:hover { 38 | background-color: #ddd; 39 | } 40 | 41 | table th { 42 | padding-top: 12px; 43 | padding-bottom: 12px; 44 | text-align: left; 45 | background-color: #0468aa; 46 | color: white; 47 | text-align: center; 48 | } 49 | 50 | * { 51 | box-sizing: border-box; 52 | } 53 | 54 | input[type="text"], 55 | input[type="number"], 56 | select, 57 | textarea { 58 | width: 100%; 59 | padding: 12px; 60 | border: 1px solid #ccc; 61 | border-radius: 4px; 62 | box-sizing: border-box; 63 | margin-top: 6px; 64 | margin-bottom: 16px; 65 | resize: vertical; 66 | } 67 | 68 | input[type="submit"] { 69 | background-color: #2b619e; 70 | color: white; 71 | padding: 12px 20px; 72 | border: none; 73 | border-radius: 20px; 74 | cursor: pointer; 75 | width: 100%; 76 | font-size: 20px; 77 | } 78 | 79 | input[type="submit"]:hover { 80 | background-color: #3973b6; 81 | } 82 | 83 | h1 { 84 | text-align: center; 85 | font-size: 50px; 86 | text-transform: uppercase; 87 | font-family: monospace; 88 | color: #2b619e; 89 | text-decoration: underline; 90 | } 91 | 92 | 93 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | U2C3 8 | 9 | 10 | 11 | 12 |

Masai Evaluation Report

13 | 14 |
15 | 16 |
17 |
18 |
19 |
20 |
26 |
27 |
32 |
33 |
38 |
39 |
44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
NameBatchDSASkillathonCodingPercentage %Status
63 |
64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // write code here, dont change anything in HTML and css files 2 | // refer to id's mentioned in html files carefully 3 | // Follow the exact column order for tables,for eg: name should be filled under "name" column 4 | // we are using form here, make sure you are using "submit" eventListener , or else you will get 0 marks 5 | 6 | var th8=document.createElement("th"); 7 | th8.innerText="Delete"; 8 | document.querySelector("thead tr").append(th8); 9 | 10 | 11 | document.querySelector("form").addEventListener("submit",findResult); 12 | 13 | function findResult(){ 14 | 15 | 16 | event.preventDefault(); 17 | var name=document.querySelector("#name").value; 18 | var batch=document.getElementById("batch").value; 19 | var dsa=document.getElementById("dsa").value; 20 | var skill=document.getElementById("cs").value; 21 | var code=document.getElementById("coding").value; 22 | 23 | // console.log(name,batch,dsa,skill,code); 24 | 25 | var percent= ((Number(dsa)+Number(skill)+Number(code))/30)*100; 26 | 27 | var status=""; 28 | if(percent>=50){ 29 | status="Regular"; 30 | }else{ 31 | status="Async"; 32 | } 33 | 34 | var del="Delete"; 35 | 36 | var tr=document.createElement("tr"); 37 | 38 | var td1=document.createElement("td"); 39 | td1.innerText=name; 40 | var td2=document.createElement("td"); 41 | td2.innerText=batch; 42 | var td3=document.createElement("td"); 43 | td3.innerText=dsa; 44 | var td4=document.createElement("td"); 45 | td4.innerText=skill; 46 | var td5=document.createElement("td"); 47 | td5.innerText=code; 48 | var td6=document.createElement("td"); 49 | td6.innerText=percent; 50 | var td7=document.createElement("td"); 51 | 52 | if(percent>=50){ 53 | td7.innerText="Regular"; 54 | td7.style.backgroundColor="green"; 55 | }else{ 56 | td7.innerText="Async"; 57 | td7.style.backgroundColor="red"; 58 | } 59 | var td8=document.createElement("td"); 60 | td8.innerText="delete"; 61 | td8.style.color="red"; 62 | td8.addEventListener("click",delRow); 63 | 64 | 65 | tr.append(td1,td2,td3,td4,td5,td6,td7,td8); 66 | 67 | document.querySelector("tbody").append(tr); 68 | 69 | 70 | } 71 | function delRow(){ 72 | event.target.parentNode.remove(); 73 | } --------------------------------------------------------------------------------