sarabjits/chess-openings

Learning chess openings should not be too hard! Check out the most popular and some amusing openings.

Hi 👋, I'm Sarabjit Singh

A passionate developer from St. John's, NL

• 🔭 I’m currently working on Freelance projects

• 🌱 I’m currently learning React

• 📫 How to reach me [email protected]

Connect with me:

Languages and Tools:

chess-openings's Issues

Remove unused play button

Chess-Openings/index.html

Line 250 in 69c45a8

<i class="bi bi-play-circle-fill"></i>

Check out trainstop

https://trainstop.mitchellhynes.com/

Implement a layout

Install bootstrap to your HTML

https://getbootstrap.com/docs/3.4/css/#overview

Add `.accordion` to this div to override padding

Chess-Openings/index.html

Line 29 in 69c45a8

<div class="container">

Implement 1st move set

Here's a template to use for move sets

// In english: H7 goes to 0rem, 6.5rem (1 down)
const moveSet = [["h7", "0rem, 6.5rem"]];

// This should be parameterized based on what part of the set you're in
const square = document.querySelector(`.sq-${moveSet[0][0]} > img);
square.style = `transform: translate(${moveSet[0][1]})`;

Optional: Pretty CSS!

.sq img {
  transition: transform 0.25s ease
}

• Fill out the first moveset
• Fire movement JS code on the next button
• STRETCH GOAL: Have it advance in the array when you keep clicking that button

Remove extra `.board`

Chess-Openings/style.css

Line 13 in 6947ce0

.board {

Fix accordion so only one is open at a time

Add index.html

Validate HTML

https://www.freeformatter.com/html-validator.html

Remove `<div class="file">` around your divs

Before

#After

Test: Clicking one of the navigation buttons should move a pawn to the middle of the board

Add next/prev text to these buttons

Chess-Openings/index.html

Line 247 in 69c45a8

<i class="bi bi-arrow-left-circle-fill"></i>

Chess-Openings/index.html

Line 253 in 69c45a8

<i class="bi bi-arrow-right-circle-fill"></i>

Adjust `.board`

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
-  margin: 0;
-  padding: 0;
  justify-content: center;
+  margin: 1rem 0 0 0;
  padding: 0.5rem;
}

Get the main layout in CSS

Remove unused `id`s

Chess-Openings/index.html

Line 30 in 69c45a8

<div class="accordion accordion-flush" id="chess-openings">

Add yourself to this

https://github.com/ecumene/trainstop/blob/main/config.toml

After #6: Use `nth-child` to colour the background

• Don't actually do this, I'll send you the selector

MegaContainer should have two rows

Replace accordion with bootstrap

https://getbootstrap.com/docs/3.4/css/