info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-08-27 00:25:53 +02:00
Code Issues Projects Releases Wiki Activity

folder names

Browse Source
This commit is contained in:
Jen Looper
2020-11-09 22:51:04 -05:00
parent 33e5d5f777
commit 1d81829ac1
367 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
5-browser-extension/solution/dist/background.js vendored Normal file
View File

@@ -0,0 +1,17 @@
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
return context.getImageData(50, 50, 100, 100);
}

BIN
5-browser-extension/solution/dist/images/plants-people.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

44
5-browser-extension/solution/dist/index.html vendored Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Carbon Trigger</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body class="container">
<img alt="plants and people" src="images/plants-people.png" />
<div>
<h1>Welcome to Your Personal Carbon Trigger!</h1>
</div>
<form class="form-data" autocomplete="on">
<div>
<h2>New? Add your Information</h2>
</div>
<div>
<label>Region Name</label>
<input type="text" required class="region-name" />
</div>
<div>
<label>Your API Key from tmrow</label>
<input type="text" required class="api-key" />
</div>
<button class="search-btn">Submit</button>
</form>
<div class="result">
<div class="loading">loading...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Region: </strong><span class="my-region"></span></p>
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Change region</button>
</div>
<script src="main.js"></script>
</body>
</html>

0
5-browser-extension/solution/dist/main.js vendored Normal file
View File

12
5-browser-extension/solution/dist/manifest.json vendored Normal file
View File

@@ -0,0 +1,12 @@
{
"manifest_version": 2,
"name": "My Carbon Trigger",
"version": "0.1.0",
"permissions": ["<all_urls>"],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_popup": "index.html"
}
}

143
5-browser-extension/solution/dist/styles.css vendored Normal file
View File

@@ -0,0 +1,143 @@
.container {
margin: 1.5em;
text-align: center;
}
.result {
margin-top: 1em;
}
.clear-btn {
text-align: center;
margin: 0 auto;
}
/*basic css*/
/* courtesy of: https://github.com/vladocar/Basic.css */
* {
box-sizing: border-box;
}
:root {
--sans: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
--mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
--c1: #0074d9;
--c2: #eee;
--c3: #fff;
--c4: #000;
--c5: #fff;
--m1: 8px;
--rc: 8px;
}
@media (prefers-color-scheme: dark) {
:root {
--c2: #333;
--c3: #1e1f20;
--c4: #fff;
}
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* General settings */
body {
margin: 0;
font: var(--sans);
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
background-color: var(--c3);
color: var(--c4);
min-width: 300px;
}
img,
iframe {
border: none;
max-width: 100%;
}
a {
color: var(--c1);
text-decoration: none;
}
a:hover {
color: var(--c1);
text-decoration: underline;
}
/* Headlines */
h1,
h2 {
margin: 0.6em 0;
font-weight: normal;
}
h1 {
font-size: 1.5em;
line-height: 1.2;
}
h2 {
font-size: 1.4em;
line-height: 1.2;
}
/* Rounded Corners*/
input,
button,
img {
border-radius: var(--rc);
margin: 5px;
}
/* Forms */
input,
select,
textarea {
font-size: 1em;
color: var(--c4);
background: var(--c2);
border: 0;
padding: 0.6em;
}
label {
font-weight: bold;
text-align: left;
}
button,
input[type='submit'],
input[type='reset'],
input[type='button'] {
-webkit-appearance: none;
font-size: 1em;
display: inline-block;
color: var(--c5);
background: var(--c1);
border: 0;
margin: 4px;
padding: 0.6em;
cursor: pointer;
text-align: center;
}
button:hover,
button:focus,
input:hover,
textarea:hover,
select:hover {
opacity: 0.8;
}