Commit 7f644de9 authored by Sam Muirhead's avatar Sam Muirhead

populate search results with Noun Project icons

Currently the code will take an example array of results from a Noun Project API
'keyword search' and successfully populate the SVG with images, licenses and IDs.
It is not yet plugged into the actual API, and the code could be much DRYer.
parent a31d0589
......@@ -47,7 +47,7 @@ console.log(license1)
async function getData()
{
//await the response of the fetch call
let response = await fetch('https://gitlab.com/cameralibre/cut-copy-and-paste/raw/master/Print/Noun-Project-Illustrations/Print-from-API/api-response.json');
let response = await fetch('https://gitlab.com/cameralibre/cut-copy-and-paste/raw/master/Print/Noun-Project-Illustrations/Print-from-API/api-response');
//proceed once the first promise is resolved.
let data = await response.json()
//proceed only when the second promise is resolved
......
......@@ -35,7 +35,7 @@
<line id="horizontal-gridline" y1="0" x1="0" y2="0" x2="1123"/>
<clipPath id="thumbnail-clip">
<rect x="140" y="330" width="60" height="50" fill="red"/>
<rect x="140" y="330" width="60" height="55" fill="red"/>
</clipPath>
</defs>
......@@ -54,14 +54,14 @@
<use href="#image-0" x="0" y="50" width="270" height="270"
/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-0" x="18" y="360">5673</text>
<text id="id-0" x="18" y="360">5673</text>
<use id="license-0" href="#cc-by" width="50" x="210" y="338"/>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-0" id="thumbnail-0" transform="scale(0.25)" x="550" y="1310"/>
</g>
</svg>
<svg x="280.75" y="0" id="panel-1" width="280.75" height="397">
<svg id="panel-1" x="280.75" y="0" width="280.75" height="397">
<defs>
<image id="image-1" width="270" height="270"
href=""/>
......@@ -69,14 +69,14 @@
<use x="0" y="50" width="270" height="270"
href="#image-1"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-1" x="18" y="360">5673</text>
<text id="id-1" x="18" y="360">5673</text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-1" id="thumbnail-1" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-1" href="#cc-by" width="50" x="210" y="338"/>
</svg>
<svg x="562.5" y="0" id="panel-2" width="280.75" height="397">
<svg id="panel-2" x="562.5" y="0" width="280.75" height="397">
<defs>
<image id="image-2" width="270" height="270"
href=""/>
......@@ -84,14 +84,14 @@
<use x="0" y="50" width="270" height="270"
href="#image-2"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-2" x="18" y="360"></text>
<text id="id-2" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-2" id="thumbnail-2" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-2" href="" width="50" x="210" y="338"/>
</svg>
<svg x="842.25" y="0" id="panel-3" width="280.75" height="397">
<svg id="panel-3" x="842.25" y="0" width="280.75" height="397">
<defs>
<image id="image-3" width="270" height="270"
href=""/>
......@@ -99,14 +99,14 @@
<use x="0" y="50" width="270" height="270"
href="#image-3"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-3" x="18" y="360"></text>
<text id="id-3" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-3" id="thumbnail-3" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-3" href="" width="50" x="210" y="338"/>
</svg>
<svg x="0" y="397" id="panel-4" width="280.75" height="397">
<svg id="panel-4"x="0" y="397" width="280.75" height="397">
<defs>
<image id="image-4" width="270" height="270"
href=""/>
......@@ -114,14 +114,14 @@
<use x="0" y="50" width="270" height="270"
href="#image-4"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-4" x="18" y="360"></text>
<text id="id-4" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-4" id="thumbnail-4" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-4" href="" width="50" x="210" y="338"/>
</svg>
<svg x="280.75" y="397" id="panel-5" width="280.75" height="397">
<svg id="panel-5" x="280.75" y="397" width="280.75" height="397">
<defs>
<image id="image-5" width="270" height="270"
href=""/>
......@@ -129,14 +129,14 @@
<use x="0" y="50" width="270" height="270"
href="#image-5"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-5" x="18" y="360"></text>
<text id="id-5" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-5" id="thumbnail-5" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-5" href="" width="50" x="210" y="338"/>
</svg>
<svg x="562.5" y="397" id="panel-6" width="280.75" height="397">
<svg id="panel-6" x="562.5" y="397" width="280.75" height="397">
<defs>
<image id="image-6" width="270" height="270"
href=""/>
......@@ -144,14 +144,14 @@
<use x="0" y="50" width="270" height="270"
href="#image-6"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-6" x="18" y="360"></text>
<text id="id-6" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-6" id="thumbnail-6" transform="scale(0.25)" x="550" y="1310"/>
</g>
<use id="license-6" href="" width="50" x="210" y="338"/>
</svg>
<svg x="842.25" y="397" id="panel-7" width="280.75" height="397">
<svg id="panel-7" x="842.25" y="397" width="280.75" height="397">
<defs>
<image id="image-7" width="270" height="270"
href=""/>
......@@ -159,7 +159,7 @@
<use x="0" y="50" width="270" height="270"
href="#image-7"/>
<line stroke-width="2" x1="18" x2="261" y1="324" y2="324" />
<text id="number-7" x="18" y="360"></text>
<text id="id-7" x="18" y="360"></text>
<g clip-path="url(#thumbnail-clip)">
<use href="#image-7" id="thumbnail-4" transform="scale(0.25)" x="550" y="1310"/>
</g>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment