Last To Do List

[Pomilui]

@ebeshero @quantum-satire @MarkTheShark01

Hey, all. I'll be starting these around 6:00 when I get back home tonight.

1: Use Javascript to highlight the control scenes and the power notes

2: Add a legend for the power notes (teal color). "This color shows notes about usage of powers".

3: Add another picture (box art?) to the index/home page.

4: Add some Neo-Tokyo pictures to the About Akira Page

5: Finish the description in the Analysis page.

6: Put GIFs in proper spots in Script Page.

Looking forward to tomorrow.   Please let me know if you can do any of these.  Thanks.

• Nick

[Pomilui]

@ebeshero @quantum-satire @MarkTheShark01

Hey, all. I'm still struggling with the Javascript. Do I wrap the Control Scenes in <span class="controlScene"> and call it later in the JS and CSS?

[helvitiis]

@Pomilui Hey Nick! Just sat down to get to coding again. I'm going to help you out as much as I can--for the JS, what do you have so far? I can take a look at it.

[Pomilui]

@quantum-satire

I couldn't get the JS, so I turned to adding GIFs in the Script. I'll go ahead and push the crazy changes I maed to "checkbox.js". I tried using buttons, but we can go back to check boxes. Simply highlighting all the spGrp tags and what's in them will be great.

[helvitiis]

@Pomilui I think you should keep the GIFs in for now and focus on the JS for highlighting the script. I'll link the JS I used for my project so you can use it as a base and an example

[helvitiis]

@Pomilui Here is the JavaScript we used. This is the HTML:

 <div class="toggle">
            <fieldset>
                <legend>Click to Highlight</legend>
                <input type="checkbox" id="persNameToggle" />
                <span class="persNameToggle">People</span>
                <input type="checkbox" id="locToggle" />
                <span class="locToggle">Location</span>
                <input type="checkbox" id="currentToggle" />
                <span class="currentToggle">Current</span>
                <input type="checkbox" id="dateToggle" />
                <span class="dateToggle">Date</span>
                <input type="checkbox" id="companyToggle" />
                <span class="companyToggle">Company</span>
                <input type="checkbox" id="eventToggle" />
                <span class="eventToggle">Event</span>
            </fieldset>
        </div>

And here is an example of the document we marked up using <span>: <p>Could <span class="persName">Christopher Columbus</span> have visited the <span class="event">Chicago Exposition</span>

[helvitiis]

@Pomilui So, we used <span> in our XML, then used the same class in the <fieldset> and the JavaScript. Hopefully this helps point you in the right direction?

[Pomilui]

@quantum-satire @ebeshero

Hey, Ally & Dr. B.
I'm trying to do this one last time, and I still can't get it. All of sections that I want to mark with <span class="controlToggle"> all stay the same toggle color when I put the new functions in the CSS.

Here's what I'm trying to do. in HTML `

        <div class="sp" id="soldier1_50"><span class="speaker">soldier1</span><p>
        <span class="controlToggle">This area is off limits!</span>

           </p>
        </div>`

IN CSS

/* for JS toggle file */ span.controlToggle.on{background-color:gray; color: #d8a244; font-weight: 800; }

span.controlToggle{ color: #d8a244; }

IN JS FILE

`window.addEventListener('DOMContentLoaded', init, false);

window.onload = init;

function init() { var fieldset = document.getElementsByTagName('input'); for (var i = 0; i < fieldset.length; i++) { fieldset[i].addEventListener('click', toggleInput, false); } }

function toggleInput() { var id = this.id; switch (id) { case "controlToggle": { var commas = document.getElementsByClassName("controlToggle"); for (var i = 0; i < commas.length; i++) { commas[i].classList.toggle("on") } }; break; case "powersToggle": { var periods = document.getElementsByClassName("power"); for (var i = 0; i < periods.length; i++) { periods[i].classList.toggle("on") } }; break; } }`

What the heck am I doing wrong? The duck has turned on me.

[helvitiis]

@Pomilui Hey Nick! I just closed my computer for the night, but glancing over your code I noticed this in your CSS: color:gray; color: #d8a244; You may be having trouble here. Try removing one of these lines so you only work with one color. I wonder if that will help you?

[helvitiis]

@Pomilui Nevermind, you have background-color and color, not two colors. Hmm...

[helvitiis]

@Pomilui Aha! You have the same color hex for toggle on and off in your CSS! Try changing span.controlToggle{ color: #d8a244; } To span.controlToggle{ color: green; } Or something, just to see if that fixes it!

[Pomilui]

@quantum-satire

checking...

No dice on the local file that I'm running. The color changed, but it won't toggle off / is always green.

[Pomilui]

@quantum-satire

Would it make any difference if I upload the Script.html to the newtfire server on FileZilla?

[helvitiis]

@Pomilui Hmm. It wouldn’t really matter if you pushed it to the server because JS runs locally and remotely just the same. I think I’ll need to pull it up on my laptop to troubleshoot this one, which means I’ll need to do it in the morning if that’s okay with you? I’ll be on my computer around 8 a.m.-ish... planning on finishing up Rick and Morty stuff too. Is there anything else you can work on until then? (Or you could call it a night!)

[Pomilui]

@quantum-satire This is the LAST thing that I wanted to do before I submitted it as it's a requirement ( I think ) for the project.

Thanks for burning some extra oil to help. Let's call it a night.

P.S. I'll push what I changed to Akira repo.

[helvitiis]

@Pomilui Sounds good! And fresh eyes works wonders for coding. Let’s hop back into this in a few hours! :)

[helvitiis]

@Pomilui Good morning! I'm getting back to coding and looking for your JS file in the websiteFiles folder. I notice you have your JS running from a different folder. Have you tried moving the JS to the same folder as the rest of your files? I actually got it to work by doing that :) I will move it for you and push the changes to your repo. Pull them in and see if they work for you too.

[helvitiis]

@Pomilui Pushed! The problem was that your JS was listed as this: <script type="text/javascript" src="checkBox.js">/**/</script> The SRC is looking for a file named checkBox.js in the SAME level as the current file. I moved the JS into the same folder and it's having no problems now!

[Pomilui]

@quantum-satire

Much obliged. I changed the colors in CSS to stick with the color schemes. Thanks for the help with the SVG as well. I just emailed Dr. B to submit it. Whew!