Caculadora de notas - Html / Js

Necesito que escribas una calculadora de notas  responsiva usando js y html, necesitas usar tus habilidades de CSS para brindar una excelente apariencia.

Descripción:
1) Adjunto puede encontrar una referencia en términos de campos y funcionalidades (esto es solo una referencia)
3) la calculadora deberá ejecutarse en mi sitio web - wordpres , para que el proyecto se considere finalizado.


Fórmula.
- (Nota 1 *porcentaje 1) + (nota 2 x porcentaje2) + (nota n x porcentaje n). = Nota final
- rango de calificaciones (0 a 20)
- porcentaje (0 % a 100 %)
- nota final mínima para su aprobación 10,5

Más detalles:
1) Todos los campos de porcentajes deben contar al 100% para calcular el resultado.
2) Es necesario completar la calificación y el porcentaje para calcular el resultado.
3) Debería haber una matriz con códigos de resultados que me permitan modificar el texto del resultado.
4) botón para restablecer la calculadora a los valores iniciales
2) Hay algunos valores predeterminados la primera vez que se carga la calculadora; vea la primera imagen.


Resultados y errores (tendremos que solucionar el problema hasta que todo funcione correctamente)
* nota final >= 10,5 - aprobado.
* Nota final < 10,5 desaprobada
* errores por falta de valores en los campos

¿Qué pasa si el estudiante es desaprobado? tiene la oportunidad de realizar un examen final.
Necesitamos mostrarle un mensaje con la cantidad de puntos que se necesitan para aprobar o Si no hay posibilidad de aprobar también debemos mostrarle el mensaje.

(Calificación final + examen extra) /2 > =10,5 = aprobado.