// Made by Monical document.addEventListener('DOMContentLoaded', function(){ $(document).ready(function(){ /* TOC 1 DATA 2 JQUI SETTINGS 3 SELECT LANGUAGE EVENT 4 SHOW DETAILS EVENT 5 CALCULATE PROFICIENTY EVENT 6 CALCULATE SCORE FUNC 7 DISPLAY RESULTS IN HTML FUNC 8 PIECHART */ //----------------------1 DATA-----------------------\\ var languages=[ { langName:"HTML", features:[ "

Semantics Elements

nav, header, footer, main, article, section, aside

", "

Preformat

code, xmp, pre, em, i, sup, sub, abbr, blockquote, q, cite, dl, dt, dd, s, mark

", "

Basics

h1-6, p, div, a, br, span, hr

", "

Forms

form, button, input, fieldset, legend, textarea, legend, select, optgroup,option

", "

List

ul, ol, li, datalist

", "

Tables

table, thead, tbody, tfoot, th, tr, td, caption,

", "

Media

img, picture object, param embed, figure, area, video, audio, source iframe, svg, canvas

", "

Header

title, link, meta, script, noscript, style,

", "

Other

progress, meter, marquee, output, kbd, script, data, details ,summary, dialogue,

" ] }, { langName:"CSS", features:[ "

text

text-transform, text-decoration, text-align, text-indent, word-spacing, text-shadow line-height

", "

fonts

font-size, font-weight, font-family, font-style, font-variant color

", "

Box Model

Outline, border, padding, margin

", "

Units

px, em, rem, fr %

", "

Sizing

width, height, max, min

", "

background

background-color(linear-gradient, radial-gradient, conic-gradient), background-position, background-image, background-size, background-repeat, background-origin, background-clip, background-attachment

", "

Pseudo Elements

nth-child(odd/even),before, after

", "

Positioning

relative, absolute, fixed

", "

Grids

grid-template, grid-row, grid-column, fr, grin-auto-flow:column, object-fit:cover

", "

FlexBox

flex-shrink/grow, flex-basis, flex-direction, flex-wrap, flex-flow, align-items, align-content, justify-content

", "

animations

transform [skew(), translate(),rotate()], @keyframes{}

", "

Media Queries

@media, not, only, mediatype, and | or| not | all

", "

Other

:root{}, mix-blend-mode:multiply, var(--val)

" ] } ] //---------------2 JQUI SETTINGS----------------\\ $('table').hide(); $('#selected-language').selectmenu(); $('#assess').button(); $('#calculate-btn').hide(); $('.ui.input> option').addClass('secondary-font'); //------------------ 3 SELECT LANGUAGE EVENT------------------------------\\ $('#assess').click(function(){ var lang=languages.filter(function(lang){ return lang.langName==$('#selected-language').val(); }); displayLanguage(lang); }); //------------- 4 SHOW DETAILS EVENT-----------------\\ $(document).on('click','dt', function(){ $(this).next('dd').slideToggle(500); $('#info').fadeOut(); }); //------------- 5 CALCULATE PROFICIENCY EVENT-------------------------\\ $('#calculate-btn').on('click',function(e){ var error=false; var scoresLength=$('input[type="number"]').length; // e.preventault(); for(var i=0;i< scoresLength;i++){ if($("#"+i).val()<0 || $("#"+i).val()>10){ error=true; } } if(error===true){ $('.ui.error.message').show(1000); } else{ $('.ui.error.message').fadeOut(1000); calculate(); } }); //--------------------6 CALCULATE SCORE---------------------------\\ function calculate(){ var scoreArr=[], scoresLength=document.querySelectorAll('input[type=number]').length, percentage, i; //highlighting for( i=0; i4 && $("#"+i).val()<7){ $("#"+i).parentsUntil("tbody").css({"background":"yellow"}); } else if($("#"+i).val()>=7){ $("#"+i).parentsUntil("tbody").css({"background":"green"}); } } //get score for(i=0;i< scoresLength;i++){ scoreArr.push(parseInt($("#"+i).val())); } //calculate score var totalScore=scoreArr.reduce(function(acc,curr){ return acc+curr; }); // calculate as percentage percentage=Math.floor((totalScore/(scoresLength*10))*100); //display $("#result-display").html("You are " +percentage+"% Proficient"); $('tbody').sortable(); showPieChart(percentage) } //----------------------7 DISPLAY INFO IN HTML------------------------\\ function displayLanguage(lang){ var str=""; // console.log(lang[0]); // console.log(lang[0].langName); $('#display-table thead').html(`${lang[0].langName} FeaturesRate out of 10`); for(var i in lang[0].features){ str+=`${lang[0].features[i]}` } $('#display-table tbody').html(str); $('dd').hide(); $('#calculate-btn').show().button(); $('table').show(1000); $('#info').show(1000, function(){ setTimeout(function(){ $('#info').fadeOut(1000); },10000); }); } //---------------------8 PIE CHART--------------------\\ function showPieChart(percentage){ var ctx1=$('#pie-chart-canvas-1'); var data1={ labels:["Know", "Dont Know"], datasets:[ { label:"Score", data:[percentage,100-percentage], backgroundColor:[ // "#A1A1A1", // "#DC143C", "#53c936", "#f20e0e" ], borderColor:[ "000", // "#1D7A46", "#E39371" ], borderWidth:[1,1] } ] } var options={ title:{ display:false, position:"top", text:"Proficiency", fontSize:18, fontColor:"#BABABA" } } var chart1=new Chart (ctx1, { type:"pie", data:data1, options:options }) } }) //jq scope end })

Web developer proficiency calculator[level 9 kode]