Skip to content

Update the Hello JS application based on the new specification #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 24, 2024
Merged

Update the Hello JS application based on the new specification #11

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
30c2a91
feature: Update the hello apps based on the new spec
louis-launchdarkly Mar 27, 2024
3a632ea
fix: code review comments
louis-launchdarkly Mar 27, 2024
f5220f2
fix: Update the display text to align with the spec
louis-launchdarkly Apr 23, 2024
5e06426
Update index.html
louis-launchdarkly Apr 23, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
body {
margin: 0;
background: #373841;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}

16 changes: 11 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<title>LaunchDarkly tutorial</title>
<script src="https://unpkg.com/launchdarkly-js-client-sdk@3"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<script>
Expand All @@ -14,9 +15,9 @@
const clientSideID = '';

// Set flagKey to the feature flag key you want to evaluate
const flagKey = 'my-boolean-flag';
const flagKey = 'sample-feature';

// Set up the context properties. This context should appear on your
// Set up the evaluation context. This context should appear on your
// LaunchDarkly contexts dashboard soon after you run the demo.
const context = {
kind: 'user',
Copy link
Contributor

@yusinto yusinto Apr 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For line 33 below, I have a suggestion:

div.replaceChild(document.createTextNode('Please edit index.html and set clientSideID to your LaunchDarkly client-side ID first. Please also set flagKey to your own flag key.'), div.firstChild);
Copy link
Contributor Author

@louis-launchdarkly louis-launchdarkly Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given we have the comment on line 17, line 32 doesn't check the flag key is the default sample-feature, and the README.md also asks people to set the flag key if they have any, so I think keeping the current message is fine.
Expand All @@ -37,15 +38,20 @@

function render() {
const flagValue = ldclient.variation(flagKey, false);
const label = 'Feature flag ' + flagKey + ' is ' + flagValue + ' for this context. ';
const label = 'The ' + flagKey + ' feature flag evaluates to ' + flagValue + '.';
if (flagValue) {
document.body.style.background = "#00844B";
} else {
document.body.style.background = "#373841";
}
div.replaceChild(document.createTextNode(label), div.firstChild);
}

ldclient.on('initialized', () => {
div.appendChild(document.createTextNode('SDK successfully initialized!'), div.firstChild);
div.replaceChild(document.createTextNode('SDK successfully initialized!'), div.firstChild);
});
ldclient.on('failed', () => {
div.appendChild(document.createTextNode('SDK failed to initialize'), div.firstChild);
div.replaceChild(document.createTextNode('SDK failed to initialize'), div.firstChild);
});
ldclient.on('ready', render);
ldclient.on('change', render);
Expand Down