Week 20

Project reviews

We’ll start again today with Project 4: Links check-ins, looking at your in-progress code. We’ll break up into new groups again: **

• Group 1: Amaya, Abhishek, Sarah, Sushanto

• Group 2: Bobby, Myriam, Dhruv, Jocelyn

• Group 3: Shanshan, Kendall, Ina, Vasu

• Group 4: Chi, Sanjana, Dayna, Keren

• Group 5: Shivi, Andre, Giselle, Sandra

• Group 6: Caroline, Tanvi, Fahila, Madhura

• Group 7: Azra, Kinjal, Hamza, Dusha

• Group 8: Vidushi, Lucine, Mariia

Use Slack’s huddles to share your screen. (We should be well into code now, not Figma.) You will again have about 40 minutes with just your group, and each group will have about 10 minutes with us.

Let’s shoot for getting through by around 10:15.

We’ll break here, when we have met with everyone.

Making it interactive

We’re going to pick up from our demo last week, using JS to enliven our interfaces.

First, we’ll fashion a lightbox/overlay:

• Update arena.js from the template repo—we added a callback function
• Talk very briefly about Git’s branches
• Add another, larger image to the image <template>
• Style it as an overlay with position: fixed;, then hide it in CSS
• We’ll write our JavaScript in main.js, inside the window.arenaCallback function
• Listen for clicks on images, with querySelectorAll and forEach
• Add a class on their <figure> with parentElement
• Use this class to show the other image
• Listen for clicks on the overlay image/background, removing the class

Then we’ll filter a mixed content list:

• Add list of buttons for the content types (and an “all”)
• With each button, set a className (instead of classList) on the list for its type
• Use these classes to show/hide the type’s <figure> elements in CSS

For next week

• You’ll be completing the last phase of your Links projects, Interactivity and refinement.

  Read through the previous phases carefully and make sure that you have met all the requirements. Again, we are expecting to see continued evolution of your work based on our ongoing feedback.

• When you are done, make sure we have the right link to your repo and live URL:

  Assignment submission

• Each student will add at least 10 items to their original channel, following on their theme. This should be done without coordinating with the channel’s adopted owner, and without looking at their project—you are just adding blocks, as you did to start.
   

• Prepare to present your project, next week. We will be splitting into two groups, using our other classroom downstairs:

  • Group 1, Room 1201:

    Amaya, Andre, Bobby, Giselle, Ina, Jocelyn, Keren, Kinjal, Sandra, Sarah, Shanshan, Sushanto, Tanvi, Vasu, Vidushi

  • Group 2, Room 1006:

    Abhishek, Azra, Caroline, Chi, Dayna, Dhruv, Dusha, Fahila, Hamza, Kendall, Lucine, Madhura, Mariia, Myriam, Sanjana, Shivi

  You will each have about 5 minutes to present your work. Introduce us to your channel and your interface concept, and then show us your final site. Be sure to demonstrate its responsiveness, interactivity, and states thoroughly. Explain your challenges and what you’d improve on with additional time or experience.

  Again, we are not requiring a deck here but your presentation is always part of the project. Practice beforehand. Be sure to use your full time.

  Each presentation will be followed by a few minutes of feedback and critique from your classmates and from us, as is custom.

• Last, we’d like you to start thinking about your next (and final) project, Functions—which will be entirely based on your own concept. We will share more details next week, and you will be submitting your concept the week after that. So we want you to “put the kettle on” now, so to speak.

Session recording

Session recording