owendaigle / trmWebsite

0 stars 0 forks source link

localise the page #26

Open TheTechRobo opened 3 years ago

TheTechRobo commented 3 years ago

The site would still work without JS, but the localisation would not.

Everything in english would have <p lang="en">. French for example would have <p lang="fr">.

https://stackoverflow.com/a/46650031/9654083

(or you can make two separate pages but this is more fun :P)

owendaigle commented 3 years ago

I don't know if I really want to change my website to french at the moment, but maybe later I might do this

And realistically, I would probably just make 2 seperate pages (or root directories ex en= trm.ddns.net/en/... fr= trm.ddns.net/fr/...

owendaigle commented 3 years ago

and realistically, I would probably just make 2 seperate pages (or root directories ex en= trm.ddns.net/en/... fr= trm.ddns.net/fr/...

TheTechRobo commented 3 years ago

ok, sounds good.

TheTechRobo commented 3 years ago

I actually used the strategy I suggested with the work in progress NPA rewrite.

owendaigle commented 3 years ago

how do you change the language

TheTechRobo commented 3 years ago

JavaScript

TheTechRobo commented 3 years ago
<style>
.gradeATips {
        display: none
}
.gradeBTips {
        display: none;
}
.gradeCTips {
        display: none;
}
.gradeDTips {
        display: none;
}
.gradeFTips {
        display: none;
}
.gradeITips {
        display: none;
}
</style>
<div class="gradeATips" id="gradeATips">
        <p>You're doing amazing stuff, keep it up!!</p>
        <dl>
                <dt>No new tips.</dt>
        </dl>
</div>
<div class="gradeBTips" id="gradeBTips">
        <p>Nice, you've met the NPA specifications, but there's still room to improve.
        <dl>
        <dt>Have you tried...</dt>

and so on

here's the JS

        <script>
const queryString = window.location.search;
console.log("queryString will follow")
console.log(queryString);
const urlParams = new URLSearchParams(queryString);
const grade = urlParams.get('grade');
//https://www.sitepoint.com/get-url-parameters-with-javascript/ and the chrome console.
if (grade == "A") {
        //document.writeln("Great job, you're doing great!!!!!!!!!!!!!!!!!!!111");
        $('.gradeATips').css('display','inline');
        console.log("grade A");
}
else if (grade == "B") {
        console.log("grade B");
        $('.gradeBTips').css('display', 'inline');
}
else if (grade == "C") {
        //document.writeln("Uh oh! There's a lot of room to improve!");
        console.log("grade C");
        console.log("here ask whats wrong and stuff and add tips");
        $('.gradeCTips').css('display', 'inline');
} else if (grade == "D") {
//      document.writeln("Uh oh! There's a lot wrong with the NPA's current status!");
        console.log("grade D");
ETC

(requires JQuery and JavaScript, and CSS.)