JavaScript
var buildComputer = function (memory, display, processor) {
var computer = {
basicPrice: 5000,
processor: processor,
display: display,
memory: memory,
getDescription: function () {
return 'computer with processor ' + computer.processor + ', diagonal ' + computer.display + ', RAM ' + computer.memory;
},
getPrice: function () {
return computer.basicPrice;
}
};
return computer;
};
var myComputer = buildComputer(8, 13, 'i7');
console.log('In the cart ' + myComputer.getDescription() + ' that costs ' + myComputer.getPrice());
Thanks! We’ll fix everything at once!
Result
- Before the buildComputer function, create object processorPrice with properties 'i5': 5000, 'i7': 10000.
- After it, create object displayPrice with properties 13: 5000, 15: 10000.
- Add the memoryPrice object with properties 8: 3000, 16: 4000.
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>var b=document.documentElement.classList;b.remove('no-js');if(!window.Promise||!window.sessionStorage||!!sessionStorage.getItem('muller.v2')){b.add('muller')}</script><link rel="dns-prefetch" href="https://assets.htmlacademy.org"><script async src="https://www.googletagmanager.com/gtag/js?id=G-MXPCRXM48C"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MXPCRXM48C');
</script><script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("df11525b6880a3c5e2af14f9b6238408", null,{
includeUtm: true,
includeGclid: true,
includeReferrer: true,
deviceIdFromUrlParam: true
}, function (instance) {
window.amplitudeLoaded = true;
});
</script><link rel="stylesheet" href="https://assets.htmlacademy.org/css/core.v284.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/profile.v236.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course.v246.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-light.v20.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/course-interface-en.v2.css"><script src="https://assets.htmlacademy.org/js/sentry.js" data-sentry="3774884cc81746ed84c0ba7c5cd4ac7b" data-project="26" data-version="2"></script><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/cookies.css"><link rel="preload" as="script" href="https://assets.htmlacademy.org/js/general.v274.js"><title>Object as a dictionary — Objects — HTML Academy</title><meta name="csrf-token" content="17164caf322823086fca37a7326b9bd2a54"><meta property="og:type" content="website"><meta property="og:site_name" content="HTML Academy"><meta name="twitter:url" property="og:url" content="https://htmlacademy.org"><meta name="twitter:title" property="og:title" content="Interactive online courses HTML Academy"><meta name="twitter:description" property="og:description" content="Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks."><meta name="twitter:image" property="og:image" content="https://htmlacademy.org/og/htmlacademy.png"><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="https://htmlacademy.org/courses/javascript-programming/objects/map"><meta name="theme-color" content="#2f358f"></head><body class="course-interface course-interface--light" data-base="/assets/courses/7/"><header class="page-header page-header--course"><div class="page-header__inner"><div class="page-header__top"><a class="page-header__logo" href="/" aria-label="HTML Academy Home"><img src="https://assets.htmlacademy.org/img/logo--small.svg?cs=1218aec0be4a5f23db79ad29a14e30f7f9fb9a25" width="24" height="36" alt="HTML Academy"></a><nav class="main-nav main-nav--mini" role="navigation"><div class="main-nav__course-nav"><a class="main-nav__course-item main-nav__course-button main-nav__course-button--prev" href="/courses/javascript-programming/objects/methods-implementation">Implementing methods</a><div class="main-nav__course-item main-nav__course-list main-nav__course-list--collapsed"><b class="main-nav__course-title">Objects</b><span class="main-nav__course-stat">25/30</span><div class="main-nav__course-contents"><a class="main-nav__course-contents-link" href="/courses/javascript-programming/objects">Back to the list of tasks</a><ul class="main-nav__course-contents-list"><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/game-start">1. Shall we play?</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-players">2. Players, let’s start!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/first-throw">3. My attempt number one</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/hello-object">4. Hello, object!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/read-object">5. Reading from the object</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-array">6. Count off!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/overwrite-property">7. Overriding object properties</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/pass-by-reference">8. Passing object by a link</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/game-rules-object">9. My game</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-attempts">10. Giving out the attempts</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/search-winner-start">11. Who is the winner?</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/loop-in-loop">12. Announce the entire list, please</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-if">13. Looking for a cat with great results</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/array-push-winners">14. No one will hide</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/else-if">15. New conditions</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/same-result">16. Hard to come across</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/print-winners">17. Let’s bring it all to light</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-new-player">18. Roll the dice, gentlemen cats!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/edit-message">19. Let’s make adjustments</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/summary-1">20. Summary of “Objects”. Part 1</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/challenge-1">21. Tenth program: “Golden ball”</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/comp-config">22. Build it yourself!</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/first-method">23. My first method</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/methods-implementation">24. Implementing methods</a></li><li class="main-nav__course-contents-item main-nav__course-contents-item--current"><a href="/courses/javascript-programming/objects/map">25. Object as a dictionary</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/use-map">26. Bracket notation</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/this">27. Let’s not forget about the context</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/add-another-computer">28. Store check</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/summary-2">29. Summary of “Objects”. Part 2</a></li><li class="main-nav__course-contents-item"><a href="/courses/javascript-programming/objects/challenge-2">30. Eleventh program: “The house that Muffin built”</a></li></ul></div></div><a class="main-nav__course-item main-nav__course-button main-nav__course-button--next" href="/courses/javascript-programming/objects/use-map">Bracket notation</a></div><ul class="main-nav__list main-nav__list--user main-nav__list--user-guest"><li class="main-nav__item" itemprop="name"><a class="main-nav__link" href="/signup?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" title="Sign up" data-modal="open" data-value="register" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#user"></use></svg></span>Sign up</a></li><li class="main-nav__item main-nav__item--login" itemprop="name"><a class="main-nav__link" href="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" title="Log in" data-modal="open" data-value="login" itemprop="url"><span class="main-nav__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#login"></use></svg></span>Log in</a></li></ul></nav></div></div></header><div class="notice notice--error js--initialization-error hidden"><a class="notice__link" href="#"><span class="notice__title js--initialization-error__content"></span></a><button class="notice__close" type="button">Close</button></div><main class="course-container course-interface__content task"><div class="course-container__inner"><article class="course-layout js--user-settings" data-theme="ace/theme/ha-light-default" data-taskid="171" data-storageKey="task-171"><div class="course-loading-overlay course-layout__loading-overlay hidden"><div class="course-loading-overlay__inner"><span class="course-loading-overlay__image"><svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="clip-path" transform="translate(-3.2 -3.22)"><circle cx="38.65" cy="38.78" r="34.15" fill="#d5dcf1" stroke-dasharray="0"/></clipPath></defs><style>.keks-loader-circle { stroke-dasharray: 500; stroke-dashoffset: 1000; animation: dash 1.5s linear reverse infinite; } @keyframes dash { 0% { stroke-dashoffset: 0; }, 25% { stroke-dashoffset: 1000; }, 50% { stroke-dashoffset: 0; }, 75% { stroke-dashoffset: 1000; }, 100% { stroke-dashoffset: 0; } }</style><circle cx="35" cy="33" r="33" transform="matrix(.01053 -.96378 .9652 .01054 2.506 68.344)" fill="#D5DCF1" stroke="#F15A29" stroke-width="3.5"/><g transform="matrix(.9237 -.01338 0 .98374 2.38 -2.91)" clip-path="url(#clip-path)"><path d="M55.25 62.93c-1-2.23-2.81-5-4-7.27-.87-1.58-.39-3.35-2.32-3.16 0 0-2.81.84-3.88 1-1.07.16-4.65 3-5.91 3.44-1.55.56-3.29.19-4.93.19-1.686-.555-3.333-1.223-4.93-2-1-.74-7.26-2.32-7.45-1.77-.19.55-6.03 13.66-5.58 14.23.29.28 15 8.57 15.78 8.75 1.113.666 2.188 1.394 3.22 2.18.48.56 12.47-6 12.47-6.93 0 0 7.944-4.177 8.52-4.38 2.1-.74 2.804-.31-1-4.28h.01z" fill="#CF4A27"/><path d="M41.56 55.18c-.57-.47-1.06.46-.29 1 3.19 2.37 5.86 5.87 6.17 9.84-1.69-.58-3.44-.73-5.11-1.37a.53.53 0 0 0-.77.56 16.56 16.56 0 0 1-.07 4.57 12 12 0 0 1-4.29-2.88c-.29-.36-.87 0-.87.38-.17 1.7-.06 3.25-.9 4.72l-.15.15-.17-.17c-.82-1.46-.71-3-.88-4.68 0-.38-.59-.74-.87-.38a12.11 12.11 0 0 1-4.29 2.86 16.56 16.56 0 0 1-.07-4.56.53.53 0 0 0-.77-.56c-1.67.64-3.42.8-5.11 1.37.31-4 3-7.48 6.17-9.84.77-.56.29-1.49-.29-1-3.77 2.7-6.68 6.8-6.77 11.46a.51.51 0 0 0 .77.46c1.55-.71 3.33-.82 5-1.35-.15 1.61.13 3.14.13 4.79a.54.54 0 0 0 .77.46 21.65 21.65 0 0 0 4.47-2.6 9.28 9.28 0 0 0 1.09 4.37 2.32 2.32 0 0 0 .43.62l.1.06h.07a.59.59 0 0 0 .61-.1 2.1 2.1 0 0 0 .47-.72 9.49 9.49 0 0 0 1-4.31 22.19 22.19 0 0 0 4.48 2.6.54.54 0 0 0 .77-.46c0-1.65.28-3.17.13-4.79 1.68.53 3.45.64 5 1.35a.51.51 0 0 0 .77-.46c-.11-4.67-3-8.77-6.79-11.47z" fill="#F1662A"/><path d="M35.49 62.47s5-.38 6-1.49c4.65-5.4 9.1-6.7 9.1-6.7l-.68-1.39-14.53 2.8-13.37-2.7v1.49s3.49 1.21 8.24 6.61c1 1.1 5.14 1.38 5.24 1.38" style="isolation:isolate" fill="#A23922" opacity=".5"/><path d="M22.12 52.88c-1.75 5.5-5.33 8.66-6 14.34" fill="#F1662A"/><path d="M21.54 52.78c-1.64 5-5.33 9.12-6 14.43-.09.65.64 2 1.07 0 .68-5.21 4.45-9.31 6-14.16.19-.64-.87-.91-1.07-.27zm28.08.55c2 4.57 5.13 8.57 6.4 13.4.2.65 1.4.35 1.31-.29-1.25-4.93-4.7-9-6.83-13.67-.2-.55-1.17-.08-.88.57z" fill="#151841"/></g><circle class="keks-loader-circle" cx="35" cy="33" r="33" transform="matrix(.01053 -.96378 .9652 .01054 2.506 68.344)" fill="#D5DCF1" stroke-width="3.5" fill-opacity="0" stroke="#2A2F5A"/><path d="M54.838 32.26c-.084 4.648-.716 9.52-3.152 13.594-1.08 1.86-1.525 3.2-3.246 4.5-1.44 1.042-4.65.428-7.03 2.334 0 0-3.245 2.79-6.034 2.604-2.79-.186-5.403-2.427-5.403-2.427-1.348-1.293-4.584-1.562-6.574-2.25-2.344-.865-6.036-8.053-6.296-9.3l-.633-2.426c-.808-1.86-.994-3.98-1.98-5.887-.673-1.056-1.178-2.21-1.496-3.422-.55-2.603-1.163-5.28-1.628-7.875-.81-3.896-2.427-10.23.186-13.502 0 0 2.94-.67 8.192 4.845 2.52 2.25 5.04 6.51 8.193 7.7.62-.678 1.18-1.41 1.673-2.186.86.79 1.986 1.22 3.153 1.21.716 0 1.264-.69 1.794-.69.46.105.912.248 1.35.428 1.858.78 1.793-.864 2.872-.78 1.078.083 1.078 2.073 3.42.78l1.163-.018c2.976-3.115 8.908-11.084 13.948-9.96 4.502 1.126-.808 18.533-2.342 22.773" fill="#F15A29"/><path d="M59.422 11.486c-.93-3.72-5.216-2.334-7.56-.782-2.037 1.452-3.884 3.155-5.495 5.068-.716.78-1.442 1.646-2.25 2.51l-.93 1.042c-.312 0-.624.027-.93.084-.633.084-1.08.605-1.71.353-.35-.208-.664-.472-.93-.78-.554-.41-1.308-.41-1.86 0-.304.488-.882.73-1.442.605-.527-.242-1.07-.444-1.627-.605-.484-.003-.956.147-1.35.428-1.077.688-2.52-.26-3.328-.865-.246-.2-.608-.162-.81.084-.395.632-.84 1.232-1.328 1.795-2.427-1.21-4.138-3.47-5.766-5.45-1.53-1.704-3.177-3.3-4.928-4.78-.823-.765-1.765-1.394-2.79-1.86-.862-.325-1.788-.446-2.706-.352-.81 0-1.162 1.21-1.44 1.86-.434 1.19-.648 2.45-.633 3.72.097 2.626.46 5.237 1.077 7.792.363 1.562.55 3.198.93 4.76.243 1.77.667 3.507 1.265 5.19.812 1.57 1.532 3.19 2.157 4.844.362 1.21.808 2.427 1.078 3.636.312 1.247.735 2.464 1.265 3.635 1.11 2.42 2.566 4.667 4.323 6.668 1.71 1.86 4.585 1.47 6.75 2.51 2.075 1.47 4.325 2.94 6.845 3.292 2.52.353 5.04-1.562 7.208-3.2 1.71-.78 3.608-.78 5.402-1.384 1.795-.605 2.79-2.604 3.608-4.073 1.27-2.134 2.238-4.434 2.874-6.835.503-2.078.79-4.204.855-6.34.05-.433.125-.86.223-1.285 1.22-3.304 2.213-6.687 2.976-10.126.827-3.72 1.813-7.71 1.004-11.158zm-.93 4.584c-.225 2.128-.586 4.24-1.078 6.323-.71 3.194-1.602 6.345-2.67 9.438-.262.617-.407 1.276-.427 1.945-.092 1.935-.34 3.86-.744 5.756-.58 2.34-1.49 4.585-2.706 6.668-.93 1.646-1.794 3.636-3.868 4.156-.93.26-1.796.354-2.614.52.007-.335-.352-.553-.647-.392-.022.012-.042.025-.06.04-.91.582-1.78 1.22-2.614 1.906-1.71 1.21-3.607 2.334-5.672 2.25-1.535-.203-2.994-.792-4.24-1.71-.363-.177-1.44-1.042-1.627-1.126-.716-.52-1.35-.93-2.074-1.47-.363-.26-.716.085-.716.522-.716-.177-1.348-.26-1.98-.428-1.86-.428-2.874-1.86-3.962-3.376-1.68-2.457-2.94-5.18-3.72-8.052-.27-.93-.632-1.86-.93-2.94-.31-1.408-.862-2.754-1.626-3.98-.773-1.45-1.29-3.022-1.526-4.648-.363-1.562-.716-3.2-.995-4.845-.448-2.426-.996-4.76-1.266-7.27-.186-2.158-.186-4.585 1.08-6.51.57-.054 1.146-.026 1.71.083.9.318 1.727.818 2.427 1.47 1.265.93 2.344 2.073 3.506 3.115 2.706 2.334 5.496 7.44 8.555 7.97.693-.605 1.297-1.303 1.796-2.075.79.56 1.707.908 2.668 1.014.508.065 1.022-.06 1.442-.354.54-.408 1.295-.373 1.794.084.67.408 1.52.375 2.158-.084.25-.282.57-.49.93-.604.344.18.657.412.93.688.59.452 1.366.584 2.073.353.447-.083.633-.26 1.08-.353.32.042.646-.02.93-.177 1.525-1.646 2.975-3.375 4.5-4.937 1.676-1.96 3.766-3.527 6.12-4.585 1.44-.604 3.328-.78 3.96.865.428 1.55.486 3.177.167 4.752z" fill="#151841"/><path d="M48.524 33.04c-.236-.845-.932-1.483-1.795-1.646-.705-.074-1.413-.102-2.12-.083.083-.604.548-2.51-.81-2.333-.716 0-1.44 2.073-1.86 2.603-.715 1.042-1.162.78-1.264-.428-.102-1.208.446-2.854-.55-3.115-.715-.083-1.263 1.293-1.524 2.158-.083.427-.548.78-.362-2.25 0-.782 0-2.855-.447-2.94h-.186c-1.264.085-2.157 4.94-2.52 6.324-.27-1.386-1.71-7.273-2.79-5.98-.14.61-.202 1.234-.185 1.86 0 .427-.084 3.375-.447 2.854-.186-.864-1.162-2.603-1.71-2.334-.995.865-.187 2.074-.447 3.292s-.632 1.47-1.264.354c-.363-.52-.995-2.604-1.71-2.688-1.266-.176-.93 1.73-.93 2.334-.69-.076-1.383-.104-2.075-.083-.852.156-1.558.75-1.86 1.56-.084.177 0 6.668 5.95 6.76.862.043 1.72-.103 2.52-.427.52-.13.995-.558 1.45-.214l6.11.4c.342-.36.847-.51 1.33-.4.925.493 1.934.808 2.976.93 3.06 0 5.765-1.21 6.667-3.98.307-.103-.056-2.353-.15-2.53z" fill="#EFA75B"/><path d="M23.67 33.998s3.783-.354 4.77.177c1.095.612 1.896 1.642 2.22 2.854-.492.19-1.003.333-1.524.427-.616.09-1.237.15-1.86.177-3.06-.354-3.607-3.636-3.607-3.636zm23.6.51s-3.72-.52-4.772-.082c-1.16.554-2.038 1.564-2.426 2.79l1.44.52c.604.18 1.23.266 1.86.26 3.18-.195 3.897-3.487 3.897-3.487zm-7.03 2.605c.27.084 1.16.428 1.44.52.53.155 1.076.242 1.627.26h.186c2.706-.083 3.608-2.854 3.72-3.29-1.053-.157-2.116-.235-3.18-.233-.487-.017-.973.042-1.442.176-1.128.46-1.992 1.402-2.35 2.567z" fill="#FFF"/><path d="M32.223 43.26c-.152-1.397-.03-2.81.363-4.157 0 0 .93-2.94 2.343-3.2 3.72-.687 4.054 7.44 4.054 7.44-4.334 1.906-6.76-.084-6.76-.084z" fill="#F47741"/><path d="M45.204 44.292c-.508-.698-1.296-1.14-2.157-1.21-1.71-.176-7.56 1.126-7.56 1.126v.065c-.772-.205-5.98-1.6-7.56-1.45-.875.04-1.692.45-2.25 1.125-.446.864.084 2 .55 2.938.74 1.35 1.788 2.505 3.058 3.375.48.332 1.045.513 1.627.522 4.492.084 4.77-2.585 4.77-2.464l.075-.465c.186 0-.363 2.79 4.054 2.79.542.102 1.1.073 1.628-.084 1.305-.853 2.39-2 3.17-3.35.41-.92 1.043-1.96.596-2.918z" fill="#EFA75B"/><path d="M31.963 50.968c-.197-.004-.358-.157-.372-.353-.018-.207.158-.378.364-.354 3.245-.26 3.505-2.156 3.608-2.25-.006-.19.183-.325.362-.26.193.01.35.16.363.354 0 .084 0 1.906 3.422 2 .192.008.348.16.362.353-.018.19-.172.34-.363.353-1.352.11-2.68-.4-3.61-1.386-.095-.096-.16-.22-.185-.353-.982 1.174-2.423 1.866-3.952 1.898z" fill="#151841"/><path d="M32.14 43.427c.186-.52 3.608.083 3.608.083s2.975-.688 3.422.084c-.05.288-.175.557-.363.78-.515-.056-1.037.004-1.525.178-.333.61-.488 1.304-.446 2-.222.394-.574.7-.995.864-.398-.112-.75-.354-.994-.688.047-.75-.146-1.496-.55-2.13-.27-.26-1.264.084-1.626-.083l-.53-1.088zm6.89.242c-.05.286-.175.556-.363.78-.503-.063-1.015-.012-1.497.148-.333.612-.487 1.305-.446 2-.222.394-.574.7-.995.864-.4-.112-.75-.354-.996-.688.053-.76-.14-1.515-.55-2.157-.268-.26-1.263.084-1.626-.084-.26-.23-.45-.53-.55-.864" fill="#CF4A27"/><path d="M35.748 47.853c-.587-.226-1.072-.655-1.367-1.21-.022-.634-.144-1.262-.362-1.86h-.567c-.31.073-.636.043-.93-.082-.35-.253-.61-.616-.734-1.03-.082-.17.006-.374.186-.43.172-.083.38 0 .447.177.056.278.215.524.445.69h.586c.37-.086.757-.023 1.08.175.413.585.634 1.284.632 2v.353c.185.177.4.32.632.428.22-.18.42-.382.595-.605-.004-.29.024-.58.083-.865.026-.48.22-.94.55-1.292.506-.235 1.07-.325 1.626-.26.077-.108.14-.227.185-.353-.038-.148.042-.3.186-.353.145-.11.352-.07.447.083.084.084.27.428-.446 1.21-.083.083-.185.176-.27.083-.422-.033-.848-.004-1.264.084-.215.502-.323 1.043-.316 1.59v.176c-.326.57-.824 1.023-1.422 1.293zm-7.198-14.04c-.788-.226-1.61-.314-2.427-.26-1.264 0-2.436.082-2.52.082h-.38v.354s.715 3.55 3.96 3.895c.693.006 1.385-.025 2.074-.093.27-.084 1.71-.428 1.71-.428-.025-1.56-.975-2.956-2.417-3.552zm.53 3.207c-.558.142-1.135.2-1.71.177-1.14-.075-2.16-.728-2.707-1.73-.247-.37-.432-.78-.548-1.21.455 0 1.18-.092 2.073-.175h.596c-.084.688-.242 2.464.483 2.334.725-.13.837-1.46.93-2.13h.112c.937.492 1.647 1.33 1.98 2.334-.388.176-.793.31-1.21.4zm18.365-2.864c-1.104-.145-2.215-.232-3.33-.26-.546-.01-1.093.05-1.626.176-1.166.483-2.08 1.425-2.53 2.604l-.158.79 1.795.623c.558.153 1.132.24 1.71.26h.28c3.245-.177 4.137-3.72 4.137-3.72l.084-.353zm-1.264 1.86c-.54 1.394-2.882 1.646-2.966 1.646-.517-.02-1.03-.11-1.525-.26-.186-.085-.633-.26-1.08-.43.374-.966 1.117-1.746 2.065-2.165 0 .68.158 1.953.81 2.083.65.13.613-1.535.566-2.26.934.005 1.865.064 2.79.177-.11.316-.473.65-.66 1.17z" fill="#151841"/><path d="M19.26 39.27c.535 1.362 1.56 2.473 2.874 3.115.534.312 1.204-.07 1.207-.69.002-.285-.15-.55-.397-.695-.918-.46-1.65-1.222-2.073-2.158-.344-.957-1.972-.52-1.61.428zm29.45 3.125c1.083-.59 2.01-1.428 2.706-2.446.3-.556-.112-1.228-.743-1.21-.293.007-.56.17-.698.428-.568.776-1.306 1.412-2.158 1.86-.394.23-.517.742-.27 1.125.263.376.773.482 1.163.242z" fill="#EFA75B" stroke-width="13"/><path d="M16.025 32.436c1.525-1.386 2.427-4.408 2.79-6.835-.084.354 2.613.43 4.138-1.208 1.078-1.125.446-2-.186-3.375-1.71-3.552-4.585-6.323-7.384-8.918-.716-.69-1.44-2.428-2.706-2-.995.353-.93 3.2-.716 4.073 1.09 7.448 4.065 18.263 4.065 18.263zm37.372-.78c-1.704-1.826-2.822-4.12-3.208-6.585 0 .354-2.614.354-4.056-1.29-.995-1.127-.362-1.86.363-3.117 1.86-3.198 4.863-5.718 7.746-8.136.81-.604 1.627-1.47 2.79-.93.994.428.715 2.334.548 3.115-1.083 5.72-2.48 11.376-4.183 16.943z" fill="#FFF"/><path d="M53.564 20.422c-1.98.51-4.138 1.636-5.105 3.487-.43-2.196 1.645-4.65 3.393-5.832.333-.21.312-.703-.037-.886-.162-.085-.357-.076-.512.022-2.157 1.562-4.417 4.5-3.784 7.188.076.262.354.41.614.325l-.075.28c-.085.603.93.864.994.26.446-2.158 2.706-3.376 4.77-3.897.372-.076.522-.526.27-.81-.133-.15-.342-.204-.53-.138zM17.457 18.06c-.55-.354-.995.428-.55.865 1.433 1.004 3.182 3.05 3.395 4.956-.93-1.86-3.05-2.975-5.105-3.486-.386-.005-.633.41-.445.747.042.076.103.14.176.184 2.073.52 4.324 1.73 4.77 3.896.106.328.5.46.78.26.273.192.653.06.745-.26.735-2.66-1.6-5.728-3.766-7.16z" fill="#F1662A"/></svg></span><p class="course-loading-overlay__message"><b class="course-loading-overlay__message-title">Loading…</b><br><span class="course-loading-overlay__message-text">Everything will be ready in few seconds</span></p></div></div><div class="course-layout__sidebar course-theory"><div class="course-theory__inner course-theory__inner--left-stub"><button class="course-theory__close icon-close icon-close--light" type="button">Close</button><ul class="course-tabs course-tabs--non-interactive course-layout__theory-heading js--theory-tabs"><li class="course-tabs__item course-tabs__item--external course-tab course-tab--centered"><span class="course-tab__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-theory"></use></svg></span><span class="course-tab__title">Theory</span></li><li class="course-tabs__item course-tabs__item--internal course-tab course-tab--centered course-tab--active js--theory-tab__theory"><span class="course-tab__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-theory"></use></svg></span><span class="course-tab__title">Theory</span></li><li class="course-tabs__item course-tabs__item--internal course-tab course-tab--centered js--theory-tab__comments"><span class="course-tab__icon"><svg aria-hidden="true" style="width: 16px; height: 16px; fill: #2e2c9c;"><use xlink:href="/img/sprites/up.svg#comment"></use></svg></span><span class="course-tab__title">Comments</span></li></ul><section class="course-theory__content"><div class="js--theory-pane__theory course-theory__content-inner"><h1 class="course-theory__content-heading">Object as a dictionary</h1><div class="course-theory__content-text"><p>Now let’s calculate the price of the computer. It consists of several components: the starting price and the cost of each technical characteristic. Prices:</p><div class="grid grid--gutters grid--offset"><div class="grid__cell"><table class="table table--wide"><tbody><tr><td>Processor i5</td><td>5000</td></tr><tr><td>Processor i7</td><td>10000</td></tr><tr><td>13″ monitor</td><td>5000</td></tr><tr><td>15″ monitor</td><td>10000</td></tr><tr><td>8 GB memory</td><td>3000</td></tr><tr><td>16 GB memory</td><td>7000</td></tr></tbody></table></div></div><p>It turns out that we need to check the property values in the computer object and, depending on the result, add a certain amount to the base price. In the end, we get the price of the device. To test each characteristic separately, you can use the <code>else if</code> structure. Then the code will look like this:</p><pre><code>var price = computer.basicPrice;
if (computer.processor === 'i5') {
price += 5000;
} else if (computer.processor === 'i7') {
price += 10000;
}
// And so on, summing the cost of the remaining components</code></pre><p>The code is working, but isn’t it too long? Now we have only three characteristics that comprise the price, what if there are more of them?</p><p>In some situations, you can shorten the condition blocks by using objects. Let’s figure out how we can do it. Let’s look at this using an example.</p><pre><code>var printFavoriteFood = function (name) {
var message = 'My favorite food is ';
if (name === 'Muffin') {
message += 'fish';
} else if (name === 'Rudolph') {
message += 'cutlet';
} else if (name === 'Snowball') {
message += 'milk';
}
return message;
};
console.log(printFavoriteFood('Snowball'));
// Logs 'My favorite food is milk'</code></pre><p>Note that each cat, or rather the cat’s name, corresponds to a certain meal. And the order of cats has no importance whatsoever. Can I write down the taste preferences of cats in the object? Let’s try.</p><pre><code>var catsFavoriteFood = {
Muffin: 'fish',
Rudolf: 'cutlet',
Snowball: 'milk'
};</code></pre><p>Can we now use the data in the <code>catsFavoriteFood</code> object so as to completely get rid of the conditions in the body of the function <code>printFavoriteFood</code>? It’s possible! We have your usual object with properties and their values. Which means that we can access the property of the object and add to the expression the line that it contains.</p><pre><code>var catsFavoriteFood = {
Muffin: 'fish',
Rudolph: 'cutlet',
Snowball: 'milk'
};
var printFavoriteFood = function (name) {
return 'My favorite food is ' + <mark>catsFavoriteFood[name]</mark>;
};
console.log(printFavoriteFood ('Snowball'));
// Logs 'My favorite food is milk'</code></pre><p>The code works as before, but look at how more concise our program is!</p><p>We wrote into the object not a characteristic like <code>name: 'Muffin'</code>, but the ratio of the name of the cat and the delicacy, which that particular cat enjoys. Such objects are called <em>dictionaries</em>, <em>maps</em> or <em>associative arrays</em>. They are very convenient to use and allow you to write neater — and therefore, more maintainable — code.</p><p>In our program, each indicator has its own price, for example, for the processor i7, it is <code>10000</code>, for a 13″ display, it is <code>5000</code>. This means that we can create dictionaries, which will store the value of each characteristic, and then access the properties of these objects to get the price.</p></div></div><div class="js--theory-pane__comments hidden course-theory__content-inner"><div class="course-theory__content-text"><h2 class="course-theory__content-heading">Comments</h2><div id="disqus_thread"></div><script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
var disqus_config = function () {
this.page.url = "https://htmlacademy.org/courses/javascript-programming/objects/map";
this.page.identifier = "task-171";
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://htmlacademy.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script><noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript></div></div></section><div class="course-theory__controls"><button class="button button--close" type="button">To the task</button></div></div></div><div class="course-layout__column course-layout__column--left"><ul class="js--course-tabs course-tabs course-layout__course-tabs"><li class="course-tabs__item course-tab js--editor-tab course-tabs__item--limited course-tabs__item--limited-large course-tab--active" data-editor="js"><span class="course-tab__title course-tab__title--indent"><span class="course-tab__title-part course-tab__title-part--active">script.js</span></span></li></ul><div class="course-layout__editors"><div class="js--editor course-editor course-layout__editor" id="" data-tab="js" data-split=""><span class="course-editor__label"><span class="course-editor__label-item">JavaScript</span></span><div class="course-editor__item" id="js-editor">var buildComputer = function (memory, display, processor) {
var computer = {
basicPrice: 5000,
processor: processor,
display: display,
memory: memory,
getDescription: function () {
return 'computer with processor ' + computer.processor + ', diagonal ' + computer.display + ', RAM ' + computer.memory;
},
getPrice: function () {
return computer.basicPrice;
}
};
return computer;
};
var myComputer = buildComputer(8, 13, 'i7');
console.log('In the cart ' + myComputer.getDescription() + ' that costs ' + myComputer.getPrice());
</div></div></div><div class="course-editor-controls"><button class="course-editor-controls__item course-editor-controls__item--answer" type="button">Show the answer</button></div><div class="js--feedback course-unhappy"><button class="js--feedback-btn course-unhappy__button" type="button"><span class="sr-only">Complain</span><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#unhappy"></use></svg></button><div class="js--feedback-modal course-unhappy__modal course-unhappy__modal--step-one"><form method="POST" action="/courses/javascript-programming/objects/map/signal" class="course-unhappy__form form"><input type="hidden" name="csrf_name" value="csrf69aebb8a9ff21"><input type="hidden" name="csrf_value" value="69ea948a95c16e9ca34f3ff7f2e1bc4d"><p class="course-unhappy__text">What didn’t you like in this task?</p><div class="course-unhappy__slide"><div class="course-unhappy__wrap"><div class="course-unhappy__list"><label class="checkbox checkbox--small"><input class="checkbox__input" name="problems" value="1" type="checkbox"><span class="checkbox__text">The code check doesn’t work</span></label><label class="checkbox checkbox--small"><input class="checkbox__input" name="problems" value="2" type="checkbox"><span class="checkbox__text">The task is too difficult</span></label><label class="checkbox checkbox--small"><input class="checkbox__input" name="problems" value="3" type="checkbox"><span class="checkbox__text">The theory is hard to understand</span></label><label class="checkbox checkbox--small"><input class="js--feedback-other-checkbox checkbox__input" name="problems" value="0" type="checkbox"><span class="checkbox__text">Other (will write below)</span></label></div><div class="course-unhappy__message"><label class="sr-only" for="id-message">Другое (сейчас напишу)</label><textarea class="field field--area" id="id-message" name="message" placeholder="For example, a typo in the word «heading»"></textarea></div></div></div><button class="course-unhappy__control course-unhappy__control--prev" type="button"><span class="sr-only">Prev</span><svg aria-hidden="true"><use xlink:href="/img/sprites/landings.svg#arrow"></use></svg></button><button class="course-unhappy__control course-unhappy__control--next" type="button" disabled><span class="sr-only">Next</span><svg aria-hidden="true"><use xlink:href="/img/sprites/landings.svg#arrow"></use></svg></button><button class="js--submit-btn button" disabled>Submit</button></form><p class="course-unhappy__result hidden">Thanks! We’ll fix everything at once!</p></div></div></div><div class="course-layout__column course-layout__column--right"><span class="course-separator-control"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-arrows-separator"></use></svg></span><div class="course-browser"><div class="course-browser__menu"><span class="course-browser__menu-item course-browser__address"><span class="course-browser__menu-item-inner">Console</span></span><button class="js--autorun course-browser__menu-item course-browser__menu-button course-browser__menu-button--text-with-icon course-browser__menu-button--autorun course-browser__menu-button--autorun-on" title="Autorun" type="button"><span class="course-browser__menu-item-inner"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-autorun"></use></svg>
Autorun
</span></button><button class="course-browser__menu-item course-browser__menu-button course-browser__menu-button--expand" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11"><path d="M1.375 5.125v4.5h4.5m3.75-3.75v-4.5h-4.5" fill="none" fill-rule="evenodd" stroke="currentColor"></path></svg></button></div><div class="course-browser__notification js--browser-change-heading hidden"><p class="course-browser__notification-text">The code has changed, click “Run” or turn autorun on.</p><button class="course-browser__notification-button course-browser__notification-button--play js--close" type="button"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-play"></use></svg>
Run</button></div><div class="course-browser__content"><div class="console js--console"><h2 class="sr-only">Result</h2><div class="console__content js--console__content"></div></div></div><div class="course-goals js--goals"><div class="course-goals__heading"><span class="course-goals__heading-title"><span class="course-goals__count-label">Goals</span><span class="course-goals__count">completed</span></span><button class="course-goals__button course-goals__button--expand js--goals__expand" type="button"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#icon-collapse"></use></svg></button><a class="course-goals__button course-goals__button--next button button--green button--without-border hidden" href="/courses/javascript-programming/objects/use-map" title="Bracket notation"><svg aria-hidden="true"><use xlink:href="/img/sprites/courses.svg#arrow-white--mini"></use></svg></a></div><div class="course-goals__content"><ol class="course-goals__list"><li class="course-goals__list-item">Before the <code>buildComputer</code> function, create object <code>processorPrice</code> with properties <code>'i5': 5000</code>, <code>'i7': 10000</code>.</li><li class="course-goals__list-item">After it, create object <code>displayPrice</code> with properties <code>13: 5000</code>, <code>15: 10000</code>.</li><li class="course-goals__list-item">Add the <code>memoryPrice</code> object with properties <code>8: 3000</code>, <code>16: 4000</code>.</li></ol></div></div></div></div></article></div><div class="course-interface__overlay course-interface__overlay--active"></div></main><script
src="https://assets.htmlacademy.org/scripts/courses-spa/htmlacademy-task.v43.js"
data-task-type="js"
data-assets-path="https://assets.htmlacademy.org/scripts/courses-spa/"
data-lang="en"
></script><script>HtmlacademyTask.setRoutes({task:'/courses/javascript-programming/objects/map',check:'/courses/javascript-programming/objects/map/check'});</script><script>HtmlacademyTask.setup(function(){this.setView(JsView),this.setRunner(JsRunner),this.setChecker(JsChecker,function(){this.setMatcher(function(i){i.goal("var.processor-price").code('var processorPrice = "#f.processor-price"; "#builtin.anything"; var buildComputer = "#builtin.anything"; "#builtin.anything"').goal("var.display-price").code('var processorPrice = "#builtin.anything"; var displayPrice = "#f.display-price"; "#builtin.anything"').goal("var.memory-price").code('"#builtin.anything"; var displayPrice = "#builtin.anything"; var memoryPrice = "#f.memory-price"; "#builtin.anything"').fragment("f.processor-price",function(i,e){return i.including({i5:5e3,i7:1e4})(e)}).fragment("f.display-price",function(i,e){return i.including({13:5e3,15:1e4})(e)}).fragment("f.memory-price",function(i,e){return i.including({8:3e3,16:4e3})(e)})}),this.addGoal("var.processor-price"),this.addGoal("var.display-price"),this.addGoal("var.memory-price")}),this.setAnswers([{goal:1,editor:"js",data:function(){this.tooltip("Create an object <code>processorPrice</code>").at(0).add("\n").at(0).add("var processorPrice = {\n'i5': 5000,\n'i7': 10000\n};\n")}},{goal:2,editor:"js",data:function(){this.tooltip("Create an object <code>displayPrice</code>").at(4).add("\nvar displayPrice = {\n13: 5000,\n15: 10000\n};\n")}},{goal:3,editor:"js",data:function(){this.tooltip("Create an object <code>memoryPrice</code>").at(9).add("\nvar memoryPrice = {\n8: 3000,\n16: 4000\n};\n")}}])});</script><footer class="page-footer page-footer--tiny"><div class="page-footer__inner"><p><a href="/docs/cookies">Cookies</a> ∙
<a href="/docs/privacy">Privacy</a> ∙
<a href="/docs/agreement">License Agreement</a> ∙
<a href="/docs/about">About</a> ∙
<a href="/contacts">Contacts</a> ∙
© HTML Academy OÜ, 2019−2026
</p><div class="page-footer__financial"><img src="https://assets.htmlacademy.org/img/visa-white.svg?cs=96e54ec8c587db9d4b1d8d328ffd87c2ebfd9555" alt="VISA" title="VISA" width="35" height="35"><img src="https://assets.htmlacademy.org/img/mastercard-horizontal.v2.svg" alt="Mastercard" title="Mastercard" width="35" height="35"></div></div></footer><div class="modal"><div class="modal__inner"><div class="modal__wrapper js-login hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Log in</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aebb8a9ff21"><input type="hidden" name="csrf_value" value="69ea948a95c16e9ca34f3ff7f2e1bc4d"><div class="form__group"><label class="sr-only" for="login-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="login-email"></div><div class="form__group"><label class="sr-only" for="login-password">Password</label><input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Password" id="login-password"></div><input class="button button--full-width" type="submit" data-submit-text="Logging in…" value="Log in"></form><p class="modal__forgot-password"><a href="/recover" data-modal="open" data-value="recover">Forgot your password?</a></p><a class="modal__bottom-link" href="/signup" data-modal="open" data-value="register">Sign up</a></div><div class="modal__wrapper js-register hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Sign up</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/signup?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aebb8a9ff21"><input type="hidden" name="csrf_value" value="69ea948a95c16e9ca34f3ff7f2e1bc4d"><div class="form__group"><label class="sr-only" for="email">
Email
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="email" name="email" value="" id="email" required placeholder="Email"></div></div><div class="form__group"><label class="sr-only" for="password">
Password
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="password" name="password" value="" id="password" required placeholder="Password"></div></div><div class="form__group"><label class="checkbox"><input class="checkbox__input" type="checkbox" name="agreement" value="1" required><span class="checkbox__text"><span>By signing up, you agree to our <a href="/docs/agreement" target="_blank">License Agreement</a> and <a href="/docs/privacy" target="_blank">Privacy Policy</a>.</span></span></label></div><input class="button button--full-width" type="submit" data-submit-text="Signing up…" value="Sign up"></form><a class="modal__bottom-link" href="/login?redirect_url=%2Fcourses%2Fjavascript-programming%2Fobjects%2Fmap" data-modal="open" data-value="login">Log in</a></div><div class="modal__wrapper modal__wrapper--no-btn-bottom js-recover hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Restore access</h4><p class="modal__text-accent">Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.</p><form class="modal__form form" action="/recover" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aebb8a9ff21"><input type="hidden" name="csrf_value" value="69ea948a95c16e9ca34f3ff7f2e1bc4d"><div class="form__group"><label class="sr-only" for="recovery-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="recovery-email"></div><script src='https://www.google.com/recaptcha/api.js'></script><div class="form__group"><div class="g-recaptcha" data-sitekey="6LetCTEqAAAAANROWtPzfC7Rfg9iIRiRt2k2FPn7"></div></div><input class="button button--full-width" type="submit" data-submit-text="Sending…" value="Send"></form><p class="modal__text">Forgot to connect your email to the profile? Email us and we’ll help.</p></div></div></div><script async src="https://assets.htmlacademy.org/js/general.v274.js" data-assets="https://assets.htmlacademy.org" data-require="toggle,navigation-courses,modal,form,nav"></script></body></html>