-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathaesop-progress.html
49 lines (46 loc) · 14.5 KB
/
aesop-progress.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- common.css -->
<style>* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: -apple-system, Helvetica, Arial, sans-serif;margin: 0;padding: 20px;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !important;height: auto;}blockquote {margin: 0;padding: 0 15px;color: #777;border-left: 4px solid #ddd;}hr {background-color: #ddd;border: 0;height: 1px;margin: 15px 0;}code {font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro', monospace;line-height: 1.4;margin: 0;padding: 0.2em 0;font-size: 90%;background-color: rgba(0,0,0,0.04);border-radius: 3px;}pre > code {margin: 0;padding: 0;font-size: 100%;word-break: normal;background: transparent;border: 0;}ol {list-style-type: decimal;}ol ol, ul ol {list-style-type: lower-latin;}ol ol ol, ul ol ol, ul ul ol, ol ul ol {list-style-type: lower-roman;}table {border-spacing: 0;border-collapse: collapse;margin-top: 0;margin-bottom: 16px;}table th {font-weight: bold;}table th, table td {padding: 6px 13px;border: 1px solid #ddd;}table tr {border-top: 1px solid #ccc;}table tr:nth-child(even) {background-color: #f8f8f8;}input[type="checkbox"] {cursor: default;margin-right: 0.5em;font-size: 13px;}.task-list-item {list-style-type: none;}.task-list-item+.task-list-item {margin-top: 3px;}.task-list-item input {float: left;margin: 0.3em 1em 0.25em -1.6em;vertical-align: middle;}#tag-field {margin: 8px 2px 10px;}#tag-field .tag {display: inline-block;background: #cadff3;border-radius: 4px;padding: 1px 8px;color: black;font-size: 12px;margin-right: 10px;line-height: 1.4;}</style>
<!-- ace-static.css -->
<style>.ace_static_highlight {white-space: pre-wrap;}.ace_static_highlight .ace_gutter {width: 2em;text-align: right;padding: 0 3px 0 0;margin-right: 3px;}.ace_static_highlight.ace_show_gutter > .ace_line {padding-left: 2.6em;}.ace_static_highlight .ace_line {position: relative;}.ace_static_highlight .ace_gutter-cell {-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;top: 0;bottom: 0;left: 0;position: absolute;}.ace_static_highlight .ace_gutter-cell:before {content: counter(ace_line, decimal);counter-increment: ace_line;}.ace_static_highlight {counter-reset: ace_line;}</style>
<style>.ace-tomorrow-night-eighties .ace_gutter {background: #272727;color: #CCC}.ace-tomorrow-night-eighties .ace_print-margin {width: 1px;background: #272727}.ace-tomorrow-night-eighties {background-color: #2D2D2D;color: #CCCCCC}.ace-tomorrow-night-eighties .ace_constant.ace_other,.ace-tomorrow-night-eighties .ace_cursor {color: #CCCCCC}.ace-tomorrow-night-eighties .ace_marker-layer .ace_selection {background: #515151}.ace-tomorrow-night-eighties.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #2D2D2D;}.ace-tomorrow-night-eighties .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-tomorrow-night-eighties .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #6A6A6A}.ace-tomorrow-night-bright .ace_stack {background: rgb(66, 90, 44)}.ace-tomorrow-night-eighties .ace_marker-layer .ace_active-line {background: #393939}.ace-tomorrow-night-eighties .ace_gutter-active-line {background-color: #393939}.ace-tomorrow-night-eighties .ace_marker-layer .ace_selected-word {border: 1px solid #515151}.ace-tomorrow-night-eighties .ace_invisible {color: #6A6A6A}.ace-tomorrow-night-eighties .ace_keyword,.ace-tomorrow-night-eighties .ace_meta,.ace-tomorrow-night-eighties .ace_storage,.ace-tomorrow-night-eighties .ace_storage.ace_type,.ace-tomorrow-night-eighties .ace_support.ace_type {color: #CC99CC}.ace-tomorrow-night-eighties .ace_keyword.ace_operator {color: #66CCCC}.ace-tomorrow-night-eighties .ace_constant.ace_character,.ace-tomorrow-night-eighties .ace_constant.ace_language,.ace-tomorrow-night-eighties .ace_constant.ace_numeric,.ace-tomorrow-night-eighties .ace_keyword.ace_other.ace_unit,.ace-tomorrow-night-eighties .ace_support.ace_constant,.ace-tomorrow-night-eighties .ace_variable.ace_parameter {color: #F99157}.ace-tomorrow-night-eighties .ace_invalid {color: #CDCDCD;background-color: #F2777A}.ace-tomorrow-night-eighties .ace_invalid.ace_deprecated {color: #CDCDCD;background-color: #CC99CC}.ace-tomorrow-night-eighties .ace_fold {background-color: #6699CC;border-color: #CCCCCC}.ace-tomorrow-night-eighties .ace_entity.ace_name.ace_function,.ace-tomorrow-night-eighties .ace_support.ace_function,.ace-tomorrow-night-eighties .ace_variable {color: #6699CC}.ace-tomorrow-night-eighties .ace_support.ace_class,.ace-tomorrow-night-eighties .ace_support.ace_type {color: #FFCC66}.ace-tomorrow-night-eighties .ace_heading,.ace-tomorrow-night-eighties .ace_markup.ace_heading,.ace-tomorrow-night-eighties .ace_string {color: #99CC99}.ace-tomorrow-night-eighties .ace_comment {color: #999999}.ace-tomorrow-night-eighties .ace_entity.ace_name.ace_tag,.ace-tomorrow-night-eighties .ace_entity.ace_other.ace_attribute-name,.ace-tomorrow-night-eighties .ace_meta.ace_tag,.ace-tomorrow-night-eighties .ace_variable {color: #F2777A}.ace-tomorrow-night-eighties .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ09NrYAgMjP4PAAtGAwchHMyAAAAAAElFTkSuQmCC) right repeat-y}</style>
<!-- export.css -->
<style>
body{margin:0 auto;max-width:800px;line-height:1.4}
#nav{margin:5px 0 10px;font-size:15px}
#titlearea{border-bottom:1px solid #ccc;font-size:17px;padding:10px 0;}
#contentarea{font-size:15px;margin:16px 0}
.cell{outline:0;min-height:20px;margin:5px 0;padding:5px 0;}
.code-cell{font-family:Menlo,Consolas,'Ubuntu Mono',Monaco,'source-code-pro',monospace;font-size:12px;}
.latex-cell{white-space:pre-wrap;}
</style>
<!-- User CSS -->
<style> .text-cell {font-size: 15px;}.code-cell {font-size: 12px;}.markdown-cell {font-size: 15px;}.latex-cell {font-size: 15px;}</style>
</head>
<body>
<div id="titlearea">
<h2>AESOP Progress</h2>
</div>
<div id="contentarea"><div class="cell text-cell"><div><span style="color: rgb(221, 221, 221);">/*———</span><br></div><div>Add ES6 choices and refactoring</div><div>-.map,.filter,.reduce</div><div>- be more modular with js</div><div>- include code explanations where possible</div><div>--------*/</div><div><br></div><div>I didn’t want to just send you this tech test, I wanted to show you my working out bit by bit, so that you can see my workings out more clearly and get an understanding of how I break sites down and my knowledge of vanillaJS at the moment. </div><div><br></div><div>I am using the Pomodoro technique to manage my time and attention, which I’m sure you are aware of, but if not it is essentially working in 25min increments w/ 5min break per iteration and after the 4th pomodoro you allow yourself to take a break of between 15-30min.</div><div><br></div>1POM - I drew out the structure for above the fold of aēsop site to get my head around what was needed, I also inspected element on site to get a feeling of your structure and I started the created my folder structure. <div>2POM - I compiled the image/svgs needed, I found the suisse_intl font on gitHub ran it thorugh the font squirrel web font generator, and began defining my HTML structure</div><div>3POM - building the html structure and giving classes suitable BEM names</div><div>4POM - Still building the HTML structure for the product and started the nav structure</div><div>5POM - Finished the nav, just building the cart would be complete and I can start the CSS</div><div>6POM - Finished the HTMcart and started CSS styles </div><div>7POM - Worked on styles for cart, still on the cart</div><div>8POM - Nearly completed the styling for cart module</div><div>9POM - still styling the cart module </div><div>10POM - Finished styling cart component + now starting to style the ATF section</div><div>** went to muay thai **</div><div>11POM - Started styling the navigation</div><div>12POM - Continued working on the navigation + fininshed navigation</div><div>13POM - Started styling the ATF section </div><div>14POM - Continuing to style the product section of this page</div><div>15POM - Completed the styling of image section and product radio button</div><div>16POM - Continued with ATF styling and started product info section</div><div>17POM - Finished the styling for ATF and started js, time is limited at this point but I have started the functionality for the cart, I have added event listeners for the cart button and close button once the cart is shown. This is just temp and will refactor after but I just wanted a quick toggle</div></div><div class="cell code-cell"><div class="ace-tomorrow-night-eighties"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_variable ace_language">document</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">addEventListener</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'DOMContentLoaded'</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_storage ace_type">function</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span><span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_storage ace_type">const</span> <span class="ace_identifier">cart</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable ace_language">document</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">querySelector</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'.cart'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_storage ace_type">const</span> <span class="ace_identifier">navCart</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable ace_language">document</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">querySelector</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'.nav__cart'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_storage ace_type">const</span> <span class="ace_identifier">cartHeaderClose</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_variable ace_language">document</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">querySelector</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'.cart__header__close'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">navCart</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">addEventListener</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'click'</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">event</span> <span class="ace_keyword ace_operator">=></span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">cart</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">classList</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">toggle</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'is-hidden'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">})</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">cartHeaderClose</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">addEventListener</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'click'</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">event</span> <span class="ace_keyword ace_operator">=></span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">cart</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">classList</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">toggle</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">'is-hidden'</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">})</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">})</span><span class="ace_punctuation ace_operator">;</span>
</div></div></div></div><div class="cell text-cell">18POM - Doing functionality for image swap, but need to swap the prices when the value and data-sku match up to simulate the swapping of products<div><br></div><div>Total time: (18 * 25 / 60) <span style="color: rgb(221, 221, 221);">7.5hrs</span><div><br></div><div>I definitely misjudged the time that this tech test would take since starting yesterday morning, it’s annoying because I’ve learnt more JS than what is shown in this project and hoped to add my CSS in modular files. Hope you don’t judge me too harshly for my lack of progress and I will continue to work on this project and commit to this git if you want to see my JS later on today, just ran out of time. <br><div><br></div></div></div></div></div>
<script></script>
</body>
</html>